/* ==========================================================================
   The front page's world, carried to the trip page and the two listings.

   Scoped to the .vnk-skin body class (functions.php adds it on single posts,
   the Trips page and the year archives). The front page keeps its own
   stylesheet; everything here is the same system expressed for pages the
   theme renders rather than pages we render.

   The method is the one this child theme already uses: Blocksy builds every
   colour from eight palette variables and the type from --font-h1 / --font-sub
   / --font-body, so redefining those on one class recolours and resets an
   entire page without touching the theme's markup.
   ========================================================================== */

.vnk-skin {
	/* The world's own tokens, named as on the front page. */
	--ground: #0d0e0f;
	--ink: #f1eee8;
	--muted: #a7adb2;
	--line: #2b2f33;
	--metal: #c7a76d;
	--metal-lit: #e0c48f;
	--display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	--prose: Manrope, system-ui, sans-serif;
	--gut: clamp(20px, 4.4vw, 76px);
	--plate-gap: clamp(36px, 5vw, 64px);
	--vnk-lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='10.4' cy='10.4' r='6.6'/%3E%3Cpath d='M15.3 15.3 20.2 20.2'/%3E%3C/svg%3E");
	--vnk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.1 4.3a1.1 1.1 0 0 0-1.56 1.56L16.58 10.9H3.9a1.1 1.1 0 0 0 0 2.2h12.68l-5.04 5.04a1.1 1.1 0 1 0 1.56 1.56l6.9-6.9a1.1 1.1 0 0 0 0-1.56z'/%3E%3C/svg%3E");

	/* The theme's palette, pointed at them. */
	--theme-palette-color-1: var(--metal) !important;
	--theme-palette-color-2: var(--metal-lit) !important;
	--theme-palette-color-3: var(--ink) !important;
	--theme-palette-color-4: #ffffff !important;
	--theme-palette-color-5: var(--line) !important;
	--theme-palette-color-6: #16181a !important;
	--theme-palette-color-7: #121416 !important;
	--theme-palette-color-8: var(--ground) !important;

	--theme-text-color: var(--ink);
	--theme-headings-color: #ffffff;
	--theme-link-initial-color: var(--metal);
	--theme-link-hover-color: var(--metal-lit);
	--theme-border-color: var(--line);
	--theme-content-background: var(--ground);

	/* Both languages in one pairing, as on the front page. */
	--font-h1: var(--display);
	--font-sub: var(--prose);
	--font-body: var(--prose);

	/*
	 * !important because the stylesheet this one extends already needed it:
	 * Blocksy prints its own background from palette colour 7 in inline CSS
	 * after every stylesheet, so style.css pins html and body with it. This
	 * has to out-rank that pin on these pages, not the theme's inline rule.
	 */
	background-color: var(--ground) !important;
}

/*
 * The bands the theme paints from literal colours rather than the palette.
 * The header's rule is written with an id (#header [data-row]), so a class
 * alone never reaches it however many classes are in front - these selectors
 * carry the id too.
 */
.vnk-skin #header [data-row],
.vnk-skin #header [data-row] > .ct-container,
.vnk-skin .ct-header [data-row="middle"],
.vnk-skin footer#footer,
.vnk-skin footer#footer [data-row],
.vnk-skin .ct-footer [data-row] {
	background-color: var(--ground);
}

/* The search and off-canvas panels belong to the same night. */
.vnk-skin .ct-panel,
.vnk-skin .ct-panel-content,
.vnk-skin #search-modal .ct-panel-content {
	background-color: var(--ground);
}

.vnk-skin footer#footer {
	border-top: 1px solid var(--line);
}

.vnk-skin footer#footer a,
.vnk-skin .ct-footer a.vnk-foot-link {
	color: var(--metal);
}

.vnk-skin #header .current-menu-item > .ct-menu-link {
	color: var(--metal);
}

.vnk-skin .trp-floating-switcher a[aria-current="page"] .trp-language-item-name {
	color: var(--metal);
}

/* The browser's own surfaces, themed from the palette like the front page. */
.vnk-skin ::selection { background: var(--metal); color: #16130c; }

.vnk-skin :focus-visible {
	outline: 2px solid var(--metal);
	outline-offset: 3px;
	border-radius: 1px;
}

/* ==========================================================================
   The runner: the trip before and the trip after, under the plate.

   A line of type between the photograph and the writing, on the ground
   rather than on the picture - a photograph's edge is whatever that day's
   sky happened to be, and names set over it would be legible on one trip
   and lost on the next.
   ========================================================================== */

.vnk-skin .vnk-runner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: 0 clamp(20px, 3vw, 48px);
	/*
	 * The plate's own air below it, spent here instead of added to: the two
	 * read as one opening, not as a band pushed off the bottom of a picture.
	 * Cancelled against the same variable so they cannot drift apart.
	 */
	margin-top: calc(-1 * var(--plate-gap));
	padding: clamp(22px, 2.6vw, 34px) var(--gut) 0;
}

.vnk-skin .vnk-runner-link {
	display: inline-flex;
	align-items: baseline;
	gap: .66em;
	text-decoration: none;
	color: #cfcbc4;
	transition: color .22s ease;
}

/*
 * Placed by name, not by source order: at either end of the chain one half is
 * missing, and the trip that is there keeps the side it belongs on - the
 * newer trip to the left, the older to the right, the way every listing on
 * the site reads, most recent first.
 */
.vnk-skin .vnk-runner-next {
	grid-column: 1;
	/* Shrink to the words: a grid cell would make half the page hoverable. */
	justify-self: start;
}

.vnk-skin .vnk-runner-prev {
	grid-column: 2;
	justify-self: end;
	flex-direction: row-reverse;
	text-align: right;
}

