/*
 * ararai theme — Executive Energy design system.
 *
 * Charcoal foundations, high-contrast typography and energetic orange,
 * yellow and red accents. The light mode keeps the same brand energy on a
 * restrained warm canvas.
 *
 * Rules of the house:
 *  - Logical properties only (inline/block) so RTL needs no separate file.
 *  - Colors only through semantic tokens; the dark theme swaps tokens.
 *  - Animations use transform/opacity only and respect prefers-reduced-motion.
 */

@layer tokens, base, layout, components, sections, utilities;

/* ============================================================= tokens */
@layer tokens {
	:root {
		color-scheme: light dark;

		/* light — warm canvas, near-black ink */
		--c-bg: #f5f4f0;
		--c-surface: #f7f7f5;
		--c-surface-2: #ebe9e3;
		--c-text: #191919;
		--c-text-muted: #646467;
		--c-heading: #191919;
		--c-border: #d8d5cd;
		--c-border-strong: #a7a7aa;

		/* Executive Energy brand spectrum */
		--c-accent: #ff5a1f;
		--c-accent-ink: #b93405;
		--c-accent-soft: rgb(255 90 31 / 0.16);
		--c-highlight: #ffd338;
		--c-power: #e63946;
		--c-danger: #e63946;
		--c-success: #9a6500;

		--c-btn-bg: #ff5a1f;
		--c-btn-fg: #111111;

		--shadow-s: 0 1px 2px rgb(17 17 17 / 0.08), 0 4px 12px rgb(17 17 17 / 0.07);
		--shadow: 0 2px 6px rgb(17 17 17 / 0.08), 0 14px 34px rgb(17 17 17 / 0.13);

		--c-terminal-bg: #111111;
		--c-terminal-text: #f7f7f5;
		--c-terminal-green: #ffd338;
		--c-terminal-red: #e63946;

		/* type */
		--font-body: "Manrope", system-ui, -apple-system, sans-serif;
		--font-mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;
		--step--1: 0.875rem;
		--step-0: 1rem;
		--step-1: 1.25rem;
		--step-2: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
		--step-3: clamp(1.7rem, 1.4rem + 1.6vw, 2.3rem);
		--step-4: clamp(2.1rem, 1.6rem + 2.6vw, 3.2rem);
		--step-5: clamp(2.6rem, 1.8rem + 4.2vw, 4.4rem);
		--step-6: clamp(3rem, 1.8rem + 6.5vw, 6rem); /* hero display */

		/* space */
		--space-1: 0.25rem;
		--space-2: 0.5rem;
		--space-3: 1rem;
		--space-4: 1.5rem;
		--space-5: 2.5rem;
		--space-6: 4rem;
		--space-7: clamp(3rem, 2rem + 3.5vw, 4.5rem);

		--radius-s: 10px;
		--radius: 16px;
		--radius-l: 24px;
		--transition: 160ms ease;
		--header-h: 4.25rem;
	}

	/* dark — the primary Executive Energy expression */
	html[data-theme="dark"] {
		--c-bg: #111111;
		--c-surface: #1b1b1d;
		--c-surface-2: #242426;
		--c-text: #f7f7f5;
		--c-text-muted: #a7a7aa;
		--c-heading: #f7f7f5;
		--c-border: #303034;
		--c-border-strong: #515155;

		--c-accent: #ff5a1f;
		--c-accent-ink: #ff865c;
		--c-accent-soft: rgb(255 90 31 / 0.2);
		--c-highlight: #ffd338;
		--c-power: #e63946;
		--c-danger: #ff6570;
		--c-success: #ffd338;

		--c-btn-bg: #ff5a1f;
		--c-btn-fg: #111111;

		--shadow-s: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.25);
		--shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.35);

		--c-terminal-bg: #1b1b1d;
		--c-terminal-text: #f7f7f5;
	}

	/* Persian gets Vazirmatn and no letter-spacing anywhere. Vazirmatn also
	   backs the mono stack so Persian digits (۰-۹, missing from JetBrains
	   Mono) render in the theme font instead of a system fallback. */
	html[lang^="fa"],
	html[dir="rtl"] {
		--font-body: "Vazirmatn", "Manrope", system-ui, sans-serif;
		--font-mono: "JetBrains Mono", "Vazirmatn", ui-monospace, monospace;
	}
}

/* ============================================================= base */
@layer base {
	@font-face {
		font-family: "Vazirmatn";
		src: url("../fonts/vazirmatn-variable.woff2") format("woff2-variations");
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "Manrope";
		src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
		font-weight: 100 900;
		font-style: normal;
		font-display: swap;
	}

	@font-face {
		font-family: "JetBrains Mono";
		src: url("../fonts/jetbrains-mono-variable.woff2") format("woff2-variations");
		font-weight: 100 800;
		font-style: normal;
		font-display: swap;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
		scroll-padding-block-start: calc(var(--header-h) + 1rem);
		overflow-x: clip;
	}

	@media (prefers-reduced-motion: reduce) {
		html {
			scroll-behavior: auto;
		}
	}

	body {
		margin: 0;
		background-color: var(--c-bg);
		color: var(--c-text);
		font-family: var(--font-body);
		font-size: var(--step-0);
		line-height: 1.7;
		-webkit-font-smoothing: antialiased;
		overflow-x: clip;
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--c-heading);
		line-height: 1.2;
		margin-block: 0 var(--space-3);
		text-wrap: balance;
		font-weight: 600;
	}

	p {
		margin-block: 0 var(--space-3);
	}

	a {
		color: var(--c-heading);
		text-decoration: none;
		text-underline-offset: 0.2em;
	}

	a:hover {
		text-decoration: underline;
	}

	.entry-content a,
	.timeline__org a {
		color: var(--c-accent-ink);
	}

	img {
		max-inline-size: 100%;
		block-size: auto;
		display: block;
	}

	:focus-visible {
		outline: 2px solid var(--c-accent);
		outline-offset: 3px;
		border-radius: 2px;
	}

	::selection {
		background: var(--c-heading);
		color: var(--c-bg);
	}

	code, kbd, pre, samp {
		font-family: var(--font-mono);
		font-size: 0.92em;
	}

	.font-mono {
		font-family: var(--font-mono);
	}

	html[lang^="fa"] .font-mono,
	html[dir="rtl"] .font-mono {
		letter-spacing: 0;
	}

	input, textarea, select, button {
		font: inherit;
		color: inherit;
	}
}

/* ============================================================= layout */
@layer layout {
	.container {
		inline-size: min(100% - 2.5rem, 71.25rem);
		margin-inline: auto;
	}

	.container--narrow {
		inline-size: min(100% - 2.5rem, 47.5rem);
	}

	.section {
		position: relative;
		padding-block: var(--space-7);
	}

	/* Section snapping is handled by snapAssist() in main.js: after the
	   scroll settles near a boundary, the page glides smoothly onto it. */

	.section__more {
		margin-block-start: var(--space-5);
	}

	.site-main {
		min-block-size: 60vh;
	}
}

