/*
 * QOS live — stylesheet
 * =============================================================================
 *
 * One authored file, no build step. Sections are listed below in the order they
 * appear; search for the "== " marker to jump to one.
 *
 *   ==  1  Tokens
 *   ==  2  Reset and base elements
 *   ==  3  Typography
 *   ==  4  Layout primitives
 *   ==  5  Buttons, chips, meta
 *   ==  6  Utility row (date, weather, rate, languages, top menu)
 *   ==  7  Masthead
 *   ==  8  Category navigation and drop-downs
 *   ==  9  Mobile navigation
 *   == 10  Search
 *   == 11  Featured block
 *   == 12  Listing rows and compact cards
 *   == 13  Section headings and pagination
 *   == 14  Sidebar and widgets
 *   == 15  Advertising banners
 *   == 16  Article
 *   == 17  Pages, forms, site map
 *   == 18  Breadcrumbs, empty states, 404
 *   == 19  Footer
 *   == 20  Accessibility, motion, print
 *
 * Colour rules worth knowing before editing:
 *   - #FF6943 is a graphic colour. At small sizes it does not meet WCAG AA on
 *     white (2.85:1), so orange *text* uses --qos-accent-ink (#C4431F, 5.0:1).
 *   - Type on an orange field is black, not white: white on #FF6943 is 2.85:1,
 *     black is 7.4:1.
 */

/* ==========================================================================
   == 1  Tokens
   ========================================================================== */

:root {
	/* Brand, straight from the specification. */
	--qos-orange: #FF6943;
	--qos-black: #000000;
	--qos-white: #FFFFFF;

	/* Derived accents. */
	--qos-accent-ink: #C4431F;   /* orange dark enough to be read as text */
	--qos-accent-soft: #FFF1ED;
	--qos-accent-line: #FFD3C7;

	/* Ink. */
	--qos-ink: #14110F;
	--qos-ink-2: #4A4440;
	--qos-ink-3: #746D67;
	--qos-ink-inverse: #FFFFFF;
	--qos-ink-inverse-2: rgba(255, 255, 255, .72);

	/* Surfaces and rules. */
	--qos-surface: #FFFFFF;
	--qos-surface-2: #FAF8F6;
	--qos-surface-3: #F1EDE9;
	--qos-line: #E5E0DB;
	--qos-line-strong: #CFC8C1;
	--qos-dark: #121010;
	--qos-dark-2: #1F1B19;

	/* Spacing scale. */
	--qos-1: 4px;
	--qos-2: 8px;
	--qos-3: 12px;
	--qos-4: 16px;
	--qos-5: 20px;
	--qos-6: 24px;
	--qos-7: 32px;
	--qos-8: 40px;
	--qos-9: 48px;
	--qos-10: 64px;
	--qos-11: 80px;

	/* Type scale. */
	--qos-fs-2xs: .75rem;    /* 12 */
	--qos-fs-xs: .8125rem;   /* 13 */
	--qos-fs-sm: .875rem;    /* 14 */
	--qos-fs-base: 1rem;     /* 16 */
	--qos-fs-md: 1.125rem;   /* 18 */
	--qos-fs-lg: 1.25rem;    /* 20 */
	--qos-fs-xl: 1.5rem;     /* 24 */
	--qos-fs-2xl: 1.75rem;   /* 28 */
	--qos-fs-3xl: 2.125rem;  /* 34 */
	--qos-fs-4xl: 2.625rem;  /* 42 */

	/* Shapes. */
	--qos-radius: 3px;
	--qos-radius-lg: 4px;
	--qos-shadow: 0 1px 2px rgba(20, 17, 15, .06), 0 8px 24px rgba(20, 17, 15, .06);

	/* Measure and rhythm. */
	--qos-container: 1280px;
	--qos-gutter: 16px;
	--qos-measure: 68ch;
	--qos-sidebar: 320px;

	/* Fonts. Project Blackbird is licensed and ships separately; until the
	   files are dropped in, the display stack falls through to Inter. */
	--qos-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--qos-font-display: "Project Blackbird", var(--qos-font-body);

	--qos-ease: cubic-bezier(.2, .6, .3, 1);
}

/* ==========================================================================
   == 2  Reset and base elements
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors must not end up behind the sticky section bar. */
	scroll-padding-top: 84px;
}

body {
	margin: 0;
	background: var(--qos-surface);
	color: var(--qos-ink);
	font-family: var(--qos-font-body);
	font-size: var(--qos-fs-base);
	line-height: 1.6;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

/*
 * Headlines wrap between words only. The global break-word above is a safety
 * net for URLs and the like, but applied to a headline in a narrow column it
 * splits Russian words down the middle.
 */
h1, h2, h3, h4, h5, h6,
.qos-feature__title, .qos-card__title, .qos-tile__title, .qos-recent__title {
	overflow-wrap: normal;
	word-break: normal;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

a {
	color: var(--qos-accent-ink);
	text-decoration: none;
}
a:hover { text-decoration: underline; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--qos-accent-ink);
	outline-offset: 2px;
	border-radius: 2px;
}

hr {
	border: 0;
	border-top: 1px solid var(--qos-line);
	margin: var(--qos-8) 0;
}

figure { margin: 0; }

::selection { background: var(--qos-accent-line); color: var(--qos-ink); }

/* ==========================================================================
   == 3  Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--qos-3);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: -.012em;
	color: var(--qos-ink);
	text-wrap: balance;
}

h1 { font-size: clamp(1.75rem, 1.35rem + 1.7vw, var(--qos-fs-4xl)); }
h2 { font-size: clamp(1.375rem, 1.15rem + 1vw, var(--qos-fs-2xl)); }
h3 { font-size: var(--qos-fs-xl); }
h4 { font-size: var(--qos-fs-lg); }

p { margin: 0 0 var(--qos-4); }

/* Long Kazakh and Russian words in narrow columns. */
:lang(ru) h1, :lang(ru) h2, :lang(kk) h1, :lang(kk) h2 { hyphens: manual; }

/* ==========================================================================
   == 4  Layout primitives
   ========================================================================== */

.qos-container {
	width: 100%;
	max-width: var(--qos-container);
	margin-inline: auto;
	padding-inline: var(--qos-gutter);
}

.qos-content { display: block; }

.qos-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--qos-8);
	padding-block: var(--qos-8) var(--qos-10);
	align-items: start;
}

.qos-main { min-width: 0; }

