/*
 * Yak Kharka: base.css. Structure only: layout, widths, spacing and type scales, neutral colours,
 * and the content patterns of 15 years of posts. A design (assets/variants/<key>/variant.css) loads
 * after this file and changes the look by overriding the custom properties below and by drawing in
 * the ornament slots (.yk-orn--*). See DESIGN-HOOKS.md for every hook point.
 *
 * Sections: 1 tokens · 2 reset and type · 3 page frame · 4 masthead · 5 header image · 6 headings
 * of pages · 7 content · 8 embeds and plugins · 9 post lists · 10 single post extras · 11 index
 * pages · 12 front page · 13 random photos · 14 footer · 15 ornaments · 16 small screens.
 */

/* 1. Tokens ------------------------------------------------------------------------------------ */
:root {
	/* Colours: neutral greys here; a variant sets its own palette. */
	--yk-ground: #f7f7f5;      /* page background */
	--yk-paper: #ffffff;       /* raised surfaces: header desc, captions on photos */
	--yk-ink: #2a2a2a;         /* text */
	--yk-muted: #686868;       /* dates, counts, captions */
	--yk-line: #cfcfcb;        /* rules, frames */
	--yk-line-soft: #e6e6e2;   /* faint rules */
	--yk-accent: #8c3b2a;      /* the one saturated colour (seal, focus) */
	--yk-link: var(--yk-ink);
	--yk-link-hover: var(--yk-accent);
	--yk-focus: var(--yk-accent);

	/* Fonts. --yk-font-scripts covers the Devanagari, Thai and Lao words in posts with fonts the
	   visitor's system already has; nothing is downloaded for them. */
	--yk-font-text: Georgia, "Times New Roman";
	--yk-font-display: var(--yk-font-text);
	--yk-font-ui: system-ui, -apple-system, "Segoe UI", Roboto;
	--yk-font-scripts: "Nirmala UI", "Noto Sans Devanagari", "Kohinoor Devanagari", "Mangal", "Leelawadee UI", "Noto Sans Thai", "Thonburi", "Lao UI", "Noto Sans Lao", "Lao Sangam MN";
	--yk-root-size: 106.25%;   /* 17px */
	--yk-leading: 1.72;
	--yk-leading-tight: 1.25;
	--yk-weight-heading: 400;

	/* Type scale (ratio about 1.2). */
	--yk-step--2: 0.76rem;
	--yk-step--1: 0.88rem;
	--yk-step-0: 1rem;
	--yk-step-1: 1.18rem;
	--yk-step-2: 1.42rem;
	--yk-step-3: 1.72rem;
	--yk-step-4: 2.1rem;
	--yk-step-5: 2.6rem;

	/* Space scale. */
	--yk-space-3xs: 0.25rem;
	--yk-space-2xs: 0.5rem;
	--yk-space-xs: 0.75rem;
	--yk-space-s: 1rem;
	--yk-space-m: 1.5rem;
	--yk-space-l: 2.25rem;
	--yk-space-xl: 3.5rem;
	--yk-space-2xl: 5.5rem;

	/* Widths. Text keeps --yk-measure; photos, galleries and videos may grow to --yk-wide. */
	--yk-measure: 36rem;
	--yk-wide: 64rem;
	--yk-max: 82rem;           /* masthead, footer */
	--yk-list: 48rem;          /* post lists */
	--yk-gutter: clamp(1rem, 4vw, 2rem);
	--yk-breakout: min(var(--yk-wide), 100cqi - 2 * var(--yk-gutter));

	/* Shapes. */
	--yk-radius: 2px;
	--yk-hairline: 1px;
	--yk-frame-border: var(--yk-hairline) solid var(--yk-line);
	--yk-thumb: 11rem;         /* post list thumbnail width (4:3) */
	--yk-card-min: 15rem;      /* index cards */

	/* Header image strip. */
	--yk-header-ratio: 1000 / 288;
	--yk-header-max-h: clamp(6rem, 30vh, 19rem);
	--yk-header-width: var(--yk-wide);

	/* Random photos: height of a row unit (flex-basis = ratio x this). */
	--yk-photo-unit: 10rem;
}

