/* ==========================================================================
   Yukesh — design system
   Dark editorial theme · Fira Sans Condensed / Inter / Bebas Neue
   Desktop: fixed left sidebar (menu always visible) — like Salient "left-header".
   Mobile (<1000px): top bar + slide-out drawer.
   ========================================================================== */

:root {
	--bg: #0b0b0b;
	--bg-soft: #101010;
	--bg-card: #161616;
	--ink: #ffffff;
	--copy: rgba(255, 255, 255, 0.88);
	--muted: rgba(255, 255, 255, 0.62);
	--muted-2: rgba(255, 255, 255, 0.38);
	--line: #23212147;
	--sep: #23212147;
	--green: #11a222;
	--accent: #11a222;
	--accent-rgb: 17, 162, 34;
	--font-head: 'Fira Sans Condensed', 'Arial Narrow', sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
	--sidebar-w: 275px;
	--header-h: 64px;
	--radius: 6px;
	/* Theme surfaces (dark = today's look) */
	--bg-sidebar: #0f0f0f;
	--bg-panel: #000000;
	--bg-mobile-header: #000000;
	--search-bg: #000000;
	--footer-bg: #060606;
	--footer-bar-bg: #000000;
	--soft-wash: rgba(255, 255, 255, 0.06);
	--soft-wash-2: rgba(255, 255, 255, 0.04);
	--soft-line: rgba(255, 255, 255, 0.22);
	--hero-scroll-ink: rgba(255, 255, 255, 0.9);
}

/* ---------- Day (light) theme ---------- */

:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f5f5f2;
	--bg-soft: #ececea;
	--bg-card: #ffffff;
	--ink: #141414;
	--copy: rgba(20, 20, 20, 0.85);
	--muted: rgba(20, 20, 20, 0.66);
	--muted-2: rgba(20, 20, 20, 0.42);
	--line: rgba(20, 20, 20, 0.16);
	--sep: rgba(20, 20, 20, 0.16);
	--bg-sidebar: #ffffff;
	--bg-panel: #ffffff;
	--bg-mobile-header: rgba(255, 255, 255, 0.92);
	--search-bg: #ffffff;
	--footer-bg: #f0f0ee;
	--footer-bar-bg: #f0f0ee;
	--soft-wash: rgba(20, 20, 20, 0.07);
	--soft-wash-2: rgba(20, 20, 20, 0.04);
	--soft-line: rgba(20, 20, 20, 0.18);
	--hero-scroll-ink: rgba(255, 255, 255, 0.9);
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* ---------- Reset / base ---------- */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

hr {
	border: 0;
	border-top: 1px solid var(--sep);
	margin: 2em 0;
}

a {
	color: var(--ink);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--accent);
}

button {
	font-family: inherit;
	cursor: pointer;
}

::selection {
	background: var(--accent);
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.yukesh-green {
	color: var(--accent);
}

.yukesh-container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 clamp(24px, 4vw, 80px);
}

/* Theme-wide: content stays scrollable but scrollbars are hidden */

html {
	scrollbar-width: none;
}

* {
	scrollbar-width: none;
}

*::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
	background: transparent;
}

/* Desktop layout: content sits to the right of the fixed sidebar. */

@media (min-width: 1000px) {
	body {
		padding-left: var(--sidebar-w);
	}

	.yukesh-offcanvas,
	.yukesh-overlay,
	.yukesh-mobile-actions {
		display: none;
	}
}

/* ---------- Header: fixed left sidebar (desktop) ---------- */

.yukesh-header {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sidebar-w);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	background: var(--bg-sidebar);
	box-shadow: none;
}

.yukesh-header-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 26px 28px 24px;
}

/* Brand (top) */

.yukesh-brand {
	flex: 0 0 auto;
}

.yukesh-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.yukesh-logo {
	height: 84px;
	width: auto;
	max-width: 220px;
}

/* Brand logo is mode-aware: the white signature shows on dark, the
   dark-colored one on day. Until a day-mode logo is uploaded, the shipped
   white signature is auto-inverted so it stays visible on light surfaces. */
.yukesh-logo--light {
	display: none;
}

:root[data-theme="light"] .yukesh-logo--dark {
	display: none;
}

:root[data-theme="light"] .yukesh-logo--light {
	display: block;
}

:root[data-theme="light"] .yukesh-logo--auto {
	filter: invert(1);
}

/* Nav + search sit as one group, vertically centered in the middle of the
   sidebar / drawer: the auto top margin pushes the group down into the free
   space between the brand and the bottom-pinned socials (the socials' own
   auto margin shares that space 50/50). */

.yukesh-nav {
	flex: 0 1 auto;
	display: flex;
	min-height: 0;
	margin-top: auto;
	padding: 16px 0 18px;
	overflow-y: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.yukesh-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.yukesh-menu li {
	margin: 0;
}

.yukesh-menu a {
	position: relative;
	display: inline-block;
	padding: 8px 0;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-transform: capitalize;
	transition: color 0.2s ease;
}

/* No underline on nav links — hover colors the link accent only */
.yukesh-menu a:hover {
	color: var(--accent);
}

.yukesh-menu .is-active > a {
	color: var(--accent);
}

/* Sub-menus: collapsed by default — clicking a parent item expands it */

.yukesh-menu > li.has-children > a {
	cursor: pointer;
}

.yukesh-submenu {
	display: none;
	list-style: none;
	margin: 0 0 12px;
	padding: 0 0 0 18px;
	border-left: 1px solid var(--sep);
}

.has-children.is-open > .yukesh-submenu {
	display: block;
}

.yukesh-submenu a {
	padding: 4px 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--muted);
}

.yukesh-submenu a::after {
	display: none;
}

.yukesh-submenu a:hover {
	color: var(--accent);
}

.yukesh-header-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	flex: 0 0 auto;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.yukesh-header-btn .yukesh-icon {
	width: 15px;
	height: 15px;
}

.yukesh-header-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--soft-wash-2);
}

/* Sidebar search — plain icon (no chip/border), sits right under the nav items, left-aligned */
.yukesh-sidebar-search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	align-self: flex-start;
	padding: 0;
	margin-top: 2px;
	border: 0;
	background: transparent;
	color: var(--muted);
	transition: color 0.2s ease;
}