/* ============================================================= components */
@layer components {

	/* ---- icons ---- */
	.icon {
		inline-size: 1.25em;
		block-size: 1.25em;
		flex-shrink: 0;
		vertical-align: -0.25em;
	}

	html[dir="rtl"] .icon--dir {
		scale: -1 1;
	}

	/* ---- buttons ---- */
	.btn {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		padding: 0.7em 1.6em;
		border-radius: 999px;
		border: 1px solid transparent;
		font-weight: 600;
		font-size: var(--step--1);
		line-height: 1.4;
		cursor: pointer;
		transition: background-color var(--transition), border-color var(--transition), color var(--transition), translate var(--transition), box-shadow var(--transition);
	}

	.btn:hover {
		text-decoration: none;
		translate: 0 -1px;
	}

	.btn--primary {
		background: var(--c-btn-bg);
		color: var(--c-btn-fg);
		border-color: var(--c-btn-bg);
		box-shadow: var(--shadow-s);
	}

	.btn--primary:hover {
		background: var(--c-power);
		border-color: var(--c-power);
		color: var(--c-terminal-text);
		box-shadow: var(--shadow);
	}

	.btn--ghost {
		border-color: var(--c-border-strong);
		color: var(--c-heading);
		background: var(--c-surface);
	}

	.btn--ghost:hover {
		border-color: var(--c-heading);
	}

	/* ---- arrow links ---- */
	.link-arrow {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		font-weight: 500;
		font-size: var(--step--1);
		color: var(--c-heading);
	}

	.link-arrow .icon {
		transition: translate var(--transition);
	}

	.link-arrow:hover {
		text-decoration: none;
		color: var(--c-accent-ink);
	}

	.link-arrow:hover .icon {
		translate: 4px 0;
	}

	html[dir="rtl"] .link-arrow:hover .icon {
		translate: -4px 0;
	}

	/* ---- terminal window (404 page) ---- */
	.terminal {
		background: var(--c-terminal-bg);
		color: var(--c-terminal-text);
		border-radius: var(--radius);
		border: 1px solid var(--c-border);
		overflow: hidden;
		font-family: var(--font-mono);
		font-size: var(--step--1);
		direction: ltr;
		text-align: start;
	}

	.terminal__bar {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.65rem 1rem;
		border-block-end: 1px solid var(--c-border);
	}

	.terminal__dot {
		inline-size: 0.72rem;
		block-size: 0.72rem;
		border-radius: 50%;
		background: var(--c-border-strong);
	}

	.terminal__title {
		margin-inline-start: auto;
		font-size: 0.72rem;
		color: var(--c-text-muted);
	}

	.terminal__body {
		padding: 1.1rem 1.25rem;
	}

	.terminal__line {
		margin: 0 0 0.45rem;
		white-space: pre-wrap;
		word-break: break-word;
	}

	.terminal__line--out { color: var(--c-terminal-green); }
	.terminal__line--err { color: var(--c-terminal-red); }

	.terminal__prompt {
		color: var(--c-text-muted);
		font-weight: 700;
	}

	.terminal__caret {
		display: inline-block;
		inline-size: 0.6em;
		block-size: 1.05em;
		background: var(--c-terminal-text);
		vertical-align: text-bottom;
	}

	@media (prefers-reduced-motion: no-preference) {
		.terminal__caret {
			animation: arr-blink 1.1s steps(1) infinite;
		}

		@keyframes arr-blink {
			50% { opacity: 0; }
		}
	}

	/* ---- section headings: mono index / title / hairline ---- */
	.section-heading {
		display: flex;
		align-items: baseline;
		gap: var(--space-3);
		font-size: var(--step-3);
		font-weight: 600;
		letter-spacing: -0.02em;
		margin-block-end: var(--space-5);
	}

	html[dir="rtl"] .section-heading {
		letter-spacing: 0;
	}

	.section-heading__num {
		font-family: var(--font-body);
		font-size: 0.8rem;
		font-weight: 400;
		color: var(--c-text-muted);
	}

	/* ---- tech badges ---- */
	.tech-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.tech-badge {
		display: inline-block;
		padding: 0.18em 0.7em;
		border-radius: 999px;
		border: 1px solid var(--c-border);
		background: var(--c-surface-2);
		color: var(--c-text);
		font-family: var(--font-body);
		font-size: 0.72rem;
		transition: border-color var(--transition), color var(--transition);
	}

	a.tech-badge:hover {
		text-decoration: none;
		border-color: var(--c-heading);
		color: var(--c-heading);
	}

	.tech-badge.is-active {
		background: var(--c-btn-bg);
		border-color: var(--c-btn-bg);
		color: var(--c-btn-fg);
	}

	/* ---- forms ---- */
	.contact-form__row {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: 0 var(--space-4);
	}

	.contact-form__field {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}

	.contact-form__field label {
		font-size: 0.8rem;
		font-weight: 500;
		color: var(--c-heading);
	}

	.contact-form input[type="text"],
	.contact-form input[type="email"],
	.contact-form textarea,
	.search-form__input {
		background: var(--c-bg);
		border: 1px solid var(--c-border-strong);
		border-radius: var(--radius-s);
		padding: 0.7em 0.9em;
		transition: border-color var(--transition), box-shadow var(--transition);
	}

	.contact-form input:focus,
	.contact-form textarea:focus,
	.search-form__input:focus {
		outline: none;
		border-color: var(--c-accent);
		box-shadow: 0 0 0 3px var(--c-accent-soft);
	}

	.contact-form textarea {
		resize: vertical;
		min-block-size: 8rem;
	}

	.contact-status__msg {
		padding: 0.8em 1.1em;
		border-radius: var(--radius-s);
		border: 1px solid;
		font-size: var(--step--1);
	}

	.contact-status__msg.is-success {
		color: var(--c-success);
		border-color: var(--c-success);
	}

	.contact-status__msg.is-error {
		color: var(--c-danger);
		border-color: var(--c-danger);
	}

	/* ---- search form ---- */
	.search-form__wrap {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		max-inline-size: 30rem;
	}

	.search-form__prompt {
		color: var(--c-text-muted);
		font-weight: 700;
	}

	.search-form__input {
		flex: 1;
	}

	/* ---- pagination ---- */
	.pagination .nav-links,
	.comments-pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		justify-content: center;
		margin-block-start: var(--space-5);
		font-family: var(--font-body);
		font-size: var(--step--1);
	}

	.pagination .page-numbers {
		display: inline-block;
		min-inline-size: 2.4em;
		padding: 0.45em 0.7em;
		text-align: center;
		border: 1px solid var(--c-border);
		border-radius: var(--radius-s);
		color: var(--c-text);
	}

	.pagination .page-numbers.current {
		background: var(--c-btn-bg);
		border-color: var(--c-btn-bg);
		color: var(--c-btn-fg);
	}

	.pagination a.page-numbers:hover {
		border-color: var(--c-heading);
		color: var(--c-heading);
		text-decoration: none;
	}

	/* ---- social links ---- */
	.social-links {
		display: flex;
		gap: 0.5rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.social-links__item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.6rem;
		block-size: 2.6rem;
		border-radius: var(--radius-s);
		border: 1px solid var(--c-border);
		color: var(--c-text-muted);
		transition: color var(--transition), border-color var(--transition);
	}

	.social-links__item:hover {
		color: var(--c-heading);
		border-color: var(--c-heading);
	}

	/* ---- language switcher (Polylang list) ---- */
	.lang-switcher__list {
		display: flex;
		gap: 0.15rem;
		list-style: none;
		margin: 0;
		padding: 0;
		font-family: var(--font-body);
		font-size: 0.72rem;
		text-transform: uppercase;
	}

	.lang-switcher__list a {
		display: inline-block;
		padding: 0.3em 0.6em;
		border-radius: var(--radius-s);
		color: var(--c-text-muted);
	}

	.lang-switcher__list a:hover {
		text-decoration: none;
		color: var(--c-heading);
	}

	.lang-switcher__list .current-lang a {
		color: var(--c-heading);
		text-decoration: underline;
		text-underline-offset: 0.3em;
	}

	/* ---- marquee strip ---- */
	.marquee {
		position: relative;
		overflow: hidden;
		padding-block: var(--space-3);
		direction: ltr;
		mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
		-webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
	}

	.marquee__track {
		display: flex;
		gap: 3rem;
		inline-size: max-content;
		padding-inline-end: 3rem;
	}

	.marquee__item {
		display: inline-flex;
		align-items: center;
		gap: 3rem;
		font-family: var(--font-body);
		font-size: var(--step--1);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--c-text-muted);
		white-space: nowrap;
	}

	.marquee__item::after {
		content: "/";
		color: var(--c-border-strong);
	}

	@media (prefers-reduced-motion: no-preference) {
		.marquee__track {
			animation: arr-marquee 40s linear infinite;
		}

		.marquee:hover .marquee__track {
			animation-play-state: paused;
		}

		@keyframes arr-marquee {
			to { translate: -50% 0; }
		}
	}
}