@media (min-width: 1024px) {
	:root { --qos-gutter: 32px; }

	.qos-layout {
		grid-template-columns: minmax(0, 1fr) var(--qos-sidebar);
		gap: var(--qos-9);
	}
	.no-sidebar .qos-layout,
	.qos-layout--full { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
	:root { --qos-gutter: 24px; }
}

/* ==========================================================================
   == 5  Buttons, chips, meta
   ========================================================================== */

.qos-button,
.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--qos-2);
	padding: 11px 20px;
	border: 1px solid var(--qos-ink);
	border-radius: var(--qos-radius);
	background: var(--qos-ink);
	color: var(--qos-ink-inverse);
	font: inherit;
	font-size: var(--qos-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s var(--qos-ease), border-color .15s var(--qos-ease), color .15s var(--qos-ease);
}
.qos-button:hover {
	background: var(--qos-accent-ink);
	border-color: var(--qos-accent-ink);
	color: var(--qos-ink-inverse);
	text-decoration: none;
}
.qos-button:active { transform: translateY(1px); }
.qos-button[disabled], .qos-button[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
}

.qos-button--ghost {
	background: transparent;
	color: var(--qos-ink);
	border-color: var(--qos-line-strong);
}
.qos-button--ghost:hover {
	background: var(--qos-surface-3);
	color: var(--qos-ink);
	border-color: var(--qos-ink);
}

/* Section label. Black on orange: 7.4:1, where white would be 2.85:1. */
.qos-chip {
	display: inline-block;
	padding: 3px 8px;
	background: var(--qos-orange);
	color: var(--qos-black);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 2px;
	text-decoration: none;
}
.qos-chip:hover { background: var(--qos-accent-ink); color: var(--qos-white); text-decoration: none; }

.qos-chip--quiet {
	background: transparent;
	color: var(--qos-accent-ink);
	padding-inline: 0;
	letter-spacing: .07em;
}
.qos-chip--quiet:hover { background: transparent; color: var(--qos-ink); text-decoration: underline; }

.qos-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qos-2) var(--qos-3);
	margin-bottom: var(--qos-2);
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-xs);
	line-height: 1.4;
}
.qos-meta__date { white-space: nowrap; }
/* Not the section chip: it sets its own colour, and inheriting the muted
   grey here dropped it to 1.78:1 on the orange field. */
.qos-meta a:not(.qos-chip) { color: inherit; }
.qos-meta a:not(.qos-chip):hover { color: var(--qos-ink); }

/* ==========================================================================
   == 6  Utility row
   ========================================================================== */

.qos-utility {
	background: var(--qos-dark);
	color: var(--qos-ink-inverse-2);
	font-size: var(--qos-fs-xs);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.qos-utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qos-5);
	min-height: 40px;
}

.qos-utility__aside {
	display: flex;
	align-items: center;
	gap: var(--qos-5);
	margin-left: auto;
}

/* --- top menu ------------------------------------------------------------ */

.qos-topmenu {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.qos-topmenu .qos-menu__link {
	display: inline-flex;
	align-items: center;
	padding: 10px var(--qos-3);
	color: var(--qos-ink-inverse-2);
	font-size: var(--qos-fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
.qos-topmenu .qos-menu__link:hover,
.qos-topmenu .qos-menu__item.is-open > .qos-menu__link { color: var(--qos-white); text-decoration: none; }
.qos-topmenu .current-menu-item > .qos-menu__link,
.qos-topmenu .current_page_item > .qos-menu__link { color: var(--qos-orange); }

/* --- info bar ------------------------------------------------------------ */

.qos-infobar {
	display: flex;
	align-items: center;
	gap: var(--qos-4);
	min-width: 0;
}
.qos-infobar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	line-height: 1;
}
.qos-infobar__item + .qos-infobar__item {
	padding-left: var(--qos-4);
	border-left: 1px solid rgba(255, 255, 255, .14);
}
.qos-infobar__label,
.qos-infobar__city { color: rgba(255, 255, 255, .55); }
.qos-infobar__value { color: var(--qos-white); font-weight: 600; font-variant-numeric: tabular-nums; }
.qos-infobar__icon { font-size: 13px; line-height: 1; }
.qos-infobar__date-short { display: none; }
.qos-infobar__change--up { color: #7FD198; }
.qos-infobar__change--down { color: #FF9C86; }
.qos-infobar__item--unavailable .qos-infobar__value { color: rgba(255, 255, 255, .45); font-weight: 400; }

/* Demonstration values are labelled, never passed off as live data. */
.qos-infobar__flag {
	padding: 1px 5px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
.qos-infobar__flag--stale { border-color: rgba(255, 156, 134, .5); color: #FF9C86; }

/* --- language switcher --------------------------------------------------- */

.qos-langs__list {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.qos-langs__link {
	display: inline-block;
	padding: 5px 9px;
	border-radius: 2px;
	color: rgba(255, 255, 255, .62);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
}
.qos-langs__link:hover { color: var(--qos-white); background: rgba(255, 255, 255, .1); text-decoration: none; }
.qos-langs__link.is-current {
	background: var(--qos-orange);
	color: var(--qos-black);
}

@media (max-width: 1023.98px) {
	.qos-utility__nav { display: none; }
	.qos-utility__inner { justify-content: space-between; }
	.qos-utility__aside { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 719.98px) {
	.qos-infobar__item--rate { display: none; }
}
@media (max-width: 599.98px) {
	/* The full date and the language switcher no longer both fit. */
	.qos-infobar__date-long { display: none; }
	.qos-infobar__date-short { display: inline; }
}
@media (max-width: 479.98px) {
	.qos-infobar { gap: var(--qos-3); min-width: 0; }
	.qos-infobar__item + .qos-infobar__item { padding-left: var(--qos-3); }
	.qos-infobar__city { display: none; }
	.qos-utility__aside { gap: var(--qos-3); }
	.qos-langs__link { padding-inline: 7px; }
}

/* ==========================================================================
   == 7  Masthead
   ========================================================================== */

.qos-masthead {
	position: relative;
	background: var(--qos-dark);
	color: var(--qos-ink-inverse);
	isolation: isolate;
}
.qos-masthead__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
}
.qos-masthead__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
}
.qos-masthead__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 9, 8, .92) 0%, rgba(10, 9, 8, .72) 46%, rgba(10, 9, 8, .48) 100%);
}

.qos-masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qos-6);
	min-height: 132px;
	padding-block: var(--qos-5);
}

/* The logotype as the brand guidelines set it: the wordmark with the slogan
   centred beneath it. The wordmark is drawn from the SVG sprite printed at
   the top of <body>; its white parts take currentColor. */
.qos-brand {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--qos-2);
	min-width: 0;
	color: var(--qos-white);
}
.qos-brand__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.qos-brand__link:hover { text-decoration: none; }
/* An h1 on the home page; it must not pick up the heading colour. */
.qos-brand__title { margin: 0; line-height: 0; color: inherit; }
.qos-brand__wordmark {
	display: block;
	width: auto;
	height: 44px;
	color: inherit;
}
/* An uploaded logo takes the wordmark's place at the same height. */
.qos-brand__logo-image {
	display: block;
	width: auto;
	height: 44px;
	max-width: 100%;
	object-fit: contain;
}
/* The slogan under the wordmark, in the reader's language, in the slogan
   face from the brand guidelines. */
