/*
 * Variant "main": the theme's design. Born as the direction "theravada" (2026-11-14) and finished
 * with what the judges borrowed from the other three (see README.md, "Where the design comes from").
 *
 * A sumi-e sketchbook of a journey through Nepal, Laos and Thailand: warm paper, an ink line, robe
 * ochre and deep maroon as the two accents, gold only as a hairline. Every mark is our own brush
 * stroke (marks/*.svg, written by local/tools/marks/gen.py), painted through mask-image in
 * currentColor; flags.svg, lotus.svg, intro.svg and path404.svg carry their own faded colours.
 *
 * Sections: 1 tokens · 2 type · 3 masthead · 4 header image · 5 headings · 6 content · 7 lists
 * · 8 single extras · 9 indexes · 10 front page · 11 random photos · 12 footer, 404 · 13 arrows
 * · 14 tablets and phones.
 */

/* 1. Tokens ------------------------------------------------------------------------------------ */
:root {
	--yk-ground: #f9f5ee;
	--yk-paper: #fffdf8;
	--yk-ink: #2b2621;
	--yk-muted: #6d6257;
	--yk-line: #d6c9b1;
	--yk-line-soft: #ebe3d5;
	--yk-accent: #6f2a28;          /* deep maroon: seals, hover, focus */
	--yk-link: var(--yk-ink);
	--yk-link-hover: #7a2e2a;
	--yk-focus: #6f2a28;

	--th-ochre: #c48a3a;           /* robe ochre: the brush marks (decoration only, 2.7:1) */
	--th-ochre-deep: #94601f;      /* ochre that reads as text on the ground (4.9:1) */
	--th-maroon: #6f2a28;
	--th-gold: #bfa060;            /* gold: hairlines only */
	--th-sketch: #d3c4a8;          /* faint sketches (empty thumbnails, footer ridge) */

	--yk-font-text: "Yk Spectral", "Yk Spectral Fallback", Georgia, "Times New Roman";
	--yk-font-display: "Yk Cormorant", "Yk Cormorant Fallback", Georgia;
	--yk-font-ui: "Yk Alegreya Sans", "Yk Alegreya Sans Fallback", system-ui, "Segoe UI", Roboto;
	--yk-leading: 1.78;
	--yk-leading-tight: 1.18;
	--yk-weight-heading: 500;

	--yk-measure: 35rem;
	--yk-wide: 66rem;
	--yk-max: 78rem;
	--yk-list: 46rem;
	--yk-radius: 1px;
	--yk-thumb: 10.5rem;
	--yk-card-min: 12.5rem;
	/* The header photo: a low band (5 : 1, at most 9rem) as wide as the column of the page under
	   it, so the photo and the page share one edge (Miro, 2026-11-15). The body class
	   yk-header--<column> (inc/header-images.php) says which column; the text column is the default. */
	--yk-header-width: var(--yk-measure);
	--yk-header-ratio: 5 / 1;
	--yk-header-max-h: 9rem;
}
.yk-header--list { --yk-header-width: var(--yk-list); }
.yk-header--wide { --yk-header-width: var(--yk-wide); }

