/*
Theme Name: indiegamesdevel.com 2026
Theme URI: https://indiegamesdevel.com/
Author: Carlo Cancelloni
Author URI: https://indiegamesdevel.com/
Description: Indie Games Devel site.
Version: 2026.0
Requires at least: 5.1
Requires PHP: 8
Tested up to: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: igdmag
Tags: translation-ready, custom-background, theme-options, custom-menu, threaded-comments, featured-images, footer-widgets, left-sidebar, editor-style, right-sidebar, full-width-template, two-columns, custom-colors, custom-header, custom-logo, blog, entertainment, portfolio
*/

/* ==========================================================================
   1. Design tokens (ported from the React theme: src/styles/theme.css)
   ========================================================================== */

:root {
	--orange: #ff6600;
	--blue: #4f80e6;
	--black: #000000;
	--dark: #111111;
	--grey: #333333;
	--white: #ffffff;
	--soft: #cccccc;
	--violet: #592bbc;
	--green: #2ab391;
	--red: #aa0000;
	--yellow: #ffcc00;

	--back: #171a1f;
	--primary: #252d34;
	--secondary: #1f262c;

	--font-primary: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
	--font-secondary: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

	--radius: 6px;
	--radius-lg: 8px;
	--wrap: 1400px;
	--gap: 24px;

	--ads-placement-background: linear-gradient(-45deg,
		rgba(255, 255, 255, .1) 11.11%,
		rgba(75, 75, 75, .1) 11.11%,
		rgba(75, 75, 75, .1) 50%,
		rgba(255, 255, 255, .1) 50%,
		rgba(255, 255, 255, .1) 61.11%,
		rgba(75, 75, 75, .1) 61.11%,
		rgba(75, 75, 75, .1) 100%);

	/* Sticky header height: top bar only until the nav row appears at 1024px. */
	--header-h: 56px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	font-size: 16px;
	background: var(--back);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--back);
	color: var(--white);
	font-family: var(--font-secondary);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-primary);
	font-weight: 700;
	line-height: 1.2;
	color: var(--white);
	margin: 0 0 0.5em;
}

p {
	margin: 0 0 1em;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease;
}

a:hover,
a:focus-visible {
	color: var(--orange);
}

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

svg {
	display: block;
	flex: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--orange);
	outline-offset: 2px;
}

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

/* Visible only while focused, above the sticky header (z-index 50). */
.skip-link {
	position: absolute;
	top: 0;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--orange);
	color: var(--white);
	font-family: var(--font-primary);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	top: 8px;
	left: 8px;
	color: var(--white);
}

main:focus {
	outline: none;
}

/* ==========================================================================
   3. Layout helpers
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 16px;
}

.content {
	padding-block: 32px;
}

.badge {
	display: inline-block;
	background: var(--grey);
	color: var(--white);
	padding: 4px 12px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

.badge a {
	color: inherit;
}

.badge a:hover {
	color: var(--white);
}

.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	color: var(--soft);
	font-size: 14px;
	line-height: 1.4;
}

.meta .sep {
	opacity: .7;
}

.meta .author {
	color: var(--white);
	font-weight: 500;
}

.meta .read-time {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--dark);
}

body.admin-bar .site-header {
	top: 32px;
}

.topbar-inner {
	border-bottom: 0;
}

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 56px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -.025em;
	text-transform: uppercase;
	color: var(--white);
}

.brand:hover {
	color: var(--white);
}

.brand img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.socials {
	display: none;
	align-items: center;
	gap: 20px;
	color: var(--white);
}

.socials a {
	display: flex;
	color: var(--white);
}

.socials a:hover {
	color: var(--orange);
}

.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	margin-right: -8px;
	background: none;
	border: 0;
	color: var(--white);
}

.menu-toggle:hover {
	color: var(--orange);
}

/* --- Nav row --- */

.navrow {
	background: var(--secondary);
}

.main-nav {
	display: none;
	align-items: stretch;
	justify-content: space-between;
	min-height: 44px;
}

.menu {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu li {
	display: flex;
}

.menu a {
	display: flex;
	align-items: center;
	padding: 0 16px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: var(--white);
	white-space: nowrap;
}

.menu a:hover {
	background: var(--grey);
	color: var(--white);
}

/* TEST - white on --orange measures 2.94:1, and at 12px bold this counts as
   normal text, so it is under the 4.5:1 of WCAG AA (under the 3.0 for large
   text too). The outline below is being tried as a way to keep the white.

   Be aware of what it does and does not do: it sharpens the glyph edges to the
   eye, but contrast is computed between text and background colour, so every
   automated checker will still report 2.94:1.

   text-shadow and not -webkit-text-stroke. A stroke is centred on the glyph
   outline, so half of it always falls inside: checked on screen at .5, 1 and
   2px, either it was invisible or it had swallowed the white and the label
   just read dark. Eight offsets of a hard shadow sit entirely outside the
   glyph instead, so the white core stays white whatever the size, and it is a
   standard property rather than a prefixed non-standard one.

   If the label reading dark is acceptable, note that `color: var(--black)` on
   its own gets there at 7.15:1 and AAA, without any of this. */

.menu .current-menu-item > a,
.menu .current-menu-parent > a,
.menu .current-menu-ancestor > a,
.menu .current_page_item > a,
.menu .is-active > a {
	background: var(--orange);
	color: var(--white);
	text-shadow:
		1px 0 0 var(--black), -1px 0 0 var(--black),
		0 1px 0 var(--black), 0 -1px 0 var(--black),
		1px 1px 0 var(--black), -1px -1px 0 var(--black),
		1px -1px 0 var(--black), -1px 1px 0 var(--black);
}

.menu .sub-menu {
	display: none;
}

/* One size drives the whole row: the button is a square of it, the field
   matches its height. Override --search-size to resize the pair. */
.site-search {
	--search-size: 44px;
	display: flex;
	align-items: stretch;
}

/* --primary, not --dark: --dark is the top bar's own colour, so the field
   used to read as a hole punched through the header rather than a control.
   One step lighter than the row it sits in (--secondary). */
.site-search input[type="search"] {
	width: 224px;
	height: var(--search-size);
	padding: 0 12px;
	background: var(--primary);
	border: 0;
	border-radius: 0;
	color: var(--white);
	font-size: 14px;
}

.site-search input[type="search"]::placeholder {
	color: var(--soft);
	opacity: .7;
}

.site-search input[type="search"]:focus {
	outline: none;
}

/* Fixed square. Not aspect-ratio: as a flex item with flex: none the width
   resolves from the icon before the ratio applies, which left it 16px wide
   inside the drawer. */
.site-search button[type="submit"] {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--search-size);
	height: var(--search-size);
	padding: 0;
	background: var(--grey);
	border: 0;
	border-radius: 0;
	color: var(--white);
}

/* color restated: the generic submit hover in section 14 also sets a colour,
   and without this the icon would flip to black on hover. */
.site-search button[type="submit"]:hover {
	background: var(--orange);
	color: var(--white);
}

/* --- Mobile drawer --- */

/* Layers in this theme: header 50, skip-link 100, back-to-top 300, drawer
   overlay/panel above everything of ours.

   The drawer has to clear the CookieYes consent bar too. That bar comes in a
   moment after load, sits at z-index 9999999 and on a phone covers three
   quarters of the screen: with the drawer at 410 the menu opened *underneath*
   it and looked broken — which is what "they work at first, then they don't"
   turned out to be. Above the bar, then, but still below CookieYes' own
   settings modal (999999999), so that dialog stays reachable from inside the
   open menu. */

.drawer-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000000;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

.drawer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000001;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 420px;
	height: 100%;
	background: var(--secondary);
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform .25s ease;
}

body.nav-open {
	overflow: hidden;
}

body.nav-open .drawer-overlay {
	opacity: 1;
	visibility: visible;
}

body.nav-open .drawer {
	transform: translateX(0);
}

/* Sticky because the drawer itself is the scroll container now: without it the
   close button would scroll away with everything else on a short screen. It
   needs its own background - sticky content is scrolled underneath it. */

.drawer-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px;
	background: var(--secondary);
	border-bottom: 1px solid var(--grey);
}

.drawer-head .brand img {
	width: 32px;
	height: 32px;
}

.drawer-close {
	padding: 8px;
	background: none;
	border: 0;
	color: var(--white);
}

.drawer-close:hover {
	color: var(--orange);
}

/* flex: none, so the list is as tall as its links and the foot sits right under
   them. It used to grow into all the space left, which pushed search and the
   network links onto the bottom edge of the screen - precisely where anchored
   ads sit, and they covered them. Any spare room now falls below the foot. */

.drawer-nav {
	flex: none;
}

.drawer-nav .menu,
.drawer-nav .menu li {
	display: block;
}

.drawer-nav .menu a {
	display: block;
	padding: 12px 16px;
	font-size: 14px;
}

.drawer-foot {
	border-top: 1px solid var(--grey);
}

.drawer-foot .site-search {
	padding: 0;
}

.drawer-foot .site-search {
	--search-size: 48px;
}

.drawer-foot .site-search input[type="search"] {
	flex: 1;
	width: auto;
	padding: 0 12px;
}

.drawer-foot .site-search button {
	padding: 0;
}

.drawer-socials {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	padding: 20px 16px;
	color: var(--white);
}

.drawer-socials a {
	display: flex;
	color: var(--white);
}

.drawer-socials a:hover {
	color: var(--orange);
}

/* ==========================================================================
   5. Hero / featured card
   ========================================================================== */

.hero {
	display: block;
	position: relative;
	height: 500px;
	margin-bottom: 64px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--white);
}

.hero:hover {
	color: var(--white);
}

/* Two classes: the generic .card-media rule further down would otherwise win
   on source order and put the hero image back in a 16/9 box. */

.hero .card-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.hero .card-image {
	transition: transform .5s ease;
}

.hero:hover .card-image {
	transform: scale(1.05);
}

.hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--black) 0%, rgba(0, 0, 0, .6) 50%, transparent 100%);
}

.hero-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 24px;
}

.hero-copy .badge {
	align-self: flex-start;
	margin-bottom: 16px;
}

.hero-copy h1,
.hero-copy h2 {
	font-size: 30px;
	margin: 0 0 16px;
}

.hero:hover .hero-copy h1,
.hero:hover .hero-copy h2 {
	color: var(--orange);
}

.hero-copy p {
	color: var(--soft);
	font-size: 16px;
	margin: 0 0 24px;
}

