/*
Theme Name: Wanderlustingk
Theme URI: https://www.wanderlustingk.com/
Author: Wanderlustingk
Author URI: https://www.wanderlustingk.com/about
Description: A travel magazine theme for Wanderlustingk. Canal-house green, a strip of tulip-field colours that doubles as a key to the places covered, and a homepage built from the site's own categories.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wanderlustingk
Tags: blog, news, travel, custom-logo, custom-menu, featured-images, translation-ready
*/

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */

:root {
	/* Grachtengroen: the near-black green of Amsterdam canal-house doors. */
	--green-900: #0f2a22;
	--green-800: #17382e;
	--green-700: #24503f;
	--green-200: #b9cdc2;

	--paper: #ffffff;
	--mist: #eef3ef;
	--blush: #fbdde4;
	--ink: #12211c;
	--ink-2: #4b5b54;
	--line: #d9e1db;

	/* Tulip colours. The first six are the place key; see inc/home-defaults.php. */
	--tulip: #d7263d;
	--tulip-dark: #b31b30;
	--sun: #f6c644;

	--serif: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--sans: Karla, "Helvetica Neue", Arial, sans-serif;

	--shell: 1240px;
	--gutter: clamp(20px, 4vw, 40px);
	--band: clamp(56px, 7vw, 96px);
	--radius: 3px;
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 17px/1.55 var(--sans);
	-webkit-font-smoothing: antialiased;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 3px solid var(--tulip);
	outline-offset: 3px;
	border-radius: 2px;
}

.wk-header :focus-visible,
.wk-hero :focus-visible,
.wk-band--dark :focus-visible,
.wk-footer :focus-visible {
	outline-color: var(--sun);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wk-skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--sun);
	color: var(--green-900);
	font-weight: 700;
}

.wk-skip:focus {
	top: 12px;
}

.wk-shell {
	width: 100%;
	max-width: calc(var(--shell) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ------------------------------------------------------------------
   3. Header
   ------------------------------------------------------------------ */

.wk-header {
	position: relative;
	z-index: 20;
	background: var(--green-900);
	color: #fff;
}

.wk-header__row {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 76px;
}

.wk-wordmark {
	font: 400 27px/1 var(--serif);
	letter-spacing: -0.01em;
	color: #fff;
	text-decoration: none;
}

.wk-brand img {
	max-height: 44px;
	width: auto;
}

.wk-nav {
	margin-left: auto;
}

.wk-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-nav > ul {
	display: flex;
	gap: 2px;
}

.wk-nav li {
	position: relative;
}

.wk-nav a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius);
	font-weight: 500;
	font-size: 16px;
	text-decoration: none;
}

.wk-nav > ul > li > a:hover,
.wk-nav > ul > li:focus-within > a {
	background: var(--green-700);
}

.wk-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 0 3px 9px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.wk-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	padding: 8px;
	background: var(--paper);
	border-radius: var(--radius);
	box-shadow: 0 18px 40px -14px rgba(8, 24, 19, 0.5);
	visibility: hidden;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

/* The last menu opens leftwards so it cannot run off the screen. */
.wk-nav > ul > li:last-child > .sub-menu {
	left: auto;
	right: 0;
}

.wk-nav li:hover > .sub-menu,
.wk-nav li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.wk-nav .sub-menu a {
	padding: 9px 12px;
	color: var(--ink);
}

.wk-nav .sub-menu a:hover {
	background: var(--mist);
}

.wk-header__tools {
	display: flex;
	align-items: center;
	gap: 6px;
}

.wk-tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 11px;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: inherit;
	font: 500 16px var(--sans);
	cursor: pointer;
}

.wk-tool:hover,
.wk-tool[aria-expanded="true"] {
	background: var(--green-700);
}

.wk-tool--menu {
	display: none;
}

.wk-lang {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 700;
}

.wk-lang a {
	display: block;
	padding: 6px 8px;
	border-radius: var(--radius);
	text-decoration: none;
	opacity: 0.65;
}

.wk-lang a[aria-current],
.wk-lang a:hover {
	opacity: 1;
}