.vnk-skin .vnk-runner-name {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.02rem, 1.25vw, 1.2rem);
	line-height: 1.12;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.vnk-skin .vnk-runner-link::before {
	content: "";
	flex: none;
	width: .72em;
	height: .72em;
	align-self: center;
	background-color: var(--metal);
	-webkit-mask: var(--vnk-arrow) center / contain no-repeat;
	mask: var(--vnk-arrow) center / contain no-repeat;
	transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}

/* One arrow, drawn once and turned round for the half on the left. */
.vnk-skin .vnk-runner-next::before { transform: scaleX(-1); }

.vnk-skin .vnk-runner-link:hover,
.vnk-skin .vnk-runner-link:focus-visible { color: #fff; }

.vnk-skin .vnk-runner-next:hover::before,
.vnk-skin .vnk-runner-next:focus-visible::before { transform: scaleX(-1) translateX(3px); }

.vnk-skin .vnk-runner-prev:hover::before,
.vnk-skin .vnk-runner-prev:focus-visible::before { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.vnk-skin .vnk-runner-link::before { transition: none; }
}

/* Said for a screen reader, which has no arrow to go by. */
.vnk-skin .vnk-sr {
	position: absolute;
	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;
}

/* ==========================================================================
   The trip's plate
   The same opening the front page has: the photograph full-bleed, the name
   set large and to the left, the facts under a hairline. The theme's own
   hero section is hidden because this renders the name instead.
   ========================================================================== */

.vnk-skin.single .hero-section {
	display: none;
}

.vnk-skin .vnk-plate {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	margin-bottom: var(--plate-gap);
}

/*
 * Shorter than the front page's 78vh on purpose. There the photograph is the
 * offer and the page below it is a catalogue; here it is the door to a trip
 * whose own gallery is the point, so the plate introduces and gets out of the
 * way. Without a photograph it collapses to the text alone.
 */
.vnk-skin .vnk-plate-bare {
	min-height: 0;
	padding-top: clamp(28px, 5vw, 60px);
}

.vnk-skin .vnk-plate-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vnk-skin .vnk-plate-wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 26rem 72% at 24% 74%,
			rgba(8, 9, 10, .74) 0%, rgba(8, 9, 10, .5) 46%, rgba(8, 9, 10, 0) 76%),
		linear-gradient(to bottom,
			rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, .12) 34%,
			rgba(8, 9, 10, .6) 78%, rgba(8, 9, 10, .92) 100%);
}

.vnk-skin .vnk-plate-text {
	position: relative;
	z-index: 2;
	width: min(760px, 100%);
	margin: 0 var(--gut) clamp(32px, 4.5vw, 62px);
}

.vnk-skin .vnk-plate-bare .vnk-plate-text {
	margin-bottom: 0;
}

.vnk-skin .vnk-plate-name {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(2.6rem, 6.4vw, 6rem);
	line-height: .94;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.vnk-skin .vnk-rule {
	height: 1px;
	background: linear-gradient(to right, var(--metal) 0 86px, rgba(241, 238, 232, .3) 86px 100%);
	margin: clamp(18px, 2.2vw, 28px) 0 clamp(14px, 1.6vw, 20px);
}

.vnk-skin .vnk-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(26px, 3.4vw, 54px);
}

.vnk-skin .vnk-fact { padding: 4px 0 10px; }

.vnk-skin .vnk-k {
	display: block;
	font-family: var(--prose);
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #cfd3d6;
	margin-bottom: 7px;
}

.vnk-skin .vnk-v {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	font-weight: 500;
	letter-spacing: .04em;
	color: #fff;
	text-transform: uppercase;
}

.vnk-skin .vnk-lock {
	display: inline-block;
	width: .72em;
	height: .72em;
	margin-right: .34em;
	background-color: var(--metal);
	-webkit-mask: var(--vnk-lock) center / contain no-repeat;
	mask: var(--vnk-lock) center / contain no-repeat;
}

/* ==========================================================================
   The trip's reading
   ========================================================================== */

.vnk-skin .entry-content > p {
	font-family: var(--prose);
	color: var(--ink);
}

/* The map card and the gallery sit on the ground, ruled rather than boxed. */
.vnk-skin .vnk-map-image,
.vnk-skin .foogallery .fg-item-inner {
	box-shadow: 0 0 0 1px var(--line);
}

/* The square a photograph loads into, level with the ground behind it. */
.vnk-skin .foogallery .fg-item-inner {
	background-color: #1a1d1f;
}

.vnk-skin .foogallery .fg-item-inner:hover {
	box-shadow: 0 0 0 1px var(--metal);
}

.vnk-skin .vnk-map-caption,
.vnk-skin .vnk-map-credit {
	font-family: var(--prose);
	letter-spacing: .17em;
	text-transform: uppercase;
	font-size: 11px;
	color: var(--muted);
}

/* ==========================================================================
   The trip card
   One component, three surfaces: the front page's strip, the Trips listing
   and a year. Defined here and listed for both scopes rather than copied
   into front.css, so a change to the card is a change in one place.
   ========================================================================== */

/*
 * One rule under the section heading, and no second line across the cards:
 * the per-card hairlines read as a rule repeated a few pixels below the
 * heading's own, which is a stutter rather than a system.
 */
.vnk-skin .vnk-card a,
.vnk-front .vnk-card a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.vnk-skin .vnk-shot,
.vnk-front .vnk-shot {
	display: block;
	overflow: hidden;
	background: #1a1d1f;
	aspect-ratio: 1;
}

.vnk-front .vnk-shot-wide { aspect-ratio: 4 / 3; }

.vnk-skin .vnk-shot img,
.vnk-front .vnk-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .5s ease;
	filter: saturate(.97);
}

.vnk-card a:hover .vnk-shot img,
.vnk-skin .vnk-card a:focus-visible .vnk-shot img,
.vnk-front .vnk-card a:focus-visible .vnk-shot img {
	transform: scale(1.045);
	filter: saturate(1.03);
}

