/*
Theme Name:   Blocksy Child - Vinokurov
Theme URI:    http://web.vinokurov.com/
Description:  Dark colour scheme and hero-overlay header for the Vinokurov trips site.
Author:       Vinokurov
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-child
Domain Path:  /languages
*/

/* ==========================================================================
   1. Dark palette
   Blocksy builds every colour from --theme-palette-color-1..8, so redefining
   those eight recolours the whole theme. !important is needed because the
   theme prints its own :root block inline, after this stylesheet.
   ========================================================================== */

:root {
	--theme-palette-color-1: #7fb0ff !important; /* accent / links          */
	--theme-palette-color-2: #a9c9ff !important; /* accent hover            */
	--theme-palette-color-3: #ececec !important; /* body text               */
	--theme-palette-color-4: #ffffff !important; /* headings                */
	--theme-palette-color-5: #4a4a4a !important; /* borders / dividers      */
	--theme-palette-color-6: #3d3d3d !important; /* raised surface          */
	--theme-palette-color-7: #2e2e2e !important; /* recessed surface        */
	--theme-palette-color-8: #2b2b2b !important; /* page background - matches
	                                                the header and footer    */

	--theme-text-color: #ececec;
	--theme-headings-color: #ffffff;
	--theme-link-initial-color: #7fb0ff;
	--theme-link-hover-color: #a9c9ff;
	--theme-border-color: #4a4a4a;
	--theme-content-background: #2b2b2b;

	/* Neutral greys the block editor emits for core blocks */
	--wp--preset--color--white: #ececec;
	--wp--preset--color--black: #1f1f1f;
}

/* ==========================================================================
   1b. Typography
   --font-h1 / --font-sub / --font-body and the weight vars are injected by
   functions.php from the VNK_TYPE_PAIRING constant.
   ========================================================================== */

html,
body,
.entry-content,
p, li, td, input, textarea, select, button {
	font-family: var(--font-body), sans-serif;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-size: 1.0625rem;
	line-height: 1.7;
	letter-spacing: 0.001em;
}

/* Shared heading behaviour - uppercase, tight leading, balanced ragging */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.entry-title,
.page-title,
.site-title {
	line-height: var(--leading-display, 0.88);
	text-transform: uppercase;
	text-wrap: balance;
}