.qos-brand__tagline {
	margin: 0;
	font-family: var(--qos-font-display);
	font-size: var(--qos-fs-sm);
	line-height: 1.2;
	letter-spacing: .01em;
	text-align: center;
	color: rgba(255, 255, 255, .85);
}
.qos-brand--footer .qos-brand__wordmark,
.qos-brand--footer .qos-brand__logo-image { height: 36px; }

.qos-masthead__aside {
	display: flex;
	align-items: center;
	gap: var(--qos-5);
}

.qos-slogan { display: flex; gap: var(--qos-3); font-family: var(--qos-font-display); }
.qos-slogan--inline {
	flex-wrap: wrap;
	justify-content: flex-end;
	font-size: var(--qos-fs-xs);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.qos-slogan--inline .qos-slogan__line + .qos-slogan__line::before {
	content: "·";
	margin-right: var(--qos-3);
	color: var(--qos-orange);
}
.qos-slogan--stacked {
	flex-direction: column;
	gap: 2px;
	font-size: var(--qos-fs-sm);
	color: rgba(255, 255, 255, .7);
}
.qos-slogan--stacked .qos-slogan__line:first-child {
	font-size: var(--qos-fs-md);
	color: var(--qos-white);
	letter-spacing: .02em;
}

/* Brand block in the footer sits on dark too, so it needs no overrides. */

@media (max-width: 1199.98px) {
	.qos-masthead__aside .qos-slogan--inline { display: none; }
}
@media (max-width: 767.98px) {
	.qos-masthead__inner { min-height: 96px; }
	.qos-brand__wordmark, .qos-brand__logo-image { height: 36px; }
	.qos-brand__tagline { font-size: var(--qos-fs-xs); }
	.qos-masthead__scrim {
		background: linear-gradient(180deg, rgba(10, 9, 8, .78) 0%, rgba(10, 9, 8, .88) 100%);
	}
}

/* ==========================================================================
   == 8  Category navigation and drop-downs
   ========================================================================== */

.qos-catnav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--qos-black);
	border-bottom: 3px solid var(--qos-orange);
}
.admin-bar .qos-catnav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .qos-catnav { top: 46px; } }

.qos-catnav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qos-4);
	min-height: 52px;
}

.qos-catnav__list {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.qos-catnav__list::-webkit-scrollbar { display: none; }

@media (max-width: 1023.98px) {
	/* Fade the right edge so it is clear there are more sections to scroll to. */
	.qos-catnav__list {
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
		padding-right: var(--qos-5);
	}
}

.qos-catnav__list > li > a {
	display: inline-flex;
	align-items: center;
	padding: 15px var(--qos-4);
	color: rgba(255, 255, 255, .8);
	font-size: var(--qos-fs-sm);
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
	transition: color .15s var(--qos-ease), border-color .15s var(--qos-ease);
}
.qos-catnav__list > li > a:hover {
	color: var(--qos-white);
	border-bottom-color: rgba(255, 255, 255, .45);
	text-decoration: none;
}
.qos-catnav__list > li.current-menu-item > a,
.qos-catnav__list > li.current-category-ancestor > a,
.qos-catnav__list > li.qos-is-current > a {
	color: var(--qos-orange);
	border-bottom-color: var(--qos-orange);
}
.qos-catnav__list > li:first-child > a { padding-left: 0; }

.qos-catnav__tools { display: flex; align-items: center; gap: var(--qos-1); flex: none; }

.qos-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--qos-radius);
	background: transparent;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
}
.qos-icon-button:hover { background: rgba(255, 255, 255, .12); color: var(--qos-white); }
.qos-icon-button[aria-expanded="true"] { background: var(--qos-orange); color: var(--qos-black); }

/* --- drop-down submenus -------------------------------------------------- */

.qos-menu, .qos-menu__submenu { list-style: none; margin: 0; padding: 0; }

.qos-menu__item { position: relative; }
.qos-menu__item--has-children > .qos-menu__link { padding-right: 4px; }

.qos-menu__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}
.qos-menu__caret {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .18s var(--qos-ease);
}
.qos-menu__item.is-open > .qos-menu__toggle .qos-menu__caret { transform: translateY(1px) rotate(-135deg); }

.qos-menu__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 80;
	min-width: 220px;
	padding: var(--qos-2) 0;
	background: var(--qos-white);
	border: 1px solid var(--qos-line);
	border-top: 3px solid var(--qos-orange);
	box-shadow: var(--qos-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s var(--qos-ease), transform .15s var(--qos-ease), visibility .15s;
}
.qos-menu__item:hover > .qos-menu__submenu,
.qos-menu__item:focus-within > .qos-menu__submenu,
.qos-menu__item.is-open > .qos-menu__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.qos-menu__submenu .qos-menu__link {
	display: block;
	padding: 9px var(--qos-4);
	color: var(--qos-ink);
	font-size: var(--qos-fs-sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
}
.qos-menu__submenu .qos-menu__link:hover {
	background: var(--qos-surface-3);
	color: var(--qos-accent-ink);
	text-decoration: none;
}
.qos-menu__submenu .qos-menu__submenu { top: calc(-1 * var(--qos-2)); left: 100%; }

/* ==========================================================================
   == 9  Mobile navigation
   ========================================================================== */

.qos-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--qos-radius);
	background: transparent;
	color: var(--qos-white);
	cursor: pointer;
}
.qos-burger__bars, .qos-burger__bars::before, .qos-burger__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	transition: transform .2s var(--qos-ease), opacity .2s var(--qos-ease);
}
.qos-burger__bars { position: relative; }
.qos-burger__bars::before, .qos-burger__bars::after { content: ""; position: absolute; left: 0; }
.qos-burger__bars::before { top: -6px; }
.qos-burger__bars::after { top: 6px; }
.qos-burger[aria-expanded="true"] .qos-burger__bars { background: transparent; }
.qos-burger[aria-expanded="true"] .qos-burger__bars::before { transform: translateY(6px) rotate(45deg); }
.qos-burger[aria-expanded="true"] .qos-burger__bars::after { transform: translateY(-6px) rotate(-45deg); }