.vnk-skin .vnk-card-name,
.vnk-front .vnk-card-name {
	display: block;
	font-family: var(--display);
	font-weight: 600;
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	line-height: 1.12;
	letter-spacing: .02em;
	text-transform: uppercase;
	margin: 17px 0 0;
	position: relative;
}

.vnk-front .vnk-card-name-sm { font-size: clamp(1.05rem, 1.3vw, 1.25rem); margin-top: 14px; }

/* The metal line under a card's name draws itself when the card is live. */
.vnk-skin .vnk-card-name::after,
.vnk-front .vnk-card-name::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -7px;
	height: 1px;
	width: 0;
	background: var(--metal);
	transition: width .5s cubic-bezier(.16, 1, .3, 1);
}

.vnk-card a:hover .vnk-card-name::after,
.vnk-front .vnk-card a:focus-visible .vnk-card-name::after { width: 46px; }

.vnk-skin .vnk-card-meta,
.vnk-front .vnk-card-meta {
	display: block;
	margin-top: 13px;
	font-size: 11px;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--muted);
}

/* The date is the card's floor, whatever length the name ran to. */
.vnk-front .vnk-card-meta { margin-top: auto; padding-top: 13px; }

/* ==========================================================================
   The listings: the Trips page and a year
   The template draws the shared card; this is only the page around it.
   ========================================================================== */

.vnk-skin .vnk-list {
	padding: clamp(28px, 4vw, 54px) var(--gut) clamp(64px, 8vw, 116px);
}