/* 2. Reset and type ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
	font-size: var(--yk-root-size);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--yk-ground);
	color: var(--yk-ink);
	font-family: var(--yk-font-text), var(--yk-font-scripts), serif;
	line-height: var(--yk-leading);
	overflow-wrap: break-word;
	hyphens: auto;
	-webkit-font-smoothing: antialiased;
}
img, video, svg, iframe { max-width: 100%; }
img { height: auto; border-style: none; }
a { color: var(--yk-link); text-decoration-thickness: var(--yk-hairline); text-underline-offset: 0.18em; }
a:hover { color: var(--yk-link-hover); }
:focus-visible { outline: 2px solid var(--yk-focus); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--yk-font-display), var(--yk-font-scripts), serif;
	font-weight: var(--yk-weight-heading);
	line-height: var(--yk-leading-tight);
	hyphens: manual;
	margin: 0 0 var(--yk-space-s);
}
p { margin: 0 0 var(--yk-space-s); }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.yk-skip:focus {
	position: fixed !important;
	top: var(--yk-space-2xs); left: var(--yk-space-2xs);
	width: auto; height: auto; margin: 0; padding: var(--yk-space-2xs) var(--yk-space-s);
	clip: auto; clip-path: none;
	background: var(--yk-paper); color: var(--yk-ink);
	z-index: 100;
}
.yk-meta-sep { color: var(--yk-muted); }

/* 3. Page frame -------------------------------------------------------------------------------- */
.yk-page {
	container-type: inline-size;   /* 100cqi = page width without the scrollbar */
	container-name: yk-page;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.yk-main {
	flex: 1 0 auto;
	padding: var(--yk-space-l) var(--yk-gutter) var(--yk-space-xl);
}

/* 4. Masthead ---------------------------------------------------------------------------------- */
.yk-masthead { position: relative; }
.yk-masthead__bar {
	max-width: var(--yk-max);
	margin: 0 auto;
	padding: var(--yk-space-s) var(--yk-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--yk-space-2xs) var(--yk-space-m);
}
.yk-site-title {
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--yk-space-2xs);
	font-family: var(--yk-font-display), serif;
	font-size: var(--yk-step-2);
	line-height: 1.1;
	white-space: nowrap;
}
.yk-site-title__link { text-decoration: none; color: var(--yk-ink); }
.yk-nav { flex: 1 1 auto; min-width: 0; }
.yk-nav__list, .yk-colophon__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--yk-space-m);
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
}
.yk-nav__list a, .yk-colophon__list a {
	display: inline-block;
	padding: var(--yk-space-3xs) 0;
	text-decoration: none;
	color: var(--yk-ink);
}
.yk-nav__list .current-menu-item > a,
.yk-nav__list .current_page_item > a,
.yk-nav__list .current_page_parent > a { text-decoration: underline; text-decoration-thickness: var(--yk-hairline); }
.yk-masthead__search { flex: 0 1 14rem; min-width: 9rem; margin-left: auto; }

/* The menu button (header.php). Below 70rem, where the bar would break into two rows, the menu and
   the search fold behind a button and open as an overlay over the page: a popover, so the browser
   opens and closes it (the button, the close button, Esc, a tap outside) without a script. On wider
   screens the wrapper is invisible (display: contents) and the buttons are hidden; browsers without
   popovers keep the two rows. A design draws the two icons by setting the marks' mask image. */
