/*
Theme Name:  Pasha.by Child
Description: Child theme of Schematic (folder pashaby) for pasha.by layout updates.
Template:    pashaby
Version:     1.3.2
Text Domain: pashaby-child
*/

/* ==========================================================================
   Global fixes
   ========================================================================== */

/* Mobile: stop Canvas rows overflowing the screen (32px row gutters vs 24px page padding) */
@media (max-width: 767px) {
	.cnvs-block-row > .cnvs-block-row-inner {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.cnvs-block-row > .cnvs-block-row-inner > .cnvs-block-column {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* Header (PB layout): burger on the right after Instagram and search, desktop nav hidden. */
@media (min-width: 1020px) {
	.cs-header__inner-desktop { position: relative; }
	.cs-header__inner-desktop .cs-col-left .cs-header__offcanvas-toggle {
		position: absolute;
		left: auto;
		right: 0;
		width: auto;
		margin: 0;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
	}
	.cs-header__inner-desktop .cs-col-right { padding-right: 44px; }
	.cs-header__inner-desktop .pk-social-links-telegram,
	.cs-header__inner-desktop .pk-social-links-behance { display: none; }
}

/* ==========================================================================
   Homepage (body.pb-home): full-width fluid layout.
   Every size scales with the viewport; values match the Figma frame at 1440px.
   ========================================================================== */

.pb-home,
.pb-ui {
	--pb-red: #fd2222;
	--pb-ink: #141414;
	--pb-line: #ddd;
	--pb-font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--g: clamp(20px, 4.45vw, 112px);          /* page gutter: 64px @1440 */
	--sec: clamp(40px, 4vw, 96px);            /* space between sections: 58px @1440 */
	--fs-label: clamp(9.9px, .69vw, 13px);
	/* Article lists everywhere: date 9 / title 12 up to 1599px, 11 / 14 from 1600px. */
	--fs-date: 9px;
	--fs-title: 12px;
	--fs-text: clamp(16px, 1.22vw, 24px);     /* 17.6px @1440 */
	--fs-intro: clamp(30px, 3.06vw, 72px);    /* 44px @1440 */
}
@media (min-width: 1600px) {
	.pb-home, .pb-ui { --fs-date: 11px; --fs-title: 14px; }
}

/* Opening a project panel or the menu locks scrolling; keep the scrollbar's space so nothing reflows. */
html:has(> body.pb-ui) { scrollbar-gutter: stable; }

/* Shared chrome (body.pb-ui = homepage + single posts): header and footer share the content's full-width gutter. */
.pb-ui .cs-header .cs-container,
.pb-ui .cs-footer .cs-container {
	max-width: none;
	width: 100%;
	padding-left: var(--g);
	padding-right: var(--g);
}
.pb-ui .cs-footer__item { padding-left: 0; padding-right: 0; }

/* Footer: just the small logo, centred (half the header logo). */
.pb-ui .cs-footer .cs-footer-social-links,
.pb-ui .cs-footer .cs-col-canter,
.pb-ui .cs-footer .cs-col-right,
.pb-ui .cs-footer .cs-footer__tag-line { display: none !important; }
.pb-ui .cs-footer .cs-footer__item {
	display: flex;
	flex-direction: row !important;
	justify-content: center;
	align-items: center;
}
.pb-ui .cs-footer .cs-col-left { margin: 0; padding: 0; flex: 0 0 auto; }
.pb-ui .cs-footer .cs-logo img { display: block; width: 80px; height: auto; }   /* header logo is 161px */
.pb-ui .cs-footer .cs-logo a { margin: 0 !important; }   /* the theme's 16px gap pushed it off-centre */
/* Header on the homepage: search on the left edge, logo centred, burger on the right edge. */
.pb-ui .cs-header .cs-navbar-social-links,
.pb-ui .cs-header__search-toggle-label { display: none !important; }
.pb-ui .cs-header__inner .cs-col-center { display: contents; }
.pb-ui .cs-header__inner .cs-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 1;
}
.pb-ui .cs-header__inner {
	position: relative;
	align-items: center;
	justify-content: space-between;
}
.pb-ui .cs-header__inner .cs-col-right { order: 1; flex: 0 0 auto; padding: 0 !important; justify-content: flex-start; }
.pb-ui .cs-header__inner .cs-col-left  { order: 2; flex: 0 0 auto; padding: 0 !important; justify-content: flex-end; }
.pb-ui .cs-header__inner .cs-header__offcanvas-toggle,
.pb-ui .cs-header__inner .cs-header__search-toggle {
	position: static !important;
	transform: none !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pb-hicon) !important;
	height: var(--pb-hicon);
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	gap: 0;
	cursor: pointer;
}
/* Glyphs sit on the content edges: search flush left, burger flush right. */
.pb-ui .cs-header__inner .cs-header__search-toggle { justify-content: flex-start; }
.pb-ui .cs-header__inner .cs-header__offcanvas-toggle { justify-content: flex-end; }
.pb-ui .cs-header { --pb-hicon: clamp(36px, 2.6vw, 56px); }
.pb-ui .cs-header__inner .cs-icon-search { font-size: calc(var(--pb-hicon) * .5); }
/* The theme's "burger" is three thin dots and looks much lighter than the search glyph.
   Draw a real three-line burger with the same width and stroke as the magnifier. */
.pb-ui .cs-header { --pb-hglyph: calc(var(--pb-hicon) * .5); --pb-hstroke: max(2px, calc(var(--pb-hglyph) * .115)); }
.pb-ui .cs-header__inner .cs-icon-more-vertical::before { content: none !important; }
.pb-ui .cs-header__inner .cs-icon-more-vertical {
	display: block;
	width: calc(var(--pb-hglyph) * .95);
	height: calc(var(--pb-hglyph) * .8);
	background:
		linear-gradient(currentColor, currentColor) 0 0    / 100% var(--pb-hstroke) no-repeat,
		linear-gradient(currentColor, currentColor) 0 50%  / 100% var(--pb-hstroke) no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 100% var(--pb-hstroke) no-repeat;
	transition: color .1s;
}
.pb-ui .cs-header__inner .cs-icon { line-height: 1; transition: color .1s; }
.pb-ui .cs-header__inner [role="button"]:hover .cs-icon { color: var(--pb-red); }
/* Wide screens: logo on the left edge, search + burger together on the right edge. */
@media (min-width: 1020px) {
	.pb-ui .cs-header__inner-desktop { justify-content: flex-start; }
	.pb-ui .cs-header__inner-desktop .cs-col-left { display: contents; }
	.pb-ui .cs-header__inner-desktop .cs-logo { position: static; transform: none; order: 0; }
	.pb-ui .cs-header__inner-desktop .cs-col-right { order: 1; margin-left: auto; margin-right: clamp(14px, 1.2vw, 28px); }
	.pb-ui .cs-header__inner-desktop .cs-header__search-toggle { justify-content: flex-end; }
	.pb-ui .cs-header__inner-desktop .cs-header__offcanvas-toggle { order: 2; }
}

/* Burger menu: slides in from the right, black panel, large white links. */
.pb-ui { --cs-offcanvas-width: min(100vw, clamp(320px, 30vw, 560px)); }
.pb-ui .cs-offcanvas {
	left: auto !important;
	right: calc(var(--cs-offcanvas-width) * -1);
	transition: right .3s cubic-bezier(.65, 0, .35, 1);
}
.pb-ui.cs-offcanvas-active .cs-offcanvas { right: 0; }
.pb-ui.cs-offcanvas-active .cs-site-inner { left: 0; }
.pb-ui .cs-site-overlay { background-color: rgba(0, 0, 0, .35) !important; }
.pb-ui .cs-offcanvas__outer { background: #000; color: #fff; }
.pb-ui .cs-offcanvas__inner { padding: 0 var(--g) var(--g); justify-content: flex-start; }
.pb-ui .cs-offcanvas .cs-logo-default { display: none !important; }
.pb-ui .cs-offcanvas .cs-logo-dark { display: block !important; }
.pb-ui .cs-offcanvas__toggle { right: var(--g); }
.pb-ui .cs-offcanvas__toggle .cs-offcanvas__toggle-icon::before,
.pb-ui .cs-offcanvas__toggle .cs-offcanvas__toggle-icon::after { width: 20px; background: #fff !important; }
.pb-ui .cs-offcanvas .block-5 { display: none !important; }      /* «Это другое» */
.pb-ui .cs-offcanvas .widget_nav_menu .menu { display: flex; flex-direction: column; gap: clamp(10px, 1vw, 18px); }
.pb-ui .cs-offcanvas .widget_nav_menu .menu > li > a {
	font-family: var(--pb-font);
	font-size: clamp(24px, 2.2vw, 44px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	text-transform: none;
	color: #fff !important;
	padding: 0;
	transition: color .1s;
}
.pb-ui .cs-offcanvas .widget_nav_menu .menu > li > a:hover { color: var(--pb-red) !important; }
/* Latest-posts flyouts open to the left of the panel now. */
@media (min-width: 768px) {
	/* Menu rows reach the panel's left edge, so the mouse stays on the item while moving into its flyout. */
	.pb-ui .cs-offcanvas .widget_nav_menu .menu > li { margin-left: calc(-1 * var(--g)); padding-left: var(--g); }
	.pb-ui .widget_nav_menu .cs-offcanvas-posts:hover .cs-offcanvas-posts-container {
		left: auto !important;
		right: var(--cs-offcanvas-width);
	}
}
.pb-home .cs-site-content { margin: 0; }
.pb-home .cs-site-content > .cs-container,
.pb-home .cs-main-content,
.pb-home .entry-content {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.pb-home-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(8px, 1vw, 24px) var(--g) var(--sec);
	font-family: var(--pb-font);
	color: var(--pb-ink);
}
.pb-home-wrap *, .pb-home-wrap *::before, .pb-home-wrap *::after { box-sizing: border-box; }
.pb-home-wrap ul { list-style: none; margin: 0; padding: 0; }
.pb-home-wrap li { margin: 0; }
.pb-home-wrap p { margin: 0; }
.pb-home-wrap a { color: inherit; }
.pb-home-wrap section + section { margin-top: var(--sec); }
.pb-home-wrap section.pb-projects { margin-top: calc(var(--sec) * .55); }
/* Project cells reserve room below for the hover swap, so the next section needs less. */
.pb-home-wrap section.pb-projects + section { margin-top: calc(var(--sec) * .35); }

/* Section label: "СВЕЖЕЕ ———" */
.pb-label {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 clamp(12px, 1vw, 20px);
	font-family: var(--pb-font);
	font-size: var(--fs-label);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--pb-ink);
}
.pb-label::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid var(--pb-line);
}
/* The fly on «свежее»: sits just left of the word, bottoms aligned, overlapping the first letter a little (as in Figma). */
.pb-label--fly { position: relative; }
.pb-fly {
	--fly: clamp(40px, 4.44vw, 64px);
	position: absolute;
	left: calc(var(--fly) * -0.89);
	bottom: 0;
	width: var(--fly);
	height: auto;
	pointer-events: none;
}
@media (min-width: 1020px) {
	/* The fly sticks out above the label: give the first block room so the header doesn't cover its wing. */
	.pb-about { padding-top: clamp(24px, 2.2vw, 36px); }
}
@media (max-width: 1019px) {
	/* The column touches the screen edge here: the fly sits inline before the word instead. */
	.pb-fly { position: static; --fly: 36px; margin: -12px -4px -6px 0; }
}

/* Post lists: date above title, tight rhythm. */
.pb-list { display: flex; flex-direction: column; gap: clamp(7px, .6vw, 12px); }
.pb-item time {
	display: block;
	margin-bottom: 2px;
	font-size: var(--fs-date);
	line-height: 1.5;
	letter-spacing: .076em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.pb-item a {
	display: block;
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.027em;
	text-decoration: none;
	color: var(--pb-ink);
}

/* Body text */
.pb-text {
	font-size: var(--fs-text);
	line-height: 1.7;
	letter-spacing: -0.014em;
}

/* ---------------------------------------------------------------------------
   Links: one hairline underline drawn with a background gradient (the theme's
   text-decoration renders thick at large sizes). No line at rest; on hover it
   draws in from the left, on leave it runs out to the right.
   --------------------------------------------------------------------------- */
.pb-home-wrap a,
.pb-panel a { text-decoration: none !important; }
.pb-text a, .pb-links a, .pb-intro a, .pb-quote a,
.pb-panel__link > span:last-child, .pb-panel__articles a,
.pb-item a, .pb-press a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: .08em;
	transition: background-size .22s cubic-bezier(.65, 0, .35, 1), color .1s;
}
.pb-text a, .pb-links a, .pb-intro a, .pb-quote a,
.pb-panel__link > span:last-child, .pb-panel__articles a,
.pb-item a, .pb-press a { background-position: 100% 100%; }
.pb-text a:hover, .pb-links a:hover, .pb-intro a:hover, .pb-quote a:hover,
.pb-panel__link:hover > span:last-child, .pb-panel__articles a:hover,
.pb-item a:hover, .pb-press a:hover { background-size: 100% 1px; background-position: 0 100%; }
/* Inline so the line follows the text, not the whole column. Because the link is inline,
   the line box comes from the <li>: set the title size and tight leading there. */
.pb-item { font-size: var(--fs-title); line-height: 1.08; }
.pb-item a { display: inline; line-height: inherit; }
.pb-item time { display: block; line-height: 1.2; margin-bottom: 0; }
/* General rule: every link is bold black; the only hover feedback is the animated underline */
.pb-text a, .pb-links a, .pb-intro a, .pb-quote a, .pb-panel__articles a,
.pb-item a, .pb-press a {
	color: #000 !important;
	font-weight: 700;
}
.pb-text a:hover, .pb-links a:hover, .pb-intro a:hover, .pb-quote a:hover, .pb-panel__articles a:hover,
.pb-item a:hover, .pb-press a:hover { color: var(--pb-red) !important; }
/* Text selection: black instead of the browser blue */
::selection { background: #000; color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.pb-home-wrap a, .pb-panel a, .pb-home-wrap a * , .pb-panel a * { animation: none !important; transition: none !important; }
}

/* --- Top: counters ----------------------------------------------------------- */
/* Life counters (Code Snippets) ship with max-width:1400px + auto margins: stretch them to the page. */
.pb-ui .life-dashboard { max-width: none; margin: 0; width: 100%; }
.pb-ui .life-section { margin-bottom: 0; }
/* Several counter rows (e.g. /stats: Life, Poland): clear space between them. */
.pb-ui .life-section + .life-section { margin-top: clamp(40px, 5vw, 120px); }
.pb-ui .pb-flag { display: inline-block; width: 1.2em; height: .75em; margin-right: .35em; vertical-align: -.02em; }
/* Oversized numbers: one row spanning the full width, even gaps (size set by JS, see fitStats). */
.pb-ui :is(.life-grid--2, .life-grid--4) {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--g);
	width: 100%;
	position: relative;
}
.pb-ui .life-counter { flex: 0 0 auto; overflow: visible; min-width: 0; }
/* Anton glyphs are taller than a .8 line box, so the label sits clear of the digits. */
.pb-ui .life-counter__label { min-height: 0; margin-bottom: clamp(10px, calc(var(--pb-stat, 120px) * .1), 40px); white-space: nowrap; }
.pb-ui .life-counter__num {
	font-size: var(--pb-stat, clamp(64px, 15vw, 400px));
	line-height: .86;
	padding-top: .04em;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
	.pb-ui :is(.life-grid--2, .life-grid--4) {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: space-between;
		align-items: end;
		row-gap: 28px;
	}
	.pb-ui .life-counter__label { white-space: normal; max-width: 9em; }
}
.pb-top__main .pb-text { margin-top: clamp(12px, 1.9vw, 32px); }
/* The huge counter digits overhang their boxes and swallowed the hover/click on «все цифры». */
.pb-top__main .pb-text { position: relative; z-index: 2; }
.pb-top__main .pb-text + .pb-text { margin-top: clamp(8px, 1vw, 16px); }

/* --- Project grid (full bleed) ----------------------------------------------- */
.pb-projects .pb-label { max-width: 284px; margin-bottom: 0; position: relative; z-index: 1; }
.pb-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	row-gap: 0;
	margin: 0 calc(var(--g) * -1);
}
.pb-cell {
	--icon-h: clamp(112px, 12.5vw, 300px);   /* 180px @1440 */
	--fs-cell: clamp(12px, .84vw, 18px);
	--title-h: calc(var(--fs-cell) * 1.7);
	--gap: clamp(8px, .7vw, 16px);
	--pad-top: clamp(10px, 1.1vw, 28px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: var(--gap);
	height: calc(var(--pad-top) + var(--icon-h) + var(--gap) + var(--title-h) * 2 + 4px);
	padding: var(--pad-top) 0 0;
	margin: 0;
	border: 0;
	background: none;
	color: #000;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
/* Reset Schematic's global button styles (lowercase, rounded, padded, coloured hover). */
.pb-cell, .pb-cell:hover, .pb-cell:focus, .pb-cell:active,
.pb-panel__close, .pb-panel__close:focus, .pb-panel__close:active {
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
	min-width: 0;
	min-height: 0;
	box-shadow: none;
	transition: none;
}
.pb-cell, .pb-cell:hover, .pb-cell:focus, .pb-cell:active {
	border-radius: 0;
	padding-left: 0;
	padding-right: 0;
	background: none;
	color: #000;
}
.pb-panel__close, .pb-panel__close:focus, .pb-panel__close:active { padding: 0; }
.pb-cell:focus { outline: none; }
.pb-cell:focus-visible { outline: 2px solid var(--pb-red); outline-offset: -2px; }
.pb-cell__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--icon-h);
	padding: 0 6%;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.pb-cell__icon img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
.pb-cell__ph {
	display: block;
	width: 70%;
	height: 100%;
	border-radius: 12px;
	background: #f1f1f1;
}
.pb-cell__title {
	display: block;
	font-family: var(--pb-font);
	font-size: var(--fs-cell);
	font-weight: 400;
	line-height: var(--title-h);
	text-align: center;
	white-space: nowrap;
	transform-origin: 50% 0;
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
/* Hover: icon and title swap places, title doubles in size. */
@media (hover: hover) and (pointer: fine) {
	.pb-cell:hover .pb-cell__title,
	.pb-cell:focus-visible .pb-cell__title {
		transform: translateY(calc((var(--icon-h) + var(--gap)) * -1)) scale(2);
	}
	.pb-cell:hover .pb-cell__icon,
	.pb-cell:focus-visible .pb-cell__icon {
		transform: translateY(calc(var(--title-h) * 2 + var(--gap)));
	}
}

/* --- Project panel ---------------------------------------------------------- */
html.pb-lock, html.pb-lock body { overflow: hidden; }
.pb-panel {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: #fff;
	clip-path: inset(0px 0px 0px 0px);
	transition: clip-path .6s cubic-bezier(.65, 0, .35, 1);
}
.pb-panel[hidden] { display: none; }
.pb-panel__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100%;
}
.pb-panel__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: safe center;   /* long article lists scroll instead of clipping the top */
	gap: min(clamp(20px, 2.36vw, 48px), 3.6vh);
	padding: var(--g) clamp(24px, 5vw, 120px) var(--g) clamp(24px, 10vw, 240px);
	overflow-y: auto;
	font-family: var(--pb-font);
	color: #000;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .4s ease .25s, transform .5s cubic-bezier(.2, .8, .2, 1) .25s;
}
.pb-panel.is-open .pb-panel__info { opacity: 1; transform: none; }
.pb-panel__title {
	margin: 0;
	font-family: var(--pb-font);
	font-size: min(clamp(44px, 5.56vw, 128px), 11vh);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #000;
}
.pb-panel__text {
	max-width: 22em;
	margin: 0;
	font-size: min(clamp(19px, 1.67vw, 36px), 3.4vh);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -0.05em;
}
.pb-panel__link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pb-panel__link-icon {
	display: inline-flex;
	padding: 9px;
	border-radius: 36px;
	background: #000;
	color: #fff;
}
.pb-panel__link:hover { text-decoration: none; }
.pb-panel__label {
	margin: 0;
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	opacity: .3;
}
.pb-panel__articles { display: flex; flex-direction: column; gap: clamp(14px, 1.5vw, 28px); margin: 0; padding: 0; list-style: none; }
.pb-panel__articles.is-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(10px, 1vw, 20px) clamp(16px, 2vw, 40px); width: 100%; }
@media (max-width: 767px) { .pb-panel__articles.is-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pb-panel__articles a {
	font-size: var(--fs-title);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.05em;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.pb-panel__media {
	display: block;
	position: relative;
	overflow: hidden;
	background: #d9d9d9;
}
.pb-panel__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12%;
	transform: scale(1.04);
	transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.pb-panel__media.has-hero img { object-fit: cover; object-position: 50% 0; padding: 0; }
/* Icons are JPGs on white: multiply drops the white box on the grey panel. */
.pb-panel__media:not(.has-hero) img { mix-blend-mode: multiply; }
.pb-panel.is-open .pb-panel__media img { transform: none; }
/* The whole right half links to the project. */
a.pb-panel__media { cursor: pointer; }
.pb-panel.is-open a.pb-panel__media:hover img { transform: scale(1.02); transition-duration: .6s; }
.pb-panel__close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #000;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.pb-panel__close:hover { background: #000; color: #fff; }
@media (prefers-reduced-motion: reduce) {
	.pb-panel, .pb-panel__info, .pb-panel__media img, .pb-cell__icon, .pb-cell__title { transition: none !important; }
}

/* --- First block: intro | свежее | Живое (Threads) | Интересное ---------------- */
.pb-about {
	--fs-intro: clamp(19px, 1.94vw, 46px);    /* 28px @1440, 20px @1020 */
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: var(--g);
	align-items: start;
}
.pb-about.has-live { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
.pb-about__intro { position: sticky; top: 96px; }
.pb-intro {
	font-family: var(--pb-font);
	font-size: var(--fs-intro);
	font-weight: 200;
	line-height: 1.02;
	letter-spacing: -0.05em;
	color: var(--pb-ink);
}

/* --- Threads ("Живое" column): compact cards stacked like the lists ------------ */
.pb-threads { display: flex; flex-direction: column; gap: clamp(10px, .8vw, 16px); }
.pb-thread {
	display: flex;
	flex-direction: column;
	gap: 3px;
	text-decoration: none;
	color: #000;
}
.pb-thread__head { display: flex; align-items: center; gap: 5px; }
.pb-thread__avatar { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; }
.pb-thread__user { font-size: var(--fs-date); font-weight: 700; letter-spacing: .02em; }
.pb-thread__src {
	margin-left: auto;
	font-size: var(--fs-date);
	font-weight: 700;
	font-style: italic;
	color: #8a8a8a;
}
.pb-thread__src::before { content: "@"; font-style: normal; margin-right: 1px; }
.pb-thread__text {
	font-size: var(--fs-title);               /* same grid as article titles: 12 / 14 */
	line-height: 1.2;
	letter-spacing: -0.01em;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pb-thread:hover .pb-thread__text { color: var(--pb-red); }
.pb-thread__meta { display: flex; gap: 10px; font-size: var(--fs-date); color: #8a8a8a; }
.pb-thread__stat { display: inline-flex; align-items: center; gap: 3px; }
.pb-thread__stat svg { width: 12px; height: 12px; }
.pb-admin-note {
	margin: 0 !important;
	padding: 12px 14px;
	border: 1px dashed #ccc;
	font-size: 12px;
	line-height: 1.4;
	color: #666;
}

/* --- Category columns -------------------------------------------------------- */
.pb-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--g);
	row-gap: var(--sec);
}

/* --- Extra: joke + press + quote | links ------------------------------------ */
.pb-extra {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 440px);
	column-gap: var(--g);
	align-items: start;
}
.pb-extra__links { position: sticky; top: 96px; }
.pb-links li { font-size: var(--fs-text); line-height: 1.7; letter-spacing: -0.014em; }
.pb-joke {
	max-width: 30em;
	margin: 0 0 clamp(20px, 2.2vw, 40px);
	font-family: var(--pb-font);
	font-size: clamp(22px, 1.95vw, 44px);
	font-weight: 200;
	line-height: 1.15;
	letter-spacing: -0.04em;
}
.pb-press { display: flex; flex-direction: column; gap: clamp(8px, .8vw, 14px); max-width: 60em; }
.pb-press li { font-size: clamp(14px, 1.04vw, 20px); line-height: 1.45; }
.pb-press .red { color: var(--pb-red); }
/* EN: the extra block is just the quote, oversized, one full screen. */
.pb-bigquote {
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	padding: var(--sec) 0;
}
.pb-bigquote blockquote {
	margin: 0;
	padding: 0 0 0 clamp(16px, 2vw, 40px);
	border-left: clamp(3px, .3vw, 6px) solid var(--pb-red);
}
.pb-bigquote p {
	margin: 0;
	font-family: var(--pb-font);
	font-size: clamp(36px, 6.4vw, 150px);
	font-weight: 200;
	line-height: 1.02;
	letter-spacing: -0.05em;
	color: var(--pb-ink);
	text-wrap: balance;
}
.pb-quote {
	max-width: 40em;
	margin: clamp(28px, 3.3vw, 64px) 0 0;
	padding: 0 0 0 clamp(16px, 1.67vw, 32px);
	border-left: 2px solid var(--pb-red);
	font-size: clamp(17px, 1.39vw, 28px);
	font-weight: 200;
	line-height: 1.4;
}

/* --- Misc list ----------------------------------------------------------------- */
.pb-misc__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 17vw, 360px), 1fr));
	column-gap: var(--g);
	row-gap: clamp(12px, 1.1vw, 22px);
}