/* H1 - Anton. The one heavy voice on the page. */
h1,
h1.entry-title,
h1.wp-block-post-title,
h1.page-title,
.page-title,
.site-title,
.site-title a {
	font-family: var(--font-h1), sans-serif;
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* H2 / H3 - thin Barlow. The contrast against Anton is the whole effect,
   so these get a little positive tracking; thin faces need air. */
h2, h3, h4, h5, h6,
h2.wp-block-heading,
h3.wp-block-post-title,
h2.entry-title,
h3.entry-title {
	font-family: var(--font-sub), sans-serif;
	font-weight: var(--weight-h2, 200);
	letter-spacing: 0.01em;
}

h3, h4, h5, h6,
h3.wp-block-post-title,
h3.entry-title {
	font-weight: var(--weight-h3, 300);
	letter-spacing: 0.02em;
}

/* --- Hero (the alignfull query) -----------------------------------------
   Scoped to .alignfull so these never leak into the card grids below, which
   are also post-templates and would otherwise match the same selectors. */

.wp-block-query.alignfull .wp-block-post-title,
.wp-block-query.alignfull .wp-block-post-title a {
	font-family: var(--font-h1), sans-serif !important;
	/*
	 * Back to the original display size and 15ch measure, so the title breaks
	 * across lines again rather than being shrunk to fit on one.
	 *
	 * The leading is the difference: 0.88 packed those lines almost edge to
	 * edge, which is what read as cramped. 1.08 opens them up while keeping a
	 * display title tighter than body leading. text-wrap:balance evens the
	 * lines so a centred title doesn't end on a stray short word.
	 *
	 * Centred: text-align for the lines, auto side margins to centre the 15ch
	 * box itself - without those the box stays left and only its contents
	 * centre, which reads as off-centre against the container.
	 */
	font-size: clamp(3rem, 9vw, 7.5rem) !important;
	line-height: 1.08 !important;
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
	text-transform: uppercase;
	text-wrap: balance;
	text-align: center !important;
	/* Bottom margin keeps the excerpt close under the title. */
	margin: 0.06em auto 0.14em !important;
	max-width: 15ch;
}

.wp-block-query.alignfull .wp-block-post-excerpt,
.wp-block-query.alignfull .wp-block-post-excerpt__excerpt,
.wp-block-query.alignfull .wp-block-post-excerpt p {
	font-family: var(--font-body), sans-serif !important;
	font-size: clamp(1rem, 1.3vw, 1.2rem) !important;
	line-height: 1.6 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	max-width: 46ch;
	/*
	 * Centred under the hero title. The 46ch measure is kept so the line length
	 * stays readable - auto on both sides centres that box, where the previous
	 * margin-left:0 pinned it left. text-align overrides the block's own
	 * has-text-align-left class from the editor.
	 */
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
	opacity: 0.94;
	font-weight: 300 !important;
}

.wp-block-query.alignfull .wp-block-post-date {
	font-family: var(--font-body), sans-serif !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase;
	opacity: 0.78;
	margin-top: 1.5rem !important;
	/* Centred with the title and excerpt above it. */
	text-align: center !important;
}

/* Section headings (h2) - Featured / All Trips. Thin Barlow against Anton. */
.entry-content > .wp-block-group .wp-block-heading {
	font-family: var(--font-sub), sans-serif !important;
	/* 2x 20% down from the clamp(2.5rem, 5vw, 4.5rem) baseline (0.64x) */
	font-size: clamp(1.6rem, 3.2vw, 2.88rem) !important;
	font-weight: var(--weight-h2, 200) !important;
	line-height: var(--leading-display, 0.88) !important;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	margin-bottom: 2.4rem;
}

/* --- Card grids (every query that is NOT the hero) ---------------------- */

.wp-block-query:not(.alignfull) .wp-block-post-title,
.wp-block-query:not(.alignfull) .wp-block-post-title a {
	font-family: var(--font-sub), sans-serif !important;
	font-size: 1.5rem !important;
	font-weight: var(--weight-h3, 300) !important;
	line-height: 1.05 !important;
	letter-spacing: 0.025em;
	text-transform: uppercase;
}

.wp-block-query:not(.alignfull) .wp-block-post-excerpt,
.wp-block-query:not(.alignfull) .wp-block-post-excerpt p {
	font-family: var(--font-body), sans-serif !important;
	font-size: 0.95rem !important;
	line-height: 1.65 !important;
	font-weight: 300 !important;
	letter-spacing: 0 !important;
	/*
	 * No measure here. A 42ch cap was meant to keep the line readable, but a
	 * card column is already about that wide - at the card's own font size it
	 * came to 359px inside a 363px card, so all it did was stop the text four
	 * pixels short of the photograph above it and leave the right edge ragged
	 * against everything else. The column is the measure.
	 */
	max-width: none;
}

.wp-block-query:not(.alignfull) .wp-block-post-date,
.entry-meta,
.ct-meta-element {
	font-family: var(--font-body), sans-serif !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
}

/**
 * Logo in front of the site title.
 *
 * Blocksy marks the branding block data-logo="top" and stacks the mark above
 * the title; this lays it out as a row instead. The attribute selector keeps
 * the specificity above Blocksy's own [data-logo="top"] rule.
 */
#header .site-branding[data-logo] {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.48rem;
}

#header .site-logo-container {
	display: inline-flex;
	/* Centre the mark inside the container. Blocksy gives this anchor a fixed
	   height from its own logo-height setting, so without this the (smaller)
	   image pins to the top edge and the lockup breaks - which is exactly what
	   happened on the mobile header, where it sat 5.5px high. */
	align-items: center;
	justify-content: center;
	margin: 0;
	flex: none;
	line-height: 0;
}

/* Sized against the wordmark's cap height, not picked in isolation: the mark
   reads as part of the lockup at roughly 1.2x the caps. Retune both together. */
#header .site-logo-container img {
	width: 30px;
	height: 30px;
	max-width: none;
	/* No border-radius: the mark carries its own corner treatment, and adding
	   one here rounded the square-outline variant into the rounded one. */
}

#header .site-title-container { margin: 0; }

/**
 * Optical centring for the wordmark.
 *
 * align-items:center lines up the line boxes, but the wordmark's capitals sit
 * low inside theirs, so the letters land below the logo's centre. Nudging the
 * title up aligns the cap-height centre with the centre of the mark. In em, so
 * it holds if the title size changes.
 *
 * Retuned for Sofia Sans Extra Condensed and measured against glyph ink. The
 * large negative values this rule used to carry were mostly compensating for
 * the logo image sitting off-centre in its container; with that fixed above,
 * the real correction is small and positive. Verified at 1440px and 520px -
 * both land within half a pixel of the mark's centre.
 *
 * Font-specific: re-measure if the wordmark face changes again.
 */