.yk-menu-toggle, .yk-menu-close { display: none; }
.yk-masthead__menu { display: contents; }
@supports selector(:popover-open) {
	@media (max-width: 70rem) {
		.yk-masthead__bar { flex-wrap: nowrap; }
		.yk-menu-toggle, .yk-menu-close {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: none;
			width: 2.75rem;
			height: 2.75rem;
			margin: 0 -0.6rem 0 0;
			padding: 0;
			color: var(--yk-ink);
			background: none;
			border: 0;
			border-radius: var(--yk-radius);
			cursor: pointer;
		}
		.yk-menu-toggle { margin-left: auto; align-self: center; }
		.yk-menu-toggle .yk-orn, .yk-menu-close .yk-orn { display: block; width: 1.5rem; height: 1.5rem; }
		.yk-orn--menu { --yk-orn-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18M3 12h18M3 18h18' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
		.yk-orn--close { --yk-orn-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
		.yk-masthead__menu:not(:popover-open) { display: none; }
		.yk-masthead__menu:popover-open {
			display: flex;
			flex-direction: column;
			gap: var(--yk-space-s);
			position: fixed;
			inset: 0 0 auto 0;
			width: auto;
			max-width: none;
			height: auto;
			max-height: 100dvh;
			overflow-y: auto;
			margin: 0;
			padding: var(--yk-space-2xs) var(--yk-gutter) var(--yk-space-l);
			color: var(--yk-ink);
			background: var(--yk-ground);
			border: 0;
		}
		.yk-menu-close { align-self: flex-end; }
		.yk-masthead__menu .yk-nav { order: 0; flex: none; overflow: visible; margin: 0; padding: 0; }
		.yk-masthead__menu .yk-nav__list { flex-direction: column; flex-wrap: nowrap; gap: 0; white-space: normal; font-size: var(--yk-step-1); }
		.yk-masthead__menu .yk-nav__list a { display: flex; align-items: center; min-height: 2.75rem; padding: var(--yk-space-3xs) 0; }
		.yk-masthead__menu .yk-masthead__search { order: 0; flex: none; min-width: 0; max-width: 24rem; margin: 0; }
		.yk-masthead__menu::backdrop { background: rgb(30 24 18 / 0.3); }
		html:has(.yk-masthead__menu:popover-open) { overflow: hidden; }
	}
}

/* Search form (masthead, search results, 404). */
.yk-search { display: flex; gap: 0; max-width: 24rem; }
.yk-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.4rem;
	padding: 0.3rem 0.6rem;
	font: inherit;
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-ink);
	background: var(--yk-paper);
	border: var(--yk-hairline) solid var(--yk-line);
	border-right: 0;
	border-radius: var(--yk-radius) 0 0 var(--yk-radius);
}
.yk-search__button {
	flex: 0 0 auto;
	min-height: 2.4rem;
	padding: 0.3rem 0.7rem;
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-ink);
	background: var(--yk-line-soft);
	border: var(--yk-hairline) solid var(--yk-line);
	border-radius: 0 var(--yk-radius) var(--yk-radius) 0;
	cursor: pointer;
}
.yk-search__button:hover { color: var(--yk-link-hover); }

/* 5. Header image ------------------------------------------------------------------------------ */
.yk-header-image {
	position: relative;
	width: 100%;   /* a flex item of .yk-page: auto margins alone would shrink it to its content */
	max-width: var(--yk-header-width);
	margin: 0 auto;
}
.yk-header-image__inner { display: block; position: relative; color: inherit; text-decoration: none; }
.yk-header-image__frame {
	display: block;
	/* The strip's height follows its width (the ratio), capped at --yk-header-max-h. Not done with
	   aspect-ratio + max-height, which would narrow the strip instead of cropping the photo. */
	height: min(var(--yk-header-max-h), min(var(--yk-header-width), 100cqi) / (var(--yk-header-ratio)));
	overflow: hidden;
}
.yk-header-image__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yk-header-image__desc {
	display: block;
	margin-top: var(--yk-space-2xs);
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	line-height: 1.4;
	color: var(--yk-muted);
}
/* A description is a caption line under the photo, so it can be read on touch screens, with the
   keyboard and when the header has no link. Only a linked header on a device with a real mouse (and
   no touch screen) shows it over the photo, on hover or keyboard focus. Browsers that do not know
   this query keep the caption line. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
	.yk-header-image--linked .yk-header-image__desc {
		position: absolute;
		left: var(--yk-space-s);
		bottom: var(--yk-space-s);
		max-width: calc(100% - 2 * var(--yk-space-s));
		margin: 0;
		padding: var(--yk-space-3xs) var(--yk-space-xs);
		color: var(--yk-ink);
		background: var(--yk-paper);
		background: color-mix(in srgb, var(--yk-paper) 88%, transparent);
		border-radius: var(--yk-radius);
		opacity: 0;
		transition: opacity 0.25s ease;
	}
	.yk-header-image--linked:hover .yk-header-image__desc,
	.yk-header-image__inner:focus-visible .yk-header-image__desc { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .yk-header-image__desc { transition: none; } }

/* 6. Headings of pages ------------------------------------------------------------------------- */
.yk-page-header, .yk-entry__header {
	max-width: var(--yk-measure);
	margin: 0 auto var(--yk-space-l);
}
.yk-page-header__kicker {
	margin: 0 0 var(--yk-space-3xs);
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-muted);
}
.yk-page-header__title, .yk-entry__title { font-size: var(--yk-step-4); margin-bottom: var(--yk-space-xs); }
.yk-page-header__lede { color: var(--yk-muted); }
.yk-page-header__lede > :last-child { margin-bottom: 0; }
.yk-page-header__count { font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); }
.yk-entry__meta {
	margin: 0;
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-muted);
}
.yk-entry__meta a { color: var(--yk-muted); }