.wk-lang a[aria-current] {
	box-shadow: inset 0 -2px 0 var(--sun);
}

.wk-searchbar {
	padding: 18px 0 22px;
	background: var(--green-800);
}

/* Search form, used in the header bar, the footer and on result pages. */

.wk-search {
	display: flex;
	gap: 10px;
	max-width: 640px;
}

.wk-search input {
	flex: 1;
	min-width: 0;
	height: 52px;
	padding: 0 16px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	font: 400 17px var(--sans);
}

.wk-pagehead .wk-search input,
.wk-none .wk-search input {
	border-color: var(--green-900);
}

.wk-search button,
.wk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius);
	background: var(--tulip);
	color: #fff;
	font: 700 17px var(--sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.wk-search button:hover,
.wk-btn:hover {
	background: var(--tulip-dark);
}

/* ------------------------------------------------------------------
   4. Homepage opening and the place strip
   ------------------------------------------------------------------ */

.wk-hero {
	background: var(--green-900);
	color: #fff;
}

.wk-hero__top {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: end;
	padding-block: clamp(36px, 5vw, 72px) clamp(36px, 4vw, 56px);
}

.wk-hero__title {
	font-size: clamp(60px, 10.4vw, 148px);
	line-height: 0.92;
	letter-spacing: -0.025em;
}

.wk-hero__side p {
	max-width: 46ch;
	margin-bottom: 24px;
	color: var(--green-200);
	font-size: 18px;
}

.wk-hero__note {
	margin-bottom: 14px;
	color: var(--green-200);
	font-size: 15px;
}

.wk-fields {
	display: flex;
	gap: 6px;
	height: clamp(260px, 30vw, 340px);
}

.wk-field {
	position: relative;
	display: flex;
	flex: var(--w) 1 0;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 148px;
	padding: 18px;
	overflow: hidden;
	color: var(--t);
	text-decoration: none;
	transition: flex-grow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The first name lines up with the headline above it. */
.wk-field:first-child {
	padding-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
}

/* The colour is its own layer so it can grow in without squashing the text.
   It starts part-grown, with the names already readable, so the strip still
   works as navigation if a browser never runs the animation. */
.wk-field::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c);
	transform-origin: bottom;
	animation: wk-grow 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	animation-delay: calc(var(--i) * 70ms);
}

.wk-field > * {
	position: relative;
}

.wk-field__photo {
	position: absolute;
	inset: 0 0 auto;
	width: 100%;
	height: calc(100% - 96px);
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.3s;
}

.wk-field__name {
	font: 400 clamp(21px, 2vw, 29px) / 1.1 var(--serif);
	letter-spacing: -0.01em;
}

.wk-field__count {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
}

.wk-field:hover,
.wk-field:focus-visible {
	flex-grow: calc(var(--w) * 1.7);
}

.wk-field:hover .wk-field__photo,
.wk-field:focus-visible .wk-field__photo {
	opacity: 1;
}

.wk-field:focus-visible {
	outline-offset: -5px;
	outline-color: var(--t);
}

@keyframes wk-grow {
	from {
		transform: scaleY(0.3);
	}
}

/* ------------------------------------------------------------------
   5. Bands, headings, grids
   ------------------------------------------------------------------ */

.wk-band {
	padding-block: var(--band);
}

.wk-band--ruled {
	padding-top: 0;
}

.wk-band--ruled > .wk-shell::before {
	content: "";
	display: block;
	margin-bottom: var(--band);
	border-top: 1px solid var(--line);
}

.wk-band--dark {
	background: var(--green-900);
	color: #fff;
}

.wk-band--blush {
	background: var(--blush);
}

.wk-band--dark + .wk-band--ruled,
.wk-band--blush + .wk-band--ruled {
	padding-top: var(--band);
}

.wk-band--dark + .wk-band--ruled > .wk-shell::before,
.wk-band--blush + .wk-band--ruled > .wk-shell::before {
	content: none;
}

.wk-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
	margin-bottom: 40px;
}