/* 2. Type -------------------------------------------------------------------------------------- */
body { font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; }
::selection { background: #ead6b3; color: var(--yk-ink); }
a { text-decoration-color: var(--yk-line); text-underline-offset: 0.22em; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { letter-spacing: 0.005em; }
strong, b { font-weight: 600; }
/* Cormorant's old-style figures make "11" and "2011" look like "II" and "XI" next to the Roman
   months in post titles ("28 XI 2011"). Wherever the heading face carries numbers: lining figures. */
h1, h2, h3, h4, .yk-postrow__title, .yk-postrow__meta, .yk-entry__meta, .yk-card__title, .yk-card__meta,
.yk-index__group-title, .yk-post-nav__title, .yk-paging, .yk-tags__count, .yk-photos__caption,
.yk-site-title, .yk-header-image__desc { font-variant-numeric: lining-nums tabular-nums; }
/* Links in posts: an underline that can be seen (ochre-deep, 4.9:1 on the paper); the text stays ink. */
.yk-content a { text-decoration-color: var(--th-ochre-deep); }
.yk-content a:hover { text-decoration-color: currentColor; }

/* 3. Masthead: the title with a robe-ochre sun; prayer flags only over the front page ----------- */
/* The masthead stays at the top of the window while the page scrolls ("freeze the top pane", Miro,
   2026-11-15); the header photo after it scrolls away. Once the page has scrolled, a long ochre
   brush hairline with a slow wave fades in under it (a scroll-driven animation; where a browser
   lacks those, the line simply stays). With the admin bar, the masthead sticks under it; on a
   phone the admin bar scrolls away, and so do the front page's prayer flags. */
.yk-masthead {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 20;
	background: var(--yk-ground);
}
.yk-masthead::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.4rem;
	background-color: var(--th-ochre);
	-webkit-mask: url(marks/masthead-rule.svg) center top / max(100%, 100rem) 100% no-repeat;
	mask: url(marks/masthead-rule.svg) center top / max(100%, 100rem) 100% no-repeat;
	opacity: 0.6;
	pointer-events: none;
}
@supports (animation-timeline: scroll()) {
	.yk-masthead::after {
		animation: yk-masthead-rule linear both;
		animation-timeline: scroll(root);
		animation-range: 0 4rem;
	}
	@keyframes yk-masthead-rule { from { opacity: 0; } to { opacity: 0.6; } }
}
@media (max-width: 600px) { .admin-bar .yk-masthead { top: 0; } }
@media (max-width: 40rem) { .yk-is-front .yk-masthead { top: -1.4rem; } }
/* A jump to an anchor (the skip link, a footnote) lands below the masthead, not under it: about its
   height (one row: ~4.7rem; below 70rem the menu is behind a button, ~3.5rem), plus air. Browsers
   without popovers keep two rows below about 68rem (~7.7rem). */
html { scroll-padding-top: 6.5rem; }
@supports not selector(:popover-open) { @media (max-width: 70rem) { html { scroll-padding-top: 9rem; } } }

/* The menu button and the overlay (structure in base.css, below 70rem): brush icons, the menu in
   the display face, larger, and the scroll line along the overlay's lower edge. */
.yk-orn--menu { -webkit-mask-image: url(marks/menu.svg); mask-image: url(marks/menu.svg); }
.yk-orn--close { -webkit-mask-image: url(marks/close.svg); mask-image: url(marks/close.svg); }
.yk-menu-toggle:hover, .yk-menu-close:hover { color: var(--th-ochre-deep); }
.yk-menu-toggle:focus-visible, .yk-menu-close:focus-visible { outline: 2px solid var(--yk-focus); outline-offset: 2px; }
@supports selector(:popover-open) {
	@media (max-width: 70rem) {
		.yk-masthead__bar { align-items: center; }   /* the title and the button on one centre line */
		.yk-masthead__menu:popover-open { padding-bottom: var(--yk-space-l); }
		.yk-masthead__menu:popover-open::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 0.4rem;
			background-color: var(--th-ochre);
			-webkit-mask: url(marks/masthead-rule.svg) center top / max(100%, 100rem) 100% no-repeat;
			mask: url(marks/masthead-rule.svg) center top / max(100%, 100rem) 100% no-repeat;
			opacity: 0.6;
		}
		.yk-masthead__menu .yk-nav__list { font-family: var(--yk-font-display), serif; font-size: 1.6rem; letter-spacing: 0.01em; }
		.yk-masthead__menu .yk-nav__list a { color: var(--yk-ink); }
		.yk-masthead__menu .yk-nav__list .current-menu-item > a,
		.yk-masthead__menu .yk-nav__list .current_page_item > a,
		.yk-masthead__menu .yk-nav__list .current_page_parent > a { text-underline-offset: 0.25em; }
		.yk-masthead__menu:popover-open { transition: opacity 0.2s ease, translate 0.2s ease; }
		@starting-style { .yk-masthead__menu:popover-open { opacity: 0; translate: 0 -0.75rem; } }
	}
}
@media (prefers-reduced-motion: reduce) { .yk-masthead__menu:popover-open { transition: none; } }
.yk-masthead__bar { padding-top: var(--yk-space-s); padding-bottom: var(--yk-space-s); align-items: baseline; }
.yk-is-front .yk-masthead__bar { padding-top: 0.15rem; }
.yk-is-front .yk-orn--masthead-band {
	display: block;
	height: 1.9rem;
	background: url(marks/flags.svg) center top / auto 100% repeat-x;
	-webkit-mask: none;
	mask: none;
	opacity: 0.55;
}
.yk-site-title { font-size: 1.75rem; letter-spacing: 0.01em; align-items: baseline; gap: 0.4rem; }
.yk-site-title__link:hover { color: var(--yk-ink); }
.yk-orn--seal {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	color: var(--th-ochre);
	-webkit-mask-image: url(marks/seal.svg);
	mask-image: url(marks/seal.svg);
	translate: 0 -0.05em;
}
.yk-nav__list { font-size: 0.98rem; letter-spacing: 0.02em; gap: 0 var(--yk-space-m); }
.yk-nav__list a { color: var(--yk-muted); }
.yk-nav__list a:hover { 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 {
	color: var(--yk-ink);
	text-decoration: underline;
	text-decoration-color: var(--th-ochre-deep);   /* 4.9:1: a state must be seen (3:1 at least) */
	text-decoration-thickness: 2px;
	text-underline-offset: 0.42em;
}
/* Search: a single ruled line, no box. */
.yk-search__input {
	background: transparent;
	border: 0;
	border-bottom: var(--yk-hairline) solid var(--yk-line);
	border-radius: 0;
	padding-left: 0.1rem;
	font-size: 0.95rem;
}
.yk-search__input::placeholder { color: #7a6e62; }
.yk-search__input:focus { outline: none; border-bottom-color: var(--th-ochre); }
.yk-search__input:focus-visible { outline: 2px solid var(--yk-focus); outline-offset: 2px; }
.yk-search__button {
	background: transparent;
	border: 0;
	border-bottom: var(--yk-hairline) solid var(--yk-line);
	border-radius: 0;
	color: var(--yk-muted);
	font-size: 0.95rem;
}
.yk-search__button:hover { color: var(--yk-link-hover); }

/* 4. Header image: a print on hand-made paper. The deckled edge (a mask) replaces a frame. The
   photo is an atmosphere, not an accent: printed into the paper, multiplied over the ground at half
   strength, its colours turned down toward the ink's warm brown. A linked photo comes up a little
   on hover or focus, so a mouse can tell it is a link. ---------------------------------------- */
.yk-header-image { padding: 0 var(--yk-gutter); max-width: calc(var(--yk-header-width) + 2 * var(--yk-gutter)); }
.yk-header-image__frame {
	position: relative;
	height: min(var(--yk-header-max-h), min(var(--yk-header-width), 100cqi - 2 * var(--yk-gutter)) / (var(--yk-header-ratio)));
	background: var(--yk-ground);
	-webkit-mask: url(marks/deckle.svg) 0 0 / 100% 100% no-repeat;
	mask: url(marks/deckle.svg) 0 0 / 100% 100% no-repeat;
}
.yk-header-image__img {
	mix-blend-mode: multiply;
	opacity: 0.5;
	filter: saturate(0.55) sepia(0.2) contrast(0.92);
	transition: opacity 0.35s ease;
}
.yk-header-image--linked:hover .yk-header-image__img,
.yk-header-image__inner:focus-visible .yk-header-image__img { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) { .yk-header-image__img { transition: none; } }

/* Sketches: a pair of drawings over the photo, as if sketched on the print in passing (Miro,
   2026-11-15). The larger one makes a corner at the upper right, the smaller one answers it at the
   lower left. Each is an SVG with its colours baked in (marks/sketch/<motif>-tr.svg and -bl.svg,
   both drawn in a 2 : 1 box), multiplied into the print like ink. The boxes take their height from
   the band, so they scale with it; on a phone the band is low, so the lower-left one goes. */
.yk-sketch {
	position: absolute;
	pointer-events: none;
	aspect-ratio: 2 / 1;
	background: no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
}
.yk-sketch--tr { top: 0; right: 0; height: 100%; background-position: right top; }
.yk-sketch--bl { bottom: 0; left: 0; height: 62%; background-position: left bottom; }
@media (max-width: 37.5rem) { .yk-sketch--bl { display: none; } }
/* One pair of rules per motif (YK_THEME_HEADER_SKETCHES in inc/header-images.php). Waves and
   clouds are out of the random pick until they are reworked; ?sketch=waves or ?sketch=clouds
   still shows them on a local copy. */
.yk-header-image--sketch-koi .yk-sketch--tr { background-image: url(marks/sketch/koi-tr.svg); }
.yk-header-image--sketch-koi .yk-sketch--bl { background-image: url(marks/sketch/koi-bl.svg); }
.yk-header-image--sketch-bamboo-leaves .yk-sketch--tr { background-image: url(marks/sketch/bamboo-leaves-tr.svg); }
.yk-header-image--sketch-bamboo-leaves .yk-sketch--bl { background-image: url(marks/sketch/bamboo-leaves-bl.svg); }
.yk-header-image--sketch-sakura .yk-sketch--tr { background-image: url(marks/sketch/sakura-tr.svg); }
.yk-header-image--sketch-sakura .yk-sketch--bl { background-image: url(marks/sketch/sakura-bl.svg); }
.yk-header-image--sketch-cranes .yk-sketch--tr { background-image: url(marks/sketch/cranes-tr.svg); }
.yk-header-image--sketch-cranes .yk-sketch--bl { background-image: url(marks/sketch/cranes-bl.svg); }
.yk-header-image--sketch-pine .yk-sketch--tr { background-image: url(marks/sketch/pine-tr.svg); }
.yk-header-image--sketch-pine .yk-sketch--bl { background-image: url(marks/sketch/pine-bl.svg); }
.yk-header-image--sketch-waves .yk-sketch--tr { background-image: url(marks/sketch/waves-tr.svg); }
.yk-header-image--sketch-waves .yk-sketch--bl { background-image: url(marks/sketch/waves-bl.svg); }
.yk-header-image--sketch-clouds .yk-sketch--tr { background-image: url(marks/sketch/clouds-tr.svg); }
.yk-header-image--sketch-clouds .yk-sketch--bl { background-image: url(marks/sketch/clouds-bl.svg); }
/* The description: a caption line under the photo, after a short ochre stroke (base.css says when). */
.yk-header-image__desc {
	margin-top: 0.45rem;
	padding: 0 0 0 0.6rem;
	font-family: var(--yk-font-display), serif;
	font-style: italic;
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--yk-muted);
	box-shadow: inset 2px 0 0 var(--th-ochre);
}
/* With a link: a small brush arrow after the description says where a click leads. */
.yk-header-image--linked .yk-header-image__desc::after {
	content: "";
	display: inline-block;
	width: 1.3em;
	height: 0.55em;
	margin-left: 0.45em;
	vertical-align: 0.06em;
	background-color: var(--th-ochre);
	-webkit-mask: url(marks/arrow.svg) center / contain no-repeat;
	mask: url(marks/arrow.svg) center / contain no-repeat;
}
/* A linked header with a mouse: the description waits over the photo and shows on hover or focus. */
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
	.yk-header-image--linked .yk-header-image__desc {
		left: 1.1rem;
		bottom: 1.1rem;
		padding: 0.3rem 0.85rem 0.35rem 0.8rem;
		font-size: 1.12rem;
		color: var(--yk-ink);
		background: var(--yk-paper);
		background: color-mix(in srgb, var(--yk-paper) 92%, transparent);
		border-radius: 0;
		translate: 0 0.35rem;
		transition: opacity 0.35s ease, translate 0.35s ease;
	}
	.yk-header-image--linked:hover .yk-header-image__desc,
	.yk-header-image__inner:focus-visible .yk-header-image__desc { translate: 0 0; }
	/* A small ochre sun in the corner says: there is a story here. It sets when the story shows. */
	.yk-header-image--linked.yk-header-image--has-desc .yk-header-image__inner::after {
		content: "";
		position: absolute;
		right: 1rem;
		bottom: 1rem;
		width: 0.7rem;
		height: 0.7rem;
		border-radius: 50%;
		background: var(--th-ochre);
		box-shadow: 0 0 0 3px var(--yk-paper);
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--yk-paper) 70%, transparent);
		transition: opacity 0.35s ease;
	}
	.yk-header-image--linked:hover .yk-header-image__inner::after,
	.yk-header-image__inner:focus-visible::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .yk-header-image__desc, .yk-header-image__inner::after { transition: none; translate: none; } }