/* ==========================================================================
   6. Sections & grids
   ========================================================================== */

.section {
	margin-bottom: 64px;
}

.section:last-child {
	margin-bottom: 0;
}

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.section-head h2 {
	margin: 0;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: .025em;
}

.section-head .view-all {
	flex: none;
	color: var(--orange);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
}

.section-head .view-all:hover {
	text-decoration: underline;
}

.grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

.split-side {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

/* ==========================================================================
   7. Cards
   ========================================================================== */

.card {
	background: var(--primary);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.card > a {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--white);
}

.card-media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

/* The thumbnail is a real <img>; object-fit does the cropping a CSS
   background used to do, and the file stays visible to crawlers. */

.card-image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
	background-color: var(--secondary);
	transition: transform .3s ease;
}

.card-image-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--secondary);
}

.card:hover .card-image {
	transform: scale(1.05);
}

.card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.card-body .badge {
	align-self: flex-start;
	margin-bottom: 12px;
}

.card h3 {
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.3;
}

.card:hover h3 {
	color: var(--orange);
}

.card p {
	margin: 0 0 16px;
	color: var(--soft);
	font-size: 14px;
}

.card .meta {
	margin-top: auto;
}

/* --- Compact card --- */

.compact {
	background: none;
	border-radius: 0;
}

.compact > a {
	flex-direction: row;
	gap: 16px;
	height: auto;
}

.compact .card-media {
	flex: 0 0 96px;
	width: 96px;
	height: 96px;
	aspect-ratio: auto;
	border-radius: var(--radius);
}

.compact .card-body {
	padding: 0;
	min-width: 0;
}

.compact .badge {
	padding: 2px 8px;
	margin-bottom: 8px;
}

.compact h3 {
	margin: 0 0 8px;
	font-size: 16px;
}

.compact .meta {
	margin-top: 0;
	font-size: 12px;
	gap: 8px;
}

/* --- List card (archive main column) --- */

.list-card {
	padding: 24px;
	background: var(--primary);
	border-radius: var(--radius-lg);
}

/* The row is laid out on the link, not on the article: the whole card is one
   anchor, so the anchor is the only child there would be to lay out. Direction
   and colour come from .card > a; only the gap is particular to this variant. */

.list-card > a {
	gap: 24px;
}

.list-card .card-media {
	flex: none;
	width: 100%;
	height: 192px;
	aspect-ratio: auto;
	border-radius: var(--radius);
}

.list-card:hover .card-image {
	transform: scale(1.05);
}

.list-card .card-body {
	padding: 0;
	min-width: 0;
}

.list-card h3 {
	margin: 0 0 12px;
	font-size: 20px;
	line-height: 1.3;
}

.list-card p {
	margin: 0 0 16px;
	color: var(--soft);
	font-size: 14px;
}

/* ==========================================================================
   8. Archive header
   ========================================================================== */

.archive-head {
	margin-bottom: 48px;
}

.archive-title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.archive-bar {
	flex: none;
	width: 8px;
	height: 48px;
	border-radius: var(--radius);
	background: var(--blue);
}

.archive-title {
	margin: 0;
	font-size: 30px;
}

/* Author archives. The avatar comes first either way: on top on phones, with
   name, description and profile links underneath; on the left from 640px up,
   centred against the column of text beside it.

   The wrapper around those three is what makes that centring possible. Grid
   without it does not work: the avatar would have to span every row to be
   centred against the block, and `grid-row: 1 / -1` counts lines of the
   explicit grid, which here has none - the rows are all implicit, so the span
   collapses to the first row and the avatar sticks to the top. */

.archive-head.has-avatar {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 16px;
}

/* column-reverse rather than reordering the markup: the avatar has to stay
   last in the source so a screen reader meets the name before the portrait,
   and nothing here is focusable, so no tab order is crossed by flipping it. */

.archive-head.has-avatar > .archive-head-main {
	width: 100%;
}

.archive-head.has-avatar > .archive-avatar {
	flex: none;
}

.archive-avatar {
	display: block;
}

.archive-avatar img {
	display: block;
	width: 180px;
	height: 180px;
	border-radius: 999px;
	object-fit: cover;
}

.archive-head .author-links {
	margin-top: 16px;
}

.archive-desc {
	max-width: 768px;
	margin: 0;
	color: var(--soft);
	font-size: 18px;
}

.archive-desc p:last-child {
	margin-bottom: 0;
}

.archive-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
	margin-bottom: 48px;
}

.archive-main,
.archive-side {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
}

.no-results {
	color: var(--soft);
}

/* ==========================================================================
   9. Pagination
   ========================================================================== */

.pagination {
	margin-top: 48px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border-radius: var(--radius);
	background: transparent;
	color: var(--soft);
	font-family: var(--font-primary);
	font-size: 14px;
	font-weight: 500;
}

.pagination a.page-numbers:hover {
	background: var(--grey);
	color: var(--white);
}

.pagination .page-numbers.current {
	background: var(--orange);
	color: var(--white);
}

.pagination .page-numbers.dots {
	background: none;
	cursor: default;
}

/* ==========================================================================
   10. Single post
   ========================================================================== */

/* --- Reading progress --- */

.reading-progress {
	position: fixed;
	top: var(--header-h);
	left: 0;
	z-index: 49;
	width: 100%;
	height: 4px;
	background: var(--secondary);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease;
}

/* Mezza trasparenza: la barra e' incollata sotto al menu e a piena opacita' si
   legge come un secondo bordo dell'header. A meta' resta leggibile ma torna a
   essere quello che e', un indicatore. La transizione parte da 0, quindi
   continua a comparire in dissolvenza. */
.reading-progress.is-visible {
	opacity: .5;
	visibility: visible;
}

.reading-progress-fill {
	display: block;
	width: 0;
	height: 100%;
	background: var(--orange);
}

body.admin-bar .reading-progress {
	top: calc(var(--header-h) + 32px);
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress {
		transition: none;
	}
}

/* --- Hero --- */

.single-hero {
	position: relative;
	height: 400px;
	aspect-ratio: auto;
	margin-bottom: 32px;
	background-color: var(--secondary);
}

.single-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--back) 0%, rgba(23, 26, 31, .8) 40%, transparent 100%);
}

.article {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin-inline: auto;
	padding-inline: 16px;
}

.has-hero .article {
	margin-top: -120px;
}

.article > .badge {
	margin-bottom: 16px;
	font-size: 14px;
}

.article h1 {
	margin: 0 0 24px;
	font-size: 30px;
	line-height: 1.2;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--grey);
}

.article-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.article-actions a,
.article-actions button {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 0;
	border-radius: var(--radius);
	background: none;
	color: var(--white);
}

.article-actions a:hover,
.article-actions button:hover {
	background: var(--grey);
	color: var(--white);
}

/* --- Post content --- */

.article-content {
	margin-bottom: 48px;
	color: var(--soft);
	font-size: 18px;
	line-height: 1.65;
}

/* --- Shared theme additions: widgets, front page, video and back-to-top --- */
.backtotop{position:fixed;right:25px;bottom:-100px;z-index:300;width:50px;height:50px;border:0;border-radius:50%;background:var(--orange);color:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .5s ease-in-out}.backtotop-icon{display:block}.backtotop.is-visible{bottom:25px;opacity:1}.backtotop:hover{background:var(--black)}
.frontpage-content{background:var(--primary);width:100%;padding:48px 0 32px}.frontpage-content .article-content{max-width:800px;margin:0 auto}.frontpage-content .article-content p:last-child{margin-bottom:0}

/* The last home block keeps the same 64px margin as every other one, so the
   rhythm does not break at the content band. Only the wrapper's own bottom
   padding goes, which would otherwise stack a third gap on top. */
main:has(> .frontpage-content) > .content {
	padding-bottom: 0;
}
.footer-widgets{background:#20272e;padding:36px 0}.footer-widgets-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.footer-widgets .widget{color:var(--soft)}.footer-widgets .widget-title{color:var(--white);font:700 18px var(--font-primary);margin:0 0 14px}.footer-widgets ul{margin:0;padding-left:20px}

/* The grid columns are the widget areas, so when only one of the two has
   anything in it there is no second column to hold — it takes the whole row.
   footer.php prints the class; it does not print an empty area at all. */
.footer-widgets-grid.is-single {
	grid-template-columns: 1fr;
}

/* Within a column the widgets stack, and the grid gap no longer separates them
   because they are no longer grid items themselves. */
.footer-widgets-col > .widget + .widget {
	margin-top: 24px;
}
.video-player-content{display:block;width:100%;max-width:100%;margin-bottom:28px}.video-player-content > *, .video-player-content .wp-block-embed, .video-player-content .wp-block-embed__wrapper, .video-player-content .lyte{display:block;width:100%;max-width:100%}.video-player-content iframe,.video-player-content video{display:block;width:100%!important;max-width:100%;height:auto;margin:0;border-radius:var(--radius)}.video-player-content p:has(> iframe),.video-player-content p:has(> video){margin:0}.video-article .article-meta{margin-top:16px}
.video-player-content .lyte-wrapper,
.video-player-content .lyte-wrapper[style] { width: 100% !important; max-width: 100% !important; border-radius: var(--radius); overflow: hidden; }
.video-player-content .lyte-wrapper iframe,
.video-player-content .lyte-wrapper video { width: 100% !important; max-width: 100% !important; }
.video-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.video-heading .video-source{margin:0;text-align:right}.video-heading .badge{margin:0}.video-article .article-meta{margin-top:16px}

.article-content > *:first-child {
	margin-top: 0;
}

.article-content h2 {
	margin: 40px 0 16px;
	font-size: 24px;
}

.article-content h3 {
	margin: 32px 0 12px;
	font-size: 20px;
}

.article-content h4,
.article-content h5,
.article-content h6 {
	margin: 24px 0 12px;
	font-size: 18px;
}

.article-content p {
	margin: 0 0 24px;
}

/* A flex block group (core layout) spaces its children with `gap`, so the
   paragraph margin above stacks on top of it. Worse, the trailing margin
   counts toward the box height, so align-items: center lines the avatar up
   with the text *plus* 24px of nothing and the names ride high. Inside a flex
   group the gap is the spacing. */
.article-content .is-layout-flex > p {
	margin-block: 0;
}

.article-content a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-content a:hover {
	color: var(--white);
}

.article-content ul,
.article-content ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.article-content li {
	margin-bottom: 8px;
}

.article-content img {
	display: block;
	height: auto;
	border-radius: var(--radius);
}

.article-content figure {
	margin: 32px 0;
}

.article-content figcaption,
.article-content .wp-caption-text {
	margin-top: 8px;
	color: var(--soft);
	font-size: 14px;
	text-align: center;
	opacity: .8;
}

.article-content blockquote {
	margin: 32px 0;
	padding: 24px;
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--orange);
	background: var(--primary);
	font-style: italic;
}