.wk-head h2,
.wk-expat__intro h2,
.wk-about__text h2 {
	font-size: clamp(30px, 3.5vw, 46px);
	line-height: 1.08;
	letter-spacing: -0.012em;
}

.wk-head p {
	max-width: 56ch;
	margin: 12px 0 0;
	color: var(--ink-2);
}

.wk-band--dark .wk-head p {
	color: var(--green-200);
}

.wk-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--tulip);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	white-space: nowrap;
}

.wk-more:hover {
	color: var(--tulip-dark);
}

.wk-more--place {
	text-decoration-color: var(--place);
}

.wk-more--place::before,
.wk-tag::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	background: var(--place, var(--green-700));
	box-shadow: inset 0 0 0 1px rgba(18, 33, 28, 0.18);
}

.wk-grid {
	display: grid;
	gap: 44px 32px;
}

.wk-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wk-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wk-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 56px;
	align-items: start;
}

/* ------------------------------------------------------------------
   6. Cards
   ------------------------------------------------------------------ */

.wk-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--mist);
}

.wk-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No featured image: a small field of tulips instead of a grey box. */
.wk-media__empty {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #d7263d 0 34%, #f6c644 0 56%, #c9b6ec 0 68%, #f08a3c 0 80%, #f7a8bc 0 91%, #f5efe0 0);
}

.wk-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.wk-tag:hover {
	text-decoration: underline;
}

.wk-card__body {
	padding-top: 16px;
}

.wk-card__title {
	margin-top: 8px;
	font-size: 22px;
	line-height: 1.24;
}

.wk-card__title a {
	text-decoration: none;
}

.wk-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--tulip);
	text-decoration-thickness: 2px;
}

.wk-card__excerpt {
	margin: 12px 0 0;
	color: var(--ink-2);
}

.wk-card__meta {
	margin: 10px 0 0;
	color: var(--ink-2);
	font-size: 14px;
}

.wk-grid--4 .wk-card__title {
	font-size: 19px;
}

/* Newest post: picture and words side by side. */

.wk-card--wide {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 48px;
	align-items: center;
}

.wk-card--wide .wk-card__body {
	padding-top: 0;
}