/* ============================================================= sections */
@layer sections {

	/* ---- scroll progress bar (scroll-driven, progressive enhancement) ---- */
	.scroll-progress {
		display: none;
	}

	@supports (animation-timeline: scroll()) {
		@media (prefers-reduced-motion: no-preference) {
			.scroll-progress {
				display: block;
				position: fixed;
				inset-block-start: 0;
				inset-inline: 0;
				block-size: 2px;
				z-index: 60;
				background: var(--c-accent);
				transform-origin: 0 50%;
				scale: 0 1;
				animation: arr-progress linear forwards;
				animation-timeline: scroll(root);
			}

			html[dir="rtl"] .scroll-progress {
				transform-origin: 100% 50%;
			}

			@keyframes arr-progress {
				to { scale: 1 1; }
			}
		}
	}

	/* ---- site header: brand | centered nav | actions ---- */
	.site-header {
		position: sticky;
		inset-block-start: 0;
		z-index: 50;
		background: var(--c-bg);
		border-block-end: 1px solid var(--c-border);
	}

	.site-header--static {
		position: relative;
	}

	/* Glass is deliberately restrained: subtle mode affects the navigation,
	   the active project tab and contact form. Medium additionally softens
	   content cards. Every surface still has an opaque color fallback. */
	body.arr-glass-subtle .site-header,
	body.arr-glass-medium .site-header {
		background: color-mix(in srgb, var(--c-bg) 76%, transparent);
		backdrop-filter: blur(16px) saturate(135%);
		-webkit-backdrop-filter: blur(16px) saturate(135%);
	}

	body.arr-glass-subtle .ptabs__tab.is-active,
	body.arr-glass-medium .ptabs__tab.is-active,
	body.arr-glass-subtle .contact-form-wrap,
	body.arr-glass-medium .contact-form-wrap {
		background: color-mix(in srgb, var(--c-surface) 78%, transparent);
		backdrop-filter: blur(14px) saturate(125%);
		-webkit-backdrop-filter: blur(14px) saturate(125%);
		border: 1px solid color-mix(in srgb, var(--c-border-strong) 55%, transparent);
		box-shadow: var(--shadow-s);
	}

	body.arr-glass-subtle .contact-form-wrap,
	body.arr-glass-medium .contact-form-wrap {
		padding: var(--space-4);
		border-radius: var(--radius-l);
	}

	body.arr-glass-medium .post-card,
	body.arr-glass-medium .project-card,
	body.arr-glass-medium .cert-frame,
	body.arr-glass-medium .skill-cup__glass {
		background: color-mix(in srgb, var(--c-surface) 72%, transparent);
		backdrop-filter: blur(12px) saturate(120%);
		-webkit-backdrop-filter: blur(12px) saturate(120%);
	}

	.site-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--space-3);
		block-size: var(--header-h);
	}

	.site-brand {
		justify-self: start;
	}

	.site-brand__link {
		font-family: var(--font-body);
		font-weight: 700;
		font-size: 1.05rem;
		color: var(--c-heading);
		display: inline-flex;
		align-items: center;
		gap: 0.55em;
	}

	.site-brand__link:hover {
		text-decoration: none;
	}

	/* small friendly face next to the name (uses the hero portrait) */
	.site-brand__face {
		inline-size: 2.1rem;
		block-size: 2.1rem;
		border-radius: 50%;
		object-fit: cover;
		border: 1px solid var(--c-border);
	}

	.custom-logo {
		max-block-size: 2.6rem;
		inline-size: auto;
	}

	/* centered nav: plain text links */
	.site-nav {
		justify-self: center;
	}

	.site-nav__list {
		display: flex;
		gap: var(--space-4);
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-nav__list a {
		color: var(--c-text);
		font-size: var(--step--1);
		transition: color var(--transition);
	}

	.site-nav__list a:hover {
		color: var(--c-accent-ink);
		text-decoration: none;
	}

	.header-actions {
		justify-self: end;
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	/* ---- theme toggle / nav toggle ---- */
	.theme-toggle,
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.6rem;
		block-size: 2.6rem;
		border: 1px solid var(--c-border);
		border-radius: var(--radius-s);
		background: transparent;
		color: var(--c-text);
		cursor: pointer;
		transition: border-color var(--transition), color var(--transition);
	}

	.theme-toggle:hover,
	.nav-toggle:hover {
		border-color: var(--c-accent);
		color: var(--c-accent-ink);
	}

	.theme-toggle__icon--moon { display: block; }
	.theme-toggle__icon--sun { display: none; }

	html[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
	html[data-theme="dark"] .theme-toggle__icon--sun { display: block; }

	.nav-toggle {
		display: none;
		flex-direction: column;
		gap: 0.35rem;
	}

	.nav-toggle__bar {
		display: block;
		inline-size: 1.15rem;
		block-size: 2px;
		border-radius: 2px;
		background: currentcolor;
		transition: rotate var(--transition), translate var(--transition);
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
		rotate: 45deg;
		translate: 0 0.23rem;
	}

	.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
		rotate: -45deg;
		translate: 0 -0.23rem;
	}

	@media (max-width: 52rem) {
		.site-header__inner {
			grid-template-columns: auto 1fr auto;
		}

		.nav-toggle {
			display: inline-flex;
		}

		.site-nav {
			position: fixed;
			inset-block-start: var(--header-h);
			inset-inline: 0;
			background: var(--c-bg);
			border-block-end: 1px solid var(--c-border);
			padding: var(--space-4) var(--space-4) var(--space-5);
			display: none;
		}

		.site-nav.is-open {
			display: block;
		}

		.site-nav__list {
			flex-direction: column;
			gap: var(--space-3);
		}

		.site-nav__list a {
			display: block;
			font-size: var(--step-1);
		}

		.lang-switcher {
			display: none;
		}
	}

	/* ---- hero: editorial, start-aligned, solid oversized type ---- */
	.hero {
		padding-block: var(--space-7) 0;
	}

	.hero__inner {
		padding-block-end: var(--space-7);
	}

	/* with a portrait set, the hero splits into text + photo columns */
	.hero__inner--split {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--space-6);
		align-items: center;
	}

	.hero__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	/* narrow screens: heading first, then the photo below it —
	   and no scroll-blur, the photo stays crisp */
	@media (max-width: 56rem) {
		.hero__inner--split {
			grid-template-columns: 1fr;
			gap: var(--space-5);
		}

		.hero__inner--split .hero__portrait {
			max-inline-size: min(70vw, 20rem);
			justify-self: start;
		}

		.hero__portrait .hero__portrait-img {
			filter: none;
			opacity: 1;
		}
	}

	.hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		font-family: var(--font-body);
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--c-text-muted);
		margin: 0;
	}

	html[dir="rtl"] .hero__eyebrow {
		letter-spacing: 0;
	}

	.hero__eyebrow::before {
		content: "";
		inline-size: 0.5em;
		block-size: 0.5em;
		border-radius: 50%;
		background: var(--c-highlight);
	}

	/* ---- hero portrait: a plain large photo, no frame — it simply blurs
	   and fades away as you scroll down (--hero-scroll set by JS 0→1) ---- */
	.hero__portrait {
		position: relative;
		margin: 0;
		inline-size: 100%;
		max-inline-size: 26rem;
		justify-self: center;
	}

	/* the photo keeps its own aspect ratio — never cropped: the box
	   shrinks to the image, so the shadow and corners hug the photo */
	.hero__portrait-img {
		display: block;
		inline-size: auto;
		max-inline-size: 100%;
		block-size: auto;
		max-block-size: min(70svh, 34rem);
		margin-inline: auto;
		border-radius: var(--radius-l);
		box-shadow: var(--shadow);
		filter: blur(calc(var(--hero-scroll, 0) * 14px));
		opacity: calc(1 - var(--hero-scroll, 0) * 0.55);
		will-change: filter, opacity;
	}

	.hero__heading {
		font-size: var(--step-6);
		font-weight: 700;
		letter-spacing: -0.04em;
		line-height: 1.02;
		margin: 0;
		color: var(--c-heading);
	}

	html[dir="rtl"] .hero__heading {
		letter-spacing: 0;
		line-height: 1.3;
	}

	/* dynamic line: same size as the intro below it — the two read like
	   consecutive lines of one paragraph */
	.hero__tagline {
		font-size: var(--step-0);
		font-weight: 400;
		line-height: 1.8;
		color: var(--c-text-muted);
		margin: 0;
		max-inline-size: 44rem;
	}

	.hero__subheading {
		max-inline-size: 38rem;
		color: var(--c-text);
		font-size: var(--step-0);
		line-height: 1.8;
		margin: 0;
	}

	/* pull the intro up to paragraph-line distance from the dynamic line */
	.hero__tagline + .hero__subheading {
		margin-block-start: calc(-1 * var(--space-4) + 0.35em);
	}

	.hero__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin-block-start: var(--space-2);
	}

	@media (prefers-reduced-motion: no-preference) {
		html.js .hero__content > * {
			animation: arr-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		}

		html.js .hero__content > *:nth-child(2) { animation-delay: 80ms; }
		html.js .hero__content > *:nth-child(3) { animation-delay: 160ms; }
		html.js .hero__content > *:nth-child(4) { animation-delay: 240ms; }
		html.js .hero__content > *:nth-child(5) { animation-delay: 320ms; }

		html.js .hero__portrait {
			animation: arr-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 150ms both;
		}

		@keyframes arr-rise {
			from {
				opacity: 0;
				translate: 0 24px;
			}
			to {
				opacity: 1;
				translate: 0 0;
			}
		}
	}

	/* ---- hero typer ---- */
	.hero__typer {
		color: var(--c-heading);
		font-weight: 600;
		white-space: nowrap;
	}

	.hero__typer-caret {
		display: inline-block;
		inline-size: 2px;
		block-size: 1.05em;
		background: var(--c-accent);
		vertical-align: -0.15em;
		margin-inline-start: 2px;
	}

	@media (prefers-reduced-motion: no-preference) {
		.hero__typer-caret {
			animation: arr-blink 1.1s steps(1) infinite;
		}
	}

	/* ---- quote band: high-energy charcoal manifesto strip ---- */
	.quote-band {
		background: #111111;
		color: #f7f7f5;
		padding-block: var(--space-7);
		margin-block: var(--space-6);
	}

	html[data-theme="dark"] .quote-band {
		background: var(--c-surface);
		color: var(--c-heading);
		border-block: 1px solid var(--c-border);
	}

	/* wide row + fluid type so the quote fits on one line whenever possible */
	.quote-band__inner {
		max-inline-size: none;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-3);
	}

	.quote-band__mark {
		font-size: 4rem;
		line-height: 0.5;
		opacity: 0.35;
		font-family: Georgia, serif;
		color: var(--c-highlight);
	}

	.quote-band__text {
		margin: 0;
		font-size: clamp(0.95rem, 0.5rem + 1.2vw, 1.3rem);
		font-weight: 700;
		line-height: 1.9;
		text-wrap: balance;
	}

	.quote-band__author {
		margin: 0;
		font-size: var(--step--1);
		color: var(--c-accent);
		opacity: 1;
	}

	/* ---- portfolio spotlight tabs: titles on one side, detail panel on
	   the other; auto-advances every 5s with a progress line per tab.
	   The whole section fills exactly one viewport. ---- */
	.section--portfolio {
		min-block-size: 100svh;
		display: grid;
		align-content: center;
		padding-block: calc(var(--header-h) + var(--space-4)) var(--space-5);
	}

	.section--portfolio .section-heading {
		margin-block-end: var(--space-5);
	}

	.section--portfolio .section__more {
		margin-block-start: var(--space-4);
	}

	.ptabs {
		display: grid;
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: var(--space-6);
		align-items: start;
	}

	.ptabs__list {
		display: flex;
		flex-direction: column;
	}

	.ptabs__tab {
		position: relative;
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: baseline;
		gap: var(--space-3);
		padding: var(--space-3);
		background: none;
		border: 0;
		border-radius: var(--radius-s);
		text-align: start;
		cursor: pointer;
		color: var(--c-text-muted);
		transition: color var(--transition), background-color var(--transition);
	}

	.ptabs__tab:hover {
		color: var(--c-heading);
	}

	.ptabs__tab.is-active {
		color: var(--c-heading);
		background: var(--c-surface);
	}

	.ptabs__tab-num {
		font-size: 0.72rem;
	}

	.ptabs__tab-title {
		font-size: var(--step-1);
		font-weight: 600;
		line-height: 1.25;
	}

	.ptabs__tab-year {
		font-size: 0.72rem;
	}

	/* per-tab countdown line (runs only while auto-advancing) */
	.ptabs__progress {
		position: absolute;
		inset-block-end: 0;
		inset-inline-start: var(--space-3);
		block-size: 1px;
		inline-size: calc(100% - 2 * var(--space-3));
		background: var(--c-accent);
		scale: 0 1;
		transform-origin: 0 50%;
	}

	html[dir="rtl"] .ptabs__progress {
		transform-origin: 100% 50%;
	}

	@media (prefers-reduced-motion: no-preference) {
		.ptabs__tab.is-timing .ptabs__progress {
			animation: arr-tab-progress 5s linear forwards;
		}

		@keyframes arr-tab-progress {
			to { scale: 1 1; }
		}
	}

	.ptabs__panels {
		position: relative;
	}

	.ptabs__panel {
		display: none;
	}

	.ptabs__panel.is-active {
		display: block;
	}

	@media (prefers-reduced-motion: no-preference) {
		.ptabs__panel.is-active {
			animation: arr-panel-in 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
		}

		@keyframes arr-panel-in {
			from {
				opacity: 0;
				translate: 0 16px;
			}
			to {
				opacity: 1;
				translate: 0 0;
			}
		}
	}

	/* frameless media: the image is shown whole, at its own aspect ratio,
	   only capped in height — never cropped, never boxed. Transparent
	   mockup PNGs float directly on the page background. */
	.ptabs__media {
		display: block;
		margin-block-end: var(--space-4);
		text-align: center;
	}

	/* the placeholder (no image at all) keeps a framed slot */
	.ptabs__media--empty {
		aspect-ratio: 16 / 9;
		max-block-size: 42svh;
		border-radius: var(--radius);
		overflow: hidden;
		border: 1px solid var(--c-border);
		background: var(--c-surface);
	}

	.ptabs__media img {
		display: inline-block;
		inline-size: auto;
		max-inline-size: 100%;
		block-size: auto;
		max-block-size: 46svh;
		border-radius: var(--radius);
		transition: scale 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.ptabs__media:hover img {
		scale: 1.03;
	}

	.ptabs__placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		block-size: 100%;
		color: var(--c-border-strong);
	}

	.ptabs__placeholder .icon {
		inline-size: 3rem;
		block-size: 3rem;
	}

	.ptabs__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-3);
	}

	.ptabs__excerpt {
		color: var(--c-text);
		font-size: var(--step-0);
		max-inline-size: 36rem;
		margin: 0;
	}

	.ptabs__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0.35em 0.75em;
		margin: 0;
		font-size: 0.78rem;
		color: var(--c-text-muted);
	}

	.ptabs__facts dt::after {
		content: ":";
	}

	.ptabs__facts dd {
		margin: 0;
		color: var(--c-heading);
	}

	/* internal "view project" on one side, external links pushed to the
	   other — clearly separated so the two destinations read apart */
	.ptabs__links {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--space-3);
		margin: 0;
	}

	.ptabs__external {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
	}

	.ptabs__ext {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.5rem;
		block-size: 2.5rem;
		border: 1px solid var(--c-border-strong);
		border-radius: 50%;
		color: var(--c-text-muted);
		transition: color var(--transition), border-color var(--transition);
	}

	.ptabs__ext:hover {
		color: var(--c-heading);
		border-color: var(--c-heading);
	}

	@media (max-width: 56rem) {
		.ptabs {
			grid-template-columns: 1fr;
			gap: var(--space-4);
		}

		.ptabs__list {
			flex-direction: row;
			overflow-x: auto;
		}

		.ptabs__tab {
			flex-shrink: 0;
			grid-template-columns: auto auto;
		}

		.ptabs__tab-year {
			display: none;
		}

		.ptabs__tab-title {
			font-size: var(--step--1);
		}

		.ptabs__progress {
			inset-block-start: auto;
			inset-block-end: 0;
		}
	}

	/* archive: uniform compact grid + instant filter */
	/* doubled class beats the base .project-grid rule declared later */
	.project-grid.project-grid--flat {
		grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
		gap: var(--space-4);
	}

	.project-grid--flat .project-card,
	.project-grid--flat .project-card:nth-child(6n + 1),
	.project-grid--flat .project-card:nth-child(6n + 4) {
		grid-column: auto;
	}

	.project-grid--flat .project-card__media,
	.project-grid--flat .project-card:nth-child(6n + 1) .project-card__media,
	.project-grid--flat .project-card:nth-child(6n + 4) .project-card__media {
		aspect-ratio: 16 / 10;
	}

	.project-card__facts {
		font-size: 0.72rem;
		color: var(--c-text-muted);
		margin: 0 0 0.2rem;
	}

	.project-card__facts:empty {
		display: none;
	}

	.project-card.is-filtered-out {
		display: none;
	}

	/* ---- project grid (archive pages) ---- */
	.project-grid {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: var(--space-3);
	}

	.project-card {
		grid-column: span 2;
		display: flex;
		flex-direction: column;
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-s);
		overflow: hidden;
		transition: border-color var(--transition), background-color var(--transition);
	}

	.project-card:nth-child(6n + 1),
	.project-card:nth-child(6n + 4) {
		grid-column: span 4;
	}

	@media (max-width: 60rem) {
		.project-grid {
			grid-template-columns: 1fr 1fr;
		}

		.project-card,
		.project-card:nth-child(6n + 1),
		.project-card:nth-child(6n + 4) {
			grid-column: span 2;
		}
	}

	.project-card:hover {
		border-color: var(--c-border-strong);
		background: var(--c-surface-2);
	}

	.project-card__media {
		display: block;
		aspect-ratio: 16 / 10;
		background: var(--c-surface-2);
		border-block-end: 1px solid var(--c-border);
		overflow: hidden;
	}

	.project-card:nth-child(6n + 1) .project-card__media,
	.project-card:nth-child(6n + 4) .project-card__media {
		aspect-ratio: 21 / 9;
	}

	/* whole preview, never cropped — mockups sit inside with breathing room */
	.project-card__img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: contain;
		padding: 6%;
		transition: scale 400ms ease;
	}

	.project-card:hover .project-card__img {
		scale: 1.03;
	}

	.project-card__placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		block-size: 100%;
		color: var(--c-border-strong);
	}

	.project-card__placeholder .icon {
		inline-size: 2.5rem;
		block-size: 2.5rem;
	}

	.project-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		padding: var(--space-4);
		flex: 1;
	}

	.project-card__header {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--space-2);
	}

	.project-card__title {
		font-size: var(--step-1);
		margin: 0;
	}

	.project-card__title a {
		color: var(--c-heading);
	}

	.project-card__title a:hover {
		text-decoration: underline;
	}

	.project-card__year {
		color: var(--c-text-muted);
		font-size: 0.78rem;
	}

	.project-card__excerpt {
		color: var(--c-text);
		font-size: var(--step--1);
		margin: 0;
	}

	.project-card__footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		margin-block-start: auto;
		padding-block-start: var(--space-2);
	}

	.project-card__links {
		display: inline-flex;
		gap: 0.5rem;
	}

	/* external destinations get a distinct circled treatment */
	.project-card__links a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.2rem;
		block-size: 2.2rem;
		border: 1px solid var(--c-border);
		border-radius: 50%;
		color: var(--c-text-muted);
		transition: color var(--transition), border-color var(--transition);
	}

	.project-card__links a:hover {
		color: var(--c-heading);
		border-color: var(--c-heading);
	}

	/* ---- tech filter ---- */
	.tech-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		margin-block-end: var(--space-5);
	}

	/* ---- timeline: full-screen curtain panels ----
	   Every entry is a full-viewport panel pinned at the top; the next entry
	   slides up and covers it while you scroll. */
	.section--timeline .section {
		padding-block-end: var(--space-5);
	}

	.tl-screen {
		position: sticky;
		inset-block-start: 0;
		min-block-size: 100svh;
		display: flex;
		align-items: center;
		background: var(--c-bg);
		overflow: clip;
	}

	.tl-screen:nth-child(even) {
		background: var(--c-surface);
	}

	.tl-screen__inner {
		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding-block: calc(var(--header-h) + var(--space-4)) var(--space-6);
	}

	.tl-screen__top {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-4);
		font-size: 0.78rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--c-text-muted);
	}

	html[dir="rtl"] .tl-screen__top {
		letter-spacing: 0;
	}

	.tl-screen__type {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
	}

	.tl-screen__range {
		margin-inline-start: auto;
	}

	.tl-screen__title {
		font-size: var(--step-5);
		letter-spacing: -0.03em;
		line-height: 1.05;
		margin: 0;
		max-inline-size: 56rem;
	}

	html[dir="rtl"] .tl-screen__title {
		letter-spacing: 0;
		line-height: 1.25;
	}

	.tl-screen__org {
		font-size: var(--step-1);
		color: var(--c-text-muted);
		margin: 0;
	}

	.tl-screen__desc {
		max-inline-size: 40rem;
		color: var(--c-text);
	}

	.tl-screen__desc > :last-child {
		margin-block-end: 0;
	}

	/* huge outlined index number as an editorial backdrop */
	.tl-screen__ghost {
		position: absolute;
		inset-block-end: 0;
		inset-inline-end: 0;
		font-size: clamp(8rem, 24vw, 22rem);
		font-weight: 700;
		line-height: 0.8;
		color: transparent;
		-webkit-text-stroke: 1px var(--c-border);
		z-index: -1;
		user-select: none;
	}

	/* ---- skills ---- */
	.skills-layout {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
		gap: var(--space-6);
		align-items: start;
	}

	/* liquid-fill skill "glasses": two rotating rounded blobs make the wave,
	   colored with the technology's brand color; water level = mastery */
	.skill-cups {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(7rem, 38vw), 1fr));
		gap: var(--space-3);
	}

	.skill-cup {
		--brand: var(--c-accent);
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
		text-align: center;
	}

	.skill-cup__glass {
		position: relative;
		inline-size: 100%;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		overflow: hidden;
		transition: border-color var(--transition);
	}

	.skill-cup:hover .skill-cup__glass {
		border-color: color-mix(in srgb, var(--brand) 55%, var(--c-border));
	}

	.skill-cup__icon {
		position: relative;
		z-index: 2;
		inline-size: 42%;
		block-size: 42%;
		color: var(--brand);
	}

	.skill-cup__wave {
		position: absolute;
		inset-inline-start: -60%;
		inline-size: 220%;
		aspect-ratio: 1;
		/* water surface sits at the mastery level */
		inset-block-start: calc(100% - var(--level, 60%));
		background: color-mix(in srgb, var(--brand) 32%, transparent);
		border-radius: 42%;
		z-index: 1;
	}

	.skill-cup__wave--back {
		background: color-mix(in srgb, var(--brand) 16%, transparent);
		border-radius: 46%;
	}

	@media (prefers-reduced-motion: no-preference) {
		.skill-cup__wave {
			animation: arr-wave 9s linear infinite;
		}

		.skill-cup__wave--back {
			animation-duration: 13s;
			animation-direction: reverse;
		}

		@keyframes arr-wave {
			to { rotate: 360deg; }
		}

		/* water rises when the tile scrolls into view */
		html.js .skill-cup__wave {
			transition: inset-block-start 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms;
		}

		html.js .skill-cup:not(.is-visible) .skill-cup__wave {
			inset-block-start: 110%;
		}
	}

	.skill-cup__name {
		font-size: 0.85rem;
		font-weight: 500;
		color: var(--c-heading);
	}

	.skill-cup__value {
		font-size: 0.72rem;
		color: var(--c-text-muted);
	}

	/* ---- certifications ---- */
	.subhead {
		font-family: var(--font-body);
		font-size: 0.78rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--c-text-muted);
		margin: var(--space-5) 0 var(--space-3);
	}

	html[dir="rtl"] .subhead {
		letter-spacing: 0;
	}

	/* certificates as framed gallery pieces: hairline frame, inner matting,
	   grayscale art that warms up and lifts softly on hover */
	.cert-wall {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
		gap: var(--space-4);
	}

	.cert-frame {
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow-s);
		padding: var(--space-3);
		z-index: var(--z, auto);
		transition: translate 350ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 350ms ease, box-shadow 350ms ease;
	}

	/* deck mode: cards start piled at the deck's top-center (offsets measured
	   by JS as --sx/--sy) and glide apart when the section scrolls into view */
	@media (prefers-reduced-motion: no-preference) {
		.cert-wall .cert-frame {
			transition:
				translate 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
				rotate 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms),
				border-color 350ms ease,
				box-shadow 350ms ease;
		}

		.cert-wall.is-stacked .cert-frame {
			position: relative;
			translate: var(--sx, 0) var(--sy, 0);
			rotate: var(--sr, 0deg);
			box-shadow: var(--shadow);
			transition-delay: 0ms;
		}
	}

	.cert-frame:hover {
		translate: 0 -8px;
		border-color: var(--c-border-strong);
		box-shadow: var(--shadow);
	}

	/* display-only: no clicks, no dragging, no zooming */
	.cert-frame__art {
		display: block;
		aspect-ratio: 3 / 2;
		overflow: hidden;
		border: 1px solid var(--c-border);
		border-radius: var(--radius-s);
		background: var(--c-surface-2);
		pointer-events: none;
		user-select: none;
		-webkit-user-select: none;
	}

	.cert-frame__art img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		filter: grayscale(1);
		transition: filter 700ms ease, scale 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.cert-frame:hover .cert-frame__art img {
		filter: grayscale(0);
		scale: 1.05;
	}

	.cert-frame__art--empty {
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--c-border-strong);
		transition: color 350ms ease;
	}

	.cert-frame:hover .cert-frame__art--empty {
		color: var(--c-text-muted);
	}

	.cert-frame__art--empty .icon {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}

	.cert-frame__caption {
		padding-block-start: var(--space-3);
		text-align: center;
	}

	/* small engraved rule above the caption */
	.cert-frame__caption::before {
		content: "";
		display: block;
		inline-size: 2rem;
		block-size: 1px;
		background: var(--c-border-strong);
		margin: 0 auto var(--space-2);
		transition: inline-size 350ms ease;
	}

	.cert-frame:hover .cert-frame__caption::before {
		inline-size: 3.5rem;
	}

	.cert-frame__title {
		font-size: var(--step-0);
		font-weight: 500;
		margin-block-end: 0.25rem;
	}

	.cert-frame__meta {
		font-size: 0.72rem;
		color: var(--c-text-muted);
		margin: 0;
	}

	/* the date sits on its own line under the issuer */
	.cert-frame__date {
		margin-block-start: 0.2rem;
		opacity: 0.85;
	}

	/* ---- blog cards / lists ---- */
	.post-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
		gap: var(--space-3);
	}

	.post-card,
	.post-entry {
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		padding: var(--space-4);
		box-shadow: var(--shadow-s);
		transition: border-color var(--transition), box-shadow var(--transition), translate var(--transition);
	}

	/* media cards on the front page: image on top, body below */
	.post-card {
		padding: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.post-card__media {
		display: block;
		aspect-ratio: 16 / 10;
		background: var(--c-surface-2);
		border-block-end: 1px solid var(--c-border);
		overflow: hidden;
	}

	.post-card__media img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		transition: scale 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.post-card:hover .post-card__media img {
		scale: 1.05;
	}

	.post-card__placeholder {
		display: flex;
		align-items: center;
		justify-content: center;
		block-size: 100%;
		font-size: var(--step-3);
		color: var(--c-border-strong);
	}

	.post-card__body {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
		padding: var(--space-4);
		flex: 1;
	}

	.post-card__body .link-arrow {
		margin-block-start: auto;
	}

	.post-card:hover,
	.post-entry:hover {
		border-color: var(--c-border-strong);
		box-shadow: var(--shadow);
		translate: 0 -3px;
	}

	.post-card__date,
	.post-entry__date {
		font-family: var(--font-body);
		color: var(--c-text-muted);
		font-size: 0.78rem;
		margin-block-end: var(--space-2);
	}

	.post-card__title,
	.post-entry__title {
		font-size: var(--step-1);
		margin-block-end: var(--space-2);
	}

	.post-card__title a,
	.post-entry__title a {
		color: var(--c-heading);
	}

	.post-card__title a:hover,
	.post-entry__title a:hover {
		text-decoration: underline;
	}

	.post-card__excerpt,
	.post-entry__excerpt {
		color: var(--c-text);
		font-size: var(--step--1);
	}

	.post-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	/* ---- page headers ---- */
	.page-header {
		margin-block-end: var(--space-5);
	}

	.page-header__title {
		font-size: var(--step-4);
		letter-spacing: -0.03em;
	}

	.page-header__sub {
		margin: var(--space-1) 0 0;
		color: var(--c-text-muted);
		font-size: var(--step--1);
	}

	html[dir="rtl"] .page-header__title {
		letter-spacing: 0;
	}

	.page-header__prompt {
		color: var(--c-text-muted);
		font-size: 0.6em;
		vertical-align: 0.25em;
	}

	.page-header__desc {
		color: var(--c-text-muted);
	}

	/* ---- single post / page ---- */
	.single-post__meta {
		font-family: var(--font-body);
		color: var(--c-text-muted);
		font-size: 0.82rem;
		margin-block-end: var(--space-2);
	}

	.single-post__meta a {
		color: var(--c-text-muted);
	}

	.single-post__title {
		font-size: var(--step-4);
		letter-spacing: -0.03em;
	}

	html[dir="rtl"] .single-post__title {
		letter-spacing: 0;
	}

	.single-post__thumb {
		margin: var(--space-5) 0;
		border-radius: var(--radius);
		overflow: hidden;
		border: 1px solid var(--c-border);
	}

	.entry-content {
		font-size: var(--step-0);
	}

	.entry-content h2 { font-size: var(--step-2); margin-block-start: var(--space-5); }
	.entry-content h3 { font-size: var(--step-1); margin-block-start: var(--space-4); }

	.entry-content a {
		text-decoration: underline;
	}

	.entry-content img {
		border-radius: var(--radius-s);
	}

	.entry-content blockquote {
		margin-inline: 0;
		padding-inline-start: var(--space-4);
		border-inline-start: 2px solid var(--c-heading);
		color: var(--c-text-muted);
	}

	.entry-content pre,
	.entry-content code {
		background: var(--c-terminal-bg);
		color: var(--c-terminal-text);
		border-radius: var(--radius-s);
		direction: ltr;
		text-align: start;
	}

	.entry-content code {
		padding: 0.15em 0.4em;
	}

	.entry-content pre {
		padding: var(--space-4);
		overflow-x: auto;
		border: 1px solid var(--c-border);
	}

	.entry-content pre code {
		padding: 0;
		background: none;
	}

	.single-post__tags {
		margin-block-start: var(--space-5);
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.single-post__tags a {
		font-family: var(--font-body);
		font-size: 0.75rem;
		color: var(--c-text-muted);
		border: 1px solid var(--c-border);
		border-radius: 999px;
		padding: 0.15em 0.7em;
	}

	.single-post__tags a::before {
		content: "#";
	}

	.single-post__tags a:hover {
		text-decoration: none;
		border-color: var(--c-heading);
		color: var(--c-heading);
	}

	/* ---- project single ---- */
	.project-single__header {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2);
	}

	.project-single__breadcrumb {
		font-family: var(--font-body);
		font-size: 0.82rem;
		color: var(--c-text-muted);
		margin-block-end: 0;
		display: flex;
		gap: 0.5em;
		align-items: center;
	}

	.project-single__breadcrumb a {
		color: var(--c-text-muted);
	}

	.project-single__breadcrumb a:hover {
		color: var(--c-heading);
	}

	.project-single__title {
		font-size: var(--step-5);
		letter-spacing: -0.03em;
		margin-block-end: var(--space-2);
	}

	html[dir="rtl"] .project-single__title {
		letter-spacing: 0;
	}

	/* intro text (from the editor), kept to a comfortable reading width */
	.project-single__content {
		max-inline-size: 46rem;
		margin-block-start: var(--space-4);
	}

	/* one tidy horizontal bar: facts on one side, action buttons on the other */
	.project-single__bar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3) var(--space-5);
		margin-block-start: var(--space-5);
		padding: var(--space-3) var(--space-4);
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
	}

	.project-single__facts {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2) var(--space-5);
		margin: 0;
	}

	.project-single__fact {
		display: flex;
		align-items: baseline;
		gap: 0.5em;
	}

	.project-single__fact dt {
		font-size: 0.78rem;
		color: var(--c-text-muted);
	}

	.project-single__fact dd {
		margin: 0;
		font-weight: 600;
		color: var(--c-heading);
	}


	.project-single__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
	}

	/* showcase: every image whole and uncropped, stacked with its caption */
	.project-single__gallery {
		display: flex;
		flex-direction: column;
		gap: var(--space-5);
		margin-block-start: var(--space-6);
	}

	.project-single__gallery-item {
		margin: 0;
		text-align: center;
	}

	.project-single__gallery-item img {
		display: inline-block;
		inline-size: auto;
		max-inline-size: 100%;
		block-size: auto;
		border-radius: var(--radius);
	}

	.project-single__caption {
		margin-block-start: var(--space-2);
		font-size: 0.85rem;
		color: var(--c-text-muted);
	}

	.project-single__nav {
		display: flex;
		justify-content: space-between;
		gap: var(--space-3);
		margin-block-start: var(--space-6);
		font-size: var(--step--1);
	}

	/* ---- gallery filmstrip (front page): accordion row — the hovered
	   frame widens while its neighbours give way; caption slides up ---- */
	.strip {
		display: flex;
		gap: var(--space-2);
		block-size: min(52svh, 30rem);
	}

	.strip__item {
		position: relative;
		flex: 1 1 0;
		min-inline-size: 0;
		padding: 0;
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		overflow: hidden;
		background: var(--c-surface);
		cursor: zoom-in;
		transition: flex-grow 550ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color var(--transition), box-shadow var(--transition);
	}

	.strip__item:hover,
	.strip__item:focus-visible {
		flex-grow: 2.6;
		border-color: var(--c-border-strong);
	}

	/* plain photos, edge to edge */
	.strip__item img {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		display: block;
	}

	.strip__overlay {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: 3;
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		padding: var(--space-4) var(--space-3) var(--space-3);
		background: linear-gradient(to top, rgb(0 0 0 / 0.82), transparent);
		color: #ededed;
		text-align: start;
		opacity: 0;
		translate: 0 10px;
		transition: opacity 300ms ease 120ms, translate 400ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms;
	}

	.strip__item:hover .strip__overlay,
	.strip__item:focus-visible .strip__overlay {
		opacity: 1;
		translate: 0 0;
	}

	.strip__title {
		font-weight: 600;
		font-size: var(--step-0);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.strip__caption {
		font-size: 0.78rem;
		color: rgb(237 237 237 / 0.75);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* video play badge */
	.strip__play {
		position: absolute;
		z-index: 3;
		inset-block-start: var(--space-3);
		inset-inline-end: var(--space-3);
		inline-size: 2.4rem;
		block-size: 2.4rem;
		border-radius: 50%;
		background: rgb(0 0 0 / 0.55);
		border: 1px solid rgb(255 255 255 / 0.35);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
	}

	.strip__play::before {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		translate: -40% -50%;
		border-block: 0.42rem solid transparent;
		border-inline-start: 0.68rem solid #ededed;
	}

	html[dir="rtl"] .strip__play::before {
		translate: 40% -50%;
		border-inline-start: 0;
		border-inline-end: 0.68rem solid #ededed;
	}

	/* touch / narrow screens: accordion becomes a 2-col grid, captions visible */
	@media (hover: none), (max-width: 48rem) {
		.strip {
			display: grid;
			grid-template-columns: 1fr 1fr;
			block-size: auto;
		}

		.strip__item {
			aspect-ratio: 4 / 3;
		}

		.strip__overlay {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* small tiles need smaller type or every title truncates */
	@media (max-width: 48rem) {
		.strip__overlay,
		.gallery-masonry__item .strip__overlay {
			gap: 0.1rem;
			padding: var(--space-3) var(--space-2) var(--space-2);
		}

		.strip__title {
			font-size: 0.82rem;
		}

		.strip__caption {
			font-size: 0.7rem;
		}

		.strip__play {
			inline-size: 2rem;
			block-size: 2rem;
		}
	}

	/* ---- gallery filters (archive) ---- */
	.gallery-filters {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		margin-block-end: var(--space-5);
	}

	.gallery-filters .tech-filter {
		margin-block-end: 0;
	}

	.gallery-masonry .is-filtered-out,
	.gallery-masonry__item.is-filtered-out {
		display: none;
	}

	/* archive tiles reuse the overlay/play pieces */
	.gallery-masonry__item {
		position: relative;
	}

	.gallery-masonry__item .strip__overlay {
		padding: var(--space-3) var(--space-2) var(--space-2);
	}

	@media (hover: hover) {
		.gallery-masonry__item .strip__overlay {
			opacity: 0;
		}

		.gallery-masonry__item:hover .strip__overlay,
		.gallery-masonry__item:focus-visible .strip__overlay {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* ---- gallery: compact uniform grid + lightbox (fits one viewport) ---- */
	.gallery-masonry {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-3);
	}

	@media (max-width: 48rem) {
		.gallery-masonry {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.gallery-masonry__item {
		display: block;
		inline-size: 100%;
		aspect-ratio: 4 / 3;
		padding: 0;
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		overflow: hidden;
		background: var(--c-surface);
		cursor: zoom-in;
		transition: border-color var(--transition);
	}

	.gallery-masonry__item:hover {
		border-color: var(--c-border-strong);
	}

	.gallery-masonry__item img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
		display: block;
		transition: scale 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.gallery-masonry__item:hover img {
		scale: 1.04;
	}

	.lightbox {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: none;
		align-items: center;
		justify-content: center;
		gap: var(--space-3);
		padding: var(--space-4);
		background: rgb(0 0 0 / 0.94);
	}

	.lightbox.is-open {
		display: flex;
	}

	@media (prefers-reduced-motion: no-preference) {
		.lightbox.is-open {
			animation: arr-fade-in 200ms ease;
		}

		@keyframes arr-fade-in {
			from { opacity: 0; }
			to { opacity: 1; }
		}
	}

	.lightbox__figure {
		margin: 0;
		max-inline-size: min(90vw, 70rem);
		text-align: center;
	}

	.lightbox__img {
		max-inline-size: 100%;
		max-block-size: 82svh;
		inline-size: auto;
		block-size: auto;
		margin-inline: auto;
		border-radius: var(--radius-s);
	}

	.lightbox__frame,
	.lightbox__video {
		inline-size: min(88vw, 64rem);
		aspect-ratio: 16 / 9;
		max-block-size: 80svh;
		border: 0;
		border-radius: var(--radius-s);
		background: #000;
		display: block;
	}

	.lightbox__caption {
		color: #a1a1a1;
		font-size: var(--step--1);
		padding-block-start: var(--space-2);
	}

	.lightbox__caption:empty {
		display: none;
	}

	.lightbox__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border-radius: 50%;
		border: 1px solid rgb(255 255 255 / 0.25);
		background: transparent;
		color: #ededed;
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
		flex-shrink: 0;
		transition: border-color var(--transition), background-color var(--transition);
	}

	.lightbox__btn:hover {
		border-color: #ededed;
		background: rgb(255 255 255 / 0.08);
	}

	.lightbox__close {
		position: absolute;
		inset-block-start: var(--space-4);
		inset-inline-end: var(--space-4);
	}

	/* the chevron buttons keep their physical meaning in RTL too */
	.lightbox__prev,
	.lightbox__next {
		direction: ltr;
	}

	@media (max-width: 48rem) {
		.lightbox__prev,
		.lightbox__next {
			position: absolute;
			inset-block-end: var(--space-4);
		}

		.lightbox__prev { inset-inline-start: var(--space-4); }
		.lightbox__next { inset-inline-end: var(--space-4); }
	}

	/* ---- contact: invitation side + minimal underline form ---- */
	.contact-split {
		display: grid;
		grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
		gap: var(--space-7);
		align-items: start;
	}

	@media (max-width: 56rem) {
		.contact-split {
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}
	}

	.contact-side {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	.contact-side__hook {
		font-size: var(--step-3);
		letter-spacing: -0.02em;
		line-height: 1.2;
		margin: 0;
		max-inline-size: 24ch;
	}

	html[dir="rtl"] .contact-side__hook {
		letter-spacing: 0;
	}

	.contact-side__intro {
		color: var(--c-text-muted);
		max-inline-size: 32rem;
		margin: 0;
	}

	/* the email is the hero of this section */
	.contact-side__email {
		/* fluid: never wider than a small phone screen, even for long addresses */
		font-size: clamp(1rem, 4.2vw, var(--step-2));
		overflow-wrap: anywhere;
		font-weight: 500;
		color: var(--c-heading);
		direction: ltr;
		unicode-bidi: isolate;
		border-block-end: 1px solid var(--c-border-strong);
		padding-block-end: 0.15em;
		transition: border-color var(--transition), color var(--transition);
	}

	.contact-side__email:hover {
		text-decoration: none;
		color: var(--c-accent-ink);
		border-color: var(--c-accent);
	}

	.contact-side__facts {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		font-size: var(--step--1);
		color: var(--c-text-muted);
	}

	.contact-side__facts li {
		display: flex;
		align-items: center;
		gap: 0.6em;
	}

	.contact-side__dot {
		inline-size: 0.55em;
		block-size: 0.55em;
		border-radius: 50%;
		background: var(--c-success);
	}

	@media (prefers-reduced-motion: no-preference) {
		.contact-side__dot {
			animation: arr-ping 2.4s ease-out infinite;
		}

		@keyframes arr-ping {
			0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-success) 45%, transparent); }
			50% { box-shadow: 0 0 0 6px transparent; }
		}
	}

	[data-local-time] {
		color: var(--c-heading);
	}

	/* underline-style form fields */
	.contact-form--lines input[type="text"],
	.contact-form--lines input[type="email"],
	.contact-form--lines textarea {
		background: transparent;
		border: 0;
		border-block-end: 1px solid var(--c-border-strong);
		border-radius: 0;
		padding-inline: 0;
		padding-block: 0.6em;
	}

	.contact-form--lines input:focus,
	.contact-form--lines textarea:focus {
		outline: none;
		box-shadow: none;
		border-block-end-color: var(--c-heading);
	}

	.contact-form--lines .contact-form__field {
		margin-block-end: var(--space-4);
	}

	.contact-form--lines .contact-form__field label {
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--c-text-muted);
	}

	html[dir="rtl"] .contact-form--lines .contact-form__field label {
		letter-spacing: 0;
	}

	.contact-intro {
		color: var(--c-text);
		max-inline-size: 36rem;
		margin-block-end: var(--space-4);
	}

	/* ---- comments ---- */
	.comments {
		margin-block-start: var(--space-6);
		padding-block-start: var(--space-5);
		border-block-start: 1px solid var(--c-border);
	}

	.comments__title {
		font-size: var(--step-2);
	}

	.comments__list {
		list-style: none;
		margin: 0 0 var(--space-5);
		padding: 0;
	}

	.comments__list .comment-body {
		background: var(--c-surface);
		border: 1px solid var(--c-border);
		border-radius: var(--radius);
		padding: var(--space-4);
		margin-block-end: var(--space-3);
	}

	.comments__list .children {
		list-style: none;
		padding-inline-start: var(--space-5);
	}

	.comments__list .comment-meta {
		display: flex;
		align-items: center;
		gap: var(--space-2);
		margin-block-end: var(--space-2);
		font-size: var(--step--1);
	}

	.comments__list .avatar {
		border-radius: 50%;
	}

	.comment-form label {
		display: block;
		font-size: 0.8rem;
		font-weight: 500;
		color: var(--c-heading);
		margin-block-end: 0.3rem;
	}

	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"],
	.comment-form textarea {
		inline-size: 100%;
		background: var(--c-bg);
		border: 1px solid var(--c-border-strong);
		border-radius: var(--radius-s);
		padding: 0.6em 0.8em;
		margin-block-end: var(--space-3);
	}

	.comment-form input:focus,
	.comment-form textarea:focus {
		outline: none;
		border-color: var(--c-accent);
		box-shadow: 0 0 0 3px var(--c-accent-soft);
	}

	.comment-form .submit {
		background: var(--c-btn-bg);
		color: var(--c-btn-fg);
		border: 1px solid var(--c-btn-bg);
		border-radius: var(--radius-s);
		padding: 0.65em 1.4em;
		font-weight: 500;
		cursor: pointer;
	}

	/* ---- 404 ---- */
	.error-404 .terminal {
		max-inline-size: 34rem;
		margin-block-end: var(--space-5);
	}

	.error-404__title {
		font-size: var(--step-3);
	}

	/* ---- footer ---- */
	.site-footer {
		padding-block: var(--space-6);
		margin-block-start: var(--space-6);
	}

	.site-footer__inner {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		text-align: center;
	}

	.site-footer__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-3);
		list-style: none;
		margin: 0;
		padding: 0;
		font-size: var(--step--1);
	}

	.site-footer__list a {
		color: var(--c-text-muted);
	}

	.site-footer__list a:hover {
		color: var(--c-heading);
	}

	.site-footer__text {
		color: var(--c-text-muted);
		font-size: 0.82rem;
		margin: 0;
	}

	/* ---- no results ---- */
	.no-results__code {
		color: var(--c-text-muted);
	}

	.no-results__err {
		color: var(--c-danger);
	}
}