/* ==========================================================================
   Breakpoints (layout only; sizes are fluid above)
   ========================================================================== */
/* 4 columns stay in one row down to 1020px: the intro column narrows and its type shrinks. */
@media (min-width: 1020px) and (max-width: 1599px) {
	.pb-about.has-live { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(24px, 3.2vw, 64px); }
	.pb-about.has-live .pb-intro { font-size: clamp(19px, 1.9vw, 30px); }
}
@media (max-width: 1019px) {
	.pb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pb-cell { --icon-h: clamp(110px, 18vw, 180px); --fs-cell: 12px; }
	.pb-about, .pb-about.has-live { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: calc(var(--sec) * .7); }
	.pb-about__intro { grid-column: 1 / -1; position: static; }
	.pb-intro { --fs-intro: clamp(28px, 4vw, 40px); max-width: 20em; }
	.pb-about__live { grid-column: 1 / -1; }
	.pb-about__live .pb-threads { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--g); }
	.pb-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-extra { grid-template-columns: 1fr; row-gap: var(--sec); }
	.pb-extra__links { position: static; }
}
@media (max-width: 767px) {
	.pb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pb-cell { --icon-h: clamp(96px, 30vw, 150px); height: auto; padding-bottom: 12px; }
	.pb-about, .pb-about.has-live { grid-template-columns: minmax(0, 1fr); }
	.pb-about > * { min-width: 0; }
	/* Phone: plain reading size, so the intro and the first articles fit on the first screen. */
	.pb-intro { --fs-intro: 17px; font-weight: 400; line-height: 1.4; letter-spacing: -0.01em; max-width: none; }
	/* Phone: only the top thread. */
	.pb-about__live .pb-threads { display: block; }
	.pb-about__live .pb-threads > :nth-child(n+2) { display: none; }
	.pb-cats { grid-template-columns: 1fr; }
	.pb-panel__body { grid-template-columns: 1fr; grid-template-rows: 42vh auto; overflow-y: auto; }
	.pb-panel__media { order: -1; }
	.pb-panel__info { justify-content: flex-start; padding: 32px 20px 48px; overflow: visible; }
}