.qos-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 200;
	width: min(360px, 88vw);
	background: var(--qos-white);
	border-left: 1px solid var(--qos-line);
	box-shadow: -12px 0 40px rgba(20, 17, 15, .18);
	transform: translateX(100%);
	transition: transform .24s var(--qos-ease);
	overflow-y: auto;
	overscroll-behavior: contain;
	display: flex;
	flex-direction: column;
}
.qos-drawer[hidden] { display: none; }
.qos-drawer.is-open { transform: translateX(0); }

.qos-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--qos-3);
	padding: var(--qos-4);
	border-bottom: 1px solid var(--qos-line);
	background: var(--qos-dark);
	color: var(--qos-white);
	position: sticky;
	top: 0;
}
.qos-drawer__title {
	margin: 0;
	font-size: var(--qos-fs-xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}
.qos-drawer__close { color: var(--qos-white); }
.qos-drawer__body { padding: var(--qos-4) var(--qos-4) var(--qos-8); }
.qos-drawer__group + .qos-drawer__group { margin-top: var(--qos-6); }
.qos-drawer__label {
	margin: 0 0 var(--qos-2);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qos-ink-3);
}
.qos-drawer__menu { list-style: none; margin: 0; padding: 0; }
.qos-drawer__menu li { border-bottom: 1px solid var(--qos-line); }
.qos-drawer__menu a {
	display: block;
	padding: 12px 0;
	color: var(--qos-ink);
	font-size: var(--qos-fs-base);
	font-weight: 600;
	text-decoration: none;
}
.qos-drawer__menu a:hover { color: var(--qos-accent-ink); }
.qos-drawer__menu .qos-menu__submenu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	border: 0;
	box-shadow: none;
	padding: 0 0 var(--qos-2) var(--qos-4);
	min-width: 0;
}
.qos-drawer__menu .qos-menu__submenu a { font-weight: 500; font-size: var(--qos-fs-sm); padding: 8px 0; }
.qos-drawer__menu .qos-menu__submenu li:last-child { border-bottom: 0; }
.qos-drawer__menu .qos-menu__toggle { display: none; }
.qos-drawer .qos-search { margin-bottom: var(--qos-5); }

.qos-scrim {
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(20, 17, 15, .48);
	opacity: 0;
	transition: opacity .24s var(--qos-ease);
}
.qos-scrim[hidden] { display: none; }
.qos-scrim.is-open { opacity: 1; }

body.qos-drawer-open { overflow: hidden; }

@media (max-width: 1023.98px) {
	.qos-burger { display: inline-flex; }
}

/* ==========================================================================
   == 10  Search
   ========================================================================== */

.qos-search { display: flex; width: 100%; max-width: 280px; }
.qos-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px var(--qos-3);
	border: 1px solid var(--qos-line-strong);
	border-right: 0;
	border-radius: var(--qos-radius) 0 0 var(--qos-radius);
	background: var(--qos-white);
	color: var(--qos-ink);
	font: inherit;
	font-size: var(--qos-fs-sm);
}
.qos-search__field::placeholder { color: var(--qos-ink-3); }
.qos-search__field:focus { outline-offset: -2px; }
.qos-search__submit {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	border: 1px solid var(--qos-ink);
	border-radius: 0 var(--qos-radius) var(--qos-radius) 0;
	background: var(--qos-ink);
	color: var(--qos-white);
	cursor: pointer;
}
.qos-search__submit:hover { background: var(--qos-accent-ink); border-color: var(--qos-accent-ink); }

/* The panel the magnifier in the section bar opens. */
.qos-searchpanel {
	background: var(--qos-surface-3);
	border-bottom: 1px solid var(--qos-line);
}
.qos-searchpanel[hidden] { display: none; }
.qos-searchpanel__inner { padding-block: var(--qos-4); }
.qos-searchpanel .qos-search { max-width: 560px; margin-inline: auto; }

/* ==========================================================================
   == 11  Featured block
   ========================================================================== */

.qos-featured { padding-block: var(--qos-7) 0; }

.qos-featured__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--qos-4);
}

.qos-feature {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--qos-surface-2);
}

.qos-feature__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--qos-surface-3);
	aspect-ratio: 16 / 9;
}
.qos-feature__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--qos-ease);
}
.qos-feature:hover .qos-feature__image { transform: scale(1.03); }

.qos-feature__body { padding: var(--qos-4) var(--qos-4) var(--qos-5); }
.qos-feature__title {
	margin: var(--qos-2) 0 0;
	font-size: var(--qos-fs-md);
	line-height: 1.28;
}
.qos-feature__title a { color: var(--qos-ink); }
.qos-feature__title a:hover { color: var(--qos-accent-ink); text-decoration: none; }

/* The lead: the headline sits over the photograph from the tablet size up. */
.qos-feature--lead { grid-column: 1 / -1; }
.qos-feature--lead .qos-feature__media { aspect-ratio: 16 / 9; }
.qos-feature--lead .qos-feature__body { padding: var(--qos-5) var(--qos-4) var(--qos-6); }
.qos-feature--lead .qos-feature__title { font-size: clamp(1.375rem, 1.1rem + 1.4vw, var(--qos-fs-2xl)); }

/*
 * The overlay treatment, shared by the tablet and desktop arrangements.
 * The scrim starts a long way up the image because the category chip and the
 * date sit above the headline, and they were being lost against a bright sky.
 */
@media (min-width: 560px) {
	.qos-feature--lead {
		display: block;
		background: var(--qos-black);
	}
	.qos-feature--lead .qos-feature__media {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
	.qos-feature--lead .qos-feature__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg,
			rgba(8, 7, 6, 0) 12%,
			rgba(8, 7, 6, .34) 42%,
			rgba(8, 7, 6, .72) 68%,
			rgba(8, 7, 6, .93) 100%);
	}
	.qos-feature--lead .qos-feature__body {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		height: 100%;
		min-height: 360px;
		padding: var(--qos-6);
	}
	.qos-feature--lead .qos-feature__title a { color: var(--qos-white); }
	.qos-feature--lead .qos-feature__title a:hover { color: var(--qos-orange); }
	.qos-feature--lead .qos-meta__date { color: rgba(255, 255, 255, .88); }
	.qos-feature--lead .qos-feature__standfirst {
		margin: var(--qos-3) 0 0;
		max-width: 52ch;
		color: rgba(255, 255, 255, .84);
		font-size: var(--qos-fs-sm);
	}
}