.yukesh-sidebar-search .yukesh-icon {
	width: 26px;
	height: 26px;
}

.yukesh-sidebar-search:hover {
	color: var(--accent);
	background: transparent;
	border-color: transparent;
}

.yukesh-icon {
	display: block;
}

.yukesh-mobile-actions {
	display: none;
}

.yukesh-socials {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.yukesh-sidebar-socials {
	justify-content: flex-start;
	gap: 6px;
}

.yukesh-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-size: 0;
	color: var(--muted);
	transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.yukesh-socials a svg {
	width: 11px;
	height: 11px;
}

.yukesh-socials a:hover {
	color: var(--accent);
	border-color: var(--accent);
	transform: translateY(-1px);
}

/* Sidebar socials — plain larger icons, whiter, spread evenly across the width, pinned to the bottom */
.yukesh-sidebar-socials {
	justify-content: space-between;
	width: 100%;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--sep);
}

.yukesh-sidebar-socials a {
	min-width: 30px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ink);
}

.yukesh-sidebar-socials a svg {
	width: 26px;
	height: 26px;
}

.yukesh-sidebar-socials a:hover {
	color: var(--accent);
	border-color: transparent;
	transform: translateY(-1px);
}

/* ---------- Off-canvas drawer (mobile only) ---------- */

.yukesh-overlay {
	position: fixed;
	inset: 0;
	z-index: 1090;
	background: rgba(0, 0, 0, 0.62);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
}

.yukesh-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

/* Mobile drawer mirrors the desktop left sidebar (logo / nav / search / socials) */

.yukesh-offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 1100;
	width: min(460px, 94vw);
	background: var(--bg-panel);
	box-shadow: 18px 0 50px rgba(0, 0, 0, 0.65);
	transform: translateX(-102%);
	transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
	display: flex;
	flex-direction: column;
}

.yukesh-offcanvas.is-open {
	transform: translateX(0);
}

.yukesh-offcanvas-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 22px 30px 26px;
	overflow-y: auto;
}

/* Drawer head: big logo centered on top, close button pinned to the right */
.yukesh-offcanvas-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex: 0 0 auto;
	padding: 0 48px;
}

.yukesh-offcanvas-top .yukesh-logo {
	height: 96px;
	max-width: 240px;
}

.yukesh-close-btn {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
}

/* Nav inside the drawer mirrors the sidebar: logo row → menu → search → socials at bottom */

.yukesh-offcanvas .yukesh-nav {
	padding: 22px 0 16px;
}

.yukesh-offcanvas .yukesh-nav .yukesh-menu a {
	padding: 7px 0;
}

/* ---------- Search overlay ---------- */

.yukesh-search {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: var(--search-bg);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: min(110px, 16vh) 24px 48px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Popular-articles suggestions under the search field */

.yukesh-search-suggest {
	width: 100%;
	max-width: 720px;
	margin: 36px auto 0;
	text-align: left;
}

.yukesh-search-suggest-label {
	margin: 0 0 4px;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.yukesh-search-suggest ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yukesh-search-suggest a {
	display: block;
	padding: 12px 0;
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ink);
	border-bottom: 1px solid var(--line);
	transition: color 0.2s ease;
}

.yukesh-search-suggest a:hover {
	color: var(--accent);
}

.yukesh-search.is-open {
	opacity: 1;
	visibility: visible;
}

.yukesh-search-close {
	position: absolute;
	top: 26px;
	right: 26px;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--ink);
}

.yukesh-search-close:hover {
	color: var(--accent);
}

.yukesh-search-form {
	width: 100%;
	max-width: 720px;
	display: flex;
	align-items: flex-end;
	gap: 18px;
	border-bottom: 2px solid var(--line);
	padding-bottom: 14px;
}

.yukesh-search-form:focus-within {
	border-bottom-color: var(--accent);
}

/* Keep the SEARCH action clear of the right screen edge on narrow screens */
@media (max-width: 999px) {
	.yukesh-search-form {
		gap: 14px;
		padding-right: 10px;
	}
}

.yukesh-search-input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--ink);
	font-family: var(--font-head);
	font-size: clamp(28px, 5vw, 52px);
	font-weight: 700;
}

.yukesh-search-input::placeholder {
	color: var(--muted-2);
}

.yukesh-search-submit {
	background: transparent;
	border: none;
	color: var(--accent);
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

/* Author archive: posts centered with proper left/right margins */

.yukesh-author-main .yukesh-archive-list {
	max-width: 900px;
	margin: 0 auto;
}

/* Search results — web-result style rows, centered column */

.yukesh-search-results {
	max-width: 900px;
	margin: 0 auto;
	padding-bottom: 110px;
}

.yukesh-search-result {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
	padding: 38px 0;
	border-top: 1px solid var(--line);
}

.yukesh-search-result:first-of-type {
	border-top: 0;
}

.yukesh-search-result-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--bg-card);
}

.yukesh-search-result-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.yukesh-search-result:hover .yukesh-search-result-media img {
	transform: scale(1.04);
}

.yukesh-search-result-title {
	margin: 0 0 10px;
	font-family: var(--font-head);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.2;
}

.yukesh-search-result-title a:hover {
	color: var(--accent);
}

.yukesh-search-result-excerpt {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--muted);
}

.yukesh-search-result-excerpt p {
	margin: 0;
}

/* Infinite-scroll load status (search results) */

.yukesh-load-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 44px 0 10px;
	color: var(--muted-2);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0;
	min-height: 1px;
}

.yukesh-load-status.is-loading {
	opacity: 1;
}

.yukesh-load-spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--line);
	border-top-color: var(--accent);
	animation: yukesh-spin 0.7s linear infinite;
}

@keyframes yukesh-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 639px) {
	.yukesh-search-result {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 30px 0;
	}

	.yukesh-search-suggest a {
		font-size: 18px;
	}
}

/* ---------- Hero (homepage) ---------- */

.yukesh-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	background-color: var(--bg);
}

/* Parallax background layer (JS translates it on scroll) — the inner zoom
   layer carries the image and does Salient's slow settle animation. */