#header .site-title {
	position: relative;
	top: 0.05em;
}

@media (max-width: 600px) {
	/* Scale the mark and the wordmark together - shrinking only the mark breaks
	   the 1.2 box-to-cap ratio the lockup is built on. */
	#header .site-logo-container img { width: 26px; height: 26px; }
	#header .site-title, #header .site-title a { font-size: 1.9rem; }
}

/**
 * Wordmark.
 *
 * Sofia Sans Extra Condensed, not the site's Anton, and set here rather than
 * inheriting the h1 rule above. It is very narrow, so it carries a larger size
 * and a little tracking to hold the same presence Anton had beside the mark.
 */
.site-title,
.site-title a {
	font-family: var(--font-wordmark), sans-serif;
	font-size: 2.2rem;
	font-weight: 300;
	letter-spacing: 0.03em;
}

#header .ct-menu-link {
	font-family: var(--font-body), sans-serif;
	font-size: 0.73rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Single post body copy. Runs the full width of the gallery, as asked. */
.single .entry-content > p {
	font-size: 1.1rem;
	line-height: 1.75;
	max-width: none;
	font-weight: 300;
	margin-bottom: 1.5rem;
	/*
	 * When a paragraph is shorter than its own drop cap, the float spills into
	 * the next one and shunts that paragraph's cap to the right. Clearing keeps
	 * every initial flush to the left margin.
	 */
	clear: left;
}

/**
 * Drop cap on every paragraph.
 *
 * Set in the paragraph's own face, weight and colour - it is the same text,
 * just larger. line-height pulls the cap's cap-height level with the first
 * line; font-size alone leaves it floating above the baseline it sits on.
 */
.single .entry-content > p::first-letter {
	float: left;
	/* Inherited rather than named, so family, weight and colour track the
	   paragraph exactly - only the size and float differ. */
	font-family: inherit;
	font-weight: inherit;
	/*
	 * 4em - 40% = 2.4em. The tighter line-height keeps the float just under
	 * one line of body text (30.8px), so the initial occupies a single line
	 * cleanly instead of indenting a second line it is not tall enough to fill.
	 */
	font-size: 2.4em;
	/*
	 * Float height (font-size x line-height, plus any top margin) must stay
	 * under one 30.8px line, or line two indents beside a cap that is not tall
	 * enough to fill it. 2.4 x 17.6 x 0.70 = 29.5px, with no top margin.
	 */
	line-height: 0.7;
	margin: 0 0.1em 0 0;
	color: inherit;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.single .entry-content > p::first-letter {
		font-size: 1.9em;
		margin-right: 0.1em;
	}
}

/**
 * Trip (gallery) page title.
 *
 * Blocksy renders this as h1.page-title, not .entry-title - an earlier rule
 * here targeted the latter and so never applied. Base size was 30px; this is
 * 50% larger at 45px on desktop, scaling with the viewport but never dropping
 * below the original 30px on a phone.
 */
/**
 * Trip page header.
 *
 * Blocksy caps the hero at the 750px text column, so a 67.5px display title
 * had barely ten characters per line and wrapped into a cramped stack. Widen
 * it to the same 1200px box the gallery toolbar and editor grid use, so the
 * three line up and the title has room to breathe.
 */
.single .hero-section.is-width-constrained,
.single .hero-section {
	max-width: min(1200px, 100%);
	margin-left: auto;
	margin-right: auto;
}

/**
 * One left edge for the whole trip page.
 *
 * Widening the hero alone left the body copy centred in the old 750px column
 * while the title started 280px to its left. The content column is widened to
 * the same 1200px box and its children are left-aligned inside it; paragraphs
 * keep their own narrower max-width further down, so the reading measure stays
 * comfortable without the text being centred.
 *
 * The !important is unavoidable: WordPress' constrained layout declares
 * "margin-left: auto !important" on these children.
 */
.single .entry-content.is-layout-constrained {
	/*
	 * The same formula the hero resolves to. Blocksy sizes the hero from
	 * --theme-container-edge-spacing (90vw), capped here at 1200px; matching it
	 * exactly means the two boxes centre identically at every viewport instead
	 * of drifting apart, which they did when this was min(1200px, 100%).
	 */
	max-width: min(var(--theme-container-edge-spacing, 90vw), 1200px);
	margin-left: auto;
	margin-right: auto;
}

.single .entry-content.is-layout-constrained
	> *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.single h1.page-title,
