/* ==========================================================================
   The front page.
   Loaded on the front page only, after style.css, so the rest of the site is
   untouched while this world is tried out on one page.

   The world: the catalogue of a travel house, executed straight. Photographs
   are the only large colour on a near-black ground; one metal line does every
   job colour would otherwise do; the destination is set like a cover line,
   large and to the left, and the facts under it are content rather than
   ornament.

   Two faces, both already loaded and both carrying Cyrillic, so the Russian
   side is the same design rather than a translation of it: Sofia Sans Extra
   Condensed for display, Manrope for everything read as a sentence.
   ========================================================================== */

.vnk-front {
	--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");
	--ground: #0d0e0f;
	--ink: #f1eee8;
	--muted: #a7adb2;      /* 7.2:1 on the ground - small text lives here */
	--line: #2b2f33;
	--metal: #c7a76d;      /* hairlines and the live mark */
	--metal-lit: #e0c48f;  /* the same metal with a light on it */
	--display: "Sofia Sans Extra Condensed", "Archivo Narrow", sans-serif;
	--body: Manrope, system-ui, sans-serif;
	--gut: clamp(20px, 4.4vw, 76px);

	background: var(--ground);
	color: var(--ink);
	font-family: var(--body);
}

/* Blocksy pads its content wrapper; the hero starts at the top of the page. */
.home main#main,
.home main#main > .vnk-front {
	padding-top: 0 !important;
	max-width: none !important;
}

/* The parts the browser draws, which belong to the page as much as the rest. */
.vnk-front ::selection { background: var(--metal); color: #16130c; }
.vnk-front a:focus-visible,
.vnk-front :focus-visible {
	outline: 2px solid var(--metal);
	outline-offset: 3px;
	border-radius: 1px;
}

/* --- The newest trip ---------------------------------------------------- */

.vnk-front .vnk-hero {
	position: relative;
	/*
	 * Short of the full screen on purpose, and measured rather than
	 * guessed: at 78vh the hero ends at 702 on a 900px screen, the heading
	 * and its rule follow, and the top of the first photograph clears the
	 * fold - so a first-time visitor sees that trips continue below.
	 */
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
}

.vnk-front .vnk-hero-plate {
	position: absolute;
	inset: 0;
	display: block;
}

.vnk-front .vnk-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
 * Two washes doing two jobs. The vertical one keeps the floating header and
 * the bottom edge readable on any frame; the elliptical one belongs to the
 * words and travels with them, bounded in rem so it is spent long before it
 * reaches the far side of the photograph. Measured on the live page: without
 * the second one, body-sized type over a sunlit frame falls to 2.6:1.
 */
.vnk-front .vnk-hero-wash {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 30rem 60% at 26% 76%,
			rgba(8, 9, 10, .74) 0%, rgba(8, 9, 10, .52) 48%, rgba(8, 9, 10, 0) 78%),
		linear-gradient(to bottom,
			rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, .12) 34%,
			rgba(8, 9, 10, .55) 76%, rgba(8, 9, 10, .88) 100%);
	pointer-events: none;
}

.vnk-front .vnk-hero-text {
	position: relative;
	z-index: 2;
	width: min(760px, 100%);
	margin: 0 var(--gut) clamp(40px, 6vw, 86px);
	pointer-events: none;
}

.vnk-front .vnk-hero-text a { pointer-events: auto; }