.yukesh-hero-bg {
	position: absolute;
	left: 0;
	right: 0;
	top: -15%;
	bottom: -15%;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.yukesh-hero-bg-zoom {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	will-change: transform;
	/* Salient's page-header settle: starts zoomed, eases to normal. */
	animation: yukesh-hero-zoom 2.5s cubic-bezier(0.1, 0.2, 0.7, 1) both;
}

@keyframes yukesh-hero-zoom {
	0% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

/* Focus-light overlay — a radial spotlight keeps the middle of the photo
   (the subject) at full brightness while the edges fall off to dark, so the
   title and scroll arrow keep their contrast (like the live Salient hero). */
.yukesh-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 62% 55% at 50% 44%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 34%, rgba(0, 0, 0, 0.2) 58%, rgba(0, 0, 0, 0.44) 80%, rgba(0, 0, 0, 0.7) 100%),
		linear-gradient(100deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.34) 28%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.02) 68%, rgba(0, 0, 0, 0) 100%),
		linear-gradient(to top, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.18) 34%, rgba(0, 0, 0, 0) 62%);
}

.yukesh-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	column-gap: clamp(10px, 2.5vw, 46px);
	row-gap: 8px;
	padding: 0 clamp(20px, 4vw, 64px) clamp(34px, 5vh, 70px);
}

.yukesh-hero-title {
	margin: 0;
	color: #fff;
	font-family: var(--font-head);
	font-size: min(108px, 5vw);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
}

.yukesh-hero-sub {
	margin: 0 0 4px;
	color: #fff;
	font-family: var(--font-head);
	font-size: min(22px, max(16px, 1.5vw));
	font-weight: 600;
	line-height: 1.5;
}

.yukesh-hero-title + .yukesh-hero-sub {
	margin-left: clamp(24px, 3.5vw, 80px);
}

.yukesh-hero-scroll {
	position: absolute;
	right: clamp(20px, 4vw, 64px);
	bottom: clamp(30px, 6vh, 64px);
	z-index: 2;
	color: var(--hero-scroll-ink);
	opacity: 0.85;
	animation: yukesh-bounce 2.2s ease-in-out infinite;
}

.yukesh-hero-scroll:hover {
	color: var(--accent);
	opacity: 1;
}

@keyframes yukesh-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(9px); }
}

/* ---------- Page hero (pages with a first-heading hero, like the original) ---------- */

.yukesh-page-hero {
	position: relative;
	min-height: 74vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--bg);
	background-size: cover;
	background-position: center top;
}

.yukesh-page-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.25) 62%, rgba(0, 0, 0, 0) 82%),
		linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.45) 35%, rgba(0, 0, 0, 0) 70%);
}

.yukesh-page-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 0 clamp(24px, 4vw, 80px) clamp(42px, 7vh, 96px);
}

.yukesh-page-hero-title {
	margin-bottom: 0;
}

/* Page heroes sit on top of a photo (featured image / fallback art) behind a
   dark dimming overlay, so their text stays WHITE in day mode too. Scope to
   heroes that actually carry a background image; bare heroes keep theme ink. */
.yukesh-page-hero[style*="background-image"] .yukesh-page-hero-inner {
	color: #fff;
}

.yukesh-page-hero[style*="background-image"] .yukesh-page-hero-inner .yukesh-page-hero-title,
.yukesh-page-hero[style*="background-image"] .yukesh-page-hero-inner a {
	color: #fff;
}

/* Hero pages start flush (no top spacer) */

.yukesh-page-main.has-page-hero {
	padding-top: 0;
}

/* ---------- Quote (plain text, no background image) ---------- */

.yukesh-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 84px 24px;
	background: radial-gradient(1100px 420px at 50% 0%, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 62%);
}

.yukesh-quote-text {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--font-head);
	font-size: clamp(32px, 4.6vw, 68px);
	font-weight: 700;
	line-height: 1.3;
}

.yukesh-quote-byline {
	margin: 26px 0 0;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

/* ---------- Portrait band (just above the footer) ---------- */

.yukesh-quote-media {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
	min-height: 78vh;
	overflow: hidden;
	background-color: #000;
}

.yukesh-quote-media .yukesh-parallax-bg {
	position: absolute;
	left: -6%;
	right: -6%;
	top: -15%;
	bottom: -15%;
	background-size: cover;
	background-position: center top;
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

/* No divider line between the portrait band and the "Everything!" block */
.yukesh-front-main:has(.yukesh-quote-media) + .yukesh-footer .yukesh-footer-everything {
	border-top: none;
}

/* ---------- Sections ---------- */

.yukesh-section {
	padding: 84px 0;
}

.yukesh-eyebrow {
	margin: 0 0 18px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--muted-2);
}

/* Front-page reading list heading — big, tight, 800 */

.yukesh-read .yukesh-eyebrow {
	margin-bottom: 34px;
	font-size: clamp(34px, 4.4vw, 62px);
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.05;
	text-transform: none;
	color: var(--ink);
}

.yukesh-section-title {
	margin: 0 0 8px;
	font-family: var(--font-head);
	font-size: clamp(46px, 6vw, 84px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.yukesh-section-sub {
	margin: 0 0 54px;
	font-size: clamp(18px, 1.8vw, 23px);
	font-weight: 500;
	color: var(--muted);
}

/* Niguro showcase */

.yukesh-niguro-head {
	text-align: center;
	margin-bottom: 54px;
}

.yukesh-boxes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.yukesh-box {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 520px;
	border-radius: var(--radius);
	overflow: hidden;
	background-color: var(--bg-card);
	background-size: cover;
	background-position: center;
	box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.7);
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

.yukesh-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}

.yukesh-box-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 45%);
	transition: background 0.4s ease;
}

.yukesh-box:hover .yukesh-box-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 60%);
}

.yukesh-box-label {
	position: relative;
	z-index: 1;
	display: block;
	padding: 28px 30px;
}

.yukesh-box-name {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.yukesh-box-tag {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	line-height: 1.4;
	/* One-liner description sits over the box photo (dark bottom gradient),
	   so it stays white in day mode too — never theme ink. */
	color: #fff;
}

/* ---------- Read articles ---------- */

.yukesh-read-head {
	margin-bottom: 44px;
}

.yukesh-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px 30px;
}

.yukesh-card-link {
	display: block;
}

.yukesh-card-media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--bg-card);
}