/*
 * Tablet: two columns, the lead across the top and the four supporting
 * stories two-by-two underneath. Squeezing all five into one row here left
 * each supporting headline about 160px wide, which broke Russian words in
 * half.
 */
@media (min-width: 560px) and (max-width: 1023.98px) {
	.qos-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qos-feature--lead { grid-column: 1 / -1; }
	.qos-feature--lead .qos-feature__body { min-height: 320px; }
	.qos-feature--support .qos-feature__title { font-size: var(--qos-fs-md); }
}

/* Desktop: the lead takes the left half, the four supporting stories the right. */
@media (min-width: 1024px) {
	.qos-featured__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 1fr;
	}
	.qos-feature--lead {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
	.qos-feature--lead .qos-feature__body { min-height: 440px; }
	.qos-feature--support { grid-column: span 1; }
	.qos-feature--support .qos-feature__title { font-size: var(--qos-fs-md); }
}

@media (max-width: 559.98px) {
	.qos-featured__grid { grid-template-columns: minmax(0, 1fr); gap: var(--qos-5); }
	.qos-feature--lead .qos-feature__standfirst {
		margin: var(--qos-2) 0 0;
		color: var(--qos-ink-2);
		font-size: var(--qos-fs-sm);
	}
}

/* ==========================================================================
   == 12  Listing rows and compact cards
   ========================================================================== */

.qos-feed { display: flex; flex-direction: column; }

/* The specification: photo on the left, the opening text on the right. */
.qos-card {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: var(--qos-5);
	padding-block: var(--qos-6);
	border-top: 1px solid var(--qos-line);
	align-items: start;
}
.qos-feed > .qos-card:first-child { border-top: 0; padding-top: 0; }

.qos-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--qos-surface-3);
	aspect-ratio: 3 / 2;
}
.qos-card__media-link { display: block; height: 100%; }
.qos-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--qos-ease);
}
.qos-card:hover .qos-card__image { transform: scale(1.03); }
.qos-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	background: var(--qos-surface-3);
}
.qos-card__placeholder svg { width: 40px; height: auto; opacity: .35; color: var(--qos-ink); }

.qos-card__text { min-width: 0; }
.qos-card__title {
	margin: var(--qos-1) 0 var(--qos-2);
	font-size: var(--qos-fs-lg);
	line-height: 1.26;
}
.qos-card__title a { color: var(--qos-ink); }
.qos-card__title a:hover { color: var(--qos-accent-ink); text-decoration: none; }
.qos-card__excerpt {
	margin: 0;
	color: var(--qos-ink-2);
	font-size: var(--qos-fs-sm);
	line-height: 1.55;
}
.qos-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--qos-3);
	color: var(--qos-accent-ink);
	font-size: var(--qos-fs-xs);
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.qos-card__more:hover { text-decoration: none; color: var(--qos-ink); }
.qos-card__more span[aria-hidden] { transition: transform .15s var(--qos-ease); }
.qos-card:hover .qos-card__more span[aria-hidden] { transform: translateX(3px); }

@media (max-width: 599.98px) {
	.qos-card { grid-template-columns: minmax(0, 1fr); gap: var(--qos-3); padding-block: var(--qos-5); }
	.qos-card__title { font-size: var(--qos-fs-md); }
}

/* A three-across grid, used for "Read also". */
.qos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--qos-5);
}
.qos-tile__media {
	display: block;
	overflow: hidden;
	background: var(--qos-surface-3);
	aspect-ratio: 3 / 2;
	margin-bottom: var(--qos-3);
}
.qos-tile__image { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--qos-ease); }
.qos-tile:hover .qos-tile__image { transform: scale(1.03); }
.qos-tile__title { margin: var(--qos-2) 0 0; font-size: var(--qos-fs-base); line-height: 1.3; }
.qos-tile__title a { color: var(--qos-ink); }
.qos-tile__title a:hover { color: var(--qos-accent-ink); text-decoration: none; }

/* ==========================================================================
   == 13  Section headings and pagination
   ========================================================================== */

.qos-section { margin-block: var(--qos-9) 0; }
.qos-section:first-child { margin-top: 0; }

.qos-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--qos-4);
	margin-bottom: var(--qos-5);
	padding-bottom: var(--qos-3);
	border-bottom: 2px solid var(--qos-ink);
}
.qos-section__title {
	margin: 0;
	font-size: var(--qos-fs-lg);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.qos-section__title a { color: inherit; }
.qos-section__all {
	flex: none;
	color: var(--qos-accent-ink);
	font-size: var(--qos-fs-xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.qos-archive-header { margin-bottom: var(--qos-6); }
.qos-archive-title { margin: 0 0 var(--qos-2); }
.qos-archive-title__query { color: var(--qos-accent-ink); }
.qos-archive-description {
	max-width: var(--qos-measure);
	color: var(--qos-ink-2);
	font-size: var(--qos-fs-md);
	line-height: 1.55;
}
.qos-archive-count { margin: var(--qos-2) 0 0; color: var(--qos-ink-3); font-size: var(--qos-fs-sm); }

.qos-pagination {
	margin-top: var(--qos-8);
	padding-top: var(--qos-6);
	border-top: 1px solid var(--qos-line);
}
.qos-pagination .nav-links,
.qos-pagination__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qos-2);
}
.qos-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--qos-3);
	border: 1px solid var(--qos-line-strong);
	border-radius: var(--qos-radius);
	color: var(--qos-ink);
	font-size: var(--qos-fs-sm);
	font-weight: 600;
	text-decoration: none;
}
.qos-pagination a.page-numbers:hover {
	border-color: var(--qos-ink);
	background: var(--qos-surface-3);
	text-decoration: none;
}
.qos-pagination .page-numbers.current {
	background: var(--qos-ink);
	border-color: var(--qos-ink);
	color: var(--qos-white);
}
.qos-pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   == 14  Sidebar and widgets
   ========================================================================== */

.qos-sidebar { min-width: 0; display: flex; flex-direction: column; gap: var(--qos-7); }

@media (min-width: 1024px) {
	.qos-sidebar { position: sticky; top: 76px; }
}