/* ==========================================================================
   Single posts (body.pb-article): one centred column of fixed width
   (680px, 760px from 1600px); type and spacing scale with the viewport.
   ========================================================================== */

.pb-article {
	--fs-body: clamp(17px, calc(.95rem + .3vw), 22px);
	--col: 680px;                             /* fixed measure, centred: ~65 characters */
}
@media (min-width: 1600px) {
	.pb-article { --col: 760px; }
}

/* Header on every inner page (posts, categories, pages): logo on the left at every width, search + burger on the right. */
.pb-inner .cs-header__inner { justify-content: flex-start; }
.pb-inner .cs-header__inner .cs-logo { position: static; transform: none; order: 0; }
.pb-inner .cs-header__inner .cs-col-right { order: 1; margin-left: auto; margin-right: clamp(14px, 1.2vw, 28px); }
.pb-inner .cs-header__inner .cs-header__search-toggle { justify-content: flex-end; }

/* No share buttons or admin notices around the text. */
.pb-article .pk-share-buttons-wrap,
.pb-article .cs-metabar__area,
.pb-article .cs-entry__after-share-buttons,
.pb-article .pk-alert,
.pb-article .cs-breadcrumbs { display: none !important; }

/* Column starts right under the header, centred. */
/* The theme reserves a 96px grid column for the share bar and shifts the text 96px left; the bar is hidden, so undo both. */
.pb-article .cs-main-content { display: block !important; transform: none !important; }
/* Covers keep the type set per post (full / large / standard ...); only plain headers are restyled. */
.pb-article .cs-site-content { margin-bottom: var(--sec); }
.pb-article .cs-site-content:not(.cs-singular-header-full) { margin-top: clamp(8px, 1.2vw, 32px); }
.pb-article .cs-site-content > .cs-container,
.pb-article .cs-entry__header-full .cs-container {
	max-width: none;
	width: 100%;
	padding-left: var(--g);
	padding-right: var(--g);
}
.pb-article .cs-site-content:not(.cs-singular-header-full) .cs-main-content,
.pb-article .cs-content-area,
.pb-article .cs-entry__wrap,
.pb-article .cs-entry__container,
.pb-article .cs-entry__content-wrap {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	display: block;
}
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title),
.pb-article .cs-entry__content-wrap {
	font-size: var(--fs-body);
	max-width: var(--col);
	margin-left: auto !important;
	margin-right: auto !important;
}
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) { margin-top: 0; margin-bottom: clamp(24px, 2.4vw, 48px); padding: 0; }