.single .entry-title {
	/* 30px -> 45px -> 67.5px (two 50% steps). Flat, because the size it
	   replaces was flat too; a fluid clamp only reached 1.5x on wide screens. */
	font-size: 4.21875rem;
	/* Looser than the 0.88 used elsewhere: at this size the shared value put
	   barely any air between wrapped lines. */
	line-height: 0.95;
	/* No character cap - the title runs the full width of the gallery below it. */
	max-width: none;
	margin-bottom: 0;
	text-wrap: balance;
}

/* Date under the title: a caption for it, so it sits close and reads quietly. */
.single .entry-meta {
	margin-top: 0.85rem !important;
	font-size: 0.76rem !important;
	letter-spacing: 0.24em;
	color: #a4a4a4;
}

.single .entry-meta .meta-date time {
	color: inherit;
}

@media (max-width: 600px) {
	.single h1.page-title,
	.single .entry-title {
		font-size: 2.75rem;
		max-width: none;
	}

	.single .entry-meta {
		margin-top: 0.7rem !important;
		letter-spacing: 0.18em;
	}
}

/**
 * Page background, matched to the header and footer.
 *
 * Blocksy paints the site background from palette colour 7 in its own inline
 * dynamic CSS, which is printed after this stylesheet and so wins on equal
 * specificity. Hence !important rather than a plain declaration.
 */
html,
body {
	background-color: #2b2b2b !important;
	color: #ececec;
}

body#site,
#main-container,
main#main,
.site-main,
article,
.entry-content {
	background-color: transparent;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-post-title a,
.entry-title,
.entry-title a,
.page-title {
	color: #ffffff;
}

/* Titles hold their colour on hover - no highlight on mouse over. */
.entry-title a:hover,
.entry-title a:focus,
.wp-block-post-title a:hover,
.wp-block-post-title a:focus,
.site-title a:hover,
.site-title a:focus,
h1 a:hover, h2 a:hover, h3 a:hover,
h4 a:hover, h5 a:hover, h6 a:hover {
	color: inherit !important;
}

.wp-block-post-excerpt,
.wp-block-post-excerpt__excerpt,
p {
	color: #d0d0d0;
}

.wp-block-post-date,
.wp-block-post-date a,
.entry-meta,
.ct-meta-element {
	color: #9a9a9a;
}

a {
	color: #7fb0ff;
}

a:hover {
	color: #a9c9ff;
}

/* Section dividers and the By Year rule read as light grey by default */
hr,
.wp-block-separator,
.wp-block-group[style*="border-top"] {
	border-color: #4a4a4a !important;
}

/* ==========================================================================
   2. Header, footer and search panel
   ========================================================================== */

#header [data-row],
#header [data-row] > .ct-container,
.ct-header [data-row="middle"] {
	background-color: #2b2b2b;
}

#header .site-title a,
#header .ct-menu-link,
#header .ct-toggle-close,
#header [data-id="search"] .ct-toggle {
	color: #f0f0f0;
}

/* Nav links may highlight; the site title is a title and must not. */
#header .ct-menu-link:hover {
	color: #7fb0ff;
}

footer#footer,
footer#footer [data-row],
.ct-footer [data-row] {
	background-color: #2b2b2b;
	color: #c4c4c4;
}

footer#footer a {
	color: #9dbff5;
}

/**
 * Footer copyright line: "(c) 2026 Vinokurov - Privacy & Terms".
 *
 * Set in the same small uppercase key as the post meta elsewhere on the site,
 * so the footer reads as part of the same type system rather than as default
 * theme text. Centred, and allowed to wrap onto two lines on narrow screens
 * with the separator hidden, so the link never breaks away mid-phrase.
 */
.ct-footer .ct-footer-copyright {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	font-family: var(--font-body), sans-serif;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.9;
	color: #8d8d8d;
}

.ct-footer .ct-footer-copyright p { margin: 0; }

.ct-footer .vnk-foot-sep {
	margin: 0 0.9em;
	opacity: 0.4;
}

.ct-footer a.vnk-foot-link {
	color: #c8c8c8;
	text-decoration: none;
	/* Underline drawn as a border so it can animate without shifting the text. */
	border-bottom: 1px solid rgba(200, 200, 200, 0.28);
	padding-bottom: 2px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.ct-footer a.vnk-foot-link:hover,
.ct-footer a.vnk-foot-link:focus-visible {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

@media (max-width: 600px) {
	.ct-footer .ct-footer-copyright {
		flex-direction: column;
		letter-spacing: 0.18em;
	}
	/* Stacked, the middot sits alone on its own line - drop it. */
	.ct-footer .vnk-foot-sep { display: none; }
}

.ct-panel,
.ct-panel-content,
#search-modal .ct-panel-content {
	background-color: #2b2b2b;
	color: #ececec;
}

.ct-pseudo-input,
input[type="search"],
input[type="text"],
textarea {
	background-color: #3d3d3d;
	color: #ececec;
	border-color: #4a4a4a;
}

::placeholder {
	color: #9a9a9a;
}

/* ==========================================================================
   3. Hero-overlay header (front page only)
   The header is lifted out of the flow and floated above the full-bleed
   cover block, and the container's top padding is removed so the image
   starts at the very top of the viewport.
   ========================================================================== */

.home #main-container {
	position: relative;
}