.article-content blockquote p:last-child {
	margin-bottom: 0;
}

.article-content pre {
	margin: 0 0 24px;
	padding: 20px;
	overflow-x: auto;
	border-radius: var(--radius);
	background: var(--dark);
	color: var(--white);
	font-size: 14px;
}

.article-content code {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--dark);
	font-size: .9em;
}

.article-content pre code {
	padding: 0;
	background: none;
}

.article-content table {
	width: 100%;
	margin-bottom: 24px;
	border-collapse: collapse;
	font-size: 15px;
}

.article-content th,
.article-content td {
	padding: 10px 12px;
	border: 1px solid var(--grey);
	text-align: left;
}

.article-content th {
	background: var(--primary);
	color: var(--white);
}

.article-content hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--grey);
}

/* Embeds: spacing goes on the wrapper, never on the frame itself. Lazy players
   (WP YouTube Lyte) absolutely position their iframe inside a clipping box, so
   a margin there pushes the video down and cuts off the controls. */

.video-article .video-player-content > *,
.video-article .video-player-content > p > *,
.video-article .video-player-content .wp-block-embed__wrapper > * { width: 100%; max-width: 100%; }
.video-article .video-player-content iframe,
.video-article .video-player-content video { aspect-ratio: 16 / 9; height: auto; }
.video-article .video-cover.card-media { display: block; width: 100%; height: 400px; aspect-ratio: auto; overflow: hidden; }

.article-content iframe,
.article-content video {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: var(--radius);
}

.article-content .lyte-wrapper,
.article-content .wp-block-embed,
.article-content .wp-block-embed__wrapper {
	width: 100% !important;
	max-width: 100% !important;
	border-radius: var(--radius);
	overflow: hidden;
}

.article-content .lyte-wrapper[style],
.article-content .lyte-wrapper iframe,
.article-content .wp-block-embed iframe,
.article-content .wp-block-embed__wrapper iframe {
	width: 100% !important;
	max-width: 100% !important;
}

.article-content > iframe,
.article-content > video,
.article-content > p > iframe,
.article-content > p > video {
	display: block;
	margin: 32px auto;
	border-radius: var(--radius);
}

.video-article .article-content {
	width: 100%;
}

.video-article .article-content iframe,
.video-article .article-content video,
.video-article .article-content .wp-block-embed,
.video-article .article-content .lyte {
	width: 100%;
	max-width: 100%;
}

.article-content figure.wp-block-embed {
	margin: 32px 0;
}

.article-content .wp-block-embed__wrapper iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

/* Core reserves an embed's height with a ::before spacer on the wrapper and
   then lifts the *iframe* out of flow to fill it. WP YouTube Lyte swaps the
   YouTube iframe for its own placeholder, so only the first half applies: the
   spacer stays as an empty band and the player stacks underneath it, at about
   twice the height. Most embeds here render without the wrapper at all, which
   is why it looks like it strikes some videos and not others.

   The direct-child test is what keeps this steady: the iframe Lyte injects on
   play lands inside .lyte-wrapper, not on the wrapper itself, so the spacer
   does not spring back mid-playback. A plain core embed, whose iframe *is* the
   wrapper's own child, keeps core's behaviour untouched.

   The full selector chain is not decoration: core's rule scores three classes
   and one element, so a shorter one would lose to it. */
.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:not(:has(> iframe))::before {
	display: none;
}

/* --- Author bio --- */

.author-bios {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 48px;
}

.author-bio {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 24px;
	border: 1px solid var(--grey);
	border-radius: var(--radius-lg);
	background: var(--primary);
}

.author-avatar {
	flex: none;
	display: block;
}

.author-bio img {
	width: 96px;
	height: 96px;
	border-radius: 999px;
	object-fit: cover;
	flex: none;
}

.author-bio p a {
	color: var(--orange);
}

.author-bio h3 {
	margin: 0 0 8px;
	font-size: 20px;
}

.author-bio p {
	margin: 0 0 16px;
	color: var(--soft);
	font-size: 14px;
}

.author-links {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* --- Related --- */

/* The 64px margin is what separates this block from the article; the padding
   only has to keep the rule off the content, so it does not need to repeat it. */
.related {
	padding-block: 32px;
	margin-top: 64px;
	border-top: 1px solid var(--grey);
}

/* The padding above already provides the gap — the slot's own top margin would
   stack on it, since a first child's margin cannot collapse through padding. */
.related > .ad-slot:first-child {
	margin-top: 0;
}

.related h2 {
	margin: 0 0 32px;
	font-size: 24px;
}

/* --- Comments --- */

.comments-area {
	max-width: 800px;
	margin-inline: auto;
	padding: 48px 16px;
	border-top: 1px solid var(--grey);
}

.comments-area .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comments-area .comment-list ul.children {
	list-style: none;
	padding-left: 24px;
}

.comments-area .comment-body {
	padding: 20px 0;
	border-bottom: 1px solid var(--grey);
	color: var(--soft);
}

.comments-area .comment-author,
.comments-area .comment-meta {
	font-size: 14px;
}

.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--grey);
	border-radius: var(--radius);
	background: var(--secondary);
	color: var(--white);
}

.comments-area .submit {
	padding: 10px 20px;
	border: 0;
	border-radius: var(--radius);
	background: var(--orange);
	color: var(--white);
	font-family: var(--font-primary);
	font-weight: 700;
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

/* --back, so the bands step down in one direction: .frontpage-content is the
   lightest, the widget strip sits between, the footer is the darkest. No rule
   above it: the step in colour is the separation, and a border of its own
   would be a line lighter than either band cutting across the ramp. What the
   footer meets is always the widget strip, which footer.php prints whenever an
   area has anything in it. */

.footer {
	padding-block: 48px;
	background: var(--back);
	color: var(--soft);
}

/* Full-width bands butt up against the footer: their own bottom padding is the
   separation, so the 80px gap would just leave a strip of page background
   between two panels. It stays for pages whose content ends on the background. */

.footer-widgets + .footer,
main:has(> .frontpage-content:last-child) + .footer {
	padding-top: 32px;
}

/* --- Editions / network --- */

/* Shared by the footer, the header bar and the mobile drawer
   (components/parts/network). */

.network ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.network li {
	margin: 0;
}

.network a {
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--soft);
}

.network a:hover {
	color: var(--orange);
}

.network .is-current a {
	color: var(--white);
}

.footer-network {
	margin-top: 16px;
}

/* Sits next to the brand; the auto margin keeps the socials and the toggle
   pinned right instead of letting space-between spread all four apart.
   Desktop only — on mobile the same list lives in the drawer. */
.header-network {
	display: none;
	margin-right: auto;
	padding-left: 20px;
	border-left: 1px solid var(--grey);
}

.drawer-network {
	padding: 14px 16px;
	border-bottom: 1px solid var(--grey);
}

.footer-network .is-current a,
.footer-network .current-menu-item a {
	color: var(--white);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.025em;
	color: var(--white);
}

.footer-brand .mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--orange);
	color: var(--white);
	font-size: 18px;
}

/* With a real logo the orange plate is dropped — the mark is just the image. */

.footer-brand .mark.has-logo {
	background: none;
	border-radius: 0;
}

.footer-brand .mark img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.footer p {
	font-size: 14px;
}

.footer h3 {
	margin: 0 0 16px;
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
}

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

.footer li {
	margin-bottom: 8px;
	font-size: 14px;
}

.footer li a {
	color: var(--soft);
}

.footer li a:hover {
	color: var(--orange);
}

.footer .children {
	display: none;
}

.copyright {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--grey);
	text-align: center;
	font-size: 14px;
}

/* ==========================================================================
   12. Review score (components/parts/score, components/sections/review-box)
   ========================================================================== */

.score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	line-height: 1;
}

.score img {
	width: 56px;
	height: 56px;
}

.score strong {
	font-family: var(--font-primary);
	font-size: 18px;
	color: var(--white);
}

/* Badge overlay on thumbnails and on the hero. */

.card-media .score,
.hero > .score {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
}

.card-media .score img {
	width: 44px;
	height: 44px;
}

.compact .card-media .score img {
	width: 32px;
	height: 32px;
}

.hero > .score {
	top: 16px;
	right: 16px;
}

.review-box {
	padding: 24px;
	margin-bottom: 48px;
	border-radius: var(--radius-lg);
	border-left: 4px solid var(--orange);
	background: var(--primary);
}

.review-head {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: 16px;
}

.review-head h2 {
	margin: 0 0 8px;
	font-size: 24px;
}

.review-head .score {
	flex: none;
}

/* OpenCritic attribution — required to stay listed as an outlet.
   Sits centred at the foot of the box, after the verdict. */

.open-critic {
	display: block;
	width: 170px;
	max-width: 100%;
	margin: 32px auto 0;
	opacity: .85;
	transition: opacity .2s ease;
}

.open-critic img {
	width: 100%;
	height: auto;
}

.open-critic:hover {
	opacity: 1;
}

.review-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-bottom: 12px;
	color: var(--soft);
	font-size: 13px;
}

.review-terms a {
	color: var(--blue);
}

.review-terms a:hover {
	color: var(--orange);
}

.review-summary {
	margin: 0 0 12px;
	color: var(--soft);
	font-style: italic;
}

.review-verdict {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin-top: 24px;
}

.review-verdict h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .025em;
}

.review-pro h3 {
	color: var(--green);
}

.review-con h3 {
	color: var(--red);
}

.review-verdict ul {
	margin: 0;
	padding-left: 20px;
	color: var(--soft);
	font-size: 15px;
}

.review-verdict li {
	margin-bottom: 8px;
}

/* --- Tags & video source --- */

/* The core/tag-cloud widget in the footer shares this style: same pills, one
   size for every tag. The font-size below only takes effect because
   igd26_tag_cloud_flat_size() in inc/site.php strips the per-tag inline
   font-size the block prints - an inline style would beat any rule here. */