/* 7. Content (posts and pages) ------------------------------------------------------------------ */
.yk-content {
	max-width: var(--yk-measure);
	margin: 0 auto;
}
.yk-content::after { content: ""; display: table; clear: both; }
.yk-content > :last-child { margin-bottom: 0; }
.yk-content blockquote {
	margin: var(--yk-space-m) 0;
	padding: 0 0 0 var(--yk-space-m);
	border-left: var(--yk-hairline) solid var(--yk-line);
	color: var(--yk-ink);
	font-style: italic;
}
.yk-content blockquote > :last-child { margin-bottom: 0; }
.yk-content ul, .yk-content ol { margin: 0 0 var(--yk-space-s); padding-left: 1.4em; }
.yk-content li { margin-bottom: var(--yk-space-3xs); }
.yk-content hr {
	height: 0;
	margin: var(--yk-space-l) auto;
	border: 0;
	border-top: var(--yk-hairline) solid var(--yk-line);
	width: 30%;
}
.yk-content del { color: var(--yk-muted); text-decoration-thickness: var(--yk-hairline); }
.yk-content code {
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.88em;
	overflow-wrap: anywhere;
}
.yk-content sup { line-height: 0; }
.yk-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--yk-space-m);
	font-size: var(--yk-step--1);
}
.yk-content th, .yk-content td {
	padding: var(--yk-space-2xs) var(--yk-space-xs);
	border-bottom: var(--yk-hairline) solid var(--yk-line-soft);
	text-align: left;
	vertical-align: top;
}

/* Images and captions. Old images are 300-625 px and sit at their size; big new ones may grow to
   --yk-breakout when centred. */
.yk-content img { vertical-align: middle; }
.yk-content .aligncenter, .yk-content img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.yk-content .alignleft { float: left; margin: 0.35em var(--yk-space-m) var(--yk-space-s) 0; max-width: 50%; }
.yk-content .alignright { float: right; margin: 0.35em 0 var(--yk-space-s) var(--yk-space-m); max-width: 50%; }
.yk-content .alignnone { margin: 0 0 var(--yk-space-s); }
.yk-content .wp-caption { margin-top: var(--yk-space-m); margin-bottom: var(--yk-space-m); max-width: 100%; }
.yk-content .wp-caption img { display: block; max-width: 100%; height: auto; margin: 0; }
.yk-content .wp-caption.aligncenter {
	max-width: var(--yk-breakout);
	margin-left: 50%;
	translate: -50% 0;
}
.yk-content .wp-caption.alignleft { margin-top: 0.35em; }
/* Big photos (inc/setup.php marks them yk-img--big, with their shape --yk-r and largest width --yk-w)
   grow past the text up to --yk-breakout, never taller than 80% of the screen, never past their own
   file's width. The caption keeps to the photo's width (contain: inline-size). */
.yk-content .wp-caption.aligncenter:has(img.yk-img--big) { width: fit-content !important; max-width: var(--yk-breakout); }
.yk-content .wp-caption:has(img.yk-img--big) .wp-caption-text { contain: inline-size; }
.yk-content img.yk-img--big { width: min(var(--yk-breakout), 80svh * var(--yk-r, 1.5), var(--yk-w, 100%)); max-width: none; height: auto; }
.yk-content .wp-caption:not(.aligncenter) img.yk-img--big { width: 100%; max-width: 100%; }
.yk-content img.yk-img--big.aligncenter { margin-left: 50%; translate: -50% 0; }
.yk-content .yk-col img.yk-img--big { width: 100%; max-width: 100%; margin-left: 0; translate: none; }
.yk-content .yk-col .wp-caption.aligncenter { max-width: 100%; margin-left: auto; margin-right: auto; translate: none; }
.yk-content .wp-caption-text, .yk-content figcaption {
	margin: var(--yk-space-2xs) 0 0;
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	line-height: 1.45;
	color: var(--yk-muted);
}
.yk-content .wp-caption.aligncenter .wp-caption-text { text-align: center; }
.yk-content a > img, .yk-content .wp-caption img, .yk-frame { border: var(--yk-frame-border); border-radius: var(--yk-radius); }

/* Core [gallery] (one post). */
.yk-content .gallery { display: grid; grid-template-columns: repeat(var(--yk-gallery-cols, 3), minmax(0, 1fr)); gap: var(--yk-space-xs); margin: 0 0 var(--yk-space-m); }
.yk-content .gallery-columns-2 { --yk-gallery-cols: 2; }
.yk-content .gallery-columns-4 { --yk-gallery-cols: 4; }
.yk-content .gallery-columns-5 { --yk-gallery-cols: 5; }
.yk-content .gallery-item { margin: 0; }
.yk-content .gallery-item img { display: block; width: 100%; height: auto; }