.widget { min-width: 0; }
.widget__title,
.qos-sidebar .wp-block-heading {
	margin: 0 0 var(--qos-4);
	padding-bottom: var(--qos-2);
	border-bottom: 2px solid var(--qos-ink);
	font-size: var(--qos-fs-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li + li { margin-top: var(--qos-3); }
.widget a { color: var(--qos-ink); }
.widget a:hover { color: var(--qos-accent-ink); }
.widget .qos-search { max-width: none; }

.qos-recent { display: flex; flex-direction: column; }
.qos-recent__item {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: var(--qos-3);
	padding-block: var(--qos-3);
	border-top: 1px solid var(--qos-line);
	align-items: start;
	margin: 0;
}
.qos-recent__item:first-child { border-top: 0; padding-top: 0; }
.qos-recent__thumb {
	display: block;
	overflow: hidden;
	background: var(--qos-surface-3);
	aspect-ratio: 3 / 2;
}
.qos-recent__thumb img { width: 100%; height: 100%; object-fit: cover; }
.qos-recent__title {
	display: block;
	color: var(--qos-ink);
	font-size: var(--qos-fs-sm);
	font-weight: 600;
	line-height: 1.34;
}
.qos-recent__title:hover { color: var(--qos-accent-ink); text-decoration: none; }
.qos-recent__date { display: block; margin-top: 4px; color: var(--qos-ink-3); font-size: var(--qos-fs-2xs); }

/* ==========================================================================
   == 15  Advertising banners
   ========================================================================== */

.qos-banners { display: flex; flex-direction: column; gap: var(--qos-5); }
.qos-banners--home_middle, .qos-banners--footer { margin-block: var(--qos-7); }
/* The top placement sits between the section bar and the featured stories. */
.qos-banners--home_top { margin-block: var(--qos-7) 0; }

.qos-banner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.qos-banner__image, .qos-banner__link img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border: 1px solid var(--qos-line);
}
.qos-banner__link { display: block; width: 100%; }
.qos-banner__label {
	align-self: flex-end;
	color: var(--qos-ink-3);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.qos-banners--sidebar .qos-banner__image { border-color: var(--qos-line); }

/* ==========================================================================
   == 16  Article
   ========================================================================== */

.qos-single { max-width: 100%; }

.qos-single__header { margin-bottom: var(--qos-5); }
.qos-single__title { margin: var(--qos-3) 0 0; }
.qos-single__standfirst {
	margin: var(--qos-4) 0 0;
	max-width: var(--qos-measure);
	color: var(--qos-ink-2);
	font-size: clamp(1.0625rem, 1rem + .3vw, var(--qos-fs-lg));
	line-height: 1.5;
	font-weight: 400;
}

.qos-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qos-2) var(--qos-4);
	margin-top: var(--qos-5);
	padding-block: var(--qos-3);
	border-top: 1px solid var(--qos-line);
	border-bottom: 1px solid var(--qos-line);
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-xs);
}
.qos-byline__author { color: var(--qos-ink); font-weight: 600; }
.qos-byline__updated { color: var(--qos-accent-ink); }
.qos-byline__reading { margin-left: auto; }

.qos-single__figure { margin: var(--qos-6) 0 var(--qos-5); }
.qos-single__figure img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--qos-surface-3);
}
.qos-single__caption,
.entry-content figcaption {
	margin-top: var(--qos-2);
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-xs);
	line-height: 1.5;
}
.qos-single__credit { color: var(--qos-ink-3); font-style: normal; }
.qos-single__credit::before { content: " · "; }
/* No caption to separate it from. */
.qos-single__credit--alone::before { content: none; }

/* --- sharing -------------------------------------------------------------- */

.qos-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qos-2);
	margin-bottom: var(--qos-6);
}
.qos-share__label {
	margin-right: var(--qos-2);
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.qos-share__link, .qos-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 36px;
	min-width: 36px;
	padding: 0 10px;
	border: 1px solid var(--qos-line-strong);
	border-radius: var(--qos-radius);
	background: var(--qos-white);
	color: var(--qos-ink-2);
	font: inherit;
	font-size: var(--qos-fs-xs);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s var(--qos-ease), color .15s var(--qos-ease), background .15s var(--qos-ease);
}
.qos-share__link:hover, .qos-share__copy:hover {
	border-color: var(--qos-ink);
	color: var(--qos-ink);
	background: var(--qos-surface-2);
	text-decoration: none;
}
.qos-share__copy.is-copied {
	border-color: var(--qos-accent-ink);
	color: var(--qos-accent-ink);
	background: var(--qos-accent-soft);
}
.qos-share__copy svg, .qos-share__link svg { width: 16px; height: 16px; }

/* --- table of contents ---------------------------------------------------- */

.qos-toc {
	margin: 0 0 var(--qos-6);
	padding: var(--qos-4) var(--qos-5);
	background: var(--qos-surface-2);
	border: 1px solid var(--qos-line);
	border-left: 3px solid var(--qos-orange);
}
.qos-toc__title {
	margin: 0 0 var(--qos-2);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--qos-ink-3);
}
.qos-toc__list { margin: 0; padding-left: var(--qos-5); color: var(--qos-ink-2); }
.qos-toc__list li + li { margin-top: 6px; }
.qos-toc__list a { color: var(--qos-ink); font-size: var(--qos-fs-sm); }
.qos-toc__list a:hover { color: var(--qos-accent-ink); }

/* --- long-form body ------------------------------------------------------- */

.entry-content {
	max-width: var(--qos-measure);
	font-size: var(--qos-fs-md);
	line-height: 1.72;
	color: var(--qos-ink);
}
.entry-content > * { margin-block: 0 var(--qos-5); }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2 {
	margin-top: var(--qos-8);
	font-size: var(--qos-fs-xl);
	scroll-margin-top: 84px;
}
.entry-content h3 {
	margin-top: var(--qos-7);
	font-size: var(--qos-fs-lg);
	scroll-margin-top: 84px;
}
.entry-content a { text-decoration: underline; text-underline-offset: .18em; }
.entry-content a:hover { color: var(--qos-ink); }

.entry-content ul, .entry-content ol { padding-left: var(--qos-6); }
.entry-content li + li { margin-top: var(--qos-2); }
.entry-content li::marker { color: var(--qos-accent-ink); }

.entry-content blockquote {
	margin-inline: 0;
	padding: var(--qos-1) 0 var(--qos-1) var(--qos-5);
	border-left: 3px solid var(--qos-orange);
	color: var(--qos-ink);
	font-size: var(--qos-fs-lg);
	line-height: 1.5;
}
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite {
	display: block;
	margin-top: var(--qos-2);
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-sm);
	font-style: normal;
}

.entry-content figure img, .entry-content img { border-radius: 2px; }
.entry-content .wp-block-image { margin-block: var(--qos-6); }

.entry-content .alignwide {
	width: min(100%, calc(var(--qos-measure) + 120px));
	max-width: none;
	margin-inline: auto;
}
.entry-content .alignfull { width: 100%; max-width: none; }