.yukesh-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.yukesh-card-link:hover .yukesh-card-media img {
	transform: scale(1.05);
}

.yukesh-card-title {
	margin: 18px 0 0;
	font-family: var(--font-head);
	font-size: clamp(21px, 2.2vw, 27px);
	font-weight: 600;
	line-height: 1.22;
	text-transform: capitalize;
	transition: color 0.2s ease;
}

.yukesh-card-link:hover .yukesh-card-title {
	color: var(--accent);
}

/* ---------- Archive / blog pages ---------- */

.yukesh-archive-main {
	padding-top: calc(var(--header-h) + 40px);
}

.yukesh-archive-head {
	text-align: center;
	padding: 58px 24px 46px;
}

/* Category archive hero — mirrors the live Salient blog-archive-header */

.yukesh-cat-hero {
	background: var(--bg-panel);
	padding: clamp(30px, 4vw, 56px) 0 clamp(70px, 7vw, 116px);
}

.yukesh-cat-hero .yukesh-container {
	text-align: left;
}

/* No divider line directly under the category / author hero */
.yukesh-cat-main .yukesh-archive-list > .yukesh-post-row:first-of-type,
.yukesh-author-main .yukesh-archive-list > .yukesh-post-row:first-of-type {
	border-top: 0;
}

.yukesh-archive-sub {
	display: block;
	margin-bottom: 12px;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

.yukesh-cat-hero-title {
	margin: 0;
	font-family: var(--font-head);
	font-size: 45px;
	line-height: 1.2;
	font-weight: 800;
	text-transform: capitalize;
	color: var(--ink);
}

@media only screen and (max-width: 1300px) and (min-width: 1000px) {
	.yukesh-cat-hero-title {
		font-size: 39px;
	}
}

@media only screen and (max-width: 999px) and (min-width: 691px) {
	.yukesh-cat-hero-title {
		font-size: 30px;
	}
}

@media only screen and (max-width: 690px) {
	.yukesh-cat-hero-title {
		font-size: 28px;
	}
}

/* Description sits inside the hero band, left aligned under the title */

.yukesh-cat-hero .yukesh-archive-desc {
	max-width: 640px;
	margin: 14px 0 0;
	color: var(--muted);
}

.yukesh-archive-title {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(48px, 7vw, 96px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.yukesh-archive-desc {
	max-width: 640px;
	margin: 20px auto 0;
	font-size: 18px;
	color: var(--muted);
}

.yukesh-archive-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 60px;
	align-items: start;
	padding-bottom: 84px;
}

.yukesh-archive-list {
	min-width: 0;
}

.yukesh-post-row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px 34px;
	align-items: start;
	padding: 48px 0;
	border-top: 1px solid var(--line);
}

.yukesh-post-date {
	flex: 0 0 74px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
}

.yukesh-post-date-mon {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--muted-2);
}

.yukesh-post-date-day {
	margin-top: 5px;
	font-family: var(--font-head);
	font-size: 44px;
	font-weight: 800;
	line-height: 0.9;
}

.yukesh-post-row-body {
	min-width: 0;
}

/* Featured image — full content width, native ratio (like Salient) */

.yukesh-post-row-img {
	display: block;
	margin: 4px 0 22px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg-card);
	width: 100%;
}

.yukesh-post-row-img img {
	width: 100%;
	height: auto;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.yukesh-post-row-img:hover img {
	transform: scale(1.03);
}

.yukesh-post-row-title {
	margin: 0 0 12px;
	font-family: var(--font-head);
	font-size: clamp(25px, 2.7vw, 36px);
	font-weight: 700;
	line-height: 1.16;
	text-transform: capitalize;
	letter-spacing: -0.005em;
}

.yukesh-post-row-title a {
	transition: color 0.2s ease;
}

.yukesh-post-row-title a:hover {
	color: var(--accent);
}

.yukesh-post-row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	margin: 0 0 14px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
}

.yukesh-post-row-meta .yukesh-post-meta-sep {
	color: var(--muted-2);
}

.yukesh-post-row-meta a {
	color: var(--muted);
}

.yukesh-post-row-meta a:hover {
	color: var(--accent);
}

.yukesh-post-row-meta .yukesh-post-cats a {
	color: var(--accent);
}

.yukesh-post-row-excerpt {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.65;
}

.yukesh-post-row-excerpt p {
	margin: 0;
}

.yukesh-post-row-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.yukesh-post-row-more {
	display: inline-block;
	margin-top: 18px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 3px;
	border-bottom: 2px solid var(--accent);
	transition: color 0.2s ease, border-color 0.2s ease;
}

.yukesh-post-row-more:hover {
	color: var(--accent);
}

/* Pagination */

.navigation.pagination {
	padding: 40px 0 20px;
}

.nav-links {
	display: flex;
	gap: 10px;
	align-items: center;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 50%;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
	color: var(--ink);
	border-color: var(--accent);
}

/* Popular readings */

.yukesh-popular {
	position: sticky;
	top: 26px;
	padding-top: 10px;
}

.yukesh-popular-title {
	margin: 0 0 26px;
	font-family: var(--font-head);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
}

.yukesh-popular-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: popular;
}

.yukesh-popular-list li {
	counter-increment: popular;
	display: flex;
	gap: 18px;
	align-items: baseline;
	padding: 15px 0;
	border-bottom: 1px solid var(--line);
}

.yukesh-popular-list li::before {
	content: counter(popular);
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--muted-2);
}

.yukesh-popular-list a {
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: capitalize;
	transition: color 0.2s ease;
}

.yukesh-popular-list a:hover {
	color: var(--accent);
}

/* ---------- Single post ---------- */

.yukesh-single-main {
	padding-top: calc(var(--header-h) + 40px);
}

.yukesh-article {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px clamp(24px, 5vw, 72px) 84px;
}

.yukesh-article-head {
	margin-bottom: 36px;
	text-align: center;
}

.yukesh-article-meta {
	justify-content: center;
}

.yukesh-article-title {
	margin: 0 0 22px;
	font-family: var(--font-head);
	font-size: 52px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -0.005em;
}

@media only screen and (max-width: 1300px) and (min-width: 1000px) {
	.yukesh-article-title {
		font-size: 46px;
	}
}