/* The latest-posts block (page "Najnowsze" when it is not the posts page). */
.yk-content .wp-block-latest-posts { list-style: none; padding: 0; }
.yk-content .wp-block-latest-posts li { margin-bottom: var(--yk-space-s); }
.yk-content .wp-block-latest-posts__post-date { display: block; font-size: var(--yk-step--1); color: var(--yk-muted); }

/* 8. Embeds and plugins ------------------------------------------------------------------------- */
.yk-embed { margin: var(--yk-space-m) 0; }
/* Until a lazy video loads, its box is a quiet paper patch, not a hole. */
.yk-embed--video, .yk-content .yk-video { background: var(--yk-line-soft); }
/* Videos may run wider than the text. */
.yk-embed--video {
	width: var(--yk-breakout);
	margin-left: calc((100% - var(--yk-breakout)) / 2);
	margin-right: calc((100% - var(--yk-breakout)) / 2);
}
.yk-embed iframe, .yk-content iframe[src*="youtube"]:not(td iframe) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.yk-embed--audio iframe, .yk-content iframe[src*="soundcloud"] { display: block; width: 100%; aspect-ratio: auto; border: 0; }
.yk-content iframe[src*="soundcloud"]:not(.yk-embed iframe) { margin-block: var(--yk-space-m); }
.yk-content iframe { border: 0; }
.yk-content .wp-video, .yk-content .wp-video .mejs-container { max-width: 100%; }
.yk-content video { height: auto; }

/* NextGEN (stays until O-10). Its own CSS and JS still run. Thumbnail galleries and albums may run
   wider than the text, like big photos. The Tile galleries (.tiled-gallery) stay in the column: their
   script only scales rows down from the 625 px they were laid out for, never up, so a wider box
   would leave them pushed to the left. O-10 replaces them. */
.yk-content .ngg-galleryoverview { margin-top: var(--yk-space-m); margin-bottom: var(--yk-space-m); }
.yk-content .ngg-pro-mosaic-container, .yk-content .ngg-galleryoverview, .yk-content .ngg-albumoverview {
	width: var(--yk-breakout);
	max-width: none;
	margin-left: 50%;
	translate: -50% 0;
}
.yk-content .ngg-gallery-thumbnail img, .yk-content .ngg-singlepic { max-width: 100%; height: auto; }
.yk-content .tiled-gallery { margin-top: var(--yk-space-m); margin-bottom: var(--yk-space-m); max-width: 100%; }
.yk-content .tiled-gallery a > img, .yk-content .ngg-gallery-thumbnail a > img, .yk-content .ngg-albumoverview img { border: 0; border-radius: 0; }
.yk-content .ngg-album { margin-bottom: var(--yk-space-m); }

/* TablePress (Filmy, Tłumaczenia). The wrapper (inc/setup.php) scrolls sideways when a table is wider than the column. */
.yk-content .yk-table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 var(--yk-space-m); }
/* Fixed layout: equal columns, so the video iframes in the cells (Filmy) shrink with the page
   instead of pushing it sideways. */
.yk-content .tablepress { width: 100%; }
.yk-content .tablepress:has(iframe) { table-layout: fixed; }
.yk-content .tablepress td, .yk-content .tablepress th { overflow-wrap: break-word; hyphens: auto; }
.yk-content .tablepress-table-name { font-size: var(--yk-step-1); margin-top: var(--yk-space-l); }
.yk-content .tablepress iframe { max-width: 100%; }
/* A table of videos (Filmy) takes the wide measure; on phones its cells stack, one video a row. */
.yk-content .yk-table-scroll:has(iframe) { width: var(--yk-breakout); max-width: none; margin-left: 50%; translate: -50% 0; }
.yk-content table:has(iframe) td { min-width: 12rem; }
.yk-content table:has(iframe) iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.yk-content table:has(iframe) .yk-video { max-width: none !important; }
.yk-content .dataTables_wrapper { font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); }

/* [su_row] columns (mu-plugin yk-shortcodes brings their layout). Photos fill their column, so photos
   of different sizes side by side line up at the top and share a width. */
.yk-content .yk-row { margin-top: var(--yk-space-m); align-items: flex-start; }
.yk-content .yk-col img { width: 100%; height: auto; }
.yk-content .yk-col .wp-caption { width: auto !important; }