.entry-content .wp-block-embed__wrapper,
.entry-content .wp-block-embed iframe,
.entry-content iframe[src*="youtube"],
.entry-content iframe[src*="vimeo"] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--qos-fs-sm); }
.entry-content th, .entry-content td { padding: 10px 12px; border: 1px solid var(--qos-line); text-align: left; }
.entry-content th { background: var(--qos-surface-3); font-weight: 700; }

.entry-content code, .entry-content kbd {
	padding: 2px 5px;
	background: var(--qos-surface-3);
	border-radius: 2px;
	font-size: .92em;
}
.entry-content pre { padding: var(--qos-4); background: var(--qos-surface-3); overflow-x: auto; }

/* The palette offered in the block editor (see inc/setup.php). */
.has-qos-orange-color { color: var(--qos-orange); }
.has-qos-black-color { color: var(--qos-black); }
.has-qos-white-color { color: var(--qos-white); }
.has-qos-grey-color { color: var(--qos-surface-3); }
.has-qos-orange-background-color { background-color: var(--qos-orange); }
.has-qos-black-background-color { background-color: var(--qos-black); }
.has-qos-white-background-color { background-color: var(--qos-white); }
.has-qos-grey-background-color { background-color: var(--qos-surface-3); }

/* A demonstration article says so, in a way an editor can simply delete. */
.qos-demo-note {
	display: flex;
	gap: var(--qos-3);
	margin: var(--qos-7) 0 0;
	padding: var(--qos-3) var(--qos-4);
	background: var(--qos-surface-3);
	border-left: 3px solid var(--qos-line-strong);
	color: var(--qos-ink-2);
	font-size: var(--qos-fs-xs);
	line-height: 1.5;
}

/* A material shown in a language the reader did not ask for says so. */
.qos-translation-notice { margin-bottom: var(--qos-6); }
.qos-translation-notice p { margin: 0; }
.qos-translation-notice p + p { margin-top: var(--qos-2); }

.qos-single__footer { margin-top: var(--qos-7); }
.qos-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--qos-2);
	font-size: var(--qos-fs-xs);
}
.qos-tags__label { color: var(--qos-ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.qos-tags a {
	padding: 4px 9px;
	background: var(--qos-surface-3);
	border-radius: 2px;
	color: var(--qos-ink-2);
}
.qos-tags a:hover { background: var(--qos-accent-soft); color: var(--qos-accent-ink); text-decoration: none; }

/* --- previous / next ------------------------------------------------------ */

.qos-postnav {
	margin-top: var(--qos-8);
	padding-top: var(--qos-6);
	border-top: 1px solid var(--qos-line);
}
.qos-postnav .nav-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--qos-4); }
.qos-postnav a {
	display: block;
	padding: var(--qos-4);
	border: 1px solid var(--qos-line);
	border-radius: var(--qos-radius);
	color: var(--qos-ink);
	text-decoration: none;
	transition: border-color .15s var(--qos-ease), background .15s var(--qos-ease);
}
.qos-postnav a:hover { border-color: var(--qos-ink); background: var(--qos-surface-2); }
.qos-postnav .nav-next { text-align: right; }
.qos-postnav__label {
	display: block;
	margin-bottom: 4px;
	color: var(--qos-accent-ink);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.qos-postnav__title { display: block; font-size: var(--qos-fs-sm); font-weight: 600; line-height: 1.35; }

.qos-page-links { margin-top: var(--qos-5); font-size: var(--qos-fs-sm); }

/* ==========================================================================
   == 17  Pages, forms, site map
   ========================================================================== */

.qos-page__header { margin-bottom: var(--qos-5); }
.qos-page__figure { margin-bottom: var(--qos-6); }
.qos-page__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Sub-headings on the Contacts page, and the social row under About Us. */
.qos-page__subtitle {
	margin: 0 0 var(--qos-4);
	padding-bottom: var(--qos-2);
	border-bottom: 2px solid var(--qos-ink);
	font-size: var(--qos-fs-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.qos-page__subtitle + * { margin-top: 0; }
.qos-page__social { margin-top: var(--qos-7); padding-top: var(--qos-6); border-top: 1px solid var(--qos-line); }

.qos-contact { max-width: 620px; }
.qos-contact__form { display: grid; gap: var(--qos-4); }
.qos-contact__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.qos-contact__field label {
	font-size: var(--qos-fs-sm);
	font-weight: 600;
	color: var(--qos-ink);
}
.qos-contact__field .qos-required { color: var(--qos-accent-ink); }
.qos-contact__hint { color: var(--qos-ink-3); font-size: var(--qos-fs-xs); font-weight: 400; }

.qos-contact input[type="text"],
.qos-contact input[type="email"],
.qos-contact textarea {
	width: 100%;
	padding: 11px var(--qos-3);
	border: 1px solid var(--qos-line-strong);
	border-radius: var(--qos-radius);
	background: var(--qos-white);
	color: var(--qos-ink);
	font: inherit;
	font-size: var(--qos-fs-base);
}
.qos-contact textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.qos-contact [aria-invalid="true"] { border-color: #B3261E; background: #FFF7F6; }

.qos-contact__error {
	margin: 4px 0 0;
	color: #9F2016;
	font-size: var(--qos-fs-xs);
	font-weight: 600;
}

.qos-contact__honeypot {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

.qos-contact__notice {
	margin-bottom: var(--qos-5);
	padding: var(--qos-4);
	border-radius: var(--qos-radius);
	border-left: 3px solid;
	font-size: var(--qos-fs-sm);
	line-height: 1.55;
}
.qos-contact__notice--success { background: #F1F8F2; border-color: #2E7D46; color: #1D5330; }
.qos-contact__notice--error { background: #FFF5F4; border-color: #B3261E; color: #8C1D16; }
.qos-contact__notice--notice { background: var(--qos-surface-3); border-color: var(--qos-line-strong); color: var(--qos-ink-2); }

.qos-contact__actions { margin: 0; }

.qos-contacts { list-style: none; margin: 0; padding: 0; font-size: var(--qos-fs-sm); }
.qos-contacts__item + .qos-contacts__item { margin-top: var(--qos-3); }
.qos-contacts__label {
	display: block;
	margin-bottom: 2px;
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Contacts page: details on the left, the form on the right, from tablet up. */
.qos-contacts-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--qos-8);
	margin-top: var(--qos-7);
}
@media (min-width: 860px) {
	.qos-contacts-grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--qos-9); }
}
.qos-contacts-grid__details .qos-page__subtitle:not(:first-child) { margin-top: var(--qos-7); }

/* --- social --------------------------------------------------------------- */

.qos-social { display: flex; flex-wrap: wrap; gap: var(--qos-2); list-style: none; margin: var(--qos-4) 0 0; padding: 0; }
.qos-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--qos-radius);
	border: 1px solid;
	transition: background .15s var(--qos-ease), color .15s var(--qos-ease), border-color .15s var(--qos-ease);
}
.qos-social--footer .qos-social__link {
	border-color: rgba(255, 255, 255, .22);
	color: rgba(255, 255, 255, .78);
}
.qos-social--footer .qos-social__link:hover {
	background: var(--qos-orange);
	border-color: var(--qos-orange);
	color: var(--qos-black);
}
.qos-social--page .qos-social__link { border-color: var(--qos-line-strong); color: var(--qos-ink-2); }
.qos-social--page .qos-social__link:hover { background: var(--qos-ink); border-color: var(--qos-ink); color: var(--qos-white); }

/* --- site map ------------------------------------------------------------- */

.qos-sitemap { display: grid; gap: var(--qos-8); }
.qos-page__content + .qos-sitemap { margin-top: var(--qos-7); }
@media (min-width: 700px) { .qos-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qos-sitemap__section--wide { grid-column: 1 / -1; }
.qos-sitemap__heading {
	margin: 0 0 var(--qos-3);
	padding-bottom: var(--qos-2);
	border-bottom: 2px solid var(--qos-ink);
	font-size: var(--qos-fs-sm);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.qos-sitemap__list { list-style: none; margin: 0; padding: 0; font-size: var(--qos-fs-sm); }
.qos-sitemap__list li { padding-block: 7px; border-bottom: 1px solid var(--qos-line); }
.qos-sitemap__list ul { list-style: none; margin: 6px 0 0; padding-left: var(--qos-4); }
.qos-sitemap__list ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.qos-sitemap__list a { color: var(--qos-ink); }
.qos-sitemap__list a:hover { color: var(--qos-accent-ink); }
.qos-sitemap__date { color: var(--qos-ink-3); font-size: var(--qos-fs-2xs); }
.qos-sitemap__columns { columns: 2; column-gap: var(--qos-8); }
@media (max-width: 599.98px) { .qos-sitemap__columns { columns: 1; } }

/* ==========================================================================
   == 18  Breadcrumbs, empty states, 404
   ========================================================================== */

.qos-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--qos-5);
	color: var(--qos-ink-3);
	font-size: var(--qos-fs-xs);
}
.qos-breadcrumbs a { color: var(--qos-ink-3); }
.qos-breadcrumbs a:hover { color: var(--qos-accent-ink); }
.qos-breadcrumbs__sep { color: var(--qos-line-strong); }
.qos-breadcrumbs [aria-current] { color: var(--qos-ink-2); }

.qos-none {
	padding: var(--qos-9) 0;
	max-width: 560px;
}
.qos-none__title { margin-bottom: var(--qos-3); }
.qos-none p { color: var(--qos-ink-2); }
.qos-none .qos-search { margin-top: var(--qos-5); max-width: 420px; }

.qos-404 { padding: var(--qos-9) 0 var(--qos-8); max-width: 620px; }
.qos-404__code {
	margin: 0;
	font-family: var(--qos-font-display);
	font-size: clamp(4rem, 2rem + 10vw, 7rem);
	font-weight: 700;
	line-height: .9;
	color: var(--qos-accent-ink);
	letter-spacing: -.02em;
}
.qos-404__title { margin: var(--qos-4) 0 var(--qos-3); }
.qos-404__text { color: var(--qos-ink-2); font-size: var(--qos-fs-md); }
.qos-404 .qos-search { margin-block: var(--qos-5); max-width: 420px; }
.qos-404__actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--qos-3); }