.home #header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background-color: transparent;
}

.home #header [data-row],
.home #header [data-row] > .ct-container,
.home .ct-header [data-row="middle"] {
	background-color: transparent !important;
	box-shadow: none;
}

/* Lift text off the photo so it stays legible on a bright frame */
.home #header .site-title a,
.home #header .ct-menu-link,
.home #header [data-id="search"] .ct-toggle {
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

.home #header .ct-menu-link:hover {
	color: #cfe0ff;
}

/* Blocksy pads the content wrapper top and bottom; drop the top pad on the
   front page so the hero sits flush under the floating header. */
.home main#main > .ct-container-full[data-vertical-spacing],
.home main#main > .ct-container[data-vertical-spacing] {
	padding-top: 0 !important;
}

.home .entry-content > .wp-block-query.alignfull {
	margin-top: 0;
}

/* A soft scrim behind the header so white nav text never sits on a white sky */
.home #header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 180px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: -1;
}

/* ==========================================================================
   3b. Spacing and image polish
   Generous, consistent rhythm does as much work as the typeface.
   ========================================================================== */

.entry-content > .wp-block-group {
	padding-top: clamp(4rem, 8vw, 7.5rem) !important;
	padding-bottom: clamp(1rem, 2vw, 2rem) !important;
}

.entry-content > .wp-block-group:last-child {
	padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}

.wp-block-post-template.is-layout-grid {
	gap: clamp(1.75rem, 3vw, 3rem) !important;
}

.wp-block-post-template > li {
	display: flex;
	flex-direction: column;
}

/* Images: subtle lift on hover, and a slow scale that reads as considered
   rather than bouncy. */
.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 1.15rem;
}

.wp-block-post-featured-image img {
	border-radius: 4px;
	transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
	            filter 600ms ease;
	filter: saturate(0.96);
}

.wp-block-post-featured-image:hover img {
	transform: scale(1.035);
	filter: saturate(1.04);
}

/* Hero: settle the overlay so the photo keeps its depth */
.wp-block-cover .wp-block-cover__inner-container {
	width: 100%;
}

.wp-block-cover__background {
	background: linear-gradient(
		to bottom,
		rgba(17, 17, 17, 0.42) 0%,
		rgba(17, 17, 17, 0.20) 42%,
		rgba(17, 17, 17, 0.62) 100%
	) !important;
	opacity: 1 !important;
}

/* ==========================================================================
   3c. Gallery (FooGallery)
   A hairline in the same grey as the site's border token. Done as a
   box-shadow rather than a real border so it sits outside the image and
   cannot shift the masonry layout maths.
   ========================================================================== */

/**
 * Give the gallery the same 1200px box as the title and the toolbar.
 *
 * Its container was the 750px text column while masonry laid out four ~350px
 * columns inside it, so the photos spilled past their own container and sat
 * ~23px left of the title. Widening the container lets masonry fit properly
 * and puts every element on the page on one left edge.
 */
.entry-content .foogallery {
	/* max-width only - adding width:100% resolved against a full-width
	   ancestor and pushed the gallery outside the container's padding on
	   narrow screens. */
	max-width: min(1200px, 100%);
	margin-left: auto;
	margin-right: auto;
}

.foogallery .fg-item-inner {
	box-shadow: 0 0 0 1px #6e6e6e;
	/* fg-dark hard-codes #333 here; keep it level with the new page colour so
	   no lighter square shows through while an image is still loading. */
	background-color: #2b2b2b;
}

.foogallery .fg-item-inner:hover {
	box-shadow: 0 0 0 1px #8a8a8a;
}

/**
 * Responsive column ladder.
 *
 * The gallery is configured as 4 columns. FooGallery's own breakpoints step
 * that down to 3 at 720px and 2 at 480px, and only reach a single column below
 * 320px - so a normal phone shows two or three postage stamps. Every fg-colN
 * class does nothing more than point --fg-column-width at a calc, so overriding
 * that one property re-columns the gallery at whatever widths we choose.
 */