/* Title block */
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) .cs-entry__header-info { padding: 0; margin: 0; max-width: none; text-align: left; }
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) .cs-entry__title {
	margin: .25em 0 0;
	font-family: var(--pb-font);
	font-size: clamp(30px, 3.4vw, 72px);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.045em;
	color: #000;
	text-wrap: balance;
}
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) .cs-entry__post-meta,
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) .cs-entry__post-meta a {
	font-size: var(--fs-date);
	font-weight: 700;
	letter-spacing: .076em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) .cs-entry__post-media { margin: clamp(20px, 2vw, 40px) 0 0; }
.pb-article :is(.cs-entry__header-standard, .cs-entry__header-title) .cs-entry__post-media img { display: block; width: 100%; height: auto; }

/* Posts without a full-screen cover: on wide screens the title sits in the header row, level with the logo
   (the centred column clears the logo from 1280px). Meta goes under the title. */
@media (min-width: 1280px) {
	.pb-article .cs-site-content:is(.cs-singular-header-standard, .cs-singular-header-title) {
		--pb-hh: 120px;                                   /* header row height */
		--pb-tfs: clamp(30px, 3.4vw, 72px);
		margin-top: calc(-1 * var(--pb-hh));
	}
	/* At the top of the page the header is see-through so the title shows between logo and icons;
	   once the header turns sticky (scrolling up) it gets its white background back. */
	body.pb-article:has(.cs-singular-header-standard, .cs-singular-header-title) .cs-header:not(.cs-scroll-sticky),
	body.pb-article:has(.cs-singular-header-standard, .cs-singular-header-title) .cs-header:not(.cs-scroll-sticky) .cs-header__inner { background: transparent !important; }
	.pb-article :is(.cs-singular-header-standard, .cs-singular-header-title) .cs-entry__header {
		padding-top: calc(var(--pb-hh) / 2 - var(--pb-tfs) * 1.02 / 2);
	}
	.pb-article :is(.cs-singular-header-standard, .cs-singular-header-title) .cs-entry__header-info { display: flex; flex-direction: column; }
	.pb-article :is(.cs-singular-header-standard, .cs-singular-header-title) .cs-entry__title { order: -1; margin: 0 0 .5em; font-size: var(--pb-tfs); }
}