/* 9. Post lists -------------------------------------------------------------------------------- */
.yk-list > .yk-page-header { max-width: var(--yk-list); }
.yk-postlist { max-width: var(--yk-list); margin: 0 auto; }
.yk-postrow {
	position: relative;
	display: grid;
	grid-template-columns: var(--yk-thumb) minmax(0, 1fr);
	gap: var(--yk-space-m);
	align-items: start;
	padding: var(--yk-space-m) 0;
}
.yk-postrow__thumb--empty { background: none; }   /* 359 of 610 posts have no image; the slot stays for alignment and for a mark */
.yk-postrow__thumb { aspect-ratio: 4 / 3; overflow: hidden; background: var(--yk-line-soft); }
.yk-postrow__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yk-postrow__title { font-size: var(--yk-step-1); margin: 0 0 var(--yk-space-3xs); }
.yk-postrow__link { text-decoration: none; }
.yk-postrow__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.yk-postrow:hover .yk-postrow__link { color: var(--yk-link-hover); }
.yk-postrow__meta {
	margin: 0 0 var(--yk-space-2xs);
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-muted);
}
.yk-postrow__excerpt { margin: 0; font-size: var(--yk-step--1); line-height: 1.6; }

/* Paging. */
.yk-paging {
	max-width: var(--yk-list);
	margin: var(--yk-space-l) auto 0;
	padding-top: var(--yk-space-s);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--yk-space-s);
	font-family: var(--yk-font-ui), sans-serif;
}
.yk-paging__prev { justify-self: start; }
.yk-paging__next { justify-self: end; }
.yk-paging__count { font-size: var(--yk-step--1); color: var(--yk-muted); }
.yk-paging a, .yk-post-nav a { display: inline-block; padding: var(--yk-space-2xs) 0; }

.yk-nothing { max-width: var(--yk-measure); margin: 0 auto; }

/* 10. Single post extras ----------------------------------------------------------------------- */
.yk-entry__footer {
	max-width: var(--yk-measure);
	margin: var(--yk-space-l) auto 0;
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-muted);
}
.yk-entry__tags a { color: var(--yk-muted); }
.yk-post-nav {
	max-width: var(--yk-measure);
	margin: var(--yk-space-xl) auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--yk-space-m);
	font-size: var(--yk-step--1);
}
.yk-post-nav__next { text-align: right; }
.yk-post-nav a { text-decoration: none; }
.yk-post-nav__label { display: block; font-family: var(--yk-font-ui), sans-serif; color: var(--yk-muted); }
.yk-post-nav__title { text-decoration: underline; text-decoration-thickness: var(--yk-hairline); }

.yk-comments { max-width: var(--yk-measure); margin: var(--yk-space-xl) auto 0; }
.yk-comments__title { font-size: var(--yk-step-1); }
.yk-comments__list, .yk-comments__list .children { list-style: none; margin: 0; padding: 0; }
.yk-comments__list .children { padding-left: var(--yk-space-m); }
.yk-comment__body { padding: var(--yk-space-s) 0; border-top: var(--yk-hairline) solid var(--yk-line-soft); }
.yk-comment__meta { margin: 0 0 var(--yk-space-2xs); font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); color: var(--yk-muted); }
.yk-comment__author { color: var(--yk-ink); }
.yk-comment__text { font-size: var(--yk-step--1); }
.yk-comment--ping .yk-comment__meta { margin: 0; }
.yk-comments__closed { font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); color: var(--yk-muted); }

/* 11. Index pages (Relacje, Galerie, Tagi) ----------------------------------------------------- */
.yk-index { max-width: var(--yk-wide); margin: 0 auto; }
.yk-index > .yk-page-header { max-width: var(--yk-wide); }
.yk-index__group { margin: 0 0 var(--yk-space-xl); }
.yk-index__group-title { font-size: var(--yk-step-2); margin-bottom: var(--yk-space-m); }
.yk-index__group-title a { text-decoration: none; }
.yk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(var(--yk-card-min), 100%), 1fr));
	gap: var(--yk-space-l) var(--yk-space-m);
}
.yk-card { position: relative; }
.yk-card__cover { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: var(--yk-space-xs); background: var(--yk-line-soft); }
.yk-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yk-card--no-cover::before { content: ""; display: block; aspect-ratio: 4 / 3; margin-bottom: var(--yk-space-xs); background: var(--yk-line-soft); border-radius: var(--yk-radius); }
.yk-card__title { font-size: var(--yk-step-0); margin: 0 0 var(--yk-space-3xs); }
.yk-card__link { text-decoration: none; }
.yk-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.yk-card:hover .yk-card__link { color: var(--yk-link-hover); }
.yk-card__meta { margin: 0; font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); color: var(--yk-muted); }