.tags-links,
.wp-block-tag-cloud,
.tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tags-links {
	margin-bottom: 32px;
}

/* The block renders as a <p>, so its default margin has to go. */

.wp-block-tag-cloud,
.tagcloud {
	margin: 0;
}

.tags-links a,
.wp-block-tag-cloud a,
.tagcloud a {
	padding: 4px 12px;
	border: 1px solid var(--grey);
	border-radius: 999px;
	background: var(--secondary);
	color: var(--soft);
	font-size: 13px;
}

.tags-links a:hover,
.tags-links a:focus-visible,
.wp-block-tag-cloud a:hover,
.wp-block-tag-cloud a:focus-visible,
.tagcloud a:hover,
.tagcloud a:focus-visible {
	border-color: var(--orange);
	color: var(--orange);
}

/* The footer widget strip sits on #20272e, a shade lighter than the pills' own
   --secondary (#1f262c), so their fill would be invisible down there. The page
   background is darker than the strip and gives the pills their shape back
   without adding a colour the palette does not already have. */

.footer-widgets .wp-block-tag-cloud a,
.footer-widgets .tagcloud a {
	background: var(--back);
}

.video-source {
	margin: 0 0 24px;
}

.video-source a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--orange);
	font-weight: 600;
}

.video-source a:hover {
	color: var(--white);
}

/* ==========================================================================
   13. Ad slots (components/ads)
   ========================================================================== */

/* Ported from the igdmag theme. ak3-ads-manager emits the same markup on both
   themes — a .advertisement wrapper around an .adsbygoogle <ins> — so these
   are the rules that give a placement its box, its placeholder pattern and its
   "Ads" label, and that hand an unfilled slot over to the fallback house ad
   instead of collapsing it. */

/* Same gap below as the 64px every block carries, so an ad sits evenly between
   two blocks instead of butting against the one under it. igdmag gets there
   with .page-section padding (20px) plus mb-4 (24px) on the ad wrapper; the
   proportion is what carries over, not the numbers. The "Ads" label also hangs
   22px below the box and needs the room.

   overflow-x rather than overflow: a creative wider than its slot must not
   push the page sideways, but the label below has to stay visible, and `clip`
   on one axis is the only value that leaves the other one `visible` - the
   `hidden` shorthand would force the vertical axis to scroll and swallow it. */
.ad-slot {
	display: flex;
	justify-content: center;
	margin: 64px 0;
	overflow-x: clip;
}

.ad-slot > * {
	width: 100%;
	max-width: 100%;
}

/* Scoped to ad markup: a bare `ins` rule would also hit <ins> in post content. */
.ad-slot ins,
ins.adsbygoogle {
	display: block;
	width: 100%;
	height: 1px;
	text-decoration: none !important;
}

.advertisement {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: unset !important;
	text-align: center;
	background-image: var(--ads-placement-background);
	background-size: 12px 12px;
}

.advertisement::after {
	position: absolute;
	right: 0;
	bottom: -22px;
	content: "Ads";
	font-size: .75rem;
	color: var(--orange);
}

.adsbygoogle.ad-display,
.adsbygoogle.ad-in-content,
.adsbygoogle.ad-multiplex,
.google-auto-placed ins.adsbygoogle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 280px !important;
	text-align: center;
}

/* Collapse an unfilled slot only when there is no fallback to put in its
   place; with one, the .unfilled house ad below takes over the box. */
ins.adsbygoogle[data-ad-status="unfilled"]:not([data-fallback-category]) {
	height: 0 !important;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

ins.adsbygoogle[data-ad-status="unfilled"] > :not(.unfilled) {
	display: none !important;
}

ins.advertisement,
ins.adsbygoogle[data-ad-status="unfilled"] > .unfilled {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 280px;
	height: unset;
}

.unfilled {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 280px;
	color: var(--white);
	background-color: transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-decoration: none;
}

.unfilled > a {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.unfilled:hover,
.unfilled:visited,
.unfilled:active,
.unfilled > a:hover,
.unfilled > a:visited,
.unfilled > a:active {
	color: unset !important;
}

article .advertisement {
	margin: 40px auto;
	min-height: 200px;
}

article ins.advertisement {
	min-height: unset;
}

/* House ads. The fallback creatives are HTML in the ad CPT and they carry
   their colour on these two classes, so without them the Patreon block loses
   its red and renders as white text on the placeholder pattern. `.patreon` is
   Patreon's own brand red, not a theme token. */

.patreon {
	min-height: 280px;
	background-color: #ff424d;
	color: var(--white);
	text-decoration: none;
}

.ad-fallback {
	background-color: var(--red);
	color: var(--white);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	text-decoration: none;
}

.no-ads .google-auto-placed {
	display: none !important;
}

.ad-slot ins.adsbygoogle[data-ad-status="filled"] {
	margin-block: 32px;
}

/* ==========================================================================
   14. Forms (Contact Form 7 and anything else in page content)
   ========================================================================== */

/* Base 2 only sets `color: inherit` on form controls, which on this dark theme
   painted --soft grey text onto the browser's default white field: legible
   nowhere. These give every field the same treatment the comment form already
   had, so a form dropped into any page inherits it. */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--grey);
	border-radius: var(--radius);
	background: var(--secondary);
	color: var(--white);
	font-size: 16px;
}

textarea {
	min-height: 160px;
	resize: vertical;
}

input::placeholder,
textarea::placeholder {
	color: var(--soft);
	opacity: .6;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	border-color: var(--orange);
	outline: none;
}

input[type="submit"],
button[type="submit"] {
	width: auto;
	padding: 12px 28px;
	border: 0;
	border-radius: var(--radius);
	background: var(--orange);
	color: var(--white);
	font-family: var(--font-primary);
	font-weight: 700;
	cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--white);
	color: var(--black);
}

input[type="submit"]:disabled,
button[type="submit"]:disabled {
	opacity: .6;
	cursor: default;
}

/* --- Contact Form 7 --- */

.wpcf7 {
	margin-top: 24px;
}

.wpcf7 p {
	margin: 0 0 18px;
}

.wpcf7 label {
	display: block;
	font-family: var(--font-primary);
	font-weight: 500;
	color: var(--white);
}

.wpcf7 label input,
.wpcf7 label select,
.wpcf7 label textarea {
	margin-top: 6px;
}

/* Acceptance and other checkbox/radio lists read as rows, not as blocks. */
.wpcf7-list-item {
	display: block;
	margin: 0 0 6px;
}

.wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	color: var(--soft);
}

.wpcf7-list-item input[type="checkbox"],
.wpcf7-list-item input[type="radio"] {
	width: auto;
	margin: 3px 0 0;
	flex: none;
}

.wpcf7-not-valid {
	border-color: var(--red);
}

.wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: var(--red);
}

.wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--grey);
	border-radius: var(--radius);
	color: var(--white);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--red);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--green);
}

/* The submit row is legacy `d-flex justify-content-between` markup: a fixed
   300px captcha widget on one side, the button on the other. It needs to wrap,
   because below ~370px of column the two cannot sit side by side and
   space-between would push the button off the page, and it needs its items
   centred — stretched, the button sits at the top of a row the captcha makes
   three times taller. */