@media only screen and (max-width: 999px) and (min-width: 691px) {
	.yukesh-article-title {
		font-size: 35px;
	}
}

@media only screen and (max-width: 690px) {
	.yukesh-article-title {
		font-size: 31px;
	}
}

.yukesh-article-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--muted);
}

/* Meta groups: avatar + author on one row, date + share stacked below on mobile */
.yukesh-meta-who,
.yukesh-meta-when {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

@media (max-width: 999px) {
	.yukesh-article-meta {
		flex-direction: column;
		row-gap: 4px;
	}

	.yukesh-meta-dot {
		display: none;
	}
}

.yukesh-article-meta .avatar {
	border-radius: 50%;
}

.yukesh-article-meta a {
	color: var(--muted);
}

.yukesh-article-meta a:hover {
	color: var(--accent);
}

.yukesh-article-media {
	margin: 0 0 44px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--bg-card);
}

.yukesh-article-media img {
	width: 100%;
	height: auto;
}

/* Featured image breaks out of the text column: full edge-to-edge below
   999px, and up to 1240px (full column width) on desktop. Text keeps its
   own left/right spacing — only the image is widened. */
@media (max-width: 999px) {
	.yukesh-article-media {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

@media (min-width: 1000px) {
	/* Wider than the text column but never flush to the column edges —
	   always keeps a comfortable left/right margin on desktop */
	.yukesh-article-media {
		margin-left: calc(50% - min(1120px, 100vw - 347px) / 2);
		margin-right: calc(50% - min(1120px, 100vw - 347px) / 2);
	}
}

.yukesh-article-body {
	font-size: 17.5px;
	line-height: 1.8;
	color: var(--copy);
}

.yukesh-article-body > *:first-child {
	margin-top: 0;
}

.yukesh-article-body p {
	margin: 0 0 1.4em;
}

.yukesh-article-body h2,
.yukesh-article-body h3,
.yukesh-article-body h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.2;
	margin: 1.8em 0 0.6em;
}

.yukesh-article-body h2 { font-size: 32px; }
.yukesh-article-body h3 { font-size: 25px; }
.yukesh-article-body h4 { font-size: 21px; }

.yukesh-article-body a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yukesh-article-body ul,
.yukesh-article-body ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.yukesh-article-body li {
	margin-bottom: 0.5em;
}

.yukesh-article-body blockquote {
	margin: 2em 0;
	padding: 6px 0 6px 26px;
	border-left: 3px solid var(--accent);
	font-family: var(--font-head);
	font-size: 23px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ink);
}

.yukesh-article-body img {
	border-radius: 8px;
}

.yukesh-article-body figure {
	margin: 2em 0;
}

.yukesh-article-body figcaption {
	font-size: 14px;
	color: var(--muted-2);
	text-align: center;
	margin-top: 10px;
}

.yukesh-article-body pre {
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px;
	overflow-x: auto;
	font-size: 14px;
}

.yukesh-article-body code {
	background: var(--soft-wash);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

.yukesh-article-body pre code {
	background: none;
	padding: 0;
}

/* Author box */

.yukesh-article-footer {
	margin-top: 56px;
}

/* Google Preferred Source pill (custom small button, per Google's guide) */
.yukesh-preferred-source {
	display: flex;
	justify-content: center;
	margin-top: 48px;
	text-decoration: none;
}

.yukesh-archive-head .yukesh-preferred-source {
	margin-top: 30px;
}

.yukesh-ps-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
	padding: 7px 16px 7px 13px;
	border: 1px solid var(--soft-line);
	border-radius: 999px;
	background: var(--soft-wash-2);
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.yukesh-ps-g {
	flex: none;
}

.yukesh-ps-label {
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--ink);
	white-space: nowrap;
}

.yukesh-preferred-source:hover .yukesh-ps-pill,
.yukesh-preferred-source:focus-visible .yukesh-ps-pill {
	border-color: var(--accent);
	background: var(--soft-wash);
	box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.yukesh-authorbox {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg-soft);
}

.yukesh-authorbox .avatar {
	border-radius: 50%;
}

.yukesh-authorbox-name {
	margin: 0 0 6px;
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 700;
}

.yukesh-authorbox-bio {
	margin: 0;
	font-size: 15px;
	color: var(--muted);
}

.yukesh-next-post {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 26px;
	padding: 26px;
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.yukesh-next-post:hover {
	border-color: var(--accent);
	background: var(--bg-soft);
	color: var(--ink);
}

.yukesh-next-post-label {
	display: block;
	font-family: var(--font-head);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted-2);
	margin-bottom: 6px;
}

.yukesh-next-post-title {
	display: block;
	font-family: var(--font-head);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
}

.yukesh-next-post .yukesh-icon {
	flex: 0 0 auto;
	color: var(--muted-2);
}

/* Comments */

.yukesh-article .comment-respond,
.yukesh-article .comments-area {
	margin-top: 60px;
}

.comments-title,
.comment-reply-title {
	font-family: var(--font-head);
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 26px;
}

.comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.comment-list .comment {
	margin-bottom: 26px;
}

.comment-list .comment-body {
	padding: 20px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--bg-soft);
	font-size: 15px;
}

.comment-list .comment-author .avatar {
	border-radius: 50%;
	margin-right: 8px;
	vertical-align: middle;
}

.comment-list .comment-metadata {
	font-size: 13px;
	color: var(--muted-2);
}

.comment-list .reply a {
	font-size: 13px;
	color: var(--accent);
}

.comment-respond input[type='text'],
.comment-respond input[type='email'],
.comment-respond input[type='url'],
.comment-respond textarea {
	width: 100%;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 15px;
	margin-bottom: 14px;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
	outline: none;
	border-color: var(--accent);
}

.comment-form .submit {
	background: var(--ink);
	color: var(--bg);
	border: none;
	border-radius: 30px;
	padding: 13px 30px;
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background 0.2s ease, color 0.2s ease;
}

.comment-form .submit:hover {
	background: var(--accent);
	color: #fff;
}

/* ---------- Pages ---------- */

.yukesh-page-main {
	padding-top: calc(var(--header-h) + 40px);
}

@media (max-width: 999px) {
	.yukesh-page-main.has-page-hero {
		padding-top: 0;
	}

	.yukesh-page-hero {
		min-height: 52vh;
	}
}