/* 5. Headings of pages: Cormorant, an ochre brush stroke under the title ----------------------- */
.yk-page-header__title, .yk-entry__title { font-size: 2.55rem; line-height: 1.1; margin-bottom: 0.2rem; }
.yk-orn--title-after {
	display: block;
	width: 3.4rem;
	height: 0.5rem;
	margin: 0.35rem 0 0.85rem;
	color: var(--th-ochre);
	-webkit-mask-image: url(marks/stroke.svg);
	mask-image: url(marks/stroke.svg);
}
.yk-page-header__kicker {
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--th-ochre-deep);
}
.yk-page-header__lede { font-style: italic; }
.yk-entry__meta, .yk-page-header__count { font-size: 0.95rem; }

/* The head of a post or page, as the New Yorker sets it (Miro chose it out of three, 2026-11-15):
   centred, the post's categories as a kicker above the title (single.php), a larger title, the
   date under the stroke in Cormorant italic, like a dateline. */
.yk-entry__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-bottom: var(--yk-space-xl);
}
.yk-entry__cats {
	margin: 0 0 var(--yk-space-2xs);
	font-family: var(--yk-font-ui), sans-serif;
	font-size: 0.8rem;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.yk-entry__cats a { color: var(--th-ochre-deep); text-decoration: none; }
.yk-entry__cats a:hover { text-decoration: underline; }
.yk-entry__title {
	font-size: 2.9rem;
	line-height: 1.08;
	text-wrap: balance;
	margin-bottom: 0;
}
.yk-entry__header .yk-orn--title-after { margin: var(--yk-space-xs) auto; }
.yk-entry__header .yk-date {
	font-family: var(--yk-font-display), var(--yk-font-scripts), serif;
	font-style: italic;
	font-size: 1.12rem;
	color: var(--yk-muted);
}

/* 6. Content ----------------------------------------------------------------------------------- */
.yk-content blockquote {
	padding-left: var(--yk-space-m);
	border-left: var(--yk-hairline) solid var(--th-gold);
	color: #4a423a;
}
.yk-content li::marker { color: var(--th-ochre); }
/* Section breaks: a dinkus of three ochre seals, for <hr> and for a typed "///" (p.yk-break,
   inc/typography.php), whose text stays for screen readers. */
.yk-content hr,
.yk-content p.yk-break {
	width: 2.6rem;
	height: 0.4rem;
	border: 0;
	margin: var(--yk-space-l) auto;
	background-color: var(--th-ochre);
	-webkit-mask: url(marks/seal.svg) left center / 0.4rem no-repeat, url(marks/seal.svg) center / 0.4rem no-repeat, url(marks/seal.svg) right center / 0.4rem no-repeat;
	mask: url(marks/seal.svg) left center / 0.4rem no-repeat, url(marks/seal.svg) center / 0.4rem no-repeat, url(marks/seal.svg) right center / 0.4rem no-repeat;
}
.yk-content p.yk-break { font-size: 0; line-height: 0; color: transparent; }

/* The drop cap of the first real paragraph (p.yk-lead--initial, inc/typography.php): Cormorant in
   ink, three lines deep (initial-letter where the browser has it, a float sized by hand
   otherwise); not on a lead under three lines. Cormorant has the Polish capitals (Ż Ł Ś Ć Ź). */
.yk-lead--initial:not(.yk-lead--short)::first-letter {
	font-family: var(--yk-font-display), serif;
	font-weight: 500;
	font-style: normal;
	color: var(--yk-ink);
	float: left;
	font-size: 4.65em;
	line-height: 0.82;
	margin: 0.06em 0.08em 0 -0.02em;
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
	.yk-lead--initial:not(.yk-lead--short)::first-letter {
		float: none;
		font-size: inherit;
		line-height: inherit;
		margin: 0 0.32em 0 0;
		-webkit-initial-letter: 3;
		initial-letter: 3;
	}
}
/* An initial that is a word of its own ("Z prawdziwą", "W wieczór") gets a little more room. */
.yk-lead--word:not(.yk-lead--short)::first-letter { margin-right: 0.11em; }
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
	.yk-lead--word:not(.yk-lead--short)::first-letter { margin-right: 0.5em; }
}
/* The lead-in: the first words in small caps. The fonts as fontsource ships them have no small
   caps (no smcp or c2sc), so they are synthesised: capitals at 0.8em, spaced a little. */