.yk-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--yk-space-2xs) var(--yk-space-m);
	align-items: baseline;
}
.yk-tags__item { white-space: nowrap; }
.yk-tags__count { margin-left: 0.3em; font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--2); color: var(--yk-muted); }
.yk-tags__item--w1 { font-size: var(--yk-step--1); }
.yk-tags__item--w2 { font-size: var(--yk-step-0); }
.yk-tags__item--w3 { font-size: var(--yk-step-1); }
.yk-tags__item--w4 { font-size: var(--yk-step-2); }
.yk-tags__item--w5 { font-size: var(--yk-step-3); }

/* 12. Front page ------------------------------------------------------------------------------- */
.yk-front { max-width: var(--yk-wide); margin: 0 auto; }
.yk-front-section { position: relative; margin: 0 auto; padding: var(--yk-space-l) 0; }
.yk-front-section__title { font-size: var(--yk-step-2); }
.yk-front-section__more { margin: var(--yk-space-s) 0 0; font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); }
.yk-front__intro { text-align: center; padding-top: var(--yk-space-m); }
.yk-front__greeting { font-size: var(--yk-step-5); margin-bottom: var(--yk-space-l); }
.yk-front__latest .yk-postlist, .yk-front__latest .yk-front-section__title, .yk-front__latest .yk-front-section__more { max-width: var(--yk-list); margin-left: auto; margin-right: auto; }
.yk-front__latest .yk-front-section__more { text-align: right; }

.yk-quote { margin: 0 auto var(--yk-space-l); max-width: var(--yk-measure); }
.yk-quote__text { margin: 0; }
.yk-quote__text > :last-child { margin-bottom: 0; }
.yk-quote__source { margin-top: var(--yk-space-s); font-size: var(--yk-step--1); color: var(--yk-muted); }
.yk-quote--lead { font-size: var(--yk-step-1); text-align: left; }
.yk-quote--lead .yk-quote__source { text-align: right; }
.yk-front__quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), var(--yk-measure))); justify-content: center; gap: var(--yk-space-l); }
.yk-front__quotes .yk-quote { margin: 0; }

.yk-ways {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
	gap: var(--yk-space-m);
}
.yk-ways__item { position: relative; padding: var(--yk-space-s) 0; border-top: var(--yk-hairline) solid var(--yk-line); }
.yk-ways__link { display: block; font-size: var(--yk-step-2); text-decoration: none; }
.yk-ways__link::after { content: ""; position: absolute; inset: 0; }
.yk-ways__note { font-family: var(--yk-font-ui), sans-serif; font-size: var(--yk-step--1); color: var(--yk-muted); }

/* 13. Random photos: a justified mosaic by default (each photo grows by its aspect ratio), not a
   grid. A design may restyle .yk-photos freely: items carry --i (position) and --ratio. */
.yk-photos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--yk-space-2xs);
}
.yk-photos::after { content: ""; flex-grow: 100000; }
.yk-photos__item {
	position: relative;
	flex: calc(var(--ratio, 1.5) * 100) 1 calc(var(--ratio, 1.5) * var(--yk-photo-unit));
	min-width: 0;
}
.yk-photos__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.yk-photos__frame { display: block; height: 100%; aspect-ratio: var(--ratio, 1.5); overflow: hidden; }
.yk-photos__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.yk-photos__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: var(--yk-space-3xs) var(--yk-space-2xs);
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--2);
	line-height: 1.35;
	background: var(--yk-paper);
	background: color-mix(in srgb, var(--yk-paper) 88%, transparent);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.yk-photos__link:hover .yk-photos__caption, .yk-photos__link:focus-visible .yk-photos__caption { opacity: 1; }

/* 14. Footer ----------------------------------------------------------------------------------- */
.yk-colophon {
	position: relative;
	padding: var(--yk-space-l) var(--yk-gutter) var(--yk-space-xl);
	text-align: center;
	font-family: var(--yk-font-ui), sans-serif;
	font-size: var(--yk-step--1);
	color: var(--yk-muted);
}
.yk-colophon__nav { max-width: var(--yk-max); margin: 0 auto var(--yk-space-s); }
.yk-colophon__list { justify-content: center; }
.yk-colophon__line { margin: 0; }
.yk-colophon a { color: var(--yk-muted); }

/* 404. */
.yk-404 { max-width: var(--yk-measure); margin: 0 auto; }
.yk-404__home { margin-top: var(--yk-space-m); }