.yukesh-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 50px clamp(24px, 5vw, 72px) 84px;
}

.yukesh-page-head {
	text-align: center;
	margin-bottom: 54px;
}

.yukesh-page-title {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(44px, 6.5vw, 80px);
	font-weight: 800;
	line-height: 1.02;
	text-transform: uppercase;
}

.yukesh-page-body {
	font-size: 17.5px;
	line-height: 1.8;
	color: var(--copy);
}

.yukesh-page-body h2,
.yukesh-page-body h3 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.2;
	margin: 1.8em 0 0.6em;
}

.yukesh-page-body h2 { font-size: 32px; }
.yukesh-page-body h3 { font-size: 25px; }

.yukesh-page-body p {
	margin: 0 0 1.4em;
}

.yukesh-page-body a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

.yukesh-page-body ul,
.yukesh-page-body ol {
	margin: 0 0 1.4em;
	padding-left: 1.4em;
}

.yukesh-page-body li {
	margin-bottom: 0.5em;
}

.yukesh-page-body .gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 2em 0;
}

.yukesh-page-body .gallery .gallery-item {
	margin: 0;
}

.yukesh-page-body .gallery img {
	border-radius: var(--radius);
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Search / 404 ---------- */

.yukesh-search-main {
	padding-top: calc(var(--header-h) + 40px);
}

.yukesh-search-none {
	text-align: center;
	color: var(--muted);
	padding: 60px 0 120px;
}

/* Bare lost page: no sidebar/header/footer chrome, so no left offset. */
body.yukesh-404-bare {
	padding-left: 0;
}

.yukesh-404-main {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yukesh-404 {
	text-align: center;
	padding: 60px 24px;
}

.yukesh-404-code {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(120px, 24vw, 240px);
	font-weight: 800;
	line-height: 0.85;
	letter-spacing: -0.02em;
	color: var(--muted-2);
}

.yukesh-404-code .yukesh-accent-dot {
	color: var(--accent);
}

.yukesh-404-title {
	margin: 26px 0 12px;
	font-family: var(--font-head);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 700;
	letter-spacing: 0.01em;
}

.yukesh-404-text {
	color: var(--muted);
	max-width: 480px;
	margin: 0 auto 36px;
	font-size: clamp(15px, 1.6vw, 17px);
}

/* Only the home pill remains — smaller, subtle. */
.yukesh-404-home {
	display: inline-block;
	color: var(--accent);
	border: 1px solid var(--accent);
	border-radius: 30px;
	padding: 7px 20px;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	transition: background 0.2s ease, color 0.2s ease;
}

.yukesh-404-home:hover {
	background: var(--accent);
	color: #fff;
}

/* ---------- Footer ---------- */

.yukesh-footer {
	background: var(--footer-bg);
}

.yukesh-footer-everything {
	text-align: center;
	padding: 96px 24px 70px;
	border-top: 1px solid var(--sep);
}

.yukesh-everything-title {
	margin: 0;
	font-family: var(--font-head);
	font-size: clamp(52px, 8vw, 120px);
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.yukesh-everything-sub {
	margin: 14px 0 0;
	font-size: 20px;
	color: var(--muted);
}

.yukesh-everything-cat {
	margin: 70px 0 0;
	font-family: var(--font-head);
	font-size: clamp(38px, 5.5vw, 64px);
	font-weight: 700;
	line-height: 1.5;
}

/* Underline scribble — draws itself (Salient nectarStrokeAnimation style) when the word is revealed */

.yukesh-scribble-word {
	position: relative;
	display: inline-block;
	padding-bottom: 0.28em;
}

.yukesh-scribble-svg {
	position: absolute;
	left: -2.5%;
	right: -2.5%;
	bottom: 0;
	width: 105%;
	height: 0.55em;
	color: var(--accent);
	overflow: visible;
}

html.yk-js .yukesh-scribble-svg path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	opacity: 0;
}

html.yk-js [data-reveal].is-revealed .yukesh-scribble-svg path {
	opacity: 1;
	animation: yukesh-scribble-draw 1.5s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
}

@keyframes yukesh-scribble-draw {
	0% {
		stroke-dashoffset: 1;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

.yukesh-everything-cta {
	margin: 56px 0 0;
	font-family: var(--font-head);
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 600;
	line-height: 1.4;
	color: var(--muted);
}

.yukesh-everything-cta em {
	color: var(--accent);
	font-style: normal;
}

/* Verified badge — accent checkmark shown after the author's name */

.yukesh-verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin-left: 7px;
	color: var(--accent);
}

.yukesh-verified svg {
	display: block;
}

.yukesh-footer-bar {
	border-top: 1px solid var(--sep);
	/* Nav + socials + copyright strip sits a step darker than the page in dark
	   mode (pure black); day mode keeps it identical to the footer. */
	background: var(--footer-bar-bg);
	text-align: center;
	padding: 56px 24px 48px;
}

.yukesh-footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 34px;
	list-style: none;
	margin: 0 0 34px;
	padding: 0;
}

.yukesh-footer-menu a {
	font-family: var(--font-head);
	font-size: 19px;
	font-weight: 600;
	color: var(--ink);
}

.yukesh-footer-menu a:hover {
	color: var(--accent);
}

.yukesh-socials-footer {
	justify-content: center;
	gap: 12px;
	margin-bottom: 40px;
}

.yukesh-socials-footer a {
	width: 42px;
	height: 42px;
	min-width: 42px;
}

.yukesh-socials-footer a svg {
	width: 17px;
	height: 17px;
}

/* Mobile: footer socials sit in tidy rows of four so they never cram into one line */
@media (max-width: 639px) {
	.yukesh-socials-footer {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		justify-items: center;
		row-gap: 16px;
		margin-bottom: 36px;
	}

	.yukesh-socials-footer li {
		display: flex;
		justify-content: center;
	}
}

.yukesh-copyright {
	margin: 0;
	font-family: var(--font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--muted-2);
}

/* ---------- Responsive: tablet / mobile top bar ---------- */

@media (max-width: 999px) {
	body {
		padding-left: 0;
	}

	/* Header becomes a top bar */
	.yukesh-header {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: var(--header-h);
		flex-direction: row;
		background: var(--bg-mobile-header);
		border-right: none;
		border-bottom: none;
		box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.7);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
	}

	.yukesh-header-inner {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 0 20px;
	}

	.yukesh-brand {
		flex: 0 0 auto;
	}

	.yukesh-logo {
		height: 46px;
		max-width: 210px;
	}

	.yukesh-header .yukesh-nav,
	.yukesh-header .yukesh-sidebar-search,
	.yukesh-header .yukesh-sidebar-socials {
		display: none;
	}

	.yukesh-mobile-actions {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	/* Mobile header icons — plain, no chip border */
	.yukesh-mobile-actions .yukesh-header-btn {
		border: 0;
		background: transparent;
	}

	.yukesh-mobile-actions .yukesh-header-btn:hover {
		background: transparent;
		border-color: transparent;
	}

	.yukesh-mobile-actions .yukesh-header-btn .yukesh-icon {
		width: 22px;
		height: 22px;
	}

	/* Drawer */
	.yukesh-offcanvas,
	.yukesh-overlay {
		display: flex;
	}

	.yukesh-overlay {
		display: block;
	}

	/* Sections */
	.yukesh-section {
		padding: 54px 0;
	}

	.yukesh-archive-main,
	.yukesh-single-main,
	.yukesh-page-main,
	.yukesh-search-main {
		padding-top: calc(var(--header-h) + 20px);
	}

	/* Category / author hero: hug the mobile top bar a little tighter */
	.yukesh-cat-main,
	.yukesh-author-main {
		padding-top: var(--header-h);
	}

	.yukesh-archive-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.yukesh-popular {
		position: static;
	}

	/* Hero */
	.yukesh-hero-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 0 24px calc(56px + env(safe-area-inset-bottom));
	}

	.yukesh-hero-title {
		font-size: min(108px, 10vw);
	}

	.yukesh-hero-title + .yukesh-hero-sub {
		margin-left: 0;
	}

	.yukesh-page-hero-title {
		font-size: clamp(17px, 4.8vw, 24px);
	}

	/* Quote + portrait band */
	.yukesh-quote {
		padding: 60px 22px;
	}

	.yukesh-quote-media {
		min-height: 52vh;
	}

	/* Article rows */
	.yukesh-post-row {
		grid-template-columns: 1fr;
		gap: 4px 0;
		padding: 38px 0;
	}

	.yukesh-post-date {
		flex-direction: row;
		align-items: baseline;
		gap: 8px;
		margin-bottom: 14px;
	}

	.yukesh-post-date-mon {
		font-size: 12px;
	}

	.yukesh-post-date-day {
		font-size: 22px;
		margin-top: 0;
	}

	.yukesh-hero-scroll {
		right: 22px;
		bottom: 24px;
	}

	/* Niguro boxes */
	.yukesh-box {
		min-height: 440px;
	}
}

@media (max-width: 639px) {
	/* Read Articles keeps a 2-column grid on phones; company boxes stay full-width */
	.yukesh-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 34px 18px;
	}

	.yukesh-cards .yukesh-card-title {
		font-size: clamp(14px, 4.6vw, 19px);
		margin-top: 12px;
		line-height: 1.28;
	}

	.yukesh-boxes {
		grid-template-columns: 1fr;
	}

	.yukesh-box {
		min-height: 400px;
	}

	.yukesh-hero-title {
		font-size: min(108px, 12vw);
		line-height: 1.02;
	}

	.yukesh-hero-sub {
		font-size: 18px;
	}

	.yukesh-post-row-title {
		font-size: clamp(24px, 6.4vw, 34px);
	}

	.yukesh-post-row-img {
		margin: 0 0 18px;
	}

	.yukesh-article,
	.yukesh-page {
		padding-left: 24px;
		padding-right: 24px;
	}

	.yukesh-authorbox {
		flex-direction: column;
	}

	.yukesh-everything-cta em {
		text-decoration-thickness: 1px;
		text-underline-offset: 5px;
	}
}