.wk-card--wide .wk-card__title {
	margin-top: 12px;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.wk-card--wide .wk-card__excerpt {
	font-size: 18px;
}

.wk-latest__rest {
	margin-top: 56px;
}

.wk-card--lead .wk-card__title {
	font-size: clamp(26px, 2.5vw, 34px);
	line-height: 1.15;
}

/* Reading list: small picture, title beside it. */

.wk-rows .wk-card--row {
	display: grid;
	grid-template-columns: 124px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	padding-block: 20px;
	border-top: 1px solid var(--line);
}

.wk-rows .wk-card--row:first-child {
	padding-top: 0;
	border-top: 0;
}

.wk-card--row .wk-media {
	aspect-ratio: 4 / 3;
}

.wk-card--row .wk-card__body {
	padding-top: 0;
}

.wk-card--row .wk-card__title {
	margin-top: 6px;
	font-size: 20px;
}

/* ------------------------------------------------------------------
   7. Homepage: where readers start
   ------------------------------------------------------------------ */

.wk-start {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-start li {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) 116px;
	gap: 32px;
	align-items: center;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.wk-start li:last-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.wk-start h3 {
	font-size: clamp(21px, 2.3vw, 31px);
	line-height: 1.18;
}

.wk-start h3 a {
	text-decoration: none;
}

.wk-start h3 a:hover {
	color: var(--sun);
}

.wk-start img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
}

.wk-band--dark .wk-tag::before,
.wk-footer .wk-tag::before {
	box-shadow: none;
}

/* ------------------------------------------------------------------
   8. Homepage: expat life, about
   ------------------------------------------------------------------ */

.wk-expat {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: clamp(40px, 7vw, 104px);
	align-items: start;
}

.wk-expat__intro p {
	max-width: 48ch;
	margin: 16px 0 0;
}

.wk-topics {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.wk-topics a {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 13px;
	border-top: 1px solid rgba(15, 42, 34, 0.28);
	font-weight: 700;
	text-decoration: none;
}

.wk-topics li:last-child a {
	border-bottom: 1px solid rgba(15, 42, 34, 0.28);
}

.wk-topics a span:last-child {
	font-weight: 400;
}

.wk-topics a:hover span:first-child {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.wk-band--blush .wk-card--row {
	border-color: rgba(15, 42, 34, 0.28);
}

.wk-band--blush .wk-media {
	background: rgba(15, 42, 34, 0.08);
}

.wk-about {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.wk-about--plain {
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
}

.wk-about__photo img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--radius);
}

.wk-about__text p {
	max-width: 58ch;
	margin: 20px 0 24px;
	font-size: 18px;
}

.wk-facts {
	margin: 0;
}

.wk-facts > div {
	padding-block: 16px;
	border-top: 1px solid var(--line);
}

.wk-facts > div:first-child {
	padding-top: 0;
	border-top: 0;
}

.wk-facts dt {
	font: 400 26px/1.15 var(--serif);
}

.wk-facts dd {
	margin: 4px 0 0;
	color: var(--ink-2);
}

/* ------------------------------------------------------------------
   9. Footer
   ------------------------------------------------------------------ */

.wk-footer {
	padding-block: var(--band) 40px;
	background: var(--green-900);
	color: #fff;
}

.wk-footer__search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	padding-bottom: 56px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.wk-footer__search h2 {
	font-size: clamp(32px, 4.4vw, 60px);
	line-height: 1;
	letter-spacing: -0.015em;
}

.wk-footer__search .wk-search {
	flex: 1 1 380px;
}

.wk-footer__cols {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
	gap: 48px;
	padding-block: 56px;
}

.wk-footer__about p {
	max-width: 40ch;
	margin: 16px 0 20px;
	color: var(--green-200);
}

.wk-footer h3 {
	margin-bottom: 14px;
	font: 700 15px var(--sans);
	color: var(--green-200);
}

.wk-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-footer__cols nav li + li {
	margin-top: 9px;
}

.wk-footer__cols a {
	text-decoration: none;
}

.wk-footer__cols a:hover {
	text-decoration: underline;
	text-decoration-color: var(--sun);
}

.wk-footer .wk-tag {
	font-size: 17px;
	font-weight: 400;
}

.wk-social {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	font-weight: 700;
}

.wk-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	color: var(--green-200);
	font-size: 14px;
}

.wk-footer__base p {
	margin: 0;
}

.wk-footer__disclosure {
	flex-basis: 100%;
	max-width: 96ch;
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------
   10. Archive and page headers
   ------------------------------------------------------------------ */

.wk-pagehead {
	padding-block: clamp(40px, 5vw, 72px);
	background: var(--mist);
	border-bottom: 8px solid var(--place, var(--green-900));
}

.wk-pagehead h1 {
	max-width: 22ch;
	font-size: clamp(38px, 5.6vw, 76px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.wk-pagehead__text {
	max-width: 64ch;
	margin-top: 18px;
	font-size: 18px;
	color: var(--ink-2);
}

.wk-pagehead__text p:last-child {
	margin-bottom: 0;
}

.wk-pagehead .wk-search {
	margin-top: 28px;
}

.wk-trail ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 15px;
	font-weight: 500;
}

.wk-trail li + li::before {
	content: "/";
	margin-inline: 9px;
	color: var(--ink-2);
}

.wk-trail a {
	text-decoration: none;
}

.wk-trail a:hover {
	text-decoration: underline;
}

.wk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.wk-chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--green-900);
	border-radius: var(--radius);
	background: var(--paper);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.wk-chips a:hover {
	background: var(--green-900);
	color: #fff;
}

.wk-chips span {
	font-weight: 400;
	opacity: 0.7;
}

.wk-none h2 {
	font-size: 32px;
}

.wk-none p {
	margin: 12px 0 0;
	color: var(--ink-2);
}

.wk-pagination,
.navigation.pagination {
	margin-top: 64px;
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-weight: 700;
	text-decoration: none;
}

.nav-links a.page-numbers:hover {
	border-color: var(--green-900);
}

.nav-links .page-numbers.current {
	border-color: var(--green-900);
	background: var(--green-900);
	color: #fff;
}

.nav-links .page-numbers.dots {
	border-color: transparent;
}

/* ------------------------------------------------------------------
   11. Single post and page
   ------------------------------------------------------------------ */

.wk-posthead {
	padding-block: clamp(36px, 5vw, 64px) 36px;
}

.wk-posthead h1 {
	max-width: 24ch;
	font-size: calc(clamp(34px, 4.6vw, 62px) * var(--prose-heading, 1));
	line-height: 1.06;
	letter-spacing: -0.018em;
}

.wk-posthead__intro {
	max-width: 60ch;
	margin: 20px 0 0;
	font-size: 21px;
	line-height: 1.45;
	color: var(--ink-2);
}

.wk-byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
}

.wk-byline img {
	width: 44px;
	height: 44px;
	border-radius: 50%;
}

.wk-byline p {
	margin: 0;
	line-height: 1.35;
	font-weight: 700;
}

.wk-byline span {
	display: block;
	color: var(--ink-2);
	font-size: 15px;
	font-weight: 400;
}

.wk-posthero {
	margin-block: 0 clamp(36px, 5vw, 56px);
}

.wk-posthero img {
	width: 100%;
	max-height: 680px;
	object-fit: cover;
	border-radius: var(--radius);
}

.wk-posthero figcaption,
.wk-prose figcaption {
	margin-top: 10px;
	color: var(--ink-2);
	font-size: 15px;
}

/* The text column takes all the room there is: the full page width, or
   everything up to the sidebar when the sidebar has widgets. */
.wk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 64px;
	padding-bottom: var(--band);
}