.yk-lead-in {
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.08em;
}
.yk-content .wp-caption-text, .yk-content figcaption { font-size: 0.92rem; color: var(--yk-muted); }
.yk-content a > img, .yk-content .wp-caption img, .yk-frame { border-color: var(--yk-line-soft); }

/* TablePress (Filmy, Tłumaczenia): ruled, transparent, the UI face in the head. */
.yk-content .tablepress th, .yk-content .tablepress thead th,
.yk-content .tablepress tfoot th {
	background: transparent;
	border-bottom: var(--yk-hairline) solid var(--th-gold);
	font-family: var(--yk-font-ui), sans-serif;
	font-weight: 500;
	color: var(--yk-ink);
}
.yk-content .tablepress tbody td, .yk-content .tablepress .odd td, .yk-content .tablepress .even td { background: transparent; }
.yk-content .tablepress tbody tr:hover td { background: color-mix(in srgb, var(--yk-paper) 70%, transparent); }
.yk-content .dataTables_wrapper input, .yk-content .dataTables_wrapper select {
	font: inherit;
	color: var(--yk-ink);
	background: transparent;
	border: 0;
	border-bottom: var(--yk-hairline) solid var(--yk-line);
	border-radius: 0;
}
.yk-content .dataTables_wrapper .paginate_button { color: var(--yk-muted) !important; }
.yk-content .dataTables_wrapper .paginate_button.current { color: var(--yk-ink) !important; background: none !important; border: 0 !important; text-decoration: underline; text-decoration-color: var(--th-ochre); }