.vnk-skin .vnk-list .vnk-h2 {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 clamp(24px, 3vw, 38px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.vnk-skin .vnk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/*
	 * Four across here, three on the front page's strip. A listing is an
	 * index the eye scans for a place it remembers; the strip is a handful of
	 * recent trips given room. At 1440 four columns leave each photograph
	 * about 292px wide, which still reads as a photograph rather than a chip.
	 */
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
}

.vnk-skin .vnk-shot-wide { aspect-ratio: 4 / 3; }

.vnk-skin .vnk-card a:hover .vnk-shot img,
.vnk-skin .vnk-card a:focus-visible .vnk-shot img {
	transform: scale(1.045);
	filter: saturate(1.03);
}

.vnk-skin .vnk-card a:hover .vnk-card-name::after,
.vnk-skin .vnk-card a:focus-visible .vnk-card-name::after { width: 46px; }

/* The date is the card's floor, whatever length the name ran to. */
.vnk-skin .vnk-card-meta { margin-top: auto; padding-top: 13px; }

.vnk-skin .vnk-none {
	font-family: var(--prose);
	color: var(--muted);
}

/* Pagination, in the world's own voice. */
.vnk-skin .vnk-list .navigation,
.vnk-skin .vnk-list .pagination {
	margin-top: clamp(36px, 5vw, 64px);
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-family: var(--prose);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.vnk-skin .vnk-list .nav-links a,
.vnk-skin .vnk-list .page-numbers {
	color: var(--muted);
	text-decoration: none;
	margin-right: 18px;
}

.vnk-skin .vnk-list .nav-links a:hover,
.vnk-skin .vnk-list .page-numbers.current {
	color: var(--metal);
}

/* The archive heading the theme prints, when one slips through. */
.vnk-skin .page-title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

@media (max-width: 1200px) {
	.vnk-skin .vnk-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
	.vnk-skin .vnk-cards { grid-template-columns: repeat(2, 1fr); }
	.vnk-skin .vnk-plate { min-height: 52vh; }
}

@media (max-width: 680px) {
	.vnk-skin .vnk-cards { grid-template-columns: 1fr; }
	.vnk-skin .vnk-plate-text { width: auto; }
}


/* ==========================================================================
   The world map, on the listing's own grid
   It was briefly edge to edge; it now starts and ends where a trip card does,
   so moving between the map and the listing never shifts the margin. Square
   corners, like every other image in this world.
   ========================================================================== */

.vnk-skin-map .entry-content {
	padding-left: var(--gut);
	padding-right: var(--gut);
}

.vnk-skin-map .entry-content > .vnk-world {
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100%;
	max-width: none;
}

.entry-content > .vnk-world .vnk-world-frame {
	border-radius: 0;
}

/* ==========================================================================
   The map page
   Built to stand beside the Trips listing: the same ground, the same heading
   on the same gutter with the same hairline under it, and then the map at the
   full width of the screen where the listing would start its grid.
   ========================================================================== */

/*
 * The theme centres this page in a 1290px column, which puts its heading a
 * dozen pixels off where the listing's sits. Both are released to the gutter
 * so the two pages line up when you move between them.
 */
.vnk-skin-map .hero-section {
	max-width: none;
	width: auto;
	padding-left: var(--gut);
	padding-right: var(--gut);
}

/*
 * The content column itself keeps no side padding - the map is as wide as it
 * is - and the gutter is handed to its other children above.
 */
.vnk-skin-map .entry-content {
	max-width: none;
	width: auto;
}

.vnk-skin-map .hero-section {
	padding-top: clamp(28px, 4vw, 54px);
	padding-bottom: 0;
}

.vnk-skin-map .page-title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 clamp(24px, 3vw, 38px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

/* The entry's own vertical rhythm is the listing's, not the theme's. */
.vnk-skin-map .entry-content {
	padding-top: 0;
	padding-bottom: clamp(64px, 8vw, 116px);
}

.vnk-skin-map .entry-content > .vnk-world {
	margin-top: 0;
	margin-bottom: 0;
}

/*
 * The count under the map is a field label, like the meta line under a card,
 * and it sits at the gutter rather than centred: nothing in this world is
 * centred. The figure is full-bleed, so the padding is put back here.
 */
.vnk-skin-map .vnk-world-caption {
	margin: 18px 0 0;
	text-align: left;
	font-family: var(--prose);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--muted);
}

/* The pins and their labels, in the world's own ink. */
.vnk-skin-map .vnk-world-name {
	font-family: var(--display);
	letter-spacing: .02em;
	text-transform: uppercase;
}

.vnk-skin-map .vnk-world-when {
	font-family: var(--prose);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   The policy, as a document
   Read, not Persuade: the visitor came to find one clause and leave. The
   world is the same - near-black, two faces, one metal hairline - and the
   ambition is spent on making a long legal text findable and readable rather
   than on anything the eye has to get past first.

   The frame is the listing's: same gutter, same heading with the same rule
   under it, so the policy is plainly a page of this site and not a document
   the browser happened to open.
   ========================================================================== */

.vnk-skin-read {
	/*
	 * One column for the document, in rem rather than ch. ch is the width of
	 * a zero in the element's own font, so a ch measure gave the title, the
	 * lede, the body and the section headings four different widths - and,
	 * once centred, four different left edges, thirteen pixels apart. One
	 * absolute value gives them one column. 39rem is 624px, which is the 70
	 * characters the body face renders.
	 */
	--doc: 39rem;
}

.vnk-skin-read .hero-section,
.vnk-skin-read .entry-content {
	max-width: none;
	width: auto;
	padding-left: var(--gut);
	padding-right: var(--gut);
}

/*
 * The column is centred on the page; the text inside it is not. Lines stay
 * ranged left with a ragged right edge - centred prose is unreadable at any
 * measure - but the block of them sits in the middle of the screen rather
 * than against the left gutter with a third of the page empty beside it.
 * This is the one surface where the world's left-at-the-gutter habit gives
 * way: a document is read, not scanned, and it reads better centred.
 */
.vnk-skin-read .entry-header,
.vnk-skin-read .page-description,
.vnk-skin-read .entry-content > * {
	max-width: var(--doc);
	margin-left: auto !important;
	margin-right: auto !important;
}

.vnk-skin-read .hero-section {
	padding-top: clamp(28px, 4vw, 54px);
	padding-bottom: 0;
}

.vnk-skin-read .page-title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.vnk-skin-read .entry-content {
	/* The lede belongs to the title; the body starts after a clear break. */
	padding-top: clamp(18px, 2vw, 26px);
	padding-bottom: clamp(64px, 8vw, 116px);
}

/*
 * The measure, which is the whole job here. The theme ran this text to the
 * full 1290px column - about 150 characters a line, roughly twice what an
 * eye tracks without losing its place. 68 characters is the middle of the
 * readable band. Left at the gutter, not centred: nothing in this world is.
 */
/*
 * 61ch, not the 68 the readable band suggests: ch is the width of a zero,
 * and in Manrope a zero is wider than the average letter, so 68ch measured
 * 78 characters on the rendered page. This lands on 70.
 */

.vnk-skin-read .entry-content p,
.vnk-skin-read .entry-content li {
	font-family: var(--prose);
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--ink);
}

.vnk-skin-read .entry-content p { margin: 0 0 1.35em; }

/* What the clause insists on, in the brighter ink rather than a colour. */
.vnk-skin-read .entry-content strong,
.vnk-skin-read .entry-content b {
	color: #fff;
	font-weight: 600;
}

/*
 * Sections are ruled off above rather than underlined below: the page's own
 * heading already owns that device, and a document reads better when the
 * line belongs to the break between sections.
 */
.vnk-skin-read .entry-content h2 {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
	margin: clamp(48px, 6vw, 84px) 0 clamp(14px, 1.4vw, 20px);
	padding-top: clamp(22px, 2.4vw, 32px);
	border-top: 1px solid var(--line);
}

.vnk-skin-read .entry-content h3 {
	font-family: var(--display);
	font-weight: 500;
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: clamp(30px, 3.4vw, 46px) 0 clamp(10px, 1vw, 14px);
}

/* The list marks are the accent's smallest job. */
.vnk-skin-read .entry-content ul,
.vnk-skin-read .entry-content ol {
	margin: 0 0 1.5em;
	padding-left: 1.4em;
}

.vnk-skin-read .entry-content li { margin-bottom: .5em; }
.vnk-skin-read .entry-content li::marker { color: var(--metal); }

.vnk-skin-read .entry-content a {
	color: var(--metal);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.vnk-skin-read .entry-content a:hover,
.vnk-skin-read .entry-content a:focus-visible { color: var(--metal-lit); }

/* The separator the document already carries, in the world's hairline. */
.vnk-skin-read .entry-content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--line);
	margin: clamp(44px, 5vw, 70px) 0;
	opacity: 1;
}

/*
 * The line under the title says what the document is for. It is the one
 * sentence a visitor reads before deciding whether to read the rest, so it
 * is set a step above the body and in the quieter ink, on the same measure.
 */
.vnk-skin-read .page-description {
	margin-top: clamp(18px, 2vw, 26px);
}

.vnk-skin-read .page-description p {
	font-family: var(--prose);
	font-size: clamp(1.05rem, 1.25vw, 1.2rem);
	line-height: 1.6;
	color: var(--muted);
	margin: 0;
}

/* ==========================================================================
   The plugin's own components, retinted
   The trips plugin ships its tools - the guest panel, the moderation tray,
   the file list, the buttons - with the old palette written into them. They
   now read it from these variables, keeping their old values as fallbacks so
   the plugin still stands up without this theme. Set on the whole skin, not
   only on the working screens: the guest panel and the tray also appear
   inside a trip page.
   ========================================================================== */

.vnk-skin {
	--vnk-c-ink: var(--ink);
	--vnk-c-soft: #d9d6d0;
	--vnk-c-muted: var(--muted);
	--vnk-c-line: var(--line);
	--vnk-c-raised: #16181a;
	--vnk-c-sunk: #121416;
	--vnk-c-accent: var(--metal);
	--vnk-c-accent-lit: var(--metal-lit);
	--vnk-c-accent-ink: #16130c;

	/*
	 * The theme's form variables too, or a field keeps the old blue ring on
	 * focus - which is the one moment a field is looked at.
	 */
	--theme-form-field-border-initial-color: var(--line);
	--theme-form-field-border-focus-color: var(--metal);
	--theme-form-selection-field-initial-color: var(--line);
	--theme-form-selection-field-active-color: var(--metal);
}

/*
 * The plugin's buttons carry a 1px border that something in the stack zeroes
 * - measured at 0px on the page - so the width and style are restated here.
 * Without it the primary action's metal edge is a colour with nothing to
 * colour.
 */
.vnk-skin .vnk-gbtn {
	border-width: 1px;
	border-style: solid;
}

/* ==========================================================================
   The working screens
   Operate, not Experience: somebody is here to invite a guest, hand out a
   link or clear a queue. The frame is the listing's so the tool is plainly
   part of this site; everything inside it is left where the hand expects it.
   ========================================================================== */

.vnk-skin-work .hero-section,
.vnk-skin-work .entry-content {
	max-width: none;
	width: auto;
	padding-left: var(--gut);
	padding-right: var(--gut);
}

.vnk-skin-work .hero-section {
	padding-top: clamp(28px, 4vw, 54px);
	padding-bottom: 0;
}

.vnk-skin-work .page-title {
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 clamp(24px, 3vw, 38px);
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}

.vnk-skin-work .entry-content {
	padding-top: 0;
	padding-bottom: clamp(64px, 8vw, 116px);
}

/* A tool's panel is ruled, not boxed and shadowed. */
.vnk-skin-work .vnk-guest-card,
.vnk-skin-work .vnk-guests-card,
.vnk-skin-work .vnk-panel {
	border-radius: 0;
	box-shadow: none;
}

/* Fields: a dark well with a hairline, and metal when they have the focus. */
.vnk-skin-work input[type="text"],
.vnk-skin-work input[type="url"],
.vnk-skin-work input[type="password"],
.vnk-skin-work input[type="search"],
.vnk-skin-work textarea,
.vnk-skin-work select {
	background: var(--vnk-c-sunk);
	border: 1px solid var(--line);
	border-radius: 0;
	color: var(--ink);
	font-family: var(--prose);
}

.vnk-skin-work input:focus-visible,
.vnk-skin-work textarea:focus-visible,
.vnk-skin-work select:focus-visible {
	border-color: var(--metal);
	outline-offset: 1px;
}

/* The buttons keep their shape and lose their corners, like everything here. */
.vnk-skin-work .vnk-gbtn,
.vnk-skin .vnk-gbtn {
	border-radius: 0;
	font-family: var(--prose);
}

/*
 * The primary action, within the one metal rule.
 *
 * The plugin's "done" button fills itself with the accent, which was right
 * when the accent was a blue. Here the metal is a hairline colour - the
 * system says it is never a field behind text, and the one exception is the
 * text selection - so the primary action is marked by a metal edge and white
 * type instead, and the secondary buttons keep the grey hairline. The
 * difference between them is the line, which is how everything else on this
 * site separates one weight from another.
 */
.vnk-skin .vnk-gbtn-done,
.vnk-skin .vnk-gbtn-done:hover:not(:disabled) {
	background: transparent;
	border-color: var(--metal);
	color: #fff;
}

.vnk-skin .vnk-gbtn-done:hover:not(:disabled) {
	background: rgba(199, 167, 109, .14);
}

/*
 * The choice rows and every native control the browser paints for us.
 *
 * The selected row kept a blue-grey fill from the old palette, and the radio
 * mark itself is drawn by the browser in its own accent - which stayed blue
 * whatever the stylesheet said, because accent-color is the only property
 * that reaches it.
 */
.vnk-skin .vnk-radio:has(input:checked) {
	background: rgba(199, 167, 109, .10);
	border-color: var(--metal);
}

.vnk-skin input,
.vnk-skin select,
.vnk-skin textarea,
.vnk-skin progress {
	accent-color: var(--metal);
}

/* The drop zone's dashes, in the world's own line colour. */
.vnk-skin .vnk-drop {
	border-color: var(--line);
	border-radius: 0;
}

.vnk-skin .vnk-drop:hover,
.vnk-skin .vnk-drop.is-over {
	border-color: var(--metal);
}

/*
 * Add Trip's own primary button, under the same rule as every other.
 *
 * A different family from the Guests screen's buttons - .vnk-btn rather than
 * .vnk-gbtn - and it filled itself with the accent for the same reason: the
 * accent used to be a blue. Here it is a metal edge and white type, full
 * width as the form intends, so the action still reads as the end of the
 * form without the metal becoming a field.
 */
.vnk-skin .vnk-btn-primary,
.vnk-skin .vnk-btn-primary:hover:not(:disabled) {
	background: transparent;
	border-color: var(--metal);
	color: #fff;
}

.vnk-skin .vnk-btn-primary:hover:not(:disabled) {
	background: rgba(199, 167, 109, .14);
}

.vnk-skin .vnk-btn {
	border-radius: 0;
	border-width: 1px;
	border-style: solid;
	font-family: var(--prose);
}

/* ==========================================================================
   The gap under the menu, the same on every page
   The listings render their own wrapper and sit 54px under the header. Every
   page that uses the theme's hero section was sitting at 114: the theme's
   content container contributes 60px of its own vertical spacing on top of
   the 54 asked for here. Zeroed, so moving between a listing and any other
   page no longer shifts the first line down and back up again.
   ========================================================================== */

.vnk-skin-map main#main > [class*="ct-container"],
.vnk-skin-read main#main > [class*="ct-container"],
.vnk-skin-work main#main > [class*="ct-container"] {
	padding-top: 0 !important;
}