@media (max-width: 1200px) {
	.foogallery.fg-masonry { --fg-column-width: var(--fg-col3-width) !important; }
}

@media (max-width: 900px) {
	.foogallery.fg-masonry { --fg-column-width: var(--fg-col2-width) !important; }
}

/* Phones: one photo per row, full width. */
@media (max-width: 600px) {
	.foogallery.fg-masonry {
		--fg-column-width: 100% !important;
		--fg-gutter: 14px !important;
	}
}

/* ==========================================================================
   4. Cards and images
   ========================================================================== */

.wp-block-post-featured-image img {
	background-color: #3d3d3d;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	color: #cfcfcf;
}

.wp-block-query-pagination .current {
	color: #ffffff;
	font-weight: 600;
}

/* Buttons: the pale accent needs dark text, not white, to stay legible */
button,
.wp-element-button,
.wp-block-button__link,
input[type="submit"] {
	background-color: #7fb0ff;
	color: #1f2937;
	font-weight: 600;
}

button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background-color: #a9c9ff;
	color: #1f2937;
}

/* Archive cards sit on the page background; lift them slightly */
.entries [class*="entry-card"],
.entry-card {
	background-color: #3a3a3a;
	border-color: #4a4a4a;
}

/**
 * Archive card row alignment (subgrid).
 *
 * Cards are a flat 4-child stack (title / byline / image / excerpt) inside a
 * grid. Because each card sized its own rows, a two-line title pushed that
 * card's image a full line below its neighbours' - visible on /2026/.
 *
 * Making each card a row subgrid hands row sizing to the parent, so every card
 * in a row shares the same four tracks and each band lines up: bylines, images
 * and excerpts all align, not just the images.
 *
 * Each child is pinned to an explicit track rather than relying on source
 * order, so a post missing a featured image or an excerpt leaves that track
 * empty instead of shifting everything below it up a row.
 *
 * row-gap:0 because the parent's 30px gap would otherwise open up between the
 * card's internal rows; the children's own 20px margins provide that spacing.
 * The gap between card rows is untouched - the card spans tracks 1-5, so the
 * parent's gap still separates it from the row beneath.
 */
@supports (grid-template-rows: subgrid) {
	.entries[data-layout="grid"] > .entry-card {
		grid-row: span 4;
		display: grid;
		grid-template-rows: subgrid;
		row-gap: 0;
		align-items: start;
	}

	.entries[data-layout="grid"] > .entry-card > .entry-title                 { grid-row: 1; }
	/*
	 * align-items on the card is not enough: a subgrid item whose own bottom
	 * margin differs from its neighbours' ends up measured from the far edge
	 * of the track, which is how a card with no excerpt got its photograph
	 * 30px lower than the rest of the row. Said outright on each child, it
	 * cannot be argued with.
	 */
	.entries[data-layout="grid"] > .entry-card > * {
		align-self: start;
	}

	.entries[data-layout="grid"] > .entry-card > .entry-meta[data-id="meta_2"] { grid-row: 2; }
	.entries[data-layout="grid"] > .entry-card > .ct-media-container          { grid-row: 3; }
	.entries[data-layout="grid"] > .entry-card > .entry-excerpt               { grid-row: 4; }

	/*
	 * Every child of the card is measured from the top of its track, so no two
	 * cards in a row may disagree about their own bottom margins - a subgrid
	 * item positions its whole margin box, and a photograph carrying 30px of
	 * margin sits 30px higher than one carrying none.
	 *
	 * Blocksy gives the photograph a bottom margin, and takes it away again
	 * with a negative one when the card ends on the picture - a sensible
	 * flourish in a plain stack, which here dropped the trips with no
	 * description a line below the rest of the row on the All page.
	 *
	 * So the photograph carries no bottom margin at all, and the excerpt under
	 * it brings its own space instead. A card with no excerpt then needs no
	 * space, which is exactly right.
	 */
	.entries[data-layout="grid"] > .entry-card > .ct-media-container {
		margin-bottom: 0;
	}

	.entries[data-layout="grid"] > .entry-card > .entry-excerpt {
		margin-top: 30px;
	}
}

/**
 * Title, byline and excerpt run the full width of the photograph.
 *
 * Blocksy's "boundless" featured image pulls itself out to the card's edges
 * with negative inline margins, which left the text indented from a picture
 * that was not. These three now take the same two declarations, so all four
 * share both edges and the card reads as one column.
 *
 * Deliberately the same custom property Blocksy's own rule reads, so changing
 * the card's inner spacing in the Customizer moves all of them together.
 *
 * :has() ties it to the picture actually being boundless - turn that off and
 * everything goes back to sitting inside the padding. In a browser without
 * :has() nothing matches and the card stays as it was.
 *
 * The card no longer carries a category line - see the archive-order filter
 * in functions.php.
 */