.vnk-front .vnk-hero-name {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(3.4rem, 8vw, 8rem);
	line-height: .92;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

/*
 * The destination is the link. It carries no underline at rest - at this size
 * a rule under eight rem of capitals is a second hairline fighting the one
 * below it - and answers the pointer and the keyboard by warming to the metal.
 * The photograph behind it opens the same trip; that plate is hidden from
 * assistive technology and from the tab order, so the page offers one link
 * here, not two to the same place.
 *
 * The mark used to be a border under the link. A border on an inline box is
 * drawn under every line it breaks across, so a destination long enough to
 * wrap - "Copenhagen. Day 2" on a wide screen, where the type reaches its
 * eight-rem ceiling while the column stays at 760px - got a gold rule struck
 * through the middle of its own name. Colour has no such seam: it reads the
 * same whether the title takes one line or three.
 */
.vnk-front .vnk-hero-name a {
	color: inherit;
	text-decoration: none;
	transition: color .28s ease;
}

.vnk-front .vnk-hero-name a:hover,
.vnk-front .vnk-hero-name a:focus-visible {
	color: var(--metal-lit, #e0c48f);
}

.vnk-front .vnk-rule {
	height: 1px;
	background: linear-gradient(to right, var(--metal) 0 86px, rgba(241, 238, 232, .3) 86px 100%);
	margin: clamp(20px, 2.4vw, 30px) 0 clamp(16px, 1.8vw, 22px);
}

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

.vnk-front .vnk-fact { padding: 4px 0 10px; }
.vnk-front .vnk-fact-wide { flex: 1 1 300px; min-width: 0; }

.vnk-front .vnk-k {
	display: block;
	font-size: 10px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #cfd3d6;
	margin-bottom: 7px;
}

.vnk-front .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;
}

/* The trip's own words are a sentence, so they are set as one. */
.vnk-front .vnk-v-prose {
	font-family: var(--body);
	font-size: clamp(.9rem, 1.1vw, 1rem);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.5;
	color: #e4e1db;
	max-width: 46ch;
}

.vnk-front .vnk-go {
	display: inline-block;
	margin-top: clamp(18px, 2.2vw, 26px);
	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-front .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-go:hover,
.vnk-front .vnk-go:focus-visible { text-underline-offset: 5px; color: var(--metal); }

/* --- Sections ----------------------------------------------------------- */

.vnk-front .vnk-section {
	padding: clamp(48px, 5.6vw, 84px) var(--gut) 0;
}

/*
 * On whichever section ends the page, not on one section by name. "More
 * trips" only renders when there are trips left over, so when the readable
 * set fits in the hero and the strip, the page used to end six pixels above
 * the footer - and the footer, now the same ground as the page, no longer
 * hides it with a colour change.
 */
.vnk-front .vnk-section:last-child { padding-bottom: clamp(64px, 8vw, 116px); }
.vnk-front .vnk-go-all { margin-top: clamp(30px, 4vw, 46px); }

.vnk-front .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-front .vnk-empty { padding: clamp(80px, 14vh, 180px) var(--gut); }
.vnk-front .vnk-empty h1 { font-family: var(--display); font-size: clamp(2.6rem, 6.4vw, 6rem); text-transform: uppercase; letter-spacing: .05em; }
.vnk-front .vnk-empty p { color: var(--muted); margin-top: 12px; }

/* --- Trip cards --------------------------------------------------------- */

.vnk-front .vnk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.6vw, 40px);
}

.vnk-front .vnk-cards-tight { grid-template-columns: repeat(4, 1fr); }

/*
 * The recent strip, on twelve columns so every count it can receive divides
 * exactly. Six - what the page asks for whenever there are that many trips -
 * reads as two rows of three. Five keeps the older rhythm, three and then two
 * wider, because a row of three with a hole in it is worse than either. Four
 * is two and two; two sit side by side; one keeps an ordinary card's width
 * rather than running the whole measure.
 */
.vnk-front .vnk-cards-strip { grid-template-columns: repeat(12, 1fr); }
.vnk-front .vnk-cards-strip > li { grid-column: span 4; }

/* Exactly five: the fourth and fifth take half a row each. */
.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(5) ~ li:nth-child(n+4) { grid-column: span 6; }

/* Exactly four, and exactly two. */
.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(4),
.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(4) ~ li,
.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(2),
.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(2) ~ li { grid-column: span 6; }

.vnk-front .vnk-cards-strip > li:first-child:last-child { grid-column: span 4; }

/* --- Years -------------------------------------------------------------- */

.vnk-front .vnk-fp-year + .vnk-fp-year { margin-top: clamp(36px, 4.4vw, 60px); }

.vnk-front .vnk-fp-year-no {
	font-family: var(--display);
	font-weight: 200;
	font-size: clamp(1.1rem, 1.5vw, 1.4rem);
	letter-spacing: .3em;
	color: var(--muted);
	margin: 0 0 18px;
}

/* --- The padlock on a trip only some people can see --------------------- */

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