/* ==========================================================================
   The map fits the screen
   The frame was drawn at the shape of the picture - 25:14 of a column that
   grows with the window - so on a wide screen it stood 874px tall and ran
   197px past the bottom of the viewport: you could never see the whole map
   at once, which is the one thing a map page owes.

   It is a viewport now, not a picture: the height is what is left of the
   screen under the header and the heading, floored so it never collapses on
   a short window and capped so it does not tower on a tall one.
   ========================================================================== */

.vnk-skin-map .vnk-world-frame {
	aspect-ratio: auto;
	height: clamp(340px, calc(100vh - 330px), 820px);
}

/* ==========================================================================
   Search: the field is the heading.

   On a page that exists because somebody asked a question, the question is
   the title. It is set in the title's face at the title's size, on the same
   hairline every heading in this world sits on, and it stays editable - so
   changing a search is typing over it rather than going back to the header.
   ========================================================================== */

.vnk-skin .vnk-find {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0 clamp(12px, 1.2vw, 18px);
	margin: 0 0 clamp(20px, 2.4vw, 30px);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	transition: border-color .22s ease;
}

.vnk-skin .vnk-find:focus-within { border-bottom-color: var(--metal); }

.vnk-skin .vnk-find-lens {
	width: clamp(18px, 1.9vw, 24px);
	height: clamp(18px, 1.9vw, 24px);
	background-color: var(--muted);
	-webkit-mask: var(--vnk-lens) center / contain no-repeat;
	mask: var(--vnk-lens) center / contain no-repeat;
	transition: background-color .22s ease;
}