/* 15. Ornaments. Every .yk-orn is an empty, aria-hidden slot, hidden until a design shows it.
   To draw an SVG mark in the text colour, a design shows the slot and sets its mask image, e.g. in
   assets/variants/<key>/variant.css:
     .yk-orn--end { display: block; width: 3rem; height: 1rem; margin: auto;
                    -webkit-mask-image: url(marks/end.svg); mask-image: url(marks/end.svg); }
   The mask paints the SVG's shape with background-color (currentColor by default). Set mask-image
   itself for a file: a relative url() inside --yk-orn-image resolves against this file (assets/css/)
   in Chrome, not against variant.css. --yk-orn-image is for data: URIs. */
.yk-orn {
	display: none;
	background-color: currentColor;
	-webkit-mask: var(--yk-orn-image, none) center / contain no-repeat;
	mask: var(--yk-orn-image, none) center / contain no-repeat;
}
/* Two slots have a plain look in the base so the structure reads: a hairline. */
.yk-orn--row-sep, .yk-orn--section-sep {
	display: block;
	height: 0;
	border-top: var(--yk-hairline) solid var(--yk-line-soft);
	background: none;
	-webkit-mask: none;
	mask: none;
}
.yk-orn--section-sep { max-width: 8rem; margin: var(--yk-space-m) auto; border-top-color: var(--yk-line); }
.yk-postlist--compact .yk-orn--row-sep { border-top-color: var(--yk-line-soft); }

/* 16. Small screens ---------------------------------------------------------------------------- */
@media (max-width: 46rem) {
	:root {
		--yk-leading: 1.62;
		--yk-thumb: 7rem;
		--yk-photo-unit: 6rem;
		--yk-header-ratio: 4 / 1;
	}
	.yk-main { padding-top: var(--yk-space-m); }
	.yk-page-header__title, .yk-entry__title { font-size: var(--yk-step-3); }
	.yk-front__greeting { font-size: var(--yk-step-4); }
	.yk-postrow { gap: var(--yk-space-s); padding: var(--yk-space-s) 0; }
	.yk-postrow__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 40rem) {
	/* Masthead: title and search on one line, the menu as one line that scrolls sideways. */
	.yk-masthead__bar { padding-top: var(--yk-space-2xs); padding-bottom: var(--yk-space-2xs); gap: var(--yk-space-3xs) var(--yk-space-s); }
	.yk-site-title { font-size: var(--yk-step-1); flex: 1 0 auto; }
	.yk-masthead__search { flex: 0 1 11rem; min-width: 0; order: 2; }
	.yk-nav { order: 3; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--yk-gutter)); padding: 0 var(--yk-gutter); }
	.yk-nav::-webkit-scrollbar { display: none; }
	.yk-nav__list { flex-wrap: nowrap; gap: 0 var(--yk-space-s); white-space: nowrap; }
	.yk-nav__list a { padding: var(--yk-space-2xs) 0; min-height: 2.75rem; display: inline-flex; align-items: center; }
	.yk-search__input, .yk-search__button { min-height: 2.75rem; }
	.yk-masthead__search .yk-search__button { padding: 0.3rem 0.5rem; }
	.yk-colophon__list { gap: 0 var(--yk-space-s); }
	.yk-colophon__list a { padding: var(--yk-space-2xs) 0; }
	/* A table of videos on a phone: one column (a video over its caption) per screen, swiped sideways.
	   Not stacked: Filmy has the videos in one row and their captions in the next, so stacking the
	   cells would part each video from its caption. */
	.yk-content .tablepress:has(iframe) { table-layout: auto; width: max-content; }
	.yk-content table:has(iframe) td { width: 78vw; min-width: 78vw; max-width: 78vw; }
	.yk-content .yk-table-scroll:has(iframe) { scroll-snap-type: x proximity; }
	.yk-content table:has(iframe) td { scroll-snap-align: start; }
	.yk-content .yk-table-scroll:has(iframe) { width: auto; margin-left: 0; translate: none; }
	.yk-content .yk-table-scroll:has(iframe) .tablepress-table-name { position: sticky; left: 0; }
}
@media (max-width: 34rem) {
	.yk-content .alignleft, .yk-content .alignright { float: none; display: block; margin: var(--yk-space-s) auto; max-width: 100%; }
	.yk-post-nav { grid-template-columns: 1fr; }
	.yk-post-nav__next { text-align: left; }
	.yk-paging { grid-template-columns: 1fr 1fr; }
	.yk-paging__count { grid-column: 1 / -1; grid-row: 2; text-align: center; }
}