.wk-no-sidebar .wk-layout,
.wk-layout--page {
	grid-template-columns: minmax(0, 1fr);
}

.wk-notice {
	margin-bottom: 28px;
	padding: 14px 18px;
	border-left: 4px solid var(--sun);
	background: var(--mist);
	font-size: 16px;
}

/* Sizes here follow Appearance → Customize → Post text (inc/typography.php). */
.wk-prose {
	font-size: var(--prose-size, 19px);
	line-height: var(--prose-leading, 1.7);
}

.wk-prose > * {
	margin-block: 0 1.25em;
}

.wk-prose h2 {
	margin-top: 1.9em;
	margin-bottom: 0.55em;
	font-size: calc(clamp(27px, 3vw, 34px) * var(--prose-heading, 1));
	letter-spacing: -0.01em;
}

.wk-prose h3 {
	margin-top: 1.7em;
	margin-bottom: 0.5em;
	font-size: calc(24px * var(--prose-heading, 1));
}

.wk-prose h4 {
	margin-top: 1.5em;
	margin-bottom: 0.4em;
	font: 700 1em/1.4 var(--sans);
	font-size: calc(1em * var(--prose-heading, 1));
}

.wk-prose a {
	color: var(--tulip-dark);
	text-decoration-thickness: 1px;
}

.wk-prose a:hover {
	text-decoration-thickness: 2px;
}

.wk-prose ul,
.wk-prose ol {
	padding-left: 1.3em;
}

.wk-prose li + li {
	margin-top: 0.45em;
}

.wk-prose li::marker {
	color: var(--tulip);
	font-weight: 700;
}

.wk-prose img {
	border-radius: var(--radius);
}

.wk-prose blockquote {
	margin-inline: 0;
	padding: 4px 0 4px 24px;
	border-left: 4px solid var(--tulip);
	font: 400 1.26em/1.4 var(--serif);
}

.wk-prose blockquote cite {
	display: block;
	margin-top: 10px;
	font: 400 16px var(--sans);
	color: var(--ink-2);
}

.wk-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9em;
}