/* ============================================================= utilities */
@layer utilities {
	.screen-reader-text {
		clip-path: inset(50%);
		block-size: 1px;
		inline-size: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		word-wrap: normal;
	}

	.screen-reader-text:focus {
		clip-path: none;
		block-size: auto;
		inline-size: auto;
		background: var(--c-surface);
		color: var(--c-heading);
		display: block;
		font-size: var(--step--1);
		font-weight: 700;
		inset-block-start: var(--space-2);
		inset-inline-start: var(--space-2);
		padding: var(--space-2) var(--space-3);
		z-index: 100;
		border-radius: var(--radius-s);
		border: 1px solid var(--c-border-strong);
	}

	.skip-link {
		z-index: 101;
	}

	/* Honeypot: visually removed, still in the accessibility tree of bots. */
	.hp-field {
		position: absolute !important;
		inset-inline-start: -9999px !important;
		inline-size: 1px;
		block-size: 1px;
		overflow: hidden;
	}

	/* Scroll-reveal: hidden only when JS is present AND motion is allowed,
	   so content is never invisible without JS. */
	@media (prefers-reduced-motion: no-preference) {
		html.js [data-reveal] {
			opacity: 0;
			translate: 0 24px;
			transition: opacity 600ms ease, translate 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
			/* per-item stagger, set inline as --d */
			transition-delay: var(--d, 0ms);
		}

		html.js [data-reveal].is-visible {
			opacity: 1;
			translate: 0 0;
		}
	}

	/* WordPress core alignment/caption classes. */
	.alignwide {
		margin-inline: calc(-1 * var(--space-5));
		max-inline-size: none;
	}

	.alignfull {
		margin-inline: calc(50% - 50vw);
		max-inline-size: 100vw;
	}

	.aligncenter {
		margin-inline: auto;
	}

	.wp-caption {
		max-inline-size: 100%;
	}

	.wp-caption-text {
		font-size: 0.82rem;
		color: var(--c-text-muted);
		text-align: center;
		padding-block: var(--space-2);
	}

	.sticky {
		border-inline-start: 3px solid var(--c-heading);
	}

	.bypostauthor {
		position: relative;
	}
}