.wpcf7 .d-flex {
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* The captcha column opens and closes on an empty paragraph, so the form's
   18px paragraph margin alone offsets the widget from the button beside it.
   Inside this row the gap above is the spacing. */
.wpcf7 .d-flex p {
	margin-bottom: 0;
}

/* `flexed-p reverse` right-aligns the button by reversing its row, which only
   does something if the wrapper spans the space left over — as a bare flex
   item it shrinks to the button and the reversal is a no-op. This is also what
   keeps the button on the right once the row wraps. */
.wpcf7 .d-flex > .flexed-p {
	flex: 1;
}

.wpcf7-spinner {
	margin-left: 12px;
}

/* ==========================================================================
   15. WordPress core classes and third-party widgets
   ========================================================================== */

.alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.alignright {
	float: right;
	margin: 0 0 16px 24px;
}

.aligncenter {
	display: block;
	margin-inline: auto;
	clear: both;
}

.alignnone {
	margin-bottom: 16px;
}

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

.wp-block-image {
	margin-bottom: 24px;
}

/* --- CookieYes --- */

/* Ported from the igdmag theme. The revisit badge — the little floating button
   that reopens the consent panel — arrives bottom-left at the plugin's own
   size; these two rules make it the mirror image of the back-to-top button,
   same 50px square at the same 25px inset, just on the other side. Without
   them the two corners of the page do not match.

   !important because the plugin sets these inline on its own wrapper. */

.cky-revisit-bottom-left {
	bottom: 25px !important;
	left: 25px !important;
}

.cky-btn-revisit-wrapper {
	width: 50px !important;
	height: 50px !important;
}

/* ==========================================================================
   16. Legacy content classes (Bootstrap 5)
   ========================================================================== */

/* The previous theme loaded the whole of Bootstrap 5 and editors wrote page
   content against it, so that markup is now sitting in the database: About
   lays its staff grid out with `mb-4` groups, the contact form pairs its
   fields with `row g-3` / `col-md-6`. Dropping Bootstrap left all of it inert.

   What follows is the subset that content actually uses, plus the rest of each
   family so that reaching for a neighbouring class does not land on another
   dead one. It keeps Bootstrap's scale (1 = .25rem … 5 = 3rem), Bootstrap's
   breakpoints (576 / 768 / 992, not the theme's 640 / 1024) and Bootstrap's
   `!important`, because content written against it expects to override the
   element styles above. Templates and components must not use these — they
   exist so old content keeps rendering, and they can go once it is rewritten
   in blocks. */

/* --- Spacing --- */

.m-0     { margin: 0 !important; }
.m-1     { margin: .25rem !important; }
.m-2     { margin: .5rem !important; }
.m-3     { margin: 1rem !important; }
.m-4     { margin: 1.5rem !important; }
.m-5     { margin: 3rem !important; }
.m-auto  { margin: auto !important; }

.mt-0    { margin-top: 0 !important; }
.mt-1    { margin-top: .25rem !important; }
.mt-2    { margin-top: .5rem !important; }
.mt-3    { margin-top: 1rem !important; }
.mt-4    { margin-top: 1.5rem !important; }
.mt-5    { margin-top: 3rem !important; }
.mt-auto { margin-top: auto !important; }

.mb-0    { margin-bottom: 0 !important; }
.mb-1    { margin-bottom: .25rem !important; }
.mb-2    { margin-bottom: .5rem !important; }
.mb-3    { margin-bottom: 1rem !important; }
.mb-4    { margin-bottom: 1.5rem !important; }
.mb-5    { margin-bottom: 3rem !important; }
.mb-auto { margin-bottom: auto !important; }

.ms-0    { margin-left: 0 !important; }
.ms-1    { margin-left: .25rem !important; }
.ms-2    { margin-left: .5rem !important; }
.ms-3    { margin-left: 1rem !important; }
.ms-4    { margin-left: 1.5rem !important; }
.ms-5    { margin-left: 3rem !important; }
.ms-auto { margin-left: auto !important; }

.me-0    { margin-right: 0 !important; }
.me-1    { margin-right: .25rem !important; }
.me-2    { margin-right: .5rem !important; }
.me-3    { margin-right: 1rem !important; }
.me-4    { margin-right: 1.5rem !important; }
.me-5    { margin-right: 3rem !important; }
.me-auto { margin-right: auto !important; }

.mx-0    { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1    { margin-left: .25rem !important; margin-right: .25rem !important; }
.mx-2    { margin-left: .5rem !important; margin-right: .5rem !important; }
.mx-3    { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4    { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5    { margin-left: 3rem !important; margin-right: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.my-0    { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1    { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-2    { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-3    { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4    { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5    { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }


.p-0     { padding: 0 !important; }
.p-1     { padding: .25rem !important; }
.p-2     { padding: .5rem !important; }
.p-3     { padding: 1rem !important; }
.p-4     { padding: 1.5rem !important; }
.p-5     { padding: 3rem !important; }

.pt-0    { padding-top: 0 !important; }
.pt-1    { padding-top: .25rem !important; }
.pt-2    { padding-top: .5rem !important; }
.pt-3    { padding-top: 1rem !important; }
.pt-4    { padding-top: 1.5rem !important; }
.pt-5    { padding-top: 3rem !important; }

.pb-0    { padding-bottom: 0 !important; }
.pb-1    { padding-bottom: .25rem !important; }
.pb-2    { padding-bottom: .5rem !important; }
.pb-3    { padding-bottom: 1rem !important; }
.pb-4    { padding-bottom: 1.5rem !important; }
.pb-5    { padding-bottom: 3rem !important; }

.ps-0    { padding-left: 0 !important; }
.ps-1    { padding-left: .25rem !important; }
.ps-2    { padding-left: .5rem !important; }
.ps-3    { padding-left: 1rem !important; }
.ps-4    { padding-left: 1.5rem !important; }
.ps-5    { padding-left: 3rem !important; }

.pe-0    { padding-right: 0 !important; }
.pe-1    { padding-right: .25rem !important; }
.pe-2    { padding-right: .5rem !important; }
.pe-3    { padding-right: 1rem !important; }
.pe-4    { padding-right: 1.5rem !important; }
.pe-5    { padding-right: 3rem !important; }

.px-0    { padding-left: 0 !important; padding-right: 0 !important; }
.px-1    { padding-left: .25rem !important; padding-right: .25rem !important; }
.px-2    { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-3    { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4    { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5    { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-0    { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1    { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-2    { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-3    { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4    { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5    { padding-top: 3rem !important; padding-bottom: 3rem !important; }


/* --- Display, flex, alignment --- */

.d-none          { display: none !important; }
.d-inline        { display: inline !important; }
.d-inline-block  { display: inline-block !important; }
.d-block         { display: block !important; }
.d-grid          { display: grid !important; }
.d-flex          { display: flex !important; }
.d-inline-flex   { display: inline-flex !important; }

.flex-row        { flex-direction: row !important; }
.flex-column     { flex-direction: column !important; }
.flex-wrap       { flex-wrap: wrap !important; }
.flex-nowrap     { flex-wrap: nowrap !important; }
.flex-fill       { flex: 1 1 auto !important; }

.justify-content-start   { justify-content: flex-start !important; }
.justify-content-end     { justify-content: flex-end !important; }
.justify-content-center  { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around  { justify-content: space-around !important; }
.justify-content-evenly  { justify-content: space-evenly !important; }

.align-items-start    { align-items: flex-start !important; }
.align-items-end      { align-items: flex-end !important; }
.align-items-center   { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch  { align-items: stretch !important; }

.align-self-start   { align-self: flex-start !important; }
.align-self-end     { align-self: flex-end !important; }
.align-self-center  { align-self: center !important; }
.align-self-stretch { align-self: stretch !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: .25rem !important; }
.gap-2 { gap: .5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* --- Text --- */

.text-start  { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end    { text-align: right !important; }

.fw-light  { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-bold   { font-weight: 700 !important; }

.text-white { color: var(--white) !important; }
.text-dark  { color: var(--dark) !important; }
.text-muted { color: var(--soft) !important; }

/* Heading classes, for a headline that must not be a heading element — the
   fallback ads use them for their titles. Deliberately no `color`: the ad sets
   its own, and the light-background creative needs it to inherit. */

.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-primary);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 .5em;
}

.h1 { font-size: 2em; }
.h2 { font-size: 1.5em; }
.h3 { font-size: 1.17em; }
.h4 { font-size: 1em; }
.h5 { font-size: .83em; }
.h6 { font-size: .67em; }

.img-fluid { max-width: 100%; height: auto; }

/* --- Sizing --- */

/* `h-100` is what lets a fallback ad's row fill the 280px box it sits in. */

.w-25   { width: 25% !important; }
.w-50   { width: 50% !important; }
.w-75   { width: 75% !important; }
.w-100  { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25   { height: 25% !important; }
.h-50   { height: 50% !important; }
.h-75   { height: 75% !important; }
.h-100  { height: 100% !important; }
.h-auto { height: auto !important; }

/* --- Grid --- */

/* A gutter is padding on every column plus a matching negative margin on the
   row, so the outer columns still line up with whatever sits above and below
   the row — drop the negative margin and the first field of a form is inset
   half a gutter while the ones under it are not. The row therefore reaches
   half a gutter past its parent by design; inside the article that lands in
   the column's own padding, so nothing spills off the page. */
.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-.5 * var(--bs-gutter-x));
	margin-left: calc(-.5 * var(--bs-gutter-x));
}

.row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-top: var(--bs-gutter-y);
}

.g-0,  .gx-0  { --bs-gutter-x: 0; }
.g-1,  .gx-1  { --bs-gutter-x: .25rem; }
.g-2,  .gx-2  { --bs-gutter-x: .5rem; }
.g-3,  .gx-3  { --bs-gutter-x: 1rem; }
.g-4,  .gx-4  { --bs-gutter-x: 1.5rem; }
.g-5,  .gx-5  { --bs-gutter-x: 3rem; }

.g-0,  .gy-0  { --bs-gutter-y: 0; }
.g-1,  .gy-1  { --bs-gutter-y: .25rem; }
.g-2,  .gy-2  { --bs-gutter-y: .5rem; }
.g-3,  .gy-3  { --bs-gutter-y: 1rem; }
.g-4,  .gy-4  { --bs-gutter-y: 1.5rem; }
.g-5,  .gy-5  { --bs-gutter-y: 3rem; }

.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }

@media (min-width: 576px) {
	.col-sm { flex: 1 0 0%; }
	.col-sm-auto { flex: 0 0 auto; width: auto; }
	.col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
	.col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-sm-3 { flex: 0 0 auto; width: 25%; }
	.col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
	.col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
	.col-sm-6 { flex: 0 0 auto; width: 50%; }
	.col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
	.col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
	.col-sm-9 { flex: 0 0 auto; width: 75%; }
	.col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-sm-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 768px) {
	.col-md { flex: 1 0 0%; }
	.col-md-auto { flex: 0 0 auto; width: auto; }
	.col-md-1 { flex: 0 0 auto; width: 8.333333%; }
	.col-md-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-md-3 { flex: 0 0 auto; width: 25%; }
	.col-md-4 { flex: 0 0 auto; width: 33.333333%; }
	.col-md-5 { flex: 0 0 auto; width: 41.666667%; }
	.col-md-6 { flex: 0 0 auto; width: 50%; }
	.col-md-7 { flex: 0 0 auto; width: 58.333333%; }
	.col-md-8 { flex: 0 0 auto; width: 66.666667%; }
	.col-md-9 { flex: 0 0 auto; width: 75%; }
	.col-md-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-md-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-md-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 992px) {
	.col-lg { flex: 1 0 0%; }
	.col-lg-auto { flex: 0 0 auto; width: auto; }
	.col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
	.col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
	.col-lg-3 { flex: 0 0 auto; width: 25%; }
	.col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
	.col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
	.col-lg-6 { flex: 0 0 auto; width: 50%; }
	.col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
	.col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
	.col-lg-9 { flex: 0 0 auto; width: 75%; }
	.col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
	.col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
	.col-lg-12 { flex: 0 0 auto; width: 100%; }
}

/* --- Old theme helpers --- */

/* Not Bootstrap either: this wraps the CF7 submit paragraph so the spinner
   sits beside the button instead of below it. */

/* The palette utilities, on the 2026 token names — `--indie-orange` became
   `--orange`, and so on. Only the pairs igdmag actually had live: purple,
   pink and gray were commented out there, so a creative reaching for one of
   those was already getting nothing. */

.color-indie-orange { color: var(--orange) !important; }
.color-indie-blue   { color: var(--blue) !important; }
.color-indie-green  { color: var(--green) !important; }
.color-indie-yellow { color: var(--yellow) !important; }
.color-indie-red    { color: var(--red) !important; }
.color-indie-violet { color: var(--violet) !important; }
.color-indie-black  { color: var(--black) !important; }
.color-indie-white  { color: var(--white) !important; }

.bg-indie-orange    { background-color: var(--orange) !important; }
.bg-indie-blue      { background-color: var(--blue) !important; }
.bg-indie-green     { background-color: var(--green) !important; }
.bg-indie-yellow    { background-color: var(--yellow) !important; }
.bg-indie-red       { background-color: var(--red) !important; }
.bg-indie-violet    { background-color: var(--violet) !important; }
.bg-indie-black     { background-color: var(--black) !important; }
.bg-indie-white     { background-color: var(--white) !important; }

.bg-indie-primary   { background-color: var(--primary) !important; }
.bg-indie-secondary { background-color: var(--secondary) !important; }
.bg-indie-back      { background-color: var(--back) !important; }

.flexed-p p {
	display: flex;
	align-items: center;
}

.flexed-p.reverse p {
	flex-direction: row-reverse;
}

/* --- Containers --- */

/* Without Bootstrap's own page gutter: a container only ever appears inside
   the article column here, which already supplies one, so its padding would
   just push the block 12px off the text above and below it. What is left is
   what content uses these for — the centring and the max-width cap. */

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
	width: 100%;
	margin-inline: auto;
}

@media (min-width: 576px) {
	.container, .container-sm { max-width: 540px; }
}

@media (min-width: 768px) {
	.container, .container-sm, .container-md { max-width: 720px; }
}

@media (min-width: 992px) {
	.container, .container-sm, .container-md, .container-lg { max-width: 960px; }
}

@media (min-width: 1200px) {
	.container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1140px; }
}

@media (min-width: 1400px) {
	.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1320px; }
}

/* --- Width helpers --- */

/* Not Bootstrap: the old theme's own, and content pairs them with the
   containers above (`container-md max-width-lg`) to widen the cap. */

.min-width-xs  { min-width: 480px !important; }
.min-width-sm  { min-width: 540px !important; }
.min-width-md  { min-width: 720px !important; }
.min-width-lg  { min-width: 960px !important; }
.min-width-xl  { min-width: 1140px !important; }
.min-width-xxl { min-width: 1320px !important; }

.max-width-xs  { max-width: 480px !important; }
.max-width-sm  { max-width: 540px !important; }
.max-width-md  { max-width: 720px !important; }
.max-width-lg  { max-width: 960px !important; }
.max-width-xl  { max-width: 1140px !important; }
.max-width-xxl { max-width: 1320px !important; }

/* --- Responsive tiers --- */

/* Spacing, display and text alignment per breakpoint. The fallback ads lean on
   these to go from a stacked phone layout to a row (`d-md-flex`, `mb-md-0`,
   `text-md-start`), which is exactly the kind of class that cannot be added
   one at a time as each creative turns up broken. Bootstrap's breakpoints. */

@media (min-width: 576px) {
	.m-sm-0 { margin: 0 !important; }
	.m-sm-1 { margin: .25rem !important; }
	.m-sm-2 { margin: .5rem !important; }
	.m-sm-3 { margin: 1rem !important; }
	.m-sm-4 { margin: 1.5rem !important; }
	.m-sm-5 { margin: 3rem !important; }
	.m-sm-auto { margin: auto !important; }

	.mt-sm-0 { margin-top: 0 !important; }
	.mt-sm-1 { margin-top: .25rem !important; }
	.mt-sm-2 { margin-top: .5rem !important; }
	.mt-sm-3 { margin-top: 1rem !important; }
	.mt-sm-4 { margin-top: 1.5rem !important; }
	.mt-sm-5 { margin-top: 3rem !important; }
	.mt-sm-auto { margin-top: auto !important; }

	.mb-sm-0 { margin-bottom: 0 !important; }
	.mb-sm-1 { margin-bottom: .25rem !important; }
	.mb-sm-2 { margin-bottom: .5rem !important; }
	.mb-sm-3 { margin-bottom: 1rem !important; }
	.mb-sm-4 { margin-bottom: 1.5rem !important; }
	.mb-sm-5 { margin-bottom: 3rem !important; }
	.mb-sm-auto { margin-bottom: auto !important; }

	.ms-sm-0 { margin-left: 0 !important; }
	.ms-sm-1 { margin-left: .25rem !important; }
	.ms-sm-2 { margin-left: .5rem !important; }
	.ms-sm-3 { margin-left: 1rem !important; }
	.ms-sm-4 { margin-left: 1.5rem !important; }
	.ms-sm-5 { margin-left: 3rem !important; }
	.ms-sm-auto { margin-left: auto !important; }

	.me-sm-0 { margin-right: 0 !important; }
	.me-sm-1 { margin-right: .25rem !important; }
	.me-sm-2 { margin-right: .5rem !important; }
	.me-sm-3 { margin-right: 1rem !important; }
	.me-sm-4 { margin-right: 1.5rem !important; }
	.me-sm-5 { margin-right: 3rem !important; }
	.me-sm-auto { margin-right: auto !important; }

	.mx-sm-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-sm-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
	.mx-sm-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
	.mx-sm-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-sm-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-sm-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }

	.my-sm-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-sm-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
	.my-sm-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
	.my-sm-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-sm-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-sm-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; }

	.p-sm-0 { padding: 0 !important; }
	.p-sm-1 { padding: .25rem !important; }
	.p-sm-2 { padding: .5rem !important; }
	.p-sm-3 { padding: 1rem !important; }
	.p-sm-4 { padding: 1.5rem !important; }
	.p-sm-5 { padding: 3rem !important; }

	.pt-sm-0 { padding-top: 0 !important; }
	.pt-sm-1 { padding-top: .25rem !important; }
	.pt-sm-2 { padding-top: .5rem !important; }
	.pt-sm-3 { padding-top: 1rem !important; }
	.pt-sm-4 { padding-top: 1.5rem !important; }
	.pt-sm-5 { padding-top: 3rem !important; }

	.pb-sm-0 { padding-bottom: 0 !important; }
	.pb-sm-1 { padding-bottom: .25rem !important; }
	.pb-sm-2 { padding-bottom: .5rem !important; }
	.pb-sm-3 { padding-bottom: 1rem !important; }
	.pb-sm-4 { padding-bottom: 1.5rem !important; }
	.pb-sm-5 { padding-bottom: 3rem !important; }

	.ps-sm-0 { padding-left: 0 !important; }
	.ps-sm-1 { padding-left: .25rem !important; }
	.ps-sm-2 { padding-left: .5rem !important; }
	.ps-sm-3 { padding-left: 1rem !important; }
	.ps-sm-4 { padding-left: 1.5rem !important; }
	.ps-sm-5 { padding-left: 3rem !important; }

	.pe-sm-0 { padding-right: 0 !important; }
	.pe-sm-1 { padding-right: .25rem !important; }
	.pe-sm-2 { padding-right: .5rem !important; }
	.pe-sm-3 { padding-right: 1rem !important; }
	.pe-sm-4 { padding-right: 1.5rem !important; }
	.pe-sm-5 { padding-right: 3rem !important; }

	.px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-sm-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
	.px-sm-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
	.px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-sm-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

	.py-sm-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-sm-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
	.py-sm-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	.py-sm-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-sm-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-sm-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

	.d-sm-none { display: none !important; }
	.d-sm-inline { display: inline !important; }
	.d-sm-inline-block { display: inline-block !important; }
	.d-sm-block { display: block !important; }
	.d-sm-grid { display: grid !important; }
	.d-sm-flex { display: flex !important; }
	.d-sm-inline-flex { display: inline-flex !important; }

	.text-sm-start { text-align: left !important; }
	.text-sm-center { text-align: center !important; }
	.text-sm-end { text-align: right !important; }
}

@media (min-width: 768px) {
	.m-md-0 { margin: 0 !important; }
	.m-md-1 { margin: .25rem !important; }
	.m-md-2 { margin: .5rem !important; }
	.m-md-3 { margin: 1rem !important; }
	.m-md-4 { margin: 1.5rem !important; }
	.m-md-5 { margin: 3rem !important; }
	.m-md-auto { margin: auto !important; }

	.mt-md-0 { margin-top: 0 !important; }
	.mt-md-1 { margin-top: .25rem !important; }
	.mt-md-2 { margin-top: .5rem !important; }
	.mt-md-3 { margin-top: 1rem !important; }
	.mt-md-4 { margin-top: 1.5rem !important; }
	.mt-md-5 { margin-top: 3rem !important; }
	.mt-md-auto { margin-top: auto !important; }

	.mb-md-0 { margin-bottom: 0 !important; }
	.mb-md-1 { margin-bottom: .25rem !important; }
	.mb-md-2 { margin-bottom: .5rem !important; }
	.mb-md-3 { margin-bottom: 1rem !important; }
	.mb-md-4 { margin-bottom: 1.5rem !important; }
	.mb-md-5 { margin-bottom: 3rem !important; }
	.mb-md-auto { margin-bottom: auto !important; }

	.ms-md-0 { margin-left: 0 !important; }
	.ms-md-1 { margin-left: .25rem !important; }
	.ms-md-2 { margin-left: .5rem !important; }
	.ms-md-3 { margin-left: 1rem !important; }
	.ms-md-4 { margin-left: 1.5rem !important; }
	.ms-md-5 { margin-left: 3rem !important; }
	.ms-md-auto { margin-left: auto !important; }

	.me-md-0 { margin-right: 0 !important; }
	.me-md-1 { margin-right: .25rem !important; }
	.me-md-2 { margin-right: .5rem !important; }
	.me-md-3 { margin-right: 1rem !important; }
	.me-md-4 { margin-right: 1.5rem !important; }
	.me-md-5 { margin-right: 3rem !important; }
	.me-md-auto { margin-right: auto !important; }

	.mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-md-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
	.mx-md-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
	.mx-md-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-md-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-md-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-md-auto { margin-left: auto !important; margin-right: auto !important; }

	.my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-md-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
	.my-md-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
	.my-md-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-md-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-md-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-md-auto { margin-top: auto !important; margin-bottom: auto !important; }

	.p-md-0 { padding: 0 !important; }
	.p-md-1 { padding: .25rem !important; }
	.p-md-2 { padding: .5rem !important; }
	.p-md-3 { padding: 1rem !important; }
	.p-md-4 { padding: 1.5rem !important; }
	.p-md-5 { padding: 3rem !important; }

	.pt-md-0 { padding-top: 0 !important; }
	.pt-md-1 { padding-top: .25rem !important; }
	.pt-md-2 { padding-top: .5rem !important; }
	.pt-md-3 { padding-top: 1rem !important; }
	.pt-md-4 { padding-top: 1.5rem !important; }
	.pt-md-5 { padding-top: 3rem !important; }

	.pb-md-0 { padding-bottom: 0 !important; }
	.pb-md-1 { padding-bottom: .25rem !important; }
	.pb-md-2 { padding-bottom: .5rem !important; }
	.pb-md-3 { padding-bottom: 1rem !important; }
	.pb-md-4 { padding-bottom: 1.5rem !important; }
	.pb-md-5 { padding-bottom: 3rem !important; }

	.ps-md-0 { padding-left: 0 !important; }
	.ps-md-1 { padding-left: .25rem !important; }
	.ps-md-2 { padding-left: .5rem !important; }
	.ps-md-3 { padding-left: 1rem !important; }
	.ps-md-4 { padding-left: 1.5rem !important; }
	.ps-md-5 { padding-left: 3rem !important; }

	.pe-md-0 { padding-right: 0 !important; }
	.pe-md-1 { padding-right: .25rem !important; }
	.pe-md-2 { padding-right: .5rem !important; }
	.pe-md-3 { padding-right: 1rem !important; }
	.pe-md-4 { padding-right: 1.5rem !important; }
	.pe-md-5 { padding-right: 3rem !important; }

	.px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-md-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
	.px-md-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
	.px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-md-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

	.py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-md-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
	.py-md-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	.py-md-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-md-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-md-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

	.d-md-none { display: none !important; }
	.d-md-inline { display: inline !important; }
	.d-md-inline-block { display: inline-block !important; }
	.d-md-block { display: block !important; }
	.d-md-grid { display: grid !important; }
	.d-md-flex { display: flex !important; }
	.d-md-inline-flex { display: inline-flex !important; }

	.text-md-start { text-align: left !important; }
	.text-md-center { text-align: center !important; }
	.text-md-end { text-align: right !important; }
}

@media (min-width: 992px) {
	.m-lg-0 { margin: 0 !important; }
	.m-lg-1 { margin: .25rem !important; }
	.m-lg-2 { margin: .5rem !important; }
	.m-lg-3 { margin: 1rem !important; }
	.m-lg-4 { margin: 1.5rem !important; }
	.m-lg-5 { margin: 3rem !important; }
	.m-lg-auto { margin: auto !important; }

	.mt-lg-0 { margin-top: 0 !important; }
	.mt-lg-1 { margin-top: .25rem !important; }
	.mt-lg-2 { margin-top: .5rem !important; }
	.mt-lg-3 { margin-top: 1rem !important; }
	.mt-lg-4 { margin-top: 1.5rem !important; }
	.mt-lg-5 { margin-top: 3rem !important; }
	.mt-lg-auto { margin-top: auto !important; }

	.mb-lg-0 { margin-bottom: 0 !important; }
	.mb-lg-1 { margin-bottom: .25rem !important; }
	.mb-lg-2 { margin-bottom: .5rem !important; }
	.mb-lg-3 { margin-bottom: 1rem !important; }
	.mb-lg-4 { margin-bottom: 1.5rem !important; }
	.mb-lg-5 { margin-bottom: 3rem !important; }
	.mb-lg-auto { margin-bottom: auto !important; }

	.ms-lg-0 { margin-left: 0 !important; }
	.ms-lg-1 { margin-left: .25rem !important; }
	.ms-lg-2 { margin-left: .5rem !important; }
	.ms-lg-3 { margin-left: 1rem !important; }
	.ms-lg-4 { margin-left: 1.5rem !important; }
	.ms-lg-5 { margin-left: 3rem !important; }
	.ms-lg-auto { margin-left: auto !important; }

	.me-lg-0 { margin-right: 0 !important; }
	.me-lg-1 { margin-right: .25rem !important; }
	.me-lg-2 { margin-right: .5rem !important; }
	.me-lg-3 { margin-right: 1rem !important; }
	.me-lg-4 { margin-right: 1.5rem !important; }
	.me-lg-5 { margin-right: 3rem !important; }
	.me-lg-auto { margin-right: auto !important; }

	.mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-lg-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
	.mx-lg-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
	.mx-lg-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-lg-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-lg-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }

	.my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-lg-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
	.my-lg-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
	.my-lg-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-lg-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-lg-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }

	.p-lg-0 { padding: 0 !important; }
	.p-lg-1 { padding: .25rem !important; }
	.p-lg-2 { padding: .5rem !important; }
	.p-lg-3 { padding: 1rem !important; }
	.p-lg-4 { padding: 1.5rem !important; }
	.p-lg-5 { padding: 3rem !important; }

	.pt-lg-0 { padding-top: 0 !important; }
	.pt-lg-1 { padding-top: .25rem !important; }
	.pt-lg-2 { padding-top: .5rem !important; }
	.pt-lg-3 { padding-top: 1rem !important; }
	.pt-lg-4 { padding-top: 1.5rem !important; }
	.pt-lg-5 { padding-top: 3rem !important; }

	.pb-lg-0 { padding-bottom: 0 !important; }
	.pb-lg-1 { padding-bottom: .25rem !important; }
	.pb-lg-2 { padding-bottom: .5rem !important; }
	.pb-lg-3 { padding-bottom: 1rem !important; }
	.pb-lg-4 { padding-bottom: 1.5rem !important; }
	.pb-lg-5 { padding-bottom: 3rem !important; }

	.ps-lg-0 { padding-left: 0 !important; }
	.ps-lg-1 { padding-left: .25rem !important; }
	.ps-lg-2 { padding-left: .5rem !important; }
	.ps-lg-3 { padding-left: 1rem !important; }
	.ps-lg-4 { padding-left: 1.5rem !important; }
	.ps-lg-5 { padding-left: 3rem !important; }

	.pe-lg-0 { padding-right: 0 !important; }
	.pe-lg-1 { padding-right: .25rem !important; }
	.pe-lg-2 { padding-right: .5rem !important; }
	.pe-lg-3 { padding-right: 1rem !important; }
	.pe-lg-4 { padding-right: 1.5rem !important; }
	.pe-lg-5 { padding-right: 3rem !important; }

	.px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-lg-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
	.px-lg-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
	.px-lg-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-lg-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-lg-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

	.py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-lg-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
	.py-lg-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	.py-lg-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-lg-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-lg-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

	.d-lg-none { display: none !important; }
	.d-lg-inline { display: inline !important; }
	.d-lg-inline-block { display: inline-block !important; }
	.d-lg-block { display: block !important; }
	.d-lg-grid { display: grid !important; }
	.d-lg-flex { display: flex !important; }
	.d-lg-inline-flex { display: inline-flex !important; }

	.text-lg-start { text-align: left !important; }
	.text-lg-center { text-align: center !important; }
	.text-lg-end { text-align: right !important; }
}

@media (min-width: 1200px) {
	.m-xl-0 { margin: 0 !important; }
	.m-xl-1 { margin: .25rem !important; }
	.m-xl-2 { margin: .5rem !important; }
	.m-xl-3 { margin: 1rem !important; }
	.m-xl-4 { margin: 1.5rem !important; }
	.m-xl-5 { margin: 3rem !important; }
	.m-xl-auto { margin: auto !important; }

	.mt-xl-0 { margin-top: 0 !important; }
	.mt-xl-1 { margin-top: .25rem !important; }
	.mt-xl-2 { margin-top: .5rem !important; }
	.mt-xl-3 { margin-top: 1rem !important; }
	.mt-xl-4 { margin-top: 1.5rem !important; }
	.mt-xl-5 { margin-top: 3rem !important; }
	.mt-xl-auto { margin-top: auto !important; }

	.mb-xl-0 { margin-bottom: 0 !important; }
	.mb-xl-1 { margin-bottom: .25rem !important; }
	.mb-xl-2 { margin-bottom: .5rem !important; }
	.mb-xl-3 { margin-bottom: 1rem !important; }
	.mb-xl-4 { margin-bottom: 1.5rem !important; }
	.mb-xl-5 { margin-bottom: 3rem !important; }
	.mb-xl-auto { margin-bottom: auto !important; }

	.ms-xl-0 { margin-left: 0 !important; }
	.ms-xl-1 { margin-left: .25rem !important; }
	.ms-xl-2 { margin-left: .5rem !important; }
	.ms-xl-3 { margin-left: 1rem !important; }
	.ms-xl-4 { margin-left: 1.5rem !important; }
	.ms-xl-5 { margin-left: 3rem !important; }
	.ms-xl-auto { margin-left: auto !important; }

	.me-xl-0 { margin-right: 0 !important; }
	.me-xl-1 { margin-right: .25rem !important; }
	.me-xl-2 { margin-right: .5rem !important; }
	.me-xl-3 { margin-right: 1rem !important; }
	.me-xl-4 { margin-right: 1.5rem !important; }
	.me-xl-5 { margin-right: 3rem !important; }
	.me-xl-auto { margin-right: auto !important; }

	.mx-xl-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-xl-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
	.mx-xl-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
	.mx-xl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-xl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-xl-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-xl-auto { margin-left: auto !important; margin-right: auto !important; }

	.my-xl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-xl-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
	.my-xl-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
	.my-xl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-xl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-xl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-xl-auto { margin-top: auto !important; margin-bottom: auto !important; }

	.p-xl-0 { padding: 0 !important; }
	.p-xl-1 { padding: .25rem !important; }
	.p-xl-2 { padding: .5rem !important; }
	.p-xl-3 { padding: 1rem !important; }
	.p-xl-4 { padding: 1.5rem !important; }
	.p-xl-5 { padding: 3rem !important; }

	.pt-xl-0 { padding-top: 0 !important; }
	.pt-xl-1 { padding-top: .25rem !important; }
	.pt-xl-2 { padding-top: .5rem !important; }
	.pt-xl-3 { padding-top: 1rem !important; }
	.pt-xl-4 { padding-top: 1.5rem !important; }
	.pt-xl-5 { padding-top: 3rem !important; }

	.pb-xl-0 { padding-bottom: 0 !important; }
	.pb-xl-1 { padding-bottom: .25rem !important; }
	.pb-xl-2 { padding-bottom: .5rem !important; }
	.pb-xl-3 { padding-bottom: 1rem !important; }
	.pb-xl-4 { padding-bottom: 1.5rem !important; }
	.pb-xl-5 { padding-bottom: 3rem !important; }

	.ps-xl-0 { padding-left: 0 !important; }
	.ps-xl-1 { padding-left: .25rem !important; }
	.ps-xl-2 { padding-left: .5rem !important; }
	.ps-xl-3 { padding-left: 1rem !important; }
	.ps-xl-4 { padding-left: 1.5rem !important; }
	.ps-xl-5 { padding-left: 3rem !important; }

	.pe-xl-0 { padding-right: 0 !important; }
	.pe-xl-1 { padding-right: .25rem !important; }
	.pe-xl-2 { padding-right: .5rem !important; }
	.pe-xl-3 { padding-right: 1rem !important; }
	.pe-xl-4 { padding-right: 1.5rem !important; }
	.pe-xl-5 { padding-right: 3rem !important; }

	.px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-xl-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
	.px-xl-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
	.px-xl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-xl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-xl-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

	.py-xl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-xl-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
	.py-xl-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	.py-xl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-xl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-xl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

	.d-xl-none { display: none !important; }
	.d-xl-inline { display: inline !important; }
	.d-xl-inline-block { display: inline-block !important; }
	.d-xl-block { display: block !important; }
	.d-xl-grid { display: grid !important; }
	.d-xl-flex { display: flex !important; }
	.d-xl-inline-flex { display: inline-flex !important; }

	.text-xl-start { text-align: left !important; }
	.text-xl-center { text-align: center !important; }
	.text-xl-end { text-align: right !important; }
}

@media (min-width: 1400px) {
	.m-xxl-0 { margin: 0 !important; }
	.m-xxl-1 { margin: .25rem !important; }
	.m-xxl-2 { margin: .5rem !important; }
	.m-xxl-3 { margin: 1rem !important; }
	.m-xxl-4 { margin: 1.5rem !important; }
	.m-xxl-5 { margin: 3rem !important; }
	.m-xxl-auto { margin: auto !important; }

	.mt-xxl-0 { margin-top: 0 !important; }
	.mt-xxl-1 { margin-top: .25rem !important; }
	.mt-xxl-2 { margin-top: .5rem !important; }
	.mt-xxl-3 { margin-top: 1rem !important; }
	.mt-xxl-4 { margin-top: 1.5rem !important; }
	.mt-xxl-5 { margin-top: 3rem !important; }
	.mt-xxl-auto { margin-top: auto !important; }

	.mb-xxl-0 { margin-bottom: 0 !important; }
	.mb-xxl-1 { margin-bottom: .25rem !important; }
	.mb-xxl-2 { margin-bottom: .5rem !important; }
	.mb-xxl-3 { margin-bottom: 1rem !important; }
	.mb-xxl-4 { margin-bottom: 1.5rem !important; }
	.mb-xxl-5 { margin-bottom: 3rem !important; }
	.mb-xxl-auto { margin-bottom: auto !important; }

	.ms-xxl-0 { margin-left: 0 !important; }
	.ms-xxl-1 { margin-left: .25rem !important; }
	.ms-xxl-2 { margin-left: .5rem !important; }
	.ms-xxl-3 { margin-left: 1rem !important; }
	.ms-xxl-4 { margin-left: 1.5rem !important; }
	.ms-xxl-5 { margin-left: 3rem !important; }
	.ms-xxl-auto { margin-left: auto !important; }

	.me-xxl-0 { margin-right: 0 !important; }
	.me-xxl-1 { margin-right: .25rem !important; }
	.me-xxl-2 { margin-right: .5rem !important; }
	.me-xxl-3 { margin-right: 1rem !important; }
	.me-xxl-4 { margin-right: 1.5rem !important; }
	.me-xxl-5 { margin-right: 3rem !important; }
	.me-xxl-auto { margin-right: auto !important; }

	.mx-xxl-0 { margin-left: 0 !important; margin-right: 0 !important; }
	.mx-xxl-1 { margin-left: .25rem !important; margin-right: .25rem !important; }
	.mx-xxl-2 { margin-left: .5rem !important; margin-right: .5rem !important; }
	.mx-xxl-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
	.mx-xxl-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
	.mx-xxl-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
	.mx-xxl-auto { margin-left: auto !important; margin-right: auto !important; }

	.my-xxl-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
	.my-xxl-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
	.my-xxl-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
	.my-xxl-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
	.my-xxl-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
	.my-xxl-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
	.my-xxl-auto { margin-top: auto !important; margin-bottom: auto !important; }

	.p-xxl-0 { padding: 0 !important; }
	.p-xxl-1 { padding: .25rem !important; }
	.p-xxl-2 { padding: .5rem !important; }
	.p-xxl-3 { padding: 1rem !important; }
	.p-xxl-4 { padding: 1.5rem !important; }
	.p-xxl-5 { padding: 3rem !important; }

	.pt-xxl-0 { padding-top: 0 !important; }
	.pt-xxl-1 { padding-top: .25rem !important; }
	.pt-xxl-2 { padding-top: .5rem !important; }
	.pt-xxl-3 { padding-top: 1rem !important; }
	.pt-xxl-4 { padding-top: 1.5rem !important; }
	.pt-xxl-5 { padding-top: 3rem !important; }

	.pb-xxl-0 { padding-bottom: 0 !important; }
	.pb-xxl-1 { padding-bottom: .25rem !important; }
	.pb-xxl-2 { padding-bottom: .5rem !important; }
	.pb-xxl-3 { padding-bottom: 1rem !important; }
	.pb-xxl-4 { padding-bottom: 1.5rem !important; }
	.pb-xxl-5 { padding-bottom: 3rem !important; }

	.ps-xxl-0 { padding-left: 0 !important; }
	.ps-xxl-1 { padding-left: .25rem !important; }
	.ps-xxl-2 { padding-left: .5rem !important; }
	.ps-xxl-3 { padding-left: 1rem !important; }
	.ps-xxl-4 { padding-left: 1.5rem !important; }
	.ps-xxl-5 { padding-left: 3rem !important; }

	.pe-xxl-0 { padding-right: 0 !important; }
	.pe-xxl-1 { padding-right: .25rem !important; }
	.pe-xxl-2 { padding-right: .5rem !important; }
	.pe-xxl-3 { padding-right: 1rem !important; }
	.pe-xxl-4 { padding-right: 1.5rem !important; }
	.pe-xxl-5 { padding-right: 3rem !important; }

	.px-xxl-0 { padding-left: 0 !important; padding-right: 0 !important; }
	.px-xxl-1 { padding-left: .25rem !important; padding-right: .25rem !important; }
	.px-xxl-2 { padding-left: .5rem !important; padding-right: .5rem !important; }
	.px-xxl-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
	.px-xxl-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
	.px-xxl-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

	.py-xxl-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
	.py-xxl-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
	.py-xxl-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
	.py-xxl-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
	.py-xxl-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
	.py-xxl-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

	.d-xxl-none { display: none !important; }
	.d-xxl-inline { display: inline !important; }
	.d-xxl-inline-block { display: inline-block !important; }
	.d-xxl-block { display: block !important; }
	.d-xxl-grid { display: grid !important; }
	.d-xxl-flex { display: flex !important; }
	.d-xxl-inline-flex { display: inline-flex !important; }

	.text-xxl-start { text-align: left !important; }
	.text-xxl-center { text-align: center !important; }
	.text-xxl-end { text-align: right !important; }
}

/* ==========================================================================
   17. Responsive — breakpoints (sm 640, lg 1024)
   ========================================================================== */

@media (min-width: 640px) {
	.wrap {
		padding-inline: 24px;
	}

	/* Wide enough for two columns: the avatar leaves the top of the stack and
	   moves beside the text, centred against it. row-reverse for the same reason
	   as column-reverse below 640 - it puts the avatar first on screen while the
	   name stays first in the source. */

	.archive-head.has-avatar {
		flex-direction: row-reverse;
		align-items: center;
		gap: 24px;
	}

	.archive-head.has-avatar > .archive-head-main {
		width: auto;
		flex: 1;
		min-width: 0;
	}

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

	.hero {
		height: 600px;
	}

	.hero-copy {
		padding: 32px;
	}

	.hero-copy h1,
	.hero-copy h2 {
		font-size: 36px;
	}

	.hero-copy p {
		font-size: 18px;
	}

	.section-head h2 {
		font-size: 30px;
	}

	.card-body {
		padding: 24px;
	}

	.card h3 {
		font-size: 20px;
	}

	.card p {
		font-size: 16px;
	}

	.compact .card-media {
		flex-basis: 128px;
		width: 128px;
		height: 128px;
	}

	.compact h3 {
		font-size: 18px;
	}

	.compact .meta {
		font-size: 14px;
	}

	.compact p {
		font-size: 14px;
	}

	.list-card > a {
		flex-direction: row;
	}

	.list-card .card-media {
		flex: 0 0 256px;
		width: 256px;
		height: 160px;
	}

	.list-card h3 {
		font-size: 24px;
	}

	.list-card p {
		font-size: 16px;
	}

	.archive-title {
		font-size: 36px;
	}

	.single-hero {
		height: 500px;
	}

	.article {
		padding-inline: 24px;
	}

	.article h1 {
		font-size: 36px;
	}

	.author-bio {
		flex-direction: row;
	}

	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.review-verdict {
		grid-template-columns: repeat(2, 1fr);
	}

	.review-head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}

	.related h2 {
		font-size: 30px;
	}
}

.video-layout .article { margin-top: -360px; }

@media (min-width: 768px) and (max-width: 1023px) {
	.video-layout .article { margin-top: -450px; }
}

@media (min-width: 1024px) {
	:root {
		--header-h: 100px;
	}

	.wrap {
		padding-inline: 32px;
	}

	.socials {
		display: flex;
	}

	.header-network {
		display: block;
	}

	.menu-toggle,
	.drawer,
	.drawer-overlay {
		display: none;
	}

	.main-nav {
		display: flex;
	}

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

	.split {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-copy {
		padding: 40px;
	}

	.hero-copy h1,
	.hero-copy h2 {
		font-size: 48px;
	}

	.archive-title {
		font-size: 48px;
	}

	.archive-list {
		grid-template-columns: 2fr 1fr;
	}

	.single-hero {
		height: 600px;
	}

	.has-hero .article {
		margin-top: -160px;
	}

	.article {
		padding-inline: 32px;
	}

	.article h1 {
		font-size: 48px;
	}

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

	.video-article .video-player-content > *,
	.video-article .video-player-content > p > *,
	.video-article .video-player-content .wp-block-embed__wrapper > * {
		width: 100%;
		max-width: 100%;
	}

	.video-article .video-player-content iframe,
	.video-article .video-player-content video {
		aspect-ratio: 16 / 9;
		height: auto;
	}

.video-article .video-cover.card-media {
		display: block;
		width: 100%;
		height: 400px;
		aspect-ratio: auto;
		overflow: hidden;
	}

	.video-layout .article {
		margin-top: -540px;
	}
}

@media (max-width: 767px) {
	.backtotop:hover,
	.backtotop:focus {
		background: var(--orange);
	}

	.single-hero {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.single-hero .card-image {
		position: absolute;
		inset: 0;
	}

	.has-hero .article,
	.video-layout .article {
		margin-top: -80px;
	}
}