/* A site-wide notice strip, used for the demonstration banner. */
.qos-notice-strip {
	background: var(--qos-surface-3);
	border-bottom: 1px solid var(--qos-line);
	color: var(--qos-ink-2);
	font-size: var(--qos-fs-xs);
}
.qos-notice-strip__inner {
	padding-block: 7px;
	line-height: 1.45;
}
.qos-notice-strip strong { margin-right: 4px; }
.qos-notice-strip strong { color: var(--qos-ink); }

/* ==========================================================================
   == 19  Footer
   ========================================================================== */

.qos-footer {
	margin-top: var(--qos-10);
	background: var(--qos-dark);
	color: rgba(255, 255, 255, .72);
	font-size: var(--qos-fs-sm);
}
.qos-footer a { color: rgba(255, 255, 255, .78); }
.qos-footer a:hover { color: var(--qos-orange); text-decoration: none; }

.qos-footer__main { padding-block: var(--qos-9); }
.qos-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--qos-8);
}
@media (min-width: 640px) {
	.qos-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.qos-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--qos-7); }
}

.qos-footer__heading {
	margin: 0 0 var(--qos-4);
	color: var(--qos-white);
	font-size: var(--qos-fs-2xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
/* The muted grey used on white is only 3.7:1 on the dark footer. */
.qos-footer .qos-contacts__label { color: rgba(255, 255, 255, .68); }
.qos-footer__col--brand .qos-brand { margin-bottom: var(--qos-4); }
.qos-footer__menu { list-style: none; margin: 0; padding: 0; }
.qos-footer__menu li + li { margin-top: var(--qos-2); }
.qos-footer__menu a { display: inline-block; padding-block: 2px; }

.qos-footer__bottom {
	padding-block: var(--qos-4);
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.qos-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--qos-3);
	font-size: var(--qos-fs-xs);
	color: rgba(255, 255, 255, .55);
}
.qos-copyright { margin: 0; }

/* ==========================================================================
   == 20  Accessibility, motion, print
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.qos-skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important;
	top: var(--qos-2);
	left: var(--qos-2);
	z-index: 300;
	width: auto; height: auto;
	margin: 0;
	padding: 10px var(--qos-4);
	clip: auto;
	clip-path: none;
	background: var(--qos-white);
	color: var(--qos-ink);
	border: 2px solid var(--qos-accent-ink);
	border-radius: var(--qos-radius);
	font-size: var(--qos-fs-sm);
	font-weight: 700;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.qos-feature:hover .qos-feature__image,
	.qos-card:hover .qos-card__image,
	.qos-tile:hover .qos-tile__image { transform: none; }
}

@media print {
	.qos-utility, .qos-catnav, .qos-sidebar, .qos-banners, .qos-share,
	.qos-postnav, .qos-drawer, .qos-scrim, .qos-searchpanel, .qos-footer__main { display: none !important; }
	.qos-masthead { background: none; color: #000; }
	.qos-masthead__media { display: none; }
	.qos-brand, .qos-brand__tagline { color: #000; }
	body { font-size: 11pt; }
	.entry-content { max-width: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}