/* Body text */
.pb-article .entry-content {
	font-family: var(--pb-font);
	font-size: 1em;
	line-height: 1.6;
	letter-spacing: -0.006em;
	color: var(--pb-ink);
	hyphens: manual;
}
.pb-article .entry-content > * { margin-top: 0; margin-bottom: 1.1em; max-width: 100%; }
.pb-article .entry-content > *:last-child { margin-bottom: 0; }
.pb-article .entry-content h2,
.pb-article .entry-content h3,
.pb-article .entry-content h4 {
	margin: 1.8em 0 .5em;
	font-family: var(--pb-font);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: #000;
}
.pb-article .entry-content h2 { font-size: 1.6em; }
.pb-article .entry-content h3 { font-size: 1.3em; }
.pb-article .entry-content h4 { font-size: 1.1em; }
.pb-article .entry-content figure { margin: 1.6em 0; }
.pb-article .entry-content figure img { display: block; width: 100%; height: auto; }
.pb-article .entry-content figcaption { margin-top: .6em; font-size: .72em; line-height: 1.35; color: #8a8a8a; text-align: left; }
.pb-article .entry-content blockquote {
	margin: 1.6em 0;
	padding: 0 0 0 1em;
	border-left: 2px solid var(--pb-red);
	font-size: 1.15em;
	font-weight: 200;
	line-height: 1.35;
	letter-spacing: -0.03em;
}
.pb-article .entry-content ul,
.pb-article .entry-content ol { padding-left: 1.2em; }
.pb-article .entry-content li + li { margin-top: .35em; }

/* Links follow the site rule: bold black, hairline underline drawn on hover, red on hover. */
.pb-article .entry-content a { text-decoration: none !important; }
.pb-article .entry-content p a,
.pb-article .entry-content li a,
.pb-article .pb-discuss a {
	color: #000 !important;
	font-weight: 700;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding-bottom: .08em;
	transition: background-size .22s cubic-bezier(.65, 0, .35, 1), color .1s;
}
.pb-article .entry-content p a:hover,
.pb-article .entry-content li a:hover,
.pb-article .pb-discuss a:hover { color: var(--pb-red) !important; background-size: 100% 1px; background-position: 0 100%; }

/* "Обсудить в Threads" */
.pb-article .entry-content > .pb-discuss {
	margin-top: 2.4em;
	padding-top: 1em;
	border-top: 1px solid var(--pb-line);
	font-size: 1em;
}

/* Homepage H1: present for search engines and screen readers, not shown. */
.pb-h1 {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Inner pages (categories, tags, search, pages): same gutter as the header,
   archive header and post grid in the homepage's type system.
   ========================================================================== */
.pb-inner .cs-site-content > .cs-container {
	max-width: none;
	width: 100%;
	padding-left: var(--g);
	padding-right: var(--g);
}
.pb-inner:not(.pb-article) .cs-site-content { margin-top: clamp(8px, 1.2vw, 32px); }

/* Archive header */
.pb-inner .cs-page__header { margin: 0 0 clamp(28px, 3.2vw, 64px); padding: 0; text-align: left; }
.pb-inner .cs-page__subtitle,
.pb-inner .cs-page__archive-count {
	font-family: var(--pb-font);
	font-size: var(--fs-label);
	font-weight: 700;
	letter-spacing: .076em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.pb-inner .cs-page__title {
	margin: .12em 0 .18em;
	font-family: var(--pb-font);
	font-size: clamp(40px, 5.56vw, 128px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #000;
}
.pb-inner .cs-page__title::first-letter { color: inherit; }

/* Post grid: no boxes, just date, title, excerpt */
.pb-inner .cs-posts-area__main.cs-posts-area__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 21vw, 380px), 1fr));
	gap: clamp(32px, 3.2vw, 64px) var(--g);
	margin: 0;
	border: 0 !important;
}
.pb-inner .cs-posts-area__main.cs-posts-area__grid > article {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
.pb-inner .cs-posts-area__main.cs-posts-area__grid > article::before,
.pb-inner .cs-posts-area__main.cs-posts-area__grid > article::after,
.pb-inner .cs-posts-area__main.cs-posts-area__grid::before,
.pb-inner .cs-posts-area__main.cs-posts-area__grid::after { display: none !important; }
.pb-inner .cs-posts-area__main .cs-entry__outer,
.pb-inner .cs-posts-area__main .cs-entry__inner { padding: 0 !important; border: 0 !important; }
.pb-inner .cs-posts-area__main .cs-entry__post-meta,
.pb-inner .cs-posts-area__main .cs-entry__post-meta a {
	font-family: var(--pb-font);
	font-size: var(--fs-date);
	font-weight: 700;
	letter-spacing: .076em;
	text-transform: uppercase;
	color: #8a8a8a;
}
.pb-inner .cs-posts-area__main .cs-entry__title {
	margin: .35em 0 .45em;
	font-family: var(--pb-font);
	font-size: clamp(20px, 1.6vw, 32px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
}
.pb-inner .cs-posts-area__main .cs-entry__title a {
	color: #000 !important;
	text-decoration: none !important;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size .22s cubic-bezier(.65, 0, .35, 1), color .1s;
}
.pb-inner .cs-posts-area__main .cs-entry__title a:hover { color: var(--pb-red) !important; background-size: 100% 1px; background-position: 0 100%; }
.pb-inner .cs-posts-area__main .cs-entry__excerpt {
	font-family: var(--pb-font);
	font-size: clamp(14px, .95vw, 18px);
	line-height: 1.45;
	color: #555;
}