.wk-prose th,
.wk-prose td {
	padding: 11px 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.wk-prose th {
	border-bottom-color: var(--green-900);
}

/* The block editor's table block draws a full grid; keep to row rules. */
.wk-prose .wp-block-table td,
.wk-prose .wp-block-table th {
	border: 0;
	border-bottom: 1px solid var(--line);
}

.wk-prose .wp-block-table thead {
	border-bottom: 2px solid var(--green-900);
}

.wk-prose .wp-block-table figcaption {
	text-align: left;
}

.wk-prose hr {
	height: 6px;
	border: 0;
	background: linear-gradient(90deg, #d7263d 0 34%, #f6c644 0 56%, #c9b6ec 0 68%, #f08a3c 0 80%, #f7a8bc 0 91%, #f5efe0 0);
}

.wk-prose .wp-block-button__link {
	border-radius: var(--radius);
	background: var(--tulip);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.wk-prose .alignwide,
.wk-prose .alignfull {
	max-width: none;
}

.wk-prose .wp-caption {
	max-width: 100%;
}

.wk-prose .wp-caption-text {
	margin-top: 10px;
	color: var(--ink-2);
	font-size: 15px;
}

.wk-chips--tags {
	margin-top: 40px;
}

.wk-author {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 20px;
	margin-top: 48px;
	padding: 28px;
	background: var(--mist);
	border-radius: var(--radius);
}

.wk-author img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}

.wk-author h2 {
	font-size: 24px;
}

.wk-author p {
	margin: 8px 0 14px;
}

.wk-sidebar {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* The last widget follows the reader down the page. If an ad script appends
   its own sticky unit after it, the widget is no longer last and stays put. */
.wk-sidebar > .wk-widget:last-child {
	position: sticky;
	top: 24px;
}

.wk-widget__title,
.wk-widget h2 {
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--green-900);
	font-size: 21px;
}

.wk-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wk-widget li + li {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.wk-widget a {
	text-decoration: none;
}

.wk-widget a:hover {
	text-decoration: underline;
}

/* Comments */

.wk-comments {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--line);
}

.wk-comments h2,
.comment-reply-title {
	font: 400 28px/1.2 var(--serif);
}

.wk-comments__list,
.wk-comments__list .children {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.wk-comments__list .children {
	padding-left: 28px;
}

.wk-comments__list .comment-body {
	padding-block: 20px;
	border-top: 1px solid var(--line);
}

.comment-author {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
}

.comment-author img {
	border-radius: 50%;
}

.comment-metadata {
	margin: 4px 0 10px;
	color: var(--ink-2);
	font-size: 14px;
}

.comment-metadata a,
.comment-reply-link {
	text-decoration: none;
}

.comment-reply-link {
	font-weight: 700;
	font-size: 15px;
}

.comment-respond {
	max-width: 760px;
	margin-top: 40px;
}

.comment-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 15px;
}

.comment-form input:not([type="checkbox"]):not([type="submit"]),
.comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--ink-2);
	border-radius: var(--radius);
	font: 400 17px var(--sans);
}

.comment-form .comment-form-cookies-consent label {
	display: inline;
	font-weight: 400;
}

.comment-form input[type="submit"] {
	min-height: 52px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radius);
	background: var(--tulip);
	color: #fff;
	font: 700 17px var(--sans);
	cursor: pointer;
}

/* ------------------------------------------------------------------
   12. Ads (Raptive)
   The theme keeps the class names Raptive places ads by: .entry-content,
   .sidebar, .textwidget, .author-box and body. See README.md.
   ------------------------------------------------------------------ */

.wk-prose .adthrive-ad {
	margin-block: 28px;
	clear: both;
}

.wk-sidebar .adthrive-ad {
	margin-inline: auto;
}

/* A 300px ad needs the full phone width; let it run into the page gutter. */
@media (max-width: 720px) {
	.wk-prose .adthrive-ad {
		margin-inline: calc(var(--gutter) * -1);
	}
}

/* Room under the footer so the anchored ad never covers the last line. */
body:has(.adthrive-footer) .wk-footer {
	padding-bottom: 140px;
}

/* ------------------------------------------------------------------
   13. Smaller screens
   ------------------------------------------------------------------ */