/* --- The one authored moment -------------------------------------------
   The destination rises out of its own line as the photograph settles.
   Nothing else on the page enters; everything else is simply there.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.vnk-front .vnk-hero-name {
		animation: vnk-rise 1.15s cubic-bezier(.16, 1, .3, 1) both;
		clip-path: inset(-20% -10% -10% -2%);
	}

	@keyframes vnk-rise {
		from { transform: translateY(.34em); opacity: 0; }
		to   { transform: none; opacity: 1; }
	}
}

/* --- Narrower screens ---------------------------------------------------
   The phone is where a relative opens the link, so it is a layout, not a
   fallback: one photograph, one name, the facts stacked, the cards in pairs.
   ------------------------------------------------------------------------ */

@media (max-width: 980px) {
	.vnk-front .vnk-cards { grid-template-columns: repeat(2, 1fr); }
	.vnk-front .vnk-cards-tight { grid-template-columns: repeat(3, 1fr); }
	.vnk-front .vnk-cards-strip { grid-template-columns: repeat(2, 1fr); }
	.vnk-front .vnk-cards-strip > li,
	.vnk-front .vnk-cards-strip > li:nth-child(n+4),
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(4),
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(4) ~ li,
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(2),
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(2) ~ li,
	.vnk-front .vnk-cards-strip > li:first-child:last-child { grid-column: auto; }
}

@media (max-width: 680px) {
	.vnk-front .vnk-hero { min-height: 82vh; }
	.vnk-front .vnk-hero-text { width: auto; margin-bottom: clamp(28px, 7vw, 44px); }
	.vnk-front .vnk-hero-wash {
		background:
			radial-gradient(ellipse 22rem 52% at 40% 80%,
				rgba(8, 9, 10, .80) 0%, rgba(8, 9, 10, .56) 50%, rgba(8, 9, 10, 0) 82%),
			linear-gradient(to bottom,
				rgba(8, 9, 10, .55) 0%, rgba(8, 9, 10, .14) 30%,
				rgba(8, 9, 10, .62) 72%, rgba(8, 9, 10, .9) 100%);
	}
	.vnk-front .vnk-facts { gap: 0 24px; }
	.vnk-front .vnk-fact-wide { flex-basis: 100%; }
	.vnk-front .vnk-cards { grid-template-columns: 1fr; gap: 30px; }
	.vnk-front .vnk-cards-strip { grid-template-columns: 1fr; }
	.vnk-front .vnk-cards-strip > li,
	.vnk-front .vnk-cards-strip > li:nth-child(n+4),
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(4),
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(4) ~ li,
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(2),
	.vnk-front .vnk-cards-strip > li:first-child:nth-last-child(2) ~ li,
	.vnk-front .vnk-cards-strip > li:first-child:last-child { grid-column: auto; }
	.vnk-front .vnk-cards-tight { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ==========================================================================
   The parts of the page this template does not render.
   The header, the switcher and the footer come from the theme and the
   translation plugin; on this page they still have to belong to the world.
   Loaded only on the front page, and scoped to .home so nothing here can
   reach another one.
   ========================================================================== */

/*
 * The language switcher is the user's control and keeps its markup, its
 * behaviour and its words. What changes is that it stops being a grey chip
 * floating above the navigation: it sits down into the header row, loses its
 * own background in favour of the photograph and the header's scrim, and its
 * labels go from #777 on #333 - 2.4:1, below any readable floor - to the same
 * near-white the menu uses, lifted by the same shadow. The language you are
 * reading is the one marked in metal.
 */
.home .trp-floating-switcher {
	/*
	 * It stays on its own line above the navigation. Seating it level with
	 * the menu puts EN and RU straight through "2026" and "2025" - the row
	 * is full - and the menu's position is the user's, not mine to move.
	 */
	background: transparent;
	padding: 2px 0 0;
}

.home .trp-floating-switcher .trp-language-item-name {
	color: #e9e6e0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
	letter-spacing: .18em;
}

.home .trp-floating-switcher a[aria-current="page"] .trp-language-item-name {
	color: #c7a76d;
}

/* Where you are, in the accent's third job. */
.home #header .current-menu-item > .ct-menu-link {
	color: #c7a76d;
}

/*
 * The footer kept the old theme's lighter band and its blue link - the only
 * saturated colour on a page whose one accent is metal. On this page it is
 * the same ground as everything above it, closed by a hairline.
 */
.home footer#footer,
.home footer#footer [data-row],
.home .ct-footer [data-row] {
	background-color: #0d0e0f;
}

.home footer#footer {
	border-top: 1px solid #2b2f33;
}

.home footer#footer a,
.home .ct-footer a.vnk-foot-link {
	color: #c7a76d;
}