.vnk-skin .vnk-find:focus-within .vnk-find-lens { background-color: var(--metal); }

/*
 * A field dressed as a heading still has to behave like a field, so the
 * caret is lit in the accent and the browser's own clear button, which
 * belongs to no design system, is taken off: this form has its own.
 */
.vnk-skin .vnk-find-q {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--display);
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	line-height: 1.16;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	caret-color: var(--metal);
}

.vnk-skin .vnk-find-q:focus { outline: none; }

.vnk-skin .vnk-find-q::placeholder {
	color: var(--muted);
	opacity: 1;
}

.vnk-skin .vnk-find-q::-webkit-search-cancel-button,
.vnk-skin .vnk-find-q::-webkit-search-decoration { -webkit-appearance: none; }

.vnk-skin .vnk-find-go {
	appearance: none;
	padding: 6px;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.vnk-skin .vnk-find-go::after {
	content: "";
	display: block;
	width: clamp(16px, 1.7vw, 21px);
	height: clamp(16px, 1.7vw, 21px);
	background-color: var(--metal);
	-webkit-mask: var(--vnk-arrow) center / contain no-repeat;
	mask: var(--vnk-arrow) center / contain no-repeat;
	transition: transform .24s cubic-bezier(.16, 1, .3, 1), background-color .22s ease;
}

.vnk-skin .vnk-find-go:hover::after,
.vnk-skin .vnk-find-go:focus-visible::after {
	background-color: var(--metal-lit);
	transform: translateX(3px);
}

/* What came back, in the key the card meta is written in. */
.vnk-skin .vnk-find-count {
	font-family: var(--prose);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 clamp(24px, 3vw, 38px);
}

.vnk-skin .vnk-find-hint,
.vnk-skin .vnk-find-none {
	font-family: var(--prose);
	font-size: clamp(.95rem, 1.1vw, 1.05rem);
	line-height: 1.55;
	color: var(--muted);
	max-width: 46ch;
	margin: 0;
}

.vnk-skin .vnk-find-none { color: #e4e1db; }

/*
 * The words that found nothing. Marked by the quotes and by weight, not by
 * a rule under them: an underline here reads as a link, and this is the one
 * thing on the page that leads nowhere.
 */
.vnk-skin .vnk-find-said {
	color: #fff;
	font-weight: 600;
}

.vnk-skin .vnk-find-said::before { content: "\201C"; }
.vnk-skin .vnk-find-said::after { content: "\201D"; }

/* The way on, in the voice the front page uses for the same move. */
.vnk-skin .vnk-go {
	display: inline-block;
	margin-top: clamp(26px, 3.2vw, 38px);
	font-family: var(--prose);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--metal);
	text-decoration-thickness: 1px;
	text-underline-offset: 9px;
	transition: text-underline-offset .22s cubic-bezier(.16, 1, .3, 1), color .22s ease;
}

.vnk-skin .vnk-go::after {
	content: "";
	display: inline-block;
	width: .62em;
	height: .62em;
	margin-left: .7em;
	vertical-align: -.02em;
	background-color: var(--metal);
	-webkit-mask: var(--vnk-arrow) center / contain no-repeat;
	mask: var(--vnk-arrow) center / contain no-repeat;
}

.vnk-skin .vnk-go:hover,
.vnk-skin .vnk-go:focus-visible { text-underline-offset: 5px; color: var(--metal); }

@media (prefers-reduced-motion: reduce) {
	.vnk-skin .vnk-find-go::after,
	.vnk-skin .vnk-go { transition: none; }
}

/* ==========================================================================
   The search modal, which is the door to all of the above.

   Not scoped to .vnk-skin: the modal is printed on every page, the front
   page included, and that page carries its own stylesheet instead. The
   theme sets these as literal values and as its own palette variables in
   inline CSS that loads after this file, so the rules below carry the id
   and, where the theme used a variable, redefine the variable rather than
   fight the declaration that reads it.
   ========================================================================== */

#search-modal,
#search-modal .ct-panel-content {
	background-color: #0d0e0f;
}

#search-modal .ct-search-form {
	--theme-form-field-border-initial-color: #2b2f33;
	--theme-form-field-border-focus-color: #c7a76d;
	--theme-form-text-initial-color: #f1eee8;
	--theme-form-text-focus-color: #f1eee8;
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: transparent;
	--theme-button-text-initial-color: #c7a76d;
	--theme-button-text-hover-color: #e0c48f;
	--theme-form-border-radius: 0;
	max-width: min(760px, 86vw);
}