.entries[data-layout="grid"] > .entry-card:has(.boundless-image) > .entry-title,
.entries[data-layout="grid"] > .entry-card:has(.boundless-image) > .entry-meta[data-id="meta_2"],
.entries[data-layout="grid"] > .entry-card:has(.boundless-image) > .entry-excerpt {
	/*
	 * Blocksy caps the excerpt at max-width:100%, which resolves against the
	 * grid area and clamped the width below back to what it already was - the
	 * excerpt moved but never got any wider. The other two carry no such cap;
	 * lifting it for all three keeps the rule one declaration list.
	 */
	max-width: none;
	width: calc(100% + var(--card-inner-spacing, 30px) * 2);
	margin-inline: calc(var(--card-inner-spacing, 30px) * -1);
}

/**
 * Cyrillic display weight.
 *
 * Anton ships as a single very heavy weight, so every display heading asks for
 * font-weight 400 and still renders black. Sofia Sans Extra Condensed is a
 * variable face whose 400 is a normal weight, so Russian headings are stepped
 * up to 800 to carry comparable presence.
 *
 * The font families themselves are swapped via the html[lang^="ru"] variable
 * block in functions.php.
 */
html[lang^="ru"] h1,
html[lang^="ru"] h1 a,
html[lang^="ru"] h1.entry-title,
html[lang^="ru"] h1.page-title,
html[lang^="ru"] .page-title,
html[lang^="ru"] h1.wp-block-post-title,
html[lang^="ru"] .wp-block-query.alignfull .wp-block-post-title,
html[lang^="ru"] .wp-block-query.alignfull .wp-block-post-title a {
	font-weight: 800 !important;
}

/**
 * Hero measure on Russian pages.
 *
 * The 15ch cap is calibrated for Anton. `ch` is the width of the "0" glyph, and
 * Sofia Sans Extra Condensed is far narrower, so the same 15ch resolves to a
 * much smaller box and broke this title into three short lines.
 *
 * Dropping the cap lets the container decide, which gives two lines - matching
 * the English side. The two are uneven (950/568) because the only other break
 * point in this title produces three lines; no width fixes that, and
 * text-wrap:balance does not rebalance it either. Two lines is the lesser evil.
 *
 * The anchor is included deliberately: the base rule sets max-width on both the
 * heading and its inner <a>, and it is the <a> that actually constrains wrapping
 * - overriding only the heading has no effect at all.
 */
html[lang^="ru"] .wp-block-query.alignfull .wp-block-post-title,
html[lang^="ru"] .wp-block-query.alignfull .wp-block-post-title a {
	max-width: none;
}

/**
 * Lightbox: every photo in the same rectangle.
 *
 * The panel fits each image to the available height and centres it, so the
 * width - and therefore the left edge - changes with every photograph. Paging
 * from a landscape frame to a portrait one moved the picture sideways by two
 * hundred pixels and halved its width, which reads as the image jumping about
 * rather than the gallery advancing.
 *
 * Giving the image the whole media area and letting object-fit do the fitting
 * keeps the frame in one place: only what is inside it changes. Portrait shots
 * gain empty space at the sides, which is the price of not moving.
 *
 * FooGallery's own fit_media setting looks like it should do this and does the
 * opposite - it scales a portrait photo to the full width, so a 960x1280 image
 * becomes 1300x1733 in an 805px panel and hangs off both ends.
 */
.fg-panel img.fg-media-content {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Nothing is painted until the panel has finished placing it.
 *
 * A new frame is inserted, then measured and positioned, and the first layout
 * was reaching the screen: the photo appeared hard against the left edge of
 * the lightbox and jumped to the middle a moment later. FooGallery adds
 * .fg-visible once an item is settled, so keying visibility on that class
 * means only the finished position is ever seen.
 *
 * The switch is instant because the panel transition is set to none; with a
 * transition it would fade instead, which is equally fine.
 */
.fg-panel .fg-media {
	opacity: 0;
}

.fg-panel .fg-media.fg-visible {
	opacity: 1;
}

/* By Year archive list */
.wp-block-archives li a {
	color: #dcdcdc;
}

.wp-block-archives li a:hover {
	color: #7fb0ff;
}

/* ==========================================================================
   5. Mobile
   ========================================================================== */

@media (max-width: 999px) {
	.home #header [data-device="mobile"] [data-row] {
		background-color: transparent !important;
	}
}