@media (max-width: 1080px) {
	.wk-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wk-about,
	.wk-about--plain {
		grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
	}

	.wk-about--plain {
		grid-template-columns: minmax(0, 1fr);
	}

	.wk-facts {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}

	.wk-facts > div,
	.wk-facts > div:first-child {
		padding-block: 16px 0;
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 1180px) {
	.wk-layout {
		gap: 40px;
	}
}

@media (max-width: 1023px) {
	.wk-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.wk-sidebar > .wk-widget:last-child {
		position: static;
	}
}

@media (max-width: 960px) {
	.wk-tool--menu {
		display: inline-flex;
	}

	.wk-header__tools {
		margin-left: auto;
	}

	.wk-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 76px);
		overflow-y: auto;
		margin: 0;
		padding: 8px var(--gutter) 28px;
		background: var(--green-900);
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	.wk-nav.is-open {
		display: block;
	}

	.wk-nav > ul {
		display: block;
	}

	.wk-nav > ul > li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.wk-nav a {
		padding: 14px 0;
		font-size: 18px;
	}

	.wk-nav > ul > li > a:hover,
	.wk-nav > ul > li:focus-within > a {
		background: none;
	}

	.wk-nav .menu-item-has-children > a::after {
		content: none;
	}

	.wk-nav .sub-menu {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 0 0 12px;
		background: none;
		box-shadow: none;
		visibility: visible;
		opacity: 1;
		transform: none;
	}

	.wk-nav .sub-menu a {
		padding: 8px 0;
		color: var(--green-200);
		font-size: 16px;
	}

	.wk-nav .sub-menu a:hover {
		background: none;
		color: #fff;
	}

	.wk-hero__top,
	.wk-split,
	.wk-card--wide,
	.wk-expat {
		grid-template-columns: minmax(0, 1fr);
	}

	.wk-hero__top {
		gap: 24px;
	}

	.wk-card--wide {
		gap: 24px;
	}

	.wk-split {
		gap: 40px;
	}

	.wk-grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wk-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wk-footer__about {
		grid-column: 1 / -1;
	}

	.wk-start li {
		grid-template-columns: minmax(0, 1fr) 96px;
		gap: 8px 20px;
	}

	.wk-start .wk-tag {
		grid-column: 1;
	}

	.wk-start h3 {
		grid-column: 1;
	}

	.wk-start img {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 720px) {
	body {
		font-size: 16px;
	}

	.wk-head {
		display: block;
		margin-bottom: 28px;
	}

	.wk-head .wk-more {
		margin-top: 16px;
		white-space: normal;
	}

	/* The strip turns on its side: one row per place, bar length still by count. */
	.wk-fields {
		flex-direction: column;
		gap: 4px;
		height: auto;
		padding-inline: var(--gutter);
		padding-bottom: 32px;
	}

	.wk-field {
		flex: none;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		width: max(62%, calc(var(--w) * 6.8%));
		max-width: 100%;
		min-width: 0;
		padding: 14px 16px;
	}

	.wk-field::before {
		animation: none;
	}

	.wk-field:hover,
	.wk-field:focus-visible {
		flex-grow: 0;
	}

	.wk-field__photo {
		display: none;
	}

	.wk-field__count {
		margin: 0;
		white-space: nowrap;
	}

	.wk-grid--3,
	.wk-grid--4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.wk-rows .wk-card--row {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 16px;
	}

	.wk-about,
	.wk-facts,
	.wk-footer__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.wk-about__photo {
		max-width: 260px;
	}

	.wk-search {
		flex-wrap: wrap;
	}

	.wk-search input {
		flex-basis: 100%;
	}

	.wk-search button {
		flex: 1;
	}

	.wk-lang {
		display: none;
	}

	.wk-footer .wk-lang {
		display: flex;
	}

	.wk-prose {
		font-size: var(--prose-size-mobile, 18px);
	}

	.wk-author {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 720px) {
	.wk-field:first-child {
		padding-left: 16px;
	}

	.wk-card--row .wk-card__title {
		font-size: 18px;
	}
}

@media (max-width: 480px) {
	.wk-header__row {
		gap: 10px;
	}

	.wk-wordmark {
		font-size: 23px;
	}

	/* Icon only; the label stays available to screen readers. */
	.wk-tool--menu span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}