/*
 * The theme draws the field as a rounded pill on a wrapper div rather than
 * on the input, so the rule that replaces it goes on the same wrapper -
 * otherwise the two are drawn one inside the other.
 */
#search-modal .ct-search-form-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 0;
	border-bottom: 1px solid #2b2f33;
	border-radius: 0;
	background: none;
	padding: 0;
	transition: border-color .22s ease;
}

/*
 * The theme rings the whole wrapper on focus, from the same variable the
 * border reads, so pointing that variable at the accent drew a metal box
 * around the field. The rule under the field is the focus mark here.
 */
#search-modal .ct-search-form-inner,
#search-modal .ct-search-form-inner:focus-within { outline: 0; }

#search-modal .ct-search-form-inner:focus-within { border-bottom-color: #c7a76d; }

#search-modal input[type="search"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 10px 2px 12px;
	font-family: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	font-weight: 300;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #f1eee8;
	caret-color: #c7a76d;
	transition: border-color .22s ease;
}

#search-modal input[type="search"]:focus {
	outline: none;
	box-shadow: none;
}

#search-modal input[type="search"]::placeholder { color: #a7adb2; opacity: 1; }

#search-modal input[type="search"]::-webkit-search-cancel-button,
#search-modal input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

#search-modal .ct-search-form button[type="submit"] {
	flex: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: #c7a76d;
	min-height: 0;
	padding: 6px 2px;
}

#search-modal .ct-search-form button[type="submit"] .ct-icon {
	width: 20px;
	height: 20px;
}

#search-modal .ct-search-form button[type="submit"]:hover { color: #e0c48f; }

#search-modal .ct-search-form button[type="submit"] .ct-icon {
	fill: currentColor;
	transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}

#search-modal .ct-search-form button[type="submit"]:hover .ct-icon { transform: scale(1.08); }

#search-modal .ct-toggle-close { color: #a7adb2; }
#search-modal .ct-toggle-close:hover { color: #f1eee8; }

/*
 * The way out, under the field rather than in the far corner. Given the
 * field's own width so the two share a left edge, and set in the key the
 * site uses for everything that is a label rather than a destination.
 */
#search-modal .vnk-search-cancel {
	display: block;
	width: min(760px, 86vw);
	margin: 22px auto 0;
	padding: 6px 0;
	border: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font-family: Manrope, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #a7adb2;
	transition: color .22s ease;
}

#search-modal .vnk-search-cancel:hover,
#search-modal .vnk-search-cancel:focus-visible { color: #f1eee8; }

@media (prefers-reduced-motion: reduce) {
	#search-modal .vnk-search-cancel { transition: none; }
}

/* The results the field offers while it is being typed into. */
#search-modal .ct-search-results {
	background-color: #121416;
	border: 0;
	border-radius: 0;
	font-family: Manrope, system-ui, sans-serif;
}

#search-modal .ct-search-results a {
	color: #e4e1db;
	border-bottom: 1px solid #2b2f33;
}

#search-modal .ct-search-results a:last-child { border-bottom: 0; }

#search-modal .ct-search-results a:hover,
#search-modal .ct-search-results a:focus-visible { color: #fff; background-color: #16181a; }

#search-modal ::selection { background: #c7a76d; color: #16130c; }

/*
 * Only the things that are actually pressed. The field shows focus by
 * lighting its own rule, and the wrapper the theme wraps it in is
 * focusable, so a blanket rule here drew a second box around the field.
 */
#search-modal a:focus-visible,
#search-modal button:focus-visible {
	outline: 2px solid #c7a76d;
	outline-offset: 3px;
}

/* ==========================================================================
   The language pair in the menu row.

   Not scoped to .vnk-skin: the header is the same object on every page, the
   front page included, and that page carries its own stylesheet. Written
   with literal values for the same reason - the world's tokens are declared
   on .vnk-skin, which the front page does not wear.

   EN and RU are not two more sections. They sit in the same row and the same
   face, a step smaller and a little further apart, behind a hairline that
   says the group has changed. The one you are on is lit; the other is the
   way out of it.
   ========================================================================== */

/*
 * Translucent white rather than a fixed grey. On the front page the header
 * has no ground of its own - the photograph runs up behind it - so a grey
 * that reads as "quieter than the sections" on the dark pages turns into
 * "almost gone" over a pale sky. At 72% the pair stays a step below the
 * white sections on every page and never falls further behind them.
 */
#header .vnk-lang-item > .ct-menu-link {
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, .72);
}

#header .vnk-lang-item.current-language-menu-item > .ct-menu-link {
	color: #c7a76d;
}

#header .vnk-lang-item > .ct-menu-link:hover,
#header .vnk-lang-item > .ct-menu-link:focus-visible {
	color: #ffffff;
}

/*
 * The hairline falls on whichever language comes first, found by not having
 * another one in front of it - so it stays in place if the order is ever
 * swapped, or if a third language is added.
 *
 * Drawn as a short mark rather than as a border on the item: the item is as
 * tall as the whole header row, and a border there cuts the header in two
 * instead of parting two groups of words. Translucent white rather than a
 * grey, because on the front page the header has no ground of its own - the
 * photograph runs up behind it.
 */
#header .vnk-lang-item { position: relative; }

#header li:not(.vnk-lang-item) + .vnk-lang-item {
	margin-left: 14px;
	padding-left: 14px;
}

#header li:not(.vnk-lang-item) + .vnk-lang-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 13px;
	margin-top: -6px;
	background: rgba(255, 255, 255, .22);
}

/*
 * The two of them are one control, so they sit closer than the sections do.
 * Taken off the link's own padding rather than added as a negative margin,
 * which would slide one item's clickable box under its neighbour's.
 */
#header .vnk-lang-item > .ct-menu-link {
	padding-left: 8px;
	padding-right: 8px;
}