/* Extra-tight phones: squeeze the two reading cards a touch more */

@media (max-width: 400px) {
	.yukesh-cards {
		gap: 26px 14px;
	}

	.yukesh-cards .yukesh-card-title {
		margin-top: 10px;
	}
}

/* Desktop-only spacing fixes (sidebar layout) */

@media (min-width: 1000px) {
	.yukesh-archive-main,
	.yukesh-single-main,
	.yukesh-page-main,
	.yukesh-search-main {
		padding-top: 70px;
	}

	/* Category / author hero band sits flush at the top of the content column */
	.yukesh-cat-main,
	.yukesh-author-main {
		padding-top: 0;
	}

	.yukesh-404-main {
		min-height: 100vh;
	}

/* Front-page hero: padding only at the top (a full-width strip of page
   background) — the image itself fills the whole area edge to edge and is
   anchored to its top-center so the lower part of the photo also shows. */
.yukesh-hero {
	margin-left: 0;
	padding: 0 50px 0;
	background-color: var(--bg);
}

/* Page heroes keep a breathing margin from the sidebar */
.yukesh-page-hero {
	margin-left: clamp(24px, 3vw, 56px);
}

/* The image layer overscans past the top edge so the hero is always fully
   filled there (even while the parallax slides it downward), while the 50px
   gutters stay on the left and right. */
.yukesh-hero-bg {
	left: 50px;
	right: 50px;
	top: -18%;
	bottom: -18%;
}

.yukesh-hero-overlay {
	left: 50px;
	top: 0;
	right: 50px;
	bottom: 0;
}

/* Desktop: push "CEO at Niguro" to the far right, just before the scroll arrow */
.yukesh-hero-title + .yukesh-hero-sub {
	margin-left: auto;
	margin-right: calc(clamp(20px, 4vw, 64px) + 16px);
}

.yukesh-page-hero-title {
	font-size: clamp(20px, 2.6vw, 34px);
}
}

/* ---------- Images are square; non-image UI keeps its original rounding ---------- */

img {
	border-radius: 0 !important;
}

.yukesh-card-media,
.yukesh-post-row-img,
.yukesh-article-media,
.yukesh-box {
	border-radius: 0;
}

/* Author avatars stay round (people photos, not content imagery) */

.yukesh-article-meta .avatar,
.yukesh-authorbox .avatar,
.comment-list .comment-author .avatar {
	border-radius: 50% !important;
}