/* NextGEN album boxes (until O-10): ruled, not boxed. */
.yk-content .ngg-album { border: 0; border-top: var(--yk-hairline) solid var(--yk-line-soft); background: none; padding: var(--yk-space-s) 0 0; }
.yk-content .ngg-albumtitle, .yk-content .ngg-albumtitle a { font-family: var(--yk-font-display), serif; font-weight: 500; font-size: 1.35rem; text-decoration: none; }
.yk-content .ngg-description { font-family: var(--yk-font-ui), sans-serif; color: var(--yk-muted); }
.yk-content .ngg-album, .yk-content .ngg-albumoverview .ngg-album { box-shadow: none; border-left: 0; border-right: 0; border-bottom: 0; }
.yk-content .ngg-albumcontent, .yk-content .ngg-thumbnail { border: 0; box-shadow: none; background: none; padding: 0; }
.yk-content .ngg-thumbnail img, .yk-content .ngg-album img { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
.yk-content .ngg-albumtitle { margin-bottom: var(--yk-space-2xs); padding-bottom: var(--yk-space-3xs); border-bottom: var(--yk-hairline) solid var(--yk-line); }
/* The breadcrumb stays (it is the way back from a gallery to its album), quiet and in sentence case. */
.yk-content .ngg-breadcrumbs { font-family: var(--yk-font-ui), sans-serif; font-size: 0.9rem; color: var(--yk-muted); text-transform: none; }
.yk-content .ngg-breadcrumbs a { color: var(--yk-muted); }
/* The old slideshow link goes: the lightbox of O-10 replaces it. */
.yk-content .slideshowlink, .yk-content .ngg-slideshowlink { display: none; }

/* 7. Lists: rows on tapered hairlines; posts without a picture show a faint sketch -------------- */
.yk-postrow__title { font-size: 1.5rem; line-height: 1.15; margin-bottom: 0.2rem; }
.yk-postrow__meta { font-size: 0.93rem; }
.yk-postrow__excerpt { font-size: 0.95rem; line-height: 1.65; color: #463f37; }
.yk-postrow__thumb { background: var(--yk-line-soft); }
.yk-postrow__thumb--empty { display: grid; place-items: center; background: none; }
.yk-orn--no-thumb {
	display: block;
	width: 78%;
	height: 78%;
	color: var(--th-sketch);
	-webkit-mask-image: url(marks/thumb-ridge.svg);
	mask-image: url(marks/thumb-ridge.svg);
}
.yk-postrow:nth-of-type(3n+2) .yk-orn--no-thumb { -webkit-mask-image: url(marks/thumb-river.svg); mask-image: url(marks/thumb-river.svg); }
.yk-postrow:nth-of-type(3n) .yk-orn--no-thumb { -webkit-mask-image: url(marks/thumb-stupa.svg); mask-image: url(marks/thumb-stupa.svg); }
/* Between rows: a hairline tapered at both ends, as if drawn with a fine brush. */
.yk-orn--row-sep {
	height: 4px;
	border: 0;
	color: var(--yk-line);
	background-color: currentColor;
	-webkit-mask: url(marks/hairline.svg) 0 0 / 100% 100% no-repeat;
	mask: url(marks/hairline.svg) 0 0 / 100% 100% no-repeat;
}

/* Paging: a lotus bud above "strona X z Y". */
.yk-paging { margin-top: var(--yk-space-xl); padding-top: var(--yk-space-m); }
.yk-paging__count { position: relative; }
.yk-orn--paging {
	display: block;
	position: absolute;
	left: 50%;
	bottom: calc(100% + 0.35rem);
	width: 1.7rem;
	height: 1.15rem;
	translate: -50% 0;
	color: var(--th-ochre);
	-webkit-mask-image: url(marks/bud.svg);
	mask-image: url(marks/bud.svg);
}
.yk-paging a { text-decoration: none; color: var(--yk-ink); }
.yk-paging a:hover { color: var(--yk-link-hover); }

/* 8. Single post extras: a stupa closes the post ----------------------------------------------- */
.yk-orn--end {
	display: block;
	width: 3rem;
	height: 3rem;
	margin: var(--yk-space-xl) auto var(--yk-space-l);
	color: var(--th-maroon);
	opacity: 0.88;
	-webkit-mask-image: url(marks/stupa.svg);
	mask-image: url(marks/stupa.svg);
}
/* The end mark: a small maroon seal after the last word of a post, as the New Yorker closes a piece
   (span.yk-endmark, only where nothing follows it; not on pages: "yak [at] yakkharka.net" is no
   article). Where the seal ends the text, the stupa goes: one end mark, not two. */
.yk-endmark { display: none; }
.yk-entry--post .yk-endmark {
	display: inline-block;
	width: 0.52em;
	height: 0.52em;
	margin-left: 0.45em;
	vertical-align: 0.02em;
	background-color: var(--th-maroon);
	-webkit-mask: url(marks/seal.svg) center / contain no-repeat;
	mask: url(marks/seal.svg) center / contain no-repeat;
}
.yk-entry--post:has(.yk-endmark) .yk-orn--end { height: 0; margin-bottom: var(--yk-space-m); }
.yk-entry__footer { text-align: center; }
.yk-entry__tags-label { margin-right: 0.3em; }
.yk-post-nav { padding-top: var(--yk-space-m); border-top: var(--yk-hairline) solid var(--yk-line-soft); }
.yk-post-nav__label { font-size: 0.9rem; margin-bottom: 0.15rem; }
.yk-post-nav__title { font-family: var(--yk-font-display), serif; font-size: 1.3rem; line-height: 1.2; text-decoration: none; color: var(--yk-ink); }
.yk-post-nav a:hover .yk-post-nav__title { color: var(--yk-link-hover); }

/* Comments: only a gold hairline; the stupa just above is the mark of this page. */
.yk-orn--comments {
	display: block;
	width: 2.5rem;
	height: 0;
	margin: 0 auto var(--yk-space-m);
	border-top: var(--yk-hairline) solid var(--th-gold);
	background: none;
	-webkit-mask: none;
	mask: none;
}
.yk-comments__title { font-size: 1.6rem; text-align: center; }
.yk-comment__author { font-weight: 500; }

/* 9. Index pages ------------------------------------------------------------------------------- */
.yk-orn--group {
	display: block;
	width: 2.5rem;
	height: 0;
	margin: 0 0 var(--yk-space-xs);
	border-top: var(--yk-hairline) solid var(--th-gold);
	background: none;
	-webkit-mask: none;
	mask: none;
}
.yk-index__group-title { font-size: 2rem; }
.yk-card__title { font-family: var(--yk-font-display), serif; font-size: 1.32rem; line-height: 1.15; margin-top: 0.15rem; }
.yk-card__meta { font-size: 0.92rem; }
.yk-card--no-cover::before {
	background-color: var(--th-sketch);
	-webkit-mask: url(marks/thumb-ridge.svg) center / 62% no-repeat;
	mask: url(marks/thumb-ridge.svg) center / 62% no-repeat;
}
.yk-card--no-cover:nth-child(3n+2)::before { -webkit-mask-image: url(marks/thumb-river.svg); mask-image: url(marks/thumb-river.svg); }
.yk-card--no-cover:nth-child(3n)::before { -webkit-mask-image: url(marks/thumb-stupa.svg); mask-image: url(marks/thumb-stupa.svg); }

/* Relacje and Galerie on wide screens: a timeline. The year stands in a narrow column on the left
   (and stays in view while its cards scroll past); the cards fill the rest, four to a row. */
@media (min-width: 60rem) {
	.yk-index--trips .yk-index__group,
	.yk-index--galleries .yk-index__group {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		column-gap: var(--yk-space-m);
		align-items: start;
		margin-bottom: var(--yk-space-l);
		padding-top: var(--yk-space-m);
		border-top: var(--yk-hairline) solid var(--yk-line-soft);
	}
	.yk-index--trips .yk-orn--group,
	.yk-index--galleries .yk-orn--group { display: none; }
	.yk-index--trips .yk-index__group-title,
	.yk-index--galleries .yk-index__group-title {
		grid-column: 1;
		position: sticky;
		top: var(--yk-space-s);
		margin: 0;
		font-size: 1.75rem;
	}
	.yk-index--trips .yk-index__group-title::after,
	.yk-index--galleries .yk-index__group-title::after {
		content: "";
		display: block;
		width: 2.5rem;
		height: 0.4rem;
		margin-top: 0.35rem;
		background-color: var(--th-ochre);
		-webkit-mask: url(marks/stroke.svg) left center / contain no-repeat;
		mask: url(marks/stroke.svg) left center / contain no-repeat;
	}
	.yk-index--trips .yk-cards,
	.yk-index--galleries .yk-cards { grid-column: 2; }
}

/* Tagi: a plain list in columns, one size, each name with its post count (the brief: lists, not a
   cloud). The busy tags only get a darker ink: five tones that follow the post count. */
.yk-tags { display: block; columns: 12rem; column-gap: var(--yk-space-l); }
.yk-tags__item { display: flex; align-items: baseline; break-inside: avoid; padding: 0.2rem 0; font-size: 1.05rem; }
.yk-tags__item--w1, .yk-tags__item--w2, .yk-tags__item--w3, .yk-tags__item--w4, .yk-tags__item--w5 { font-size: 1.05rem; }
.yk-tags__item .yk-tags__link { font-family: inherit; }
.yk-tags__item--w5 .yk-tags__link { font-size: 1em; }
@media (pointer: coarse) {
	.yk-tags__link { display: inline-flex; align-items: center; min-height: 2.75rem; }   /* 44 px taps */
	.yk-tags__item { padding: 0; align-items: center; }
}
.yk-tags__link { text-decoration: none; color: var(--yk-ink); }
.yk-tags__link:hover { color: var(--yk-link-hover); }
.yk-tags__item--w1 .yk-tags__link { color: #7a6e62; }
.yk-tags__item--w2 .yk-tags__link { color: #685c50; }
.yk-tags__item--w3 .yk-tags__link { color: #52483e; }
.yk-tags__item--w4 .yk-tags__link { color: #3d352e; }
.yk-tags__item--w5 .yk-tags__link { color: var(--yk-ink); }
.yk-tags__item .yk-tags__link:hover { color: var(--yk-link-hover); }
.yk-tags__count { margin-left: 0.45em; font-size: 0.8rem; color: var(--yk-muted); }

/* 10. Front page: a drawn intro, the greeting, one quote given room ----------------------------- */
.yk-front-section { padding: var(--yk-space-m) 0; }
.yk-front__intro { padding-top: var(--yk-space-s); }
.yk-front__quotes { padding-bottom: 0; }
.yk-orn--front-intro {
	display: block;
	width: min(30rem, 92%);
	aspect-ratio: 360 / 110;
	margin: 0 auto var(--yk-space-xs);
	background: url(marks/intro.svg) center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}
.yk-front__greeting {
	font-family: "Yk Tiro Namaste", var(--yk-font-display), var(--yk-font-scripts), serif;
	font-size: 3.3rem;
	font-weight: 400;
	margin-bottom: var(--yk-space-m);
}
/* The scene round the greeting, one per visit (inc/front.php): "peak" is the drawn intro above. */
/* "enso": an ochre ensō drawn round नमस्ते instead of the intro (the graft from primitiv). */
.yk-front--enso .yk-orn--front-intro { display: none; }
.yk-front--enso .yk-front__intro { padding-top: var(--yk-space-l); }
.yk-front--enso .yk-front__greeting {
	position: relative;
	isolation: isolate;
	width: fit-content;
	margin-inline: auto;
	padding: 1.05em 0.9em 1.05em;
}
.yk-front--enso .yk-front__greeting::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4.1em;
	height: 4.1em;
	translate: -50% -50%;
	z-index: -1;
	background-color: var(--th-ochre);
	opacity: 0.8;
	-webkit-mask: url(marks/enso.svg) center / contain no-repeat;
	mask: url(marks/enso.svg) center / contain no-repeat;
}
/* "nagas": a pair of nagas facing each other across नमस्ते. */
.yk-front--nagas .yk-orn--front-intro { display: none; }
/* One naga (marks/nagas.svg, its colours baked in), mirrored for the right; sized in em of the
   greeting, so the pair shrinks with it on a phone. The greeting's padding is their room. */
.yk-front--nagas .yk-front__intro { padding-top: var(--yk-space-m); }
.yk-front--nagas .yk-front__greeting {
	position: relative;
	width: fit-content;
	margin-inline: auto;
	padding: 0.9em 2.4em 0.85em;
}
.yk-front--nagas .yk-front__greeting::before,
.yk-front--nagas .yk-front__greeting::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 2.1em;
	height: 2.9em;
	background: url(marks/nagas.svg) center bottom / contain no-repeat;
	pointer-events: none;
}
.yk-front--nagas .yk-front__greeting::before { left: 0; }
.yk-front--nagas .yk-front__greeting::after { right: 0; transform: scaleX(-1); }
.yk-quote--lead { max-width: 33rem; text-align: center; }
.yk-quote--lead .yk-quote__text {
	font-family: var(--yk-font-display), serif;
	font-style: italic;
	font-size: 1.85rem;
	line-height: 1.35;
}
/* The source: small italic, in sentence case, after a short gold hairline. */
.yk-quote__source {
	font-family: var(--yk-font-display), serif;
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.35;
	color: var(--yk-muted);
}
.yk-quote--lead .yk-quote__source,
.yk-quote--more .yk-quote__source { text-align: center; }
.yk-quote__source em, .yk-quote__source i { font-style: inherit; }
.yk-quote__source::before {
	content: "";
	display: block;
	width: 2.5rem;
	margin: var(--yk-space-m) auto var(--yk-space-xs);
	border-top: var(--yk-hairline) solid var(--th-gold);
}
/* A long quote (a dialogue in several paragraphs, or many lines) reads better smaller, ranged left. */
.yk-quote--lead.yk-quote--long { max-width: var(--yk-measure); text-align: left; }
.yk-quote--lead.yk-quote--long .yk-quote__text { font-family: var(--yk-font-text), serif; font-style: normal; font-size: 1.12rem; line-height: 1.75; }
.yk-quote--long .yk-quote__text p { margin-bottom: var(--yk-space-xs); }

/* Section separators: the first is a lotus between two gold hairlines (the one event); the others
   are a single dry-brush stroke in ochre, two shapes in turn. */
.yk-orn--section-sep {
	width: 5.5rem;
	max-width: none;
	height: 0.7rem;
	margin: var(--yk-space-l) auto var(--yk-space-m);
	border: 0;
	color: var(--th-ochre);
	opacity: 0.85;
	background-color: currentColor;
	-webkit-mask: url(marks/dry-2.svg) center / contain no-repeat;
	mask: url(marks/dry-2.svg) center / contain no-repeat;
}
.yk-front > .yk-orn--section-sep:nth-of-type(2n+1) { -webkit-mask-image: url(marks/dry-1.svg); mask-image: url(marks/dry-1.svg); }
.yk-front > .yk-orn--section-sep:first-of-type {
	width: min(17.5rem, 80%);
	height: 1.75rem;
	margin: var(--yk-space-l) auto;
	opacity: 1;
	background: url(marks/lotus.svg) center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}
.yk-front-section__title { text-align: center; font-size: 2.1rem; margin-bottom: var(--yk-space-m); }
.yk-front__latest .yk-front-section__title { text-align: center; }
.yk-front-section__more a { text-decoration-color: var(--th-ochre); }

/* Wędrówki po blogu: three small drawn signs (a stupa, an open lotus, the wheel) over three words. */
.yk-ways { gap: var(--yk-space-l); max-width: 52rem; margin: 0 auto; }
.yk-ways__item { border-top: 0; text-align: center; padding: var(--yk-space-2xs) 0 0; }
.yk-orn--way {
	display: block;
	width: 4.4rem;
	height: 2.75rem;
	margin: 0 auto var(--yk-space-2xs);
	color: var(--th-ochre);
	transition: color 0.25s ease;
}
.yk-ways__item--relacje .yk-orn--way { -webkit-mask-image: url(marks/way-relacje.svg); mask-image: url(marks/way-relacje.svg); }
.yk-ways__item--galerie .yk-orn--way { -webkit-mask-image: url(marks/way-galerie.svg); mask-image: url(marks/way-galerie.svg); }
.yk-ways__item--tagi .yk-orn--way { -webkit-mask-image: url(marks/way-tagi.svg); mask-image: url(marks/way-tagi.svg); }
.yk-ways__item:hover .yk-orn--way { color: var(--th-maroon); }
.yk-ways__link { font-size: 1.9rem; line-height: 1.2; }
.yk-ways__note { font-size: 0.95rem; }

/* More quotes: each opens with a lotus bud. */
.yk-front__quotes { gap: var(--yk-space-xl); }
.yk-quote--more .yk-orn--quote-before {
	display: block;
	width: 2rem;
	height: 1.35rem;
	margin: 0 auto var(--yk-space-m);
	color: var(--th-ochre);
	-webkit-mask-image: url(marks/bud.svg);
	mask-image: url(marks/bud.svg);
}
.yk-quote--more { text-align: center; }
.yk-quote--more .yk-quote__text { font-family: var(--yk-font-display), serif; font-style: italic; font-size: 1.5rem; line-height: 1.4; }
/* A long one: the text face, ranged left. */
.yk-quote--more.yk-quote--long { text-align: left; }
.yk-quote--more.yk-quote--long .yk-quote__text { font-family: var(--yk-font-text), serif; font-style: normal; font-size: 1.04rem; line-height: var(--yk-leading); }

/* 11. Random photos: justified rows. Each photo grows by its own shape (--ratio), so a row is filled
   edge to edge whatever the random set is, and every photo keeps its shape; no holes. A caption of
   up to two lines in italic sits under each photo. Rows are about 13rem high on wide screens.
   A swipe strip on phones (section 14). */
.yk-photos--front { --yk-photo-unit: 13rem; gap: var(--yk-space-m) 0.6rem; }
.yk-photos--front .yk-photos__link { display: flex; flex-direction: column; height: auto; }
.yk-photos--front .yk-photos__frame { border: 0; height: auto; }
.yk-photos--front .yk-photos__img { transition: scale 0.6s ease; }
.yk-photos--front .yk-photos__link:hover .yk-photos__img { scale: 1.025; }
.yk-photos--front .yk-photos__caption {
	position: static;
	opacity: 1;
	padding: 0.25rem 0 0;
	font-family: var(--yk-font-display), serif;
	font-style: italic;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--yk-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
	background: none;
	transition: color 0.2s ease;
}
.yk-photos--front .yk-photos__link:hover .yk-photos__caption { color: var(--yk-ink); }
@media (prefers-reduced-motion: reduce) { .yk-photos--front .yk-photos__img { transition: none; } }
@media (max-width: 60rem) {
	.yk-photos--front { --yk-photo-unit: 10rem; }
}

/* 12. Footer: a Himalayan ridge in one stroke; a maroon seal before the name ------------------- */
.yk-colophon { padding-top: var(--yk-space-s); }
.yk-orn--footer-band {
	display: block;
	width: min(100%, 72rem);
	height: 2.6rem;
	margin: 0 auto var(--yk-space-l);
	color: var(--th-sketch);
	-webkit-mask-image: url(marks/ridge.svg);
	mask-image: url(marks/ridge.svg);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
}
.yk-colophon__list { font-size: 0.98rem; }
.yk-orn--footer-mark {
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-right: 0.35em;
	color: var(--th-maroon);
	-webkit-mask-image: url(marks/seal.svg);
	mask-image: url(marks/seal.svg);
}

/* 404 ("Ścieżka się urwała") and nothing found: a ridge, and a path towards it that breaks off. */
.yk-orn--404, .yk-orn--nothing {
	display: block;
	width: min(21rem, 100%);
	aspect-ratio: 240 / 124;
	margin: 0 0 var(--yk-space-m);
	background: url(marks/path404.svg) left center / contain no-repeat;
	-webkit-mask: none;
	mask: none;
}
.yk-orn--nothing { width: min(13rem, 70%); }

/* 13. Arrows: the web fonts have no ← →, so they are drawn as a small brush mark. ---------------- */
.yk-arrow {
	display: inline-block;
	width: 1.35em;
	height: 0.6em;
	overflow: hidden;
	text-indent: 3em;
	white-space: nowrap;
	vertical-align: 0.04em;
	background-color: var(--th-ochre-deep);
	-webkit-mask: url(marks/arrow.svg) center / contain no-repeat;
	mask: url(marks/arrow.svg) center / contain no-repeat;
}
.yk-arrow--prev { scale: -1 1; }
a:hover .yk-arrow { background-color: currentColor; }

/* 14. Tablets and phones ----------------------------------------------------------------------- */
/* Tablets (40-60rem): title and search share the first line, the menu gets its own. */
@media (max-width: 60rem) and (min-width: 40.01rem) {
	.yk-site-title { flex: 1 0 auto; }
	.yk-masthead__search { order: 2; flex: 0 1 15rem; }
	.yk-nav { order: 3; flex: 1 1 100%; }
	.yk-nav__list { gap: 0 var(--yk-space-m); }
	.yk-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 46rem) {
	:root { --yk-leading: 1.68; --yk-thumb: 6.5rem; }
	.yk-page-header__title { font-size: 2.05rem; }
	.yk-entry__title { font-size: 2.3rem; }
	.yk-front__greeting { font-size: 2.7rem; }
	.yk-quote--lead .yk-quote__text { font-size: 1.5rem; }
	.yk-postrow__title { font-size: 1.28rem; }
	.yk-front-section__title { font-size: 1.8rem; }
	.yk-index__group-title { font-size: 1.7rem; }
	/* Random photos on a phone: a strip to swipe, the next photo peeking in. */
	.yk-photos--front {
		display: flex;
		gap: var(--yk-space-xs);
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		margin: 0 calc(-1 * var(--yk-gutter));
		padding: 4px var(--yk-gutter) var(--yk-space-2xs);   /* room for the focus ring */
		scrollbar-width: thin;
		scrollbar-color: var(--yk-line) transparent;
	}
	.yk-photos--front .yk-photos__item,
	.yk-photos--front .yk-photos__item:first-child {
		flex: 0 0 auto;
		width: min(calc(15rem * var(--ratio, 1.5)), 78vw);
		margin: 0;
		scroll-snap-align: center;
	}
	.yk-photos--front::after { display: none; }
	.yk-photos--front .yk-photos__frame { flex: none; height: 15rem; aspect-ratio: auto; }
	.yk-photos--front .yk-photos__caption { font-size: 0.98rem; padding-top: 0.3rem; }
	.yk-orn--footer-band { -webkit-mask-size: auto 100%; mask-size: auto 100%; height: 2.2rem; }
}
@media (max-width: 40rem) {
	.yk-is-front .yk-orn--masthead-band { height: 1.4rem; }
	.yk-site-title { font-size: 1.45rem; }
	/* The menu is one line that scrolls sideways (base.css), with tap targets of 44 px; the header
	   then stays within about a quarter of the first screen. */
	.yk-nav__list { gap: 0 1.1rem; font-size: 1rem; scroll-snap-type: x proximity; }
	.yk-nav__list li { scroll-snap-align: start; }
	.yk-nav__list a { min-height: 2.75rem; }
	.yk-masthead__bar { padding-bottom: var(--yk-space-2xs); }
	/* Title and search stay on one line down to 360 px; the search field gives way first. */
	.yk-masthead__search { flex: 0 1 9.5rem; }
	.yk-masthead__search .yk-search__button { padding: 0.3rem 0.35rem; }
	/* The header description on a phone: at most two short lines under the photo, so the masthead
	   stays near a quarter of the first screen (the link leads to the whole story). */
	.yk-header-image__desc {
		margin-top: 0.3rem;
		font-size: 0.95rem;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
	}
	/* A post without a picture: no empty cell, the text takes the whole row. */
	.yk-postrow--no-thumb { grid-template-columns: minmax(0, 1fr); }
	.yk-postrow--no-thumb .yk-postrow__thumb { display: none; }
	/* Relacje and Galerie: two cards to a row, smaller titles, the count on its own line. */
	.yk-index--trips .yk-cards, .yk-index--galleries .yk-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yk-space-m) var(--yk-space-s); }
	.yk-index--trips .yk-card__title, .yk-index--galleries .yk-card__title { font-size: 1.08rem; }
	.yk-index--trips .yk-card__meta, .yk-index--galleries .yk-card__meta { font-size: 0.85rem; line-height: 1.35; }
	.yk-index--trips .yk-card__meta .yk-meta-sep { display: none; }
	.yk-index--trips .yk-card__count { display: block; }
	.yk-index__group { margin-bottom: var(--yk-space-l); }
	/* The three ways side by side, small. */
	.yk-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--yk-space-2xs); }
	.yk-ways__link { font-size: 1.45rem; }
	.yk-ways__note { display: block; font-size: 0.85rem; line-height: 1.3; }
	.yk-orn--way { width: 3.2rem; height: 2rem; }
}