/* The plugin's flags, in a header drawn entirely in ink and one metal. */
#header .trp-flag-image,
#offcanvas .trp-flag-image { display: none; }

/*
 * In the off-canvas menu the sections are a column of large links. The
 * language pair is not a section, so it does not take a row each: the two
 * sit side by side under them, at the size they have in the header.
 */
#offcanvas .vnk-lang-item {
	position: relative;
	display: inline-block;
	width: auto;
}

/*
 * The same mark, lying down. Given a width of its own rather than taking the
 * item's: inline-block makes the item as wide as its two letters, so a
 * border there would be as long as whatever the label happened to be.
 */
#offcanvas li:not(.vnk-lang-item) + .vnk-lang-item {
	margin: 20px 0 0;
	padding: 20px 0 0;
}

#offcanvas li:not(.vnk-lang-item) + .vnk-lang-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 1px;
	margin: 0;
	background: rgba(255, 255, 255, .22);
}

#offcanvas .vnk-lang-item > .ct-menu-link {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	padding-right: 20px;
}

#offcanvas .vnk-lang-item.current-language-menu-item > .ct-menu-link { color: #c7a76d; }

/* ==========================================================================
   The header that comes back.

   Unscoped for the same reason as the language pair: one header, every page,
   and the front page does not wear the world's class.

   Sticky rather than fixed, so the header never leaves the flow and nothing
   below it has to be padded to make up for its absence. assets/header.js
   writes the two states on <html>; everything they mean is here.
   ========================================================================== */

#header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}

/*
 * The admin toolbar, for the one reader who is signed in.
 *
 * Keyed on the folded-away state this theme keeps on <html>, not on the body
 * class WordPress sets. style.css already records why: the body class stays
 * on the page whether the toolbar is on screen or folded behind its button,
 * and folded is its resting state - so an offset hung on that class left the
 * header floating 32px down the window with the page showing through the gap
 * above it, which is exactly what happens for a signed-in reader.
 *
 * Phones are the other exception: at 600px and under WordPress makes the bar
 * position:absolute and lets it scroll away with the page, so there is again
 * nothing up there to make room for.
 */
html.vnk-bar-open #header { top: 32px; }

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

@media (max-width: 600px) {
	html.vnk-bar-open #header { top: 0; }
}

/*
 * The front page at rest is a different case again: its header is absolute
 * inside the content wrapper, which the toolbar's own offset has already
 * pushed down, so an offset here is pure gap. It gets one only once it is
 * lifted and fixed.
 */
html.vnk-bar-open body.home #header { top: 0; }

html.vnk-bar-open.vnk-head-lift body.home #header { top: 32px; }

@media (max-width: 782px) {
	html.vnk-bar-open.vnk-head-lift body.home #header { top: 46px; }
}

@media (max-width: 600px) {
	html.vnk-bar-open.vnk-head-lift body.home #header { top: 0; }
}

/*
 * Lifted a hair past its own height: a header that stops exactly at -100%
 * leaves its bottom border on the screen as a one-pixel line.
 */
html.vnk-head-away #header { transform: translateY(-101%); }

/*
 * Off the top of the page the header can no longer borrow the ground beneath
 * it - on the front page and on a trip there is a photograph there. So it
 * brings its own, and shortens: 72px is enough for the wordmark and the menu
 * and gives the photographs back the rest.
 */
html.vnk-head-lift #header [data-row],
html.vnk-head-lift #header [data-row] > .ct-container,
html.vnk-head-lift .ct-header [data-row="middle"] {
	background-color: #0d0e0f;
}

html.vnk-head-lift #header [data-row="middle"] { --shrink-height: 72px; }

html.vnk-head-lift #header [data-row] > div {
	border-bottom: 1px solid #23272a;
	transition: min-height .34s cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 999.98px) {
	html.vnk-head-lift #header [data-row="middle"] { --shrink-height: 58px; }
}

/*
 * The logo is set from the row height, so it comes down with it rather than
 * standing at full size in a shorter band.
 */
html.vnk-head-lift #header .site-title,
html.vnk-head-lift #header .site-title a {
	font-size: 1.72rem;
	transition: font-size .34s cubic-bezier(.16, 1, .3, 1);
}

html.vnk-head-lift #header .site-logo-container img {
	width: 26px;
	height: 26px;
	transition: width .34s cubic-bezier(.16, 1, .3, 1), height .34s cubic-bezier(.16, 1, .3, 1);
}

/*
 * The front page floats its header over the cover photograph: style.css
 * lifts it out of the flow and makes the row transparent, with !important,
 * so the picture starts at the very top of the window. That is the page's
 * signature and it stays - at rest.
 *
 * Once lifted it has to behave like every other header, and it can: a header
 * that is already out of the flow can be switched from absolute to fixed
 * without moving anything. The switch happens while it is off the top of the
 * window, so it is never seen changing footing, and at the top of the page
 * the two positions put it in the same place anyway.
 */
html.vnk-head-lift body.home #header { position: fixed; }

html.vnk-head-lift body.home #header [data-row],
html.vnk-head-lift body.home #header [data-row] > .ct-container,
html.vnk-head-lift body.home .ct-header [data-row="middle"] {
	background-color: #0d0e0f !important;
}

/* On its own ground the menu no longer needs lifting off a photograph. */
html.vnk-head-lift body.home #header .site-title a,
html.vnk-head-lift body.home #header .ct-menu-link,
html.vnk-head-lift body.home #header [data-id="search"] .ct-toggle {
	text-shadow: none;
}

/*
 * Taking the movement away leaves the behaviour: the header is still there
 * when you come back up, it simply does not travel to get there.
 */
@media (prefers-reduced-motion: reduce) {
	#header,
	html.vnk-head-lift #header [data-row] > div,
	html.vnk-head-lift #header .site-title,
	html.vnk-head-lift #header .site-title a,
	html.vnk-head-lift #header .site-logo-container img { transition: none; }
}