/* ---------- Scroll reveals (Salient-style staggered fade-up) ---------- */

html.yk-js [data-reveal] {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

html.yk-js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Hero scroll arrow — the line draws downward, then holds */

.yukesh-arrow-line path {
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: yukesh-line-draw 3.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes yukesh-line-draw {
	0% {
		stroke-dashoffset: 60;
	}
	45% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 0;
	}
}

/* ---------- Global image lightbox (Salient-style) ---------- */

.yukesh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.96);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.yukesh-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.yukesh-lightbox-stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 92vw;
	max-height: 88vh;
}

.yukesh-lightbox-stage img {
	display: block;
	max-width: 92vw;
	max-height: 88vh;
	width: auto;
	height: auto;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
	transform: scale(0.96);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.yukesh-lightbox.is-open .yukesh-lightbox-stage img {
	transform: scale(1);
}

.yukesh-lightbox-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -52px;
	margin: 0;
	text-align: center;
	font-family: var(--font-body);
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yukesh-lightbox-close,
.yukesh-lightbox-prev,
.yukesh-lightbox-next {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.9);
	transition: color 0.2s ease, background 0.2s ease;
}

.yukesh-lightbox button:hover {
	color: var(--accent);
	background: rgba(255, 255, 255, 0.06);
}

.yukesh-lightbox-close {
	top: 22px;
	right: 22px;
	width: 44px;
	height: 44px;
}

.yukesh-lightbox-close .yukesh-icon {
	width: 20px;
	height: 20px;
}

.yukesh-lightbox-prev,
.yukesh-lightbox-next {
	top: 50%;
	width: 48px;
	height: 48px;
	transform: translateY(-50%);
}

.yukesh-lightbox-prev {
	left: 22px;
}

.yukesh-lightbox-next {
	right: 22px;
}

.yukesh-content-img {
	cursor: zoom-in;
}

/* ---------- Reduced motion ---------- */

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	html.yk-js [data-reveal] {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Global divider color (hr + separator borders) ---------- */

hr {
	border-top-color: #23212147 !important;
}

/* ---------- Share dropdown (single post) ---------- */

.yukesh-share {
	display: inline-flex;
	align-items: center;
}

.yukesh-share-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	transition: color 0.2s ease, background 0.2s ease;
}

.yukesh-share-toggle:hover {
	color: var(--accent);
	background: var(--soft-wash);
}

.yukesh-share-toggle .yukesh-icon {
	width: 17px;
	height: 17px;
}

.yukesh-share-panel {
	position: fixed;
	z-index: 1150;
	display: none;
	width: 224px;
	padding: 7px;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.yukesh-share-panel.is-open {
	display: block;
	animation: yukesh-share-in 0.16s ease;
}

@keyframes yukesh-share-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.yukesh-share-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 9px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 500;
	text-align: left;
	transition: color 0.15s ease, background 0.15s ease;
}

.yukesh-share-item svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	color: var(--muted-2);
	transition: color 0.15s ease;
}

.yukesh-share-item:hover,
.yukesh-share-item:focus-visible {
	background: var(--soft-wash);
	color: var(--accent);
	outline: none;
}

.yukesh-share-item:hover svg,
.yukesh-share-item:focus-visible svg {
	color: var(--accent);
}

.yukesh-share-sep {
	height: 1px;
	margin: 6px 12px;
	background: var(--sep);
}

/* ---------- Go-to-top ---------- */

.yukesh-goto-top {
	position: fixed;
	right: 24px;
	bottom: 26px;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--accent);
	color: #fff;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, box-shadow 0.25s ease;
}

.yukesh-goto-top .yukesh-icon {
	width: 16px;
	height: 16px;
}

.yukesh-goto-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.yukesh-goto-top:hover,
.yukesh-goto-top:focus-visible {
	box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.45);
	transform: translateY(-2px);
	outline: none;
}

@media (max-width: 999px) {
	.yukesh-goto-top {
		right: 16px;
		bottom: 20px;
		width: 36px;
		height: 36px;
	}
}

/* ---------- Theme switcher (dark / day) ---------- */

.yukesh-theme-toggle {
	position: fixed;
	right: 24px;
	bottom: 74px;
	z-index: 950;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--bg-card);
	color: var(--ink);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, box-shadow 0.25s ease, color 0.2s ease;
}

.yukesh-theme-toggle .yukesh-icon {
	width: 17px;
	height: 17px;
}

/* Dark theme shows the sun (tap → light); day theme shows the moon (tap → dark) */
.yukesh-theme-toggle .yukesh-icon:nth-child( 2 ) {
	display: none;
}

:root[data-theme="light"] .yukesh-theme-toggle .yukesh-icon:nth-child( 1 ) {
	display: none;
}

:root[data-theme="light"] .yukesh-theme-toggle .yukesh-icon:nth-child( 2 ) {
	display: block;
}

.yukesh-theme-toggle.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.yukesh-theme-toggle:hover,
.yukesh-theme-toggle:focus-visible {
	color: var(--accent);
	box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.35);
	transform: translateY(-2px);
	outline: none;
}

@media (max-width: 999px) {
	.yukesh-theme-toggle {
		right: 16px;
		bottom: 66px;
		width: 36px;
		height: 36px;
	}
}

/* ---------- Toast (copy-link feedback) ---------- */

.yukesh-toast {
	position: fixed;
	left: 50%;
	bottom: 30px;
	z-index: 1300;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 20px;
	background: var(--bg-card);
	border: 1px solid rgba(var(--accent-rgb), 0.55);
	border-radius: 999px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
	color: var(--ink);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 14px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
	pointer-events: none;
	white-space: nowrap;
}

.yukesh-toast.is-show {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.yukesh-toast svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	color: var(--accent);
}

@media (max-width: 999px) {
	.yukesh-toast {
		bottom: 22px;
		max-width: calc(100vw - 40px);
		white-space: normal;
		text-align: center;
	}
}

/* Mobile top bar in dark mode: fully black surface with a small, tight lift
   shadow under it (day mode keeps its translucent wash + soft shadow). */
@media (max-width: 999px) {
	:root[data-theme="dark"] .yukesh-header {
		box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.9);
	}
}