/* ==========================================================================
   6. Admin toolbar (signed-in only)
   ========================================================================== */

/*
 * The toolbar is a black band across the top of every page, and on a site
 * whose header is a full-bleed photograph it reads as damage. It is folded
 * away by default and comes back on the button in the top left corner.
 *
 * The page offset lives here rather than in WordPress's own inline CSS - see
 * add_theme_support('admin-bar') in functions.php - so that the page only
 * moves down when the toolbar is actually on screen.
 */

#wpadminbar {
	display: none;
}

html.vnk-bar-open #wpadminbar {
	display: block;
}

@media screen {
	html.vnk-bar-open {
		margin-top: 32px !important;
	}
}

@media screen and (max-width: 782px) {
	html.vnk-bar-open {
		margin-top: 46px !important;
	}
}

/*
 * Below the toolbar's own 99999 so it never fights it, and far below the
 * lightbox and the video player, which should cover everything.
 */
.vnk-bar-toggle {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 0 0 6px 0;
	background-color: rgba(0, 0, 0, 0.45);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	/*
	 * The corner it sits in is part of the hero photograph, which can be any
	 * brightness at all, so the button carries its own dark ground rather than
	 * relying on contrast with whatever is behind it.
	 */
	transition: background-color 0.15s ease, color 0.15s ease, top 0.15s ease;
}

.vnk-bar-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.vnk-bar-toggle:hover,
.vnk-bar-toggle:focus-visible {
	background-color: rgba(0, 0, 0, 0.85);
	color: #fff;
}

/* Steps down out of the toolbar's way, and the chevron points back up. */
html.vnk-bar-open .vnk-bar-toggle {
	top: 32px;
	border-radius: 0 0 6px 0;
}

html.vnk-bar-open .vnk-bar-toggle svg {
	transform: rotate(180deg);
}

@media screen and (max-width: 782px) {
	html.vnk-bar-open .vnk-bar-toggle {
		top: 46px;
	}
}

/*
 * Everything else that makes room for the toolbar reads one of two custom
 * properties - WordPress sets --wp-admin--admin-bar--height on <html>, Blocksy
 * sets --admin-bar on the body - and both are still set while the toolbar is
 * folded away, because body.admin-bar stays on the page. Zeroing the two puts
 * back every offset at once: without this the floating language switcher hung
 * 32px down, on top of the menu.
 */
html:not(.vnk-bar-open) {
	--wp-admin--admin-bar--height: 0px;
}

html:not(.vnk-bar-open) body.admin-bar {
	--admin-bar: 0px;
}

/* ==========================================================================
   Private trips
   ========================================================================== */

/*
 * A padlock on the line under the name of a trip only you can see.
 *
 * On the line, not before the name. Before the name it indented the first
 * line of the title and nothing else, so a title that wrapped - "Dolly Sods
 * Wilderness. 2025" over two lines - came out shunted right against the card
 * beside it while its second line stayed put. The meta line is one line
 * always, and it is the line that already says the quiet things about a trip.
 *
 * WordPress says which trips those are: post_class() puts status-private on
 * the article of a card, of a block query's row and of the trip's own page
 * alike, so nothing has to be added to any title or date to mark it. Titles
 * and dates get used inside attributes as well as on the page, and HTML
 * pushed through the_title() ends up printed as source in one of those
 * places sooner or later.
 *
 * Drawn as a mask rather than an image so it takes the colour of the line it
 * belongs to, on the dark page and over a photograph alike, and sized in em
 * so it follows that line at any width. A shade less faint than the text it
 * sits with, which is already dimmed.
 *
 * Only ever seen by somebody signed in, since nobody else is shown these
 * trips at all.
 */
.status-private .entry-meta::before,
.status-private .wp-block-post-date::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.45em;
	vertical-align: -0.22em;
	background-color: currentColor;
	opacity: 0.75;
	-webkit-mask: var(--vnk-lock) center / contain no-repeat;
	mask: var(--vnk-lock) center / contain no-repeat;
}

:root {
	--vnk-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6a5.4 5.4 0 0 0-5.4 5.4v2.6H6A2.4 2.4 0 0 0 3.6 12v8A2.4 2.4 0 0 0 6 22.4h12A2.4 2.4 0 0 0 20.4 20v-8A2.4 2.4 0 0 0 18 9.6h-.6V7A5.4 5.4 0 0 0 12 1.6zm0 2.2A3.2 3.2 0 0 1 15.2 7v2.6H8.8V7A3.2 3.2 0 0 1 12 3.8z'/%3E%3C/svg%3E");
}