/**
 * Thallo Brand — jungle-ruin skin.
 * Layer 2 of 2. Layer 1 (generated-remap.css) does the flat purple->jungle
 * colour substitution; this file does the things a substitution can't:
 * imagery, borders, glow, and the BuddyBoss community surfaces.
 */

:root {
	--th-void: #070b09;        /* page ground, near-black jungle floor */
	--th-stone: #0f1a15;       /* card / section surface */
	--th-stone-2: #142219;     /* raised surface, hover */
	--th-venom: #21d6a3;       /* primary accent, serpent glow */
	--th-venom-dim: #17a67f;
	--th-gold: #c9a227;        /* aged gold, carved trim */
	--th-gold-lt: #e3c05a;
	--th-bone: #eef5f0;        /* primary text */
	--th-lichen: #a8bfb2;      /* secondary text */
	--th-edge: rgba(201, 162, 39, 0.28);  /* gold hairline */
	--th-glow: rgba(33, 214, 163, 0.22);
}

/* ---------------------------------------------------------------- ground -- */

/* Faint venom haze at the top so the void isn't flat black. Painted as a
   background layer on body rather than a positioned pseudo-element — an
   overlay would need a z-index, and that fights Astra's stacking contexts. */
body {
	background-color: var(--th-void);
	background-image:
		radial-gradient(120% 55% at 50% 0%, rgba(33, 214, 163, 0.10), transparent 70%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--th-bone);
}

/* ------------------------------------------------------------------ hero -- */

/* Spectra writes .wp-block-uagb-container.uagb-block-XXXX, so single-class
   selectors here lose on specificity. Match its two-class form. */
.wp-block-uagb-container.uagb-block-2092a1eb {
	position: relative;
	background-image:
		linear-gradient(180deg, rgba(7, 11, 9, 0.74) 0%, rgba(7, 11, 9, 0.70) 55%, var(--th-void) 100%),
		url("../img/hero-bg-1920.jpg");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	/* Clear the transparent header so the crest doesn't sit under the nav. */
	padding-top: 120px;
}

@media (max-width: 921px) {
	.wp-block-uagb-container.uagb-block-2092a1eb {
		background-image:
			linear-gradient(180deg, rgba(7, 11, 9, 0.55) 0%, rgba(7, 11, 9, 0.75) 55%, var(--th-void) 100%),
			url("../img/hero-bg-1100.jpg");
	}
}

/* Swap the old purple sigil for the serpent crest without touching page
   content. The width override has to out-specify Spectra's .uag-image-NNN
   rule, which is why this is matched on the block class plus the figure. */
.wp-block-uagb-image.uagb-block-a121808a .wp-block-uagb-image__figure img {
	/* 900px source shown at 300 CSS px stays sharp up to a 3x display. The
	   earlier 600px file was soft on retina, and its radial fade blurred the
	   outer ring — this one is masked to a hard circle instead. */
	content: url("../img/crest-900.png");
	width: min(300px, 56vw);
	max-width: 100%;
	height: auto;
	/* The <img> still carries width="1024" height="683" from the image this
	   replaces, so the UA applies aspect-ratio: auto 1024/683 and Spectra's
	   object-fit: cover crops the square crest top and bottom. Restore a
	   square box and stop the crop. */
	aspect-ratio: 1 / 1;
	object-fit: contain;
	/* Lift it off the temple behind it, but keep the glow tight — a wide
	   drop-shadow on a dark emblem reads as the emblem itself being blurry. */
	filter:
		brightness(1.18) saturate(1.12) contrast(1.06)
		drop-shadow(0 0 10px rgba(33, 214, 163, 0.38))
		drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

/* Carved wordmark treatment on the hero H1. */
.wp-block-uagb-advanced-heading.uagb-block-b5a401e5 .uagb-heading-text {
	color: var(--th-bone);
	text-shadow:
		0 0 26px rgba(33, 214, 163, 0.35),
		0 2px 0 rgba(0, 0, 0, 0.6);
}

/* The authored size is 6vw, which on a 390px phone is 23px — smaller than the
   tagline under it, so the guild name reads as a caption. Floor it. */
@media (max-width: 921px) {
	.wp-block-uagb-advanced-heading.uagb-block-b5a401e5 .uagb-heading-text {
		font-size: clamp(2.6rem, 12vw, 4.5rem);
		line-height: 1.12;
	}
}

/* -------------------------------------------------------------- headings -- */

h1, h2, h3,
.uagb-heading-text {
	color: var(--th-bone);
}

/* Gold rule under section headings — reads as carved stone trim. */
.uagb-block-76b447c0 .uagb-heading-text::after,
.entry-content > .wp-block-uagb-container h2.uagb-heading-text::after {
	content: "";
	display: block;
	width: 46px;
	height: 2px;
	margin: 14px 0 0;
	background: linear-gradient(90deg, var(--th-gold), transparent);
}

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

.uagb-block-76b447c0 .wp-block-column {
	background: linear-gradient(180deg, var(--th-stone-2), var(--th-stone));
	border: 1px solid var(--th-edge);
	border-radius: 4px;
	padding: 32px 26px;
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.uagb-block-76b447c0 .wp-block-column:hover {
	border-color: var(--th-venom);
	transform: translateY(-3px);
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--th-glow);
}

/* Card icons: gold glyph in a stone recess with a venom edge. */
.uagb-icon-wrapper .uagb-svg-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--th-void);
	border: 1px solid var(--th-edge);
	border-radius: 4px;
	padding: 12px;
}

.uagb-icon-wrapper svg {
	fill: var(--th-gold-lt);
	filter: drop-shadow(0 0 10px var(--th-glow));
}

/* --------------------------------------------------------------- buttons -- */

/* .uagb-buttons-repeater is Spectra's button component. It is styled per page
   in uag-css-<pageid>.css, so listing it here covers pages that don't exist
   yet without regenerating the remap. */
.wp-block-button__link,
.uagb-buttons-repeater,
a.uagb-buttons-repeater,
.ast-button,
.ast-custom-button,
button,
input[type="submit"],
.bp-nouveau .generic-button a,
.buddypress .generic-button a {
	background: linear-gradient(180deg, var(--th-venom), var(--th-venom-dim));
	border: 1px solid var(--th-venom);
	/* WordPress emits its colour utility classes (has-*-color) with
	   !important, so the label needs it too or it stays light grey on
	   teal — 1.7:1, unreadable. Dark-on-venom is ~11:1. */
	color: #04120d !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 3px;
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-button__link:hover,
.uagb-buttons-repeater:hover,
a.uagb-buttons-repeater:hover,
.ast-button:hover,
.ast-custom-button:hover,
button:hover,
input[type="submit"]:hover {
	filter: brightness(1.08);
	box-shadow: 0 0 22px var(--th-glow);
	color: #04120d !important;
}

/* Spectra puts the label in a child div, so colouring the anchor alone leaves
   white text on venom (~1.7:1). */
.uagb-buttons-repeater .uagb-button__link,
a.uagb-buttons-repeater .uagb-button__link {
	color: #04120d !important;
}

/* Secondary / outline buttons keep the gold trim. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--th-gold);
	color: var(--th-gold-lt) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(201, 162, 39, 0.12);
	color: var(--th-gold-lt) !important;
}

/* ------------------------------------------------------------ navigation -- */

.ast-theme-transparent-header .main-header-menu .menu-link,
.main-header-menu .menu-link {
	letter-spacing: 0.04em;
}

/* Hover underline drawn as a background layer, not a pseudo-element: Astra
   renders .menu-link as display:flex, so an ::after box becomes a flex item
   and wraps the label. A background stripe costs no layout. */
.main-header-menu .menu-item > .menu-link {
	background-image: linear-gradient(var(--th-venom), var(--th-venom));
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 6px);
	background-size: 0% 1px;
	transition: background-size 0.25s ease;
}

.main-header-menu .menu-item:hover > .menu-link,
.main-header-menu .current-menu-item > .menu-link {
	background-size: 100% 1px;
}

/* Sub-menus: stone panel, gold hairline. */
.main-header-menu .sub-menu {
	background: var(--th-stone);
	border: 1px solid var(--th-edge);
}

/* ---------------------------------------------------------------- footer -- */

.site-footer,
.ast-footer-overlay,
footer.site-footer {
	background: var(--th-void);
	border-top: 1px solid var(--th-edge);
	color: var(--th-lichen);
}

/* Astra's footer builder rows carry their own background, written as
   .site-below-footer-wrap[data-section="..."] { background: var(--ast-global-color-4) }
   — and colour-4 is white. Matching the attribute selector is what wins; the
   alternative, redefining --ast-global-color-4, would repaint every other
   place Astra uses white on purpose. */
.site-primary-footer-wrap,
.site-below-footer-wrap,
.site-above-footer-wrap,
.site-primary-footer-wrap[data-section],
.site-below-footer-wrap[data-section],
.site-above-footer-wrap[data-section] {
	background-color: var(--th-void);
	color: var(--th-lichen);
	border-top-color: var(--th-edge);
}

.ast-footer-copyright,
.ast-footer-copyright a,
.site-below-footer-wrap a {
	color: var(--th-lichen);
}

.ast-footer-copyright a:hover,
.site-below-footer-wrap a:hover {
	color: var(--th-venom);
}

/* ------------------------------------------------- inner page top spacing -- */
/* The transparent header floats over the page. The homepage has a hero to
   float over; every other page starts its content underneath the nav. */

body.ast-theme-transparent-header:not(.home) .site-content {
	padding-top: 110px;
}

/* ------------------------------------------------------ WPForms (Apply) -- */
/* The guild application form. WPForms drives its own colours through CSS
   variables (`color: var(--wpforms-label-color)` inside a
   `div.wpforms-container-full .wpforms-field-label` rule). Redefining the
   variables is the supported extension point and sidesteps the specificity
   fight — its own selector then resolves to our palette. */

/* WPForms prints its variable block as an inline <style> inside the BODY
   (`#wpforms-241.wpforms-block-… { --wpforms-label-color: #8F88B3 }`), which
   is both ID-specific and later in source order than this file. !important on
   the custom properties is the only thing that reaches it. */
.wpforms-container,
.wpforms-container-full,
div.wpforms-container-full {
	--wpforms-label-color: #a8bfb2 !important;
	--wpforms-label-sublabel-color: #a8bfb2 !important;
	--wpforms-label-error-color: #ff8a7a !important;
	--wpforms-field-text-color: #eef5f0 !important;
	--wpforms-field-background-color: #070b09 !important;
	--wpforms-field-border-color: rgba(201, 162, 39, 0.28) !important;
	--wpforms-field-menu-color: #0f1a15 !important;
	--wpforms-button-background-color: #21d6a3 !important;
	--wpforms-button-text-color: #04120d !important;
	--wpforms-button-border-color: #21d6a3 !important;
	--wpforms-page-break-color: #21d6a3 !important;
	--wpforms-container-border-color: rgba(201, 162, 39, 0.28) !important;
}

div.wpforms-container-full input:focus,
div.wpforms-container-full textarea:focus,
div.wpforms-container-full select:focus {
	border-color: var(--th-venom);
	box-shadow: 0 0 0 2px var(--th-glow);
	outline: none;
}

div.wpforms-container-full .wpforms-required-label {
	color: var(--th-gold-lt);
}

div.wpforms-container-full .wpforms-submit:hover {
	filter: brightness(1.08);
	box-shadow: 0 0 22px var(--th-glow);
}

/* ------------------------------------------- Ultimate Member login/register -- */
/* UM ships light-mode form styling with !important on most declarations, so
   matching it takes !important back. Remove this block if UM is retired in
   favour of BuddyBoss registration. */

.um .um-form input[type="text"],
.um .um-form input[type="email"],
.um .um-form input[type="password"],
.um .um-form input[type="search"],
.um .um-form input[type="tel"],
.um .um-form input[type="number"],
.um .um-form textarea,
.um .um-form select,
.um input.um-form-field,
.um textarea.um-form-field {
	background-color: var(--th-void) !important;
	border: 1px solid var(--th-edge) !important;
	color: var(--th-bone) !important;
	border-radius: 3px !important;
	box-shadow: none !important;
}

.um .um-form input.um-form-field:focus,
.um .um-form textarea.um-form-field:focus,
.um .um-form select:focus {
	border-color: var(--th-venom) !important;
	box-shadow: 0 0 0 2px var(--th-glow) !important;
}

.um .um-field-label,
.um .um-field-label label,
.um .um-form label {
	color: var(--th-lichen) !important;
}

.um .um-field-checkbox-option,
.um .um-form .um-field-radio-option {
	color: var(--th-bone) !important;
}

/* Primary action (Login / Register / Submit). */
.um .um-button,
.um a.um-button,
.um input[type="submit"].um-button {
	background: linear-gradient(180deg, var(--th-venom), var(--th-venom-dim)) !important;
	border: 1px solid var(--th-venom) !important;
	color: #04120d !important;
	font-weight: 600 !important;
	border-radius: 3px !important;
	text-shadow: none !important;
}

/* Secondary action (the grey "Register" next to Login). */
.um .um-button.um-alt,
.um a.um-button.um-alt {
	background: transparent !important;
	border: 1px solid var(--th-gold) !important;
	color: var(--th-gold-lt) !important;
}

.um .um-button.um-alt:hover,
.um a.um-button.um-alt:hover {
	background: rgba(201, 162, 39, 0.12) !important;
	color: var(--th-gold-lt) !important;
}

.um .um-form a,
.um .um-col-alt a {
	color: var(--th-venom) !important;
}

/* UM panel background so the form sits on stone, not on the bare void. */
.um .um-form,
.um-login.um .um-form {
	background: linear-gradient(180deg, var(--th-stone-2), var(--th-stone));
	border: 1px solid var(--th-edge);
	border-radius: 4px;
	padding: 28px;
}

/* ------------------------------------------ BuddyBoss ReadyLaunch tokens -- */
/* The newer BuddyBoss components (media theatre, RL buttons) take every colour
   from --bb-rl-* variables defined on :root, including a blue-violet brand
   (#3E34FF / #A347FF). Redefining the tokens recolours every component at once
   instead of chasing each class. html:root out-specifies the plain :root block
   that BuddyBoss prints later in the head. */

html:root {
	--bb-rl-primary-color: #21d6a3 !important;
	--bb-rl-primary-300: #9fe8cf !important;
	--bb-rl-primary-700: #17a67f !important;
	--bb-rl-background-brand-primary-color: #21d6a3 !important;
	--bb-rl-background-brand-primary-hover-color: #17a67f !important;
	--bb-rl-background-brand-secondary-color: #0f1a15 !important;
	--bb-rl-background-brand-secondary-hover-color: #142219 !important;
	--bb-rl-background-brand-disabled-color: #2c3a30 !important;
	--bb-rl-background-secondary-color: #0f1a15 !important;
	--bb-rl-border-brand-primary-color: #21d6a3 !important;
	--bb-rl-icon-brand-primary-color: #21d6a3 !important;
	--bb-rl-icon-brand-disabled-color: #2c3a30 !important;
}

/* Filled brand buttons need dark text once the fill is venom. */
.bb-rl-button--brandFill,
a.bb-rl-button--brandFill {
	color: #04120d !important;
}

/* ------------------------------------------------------------- BuddyBoss -- */
/* BuddyBoss ships light-mode surfaces; these pull its components onto the
   jungle palette. Scoped to .buddypress / .bp-nouveau so nothing else moves. */

.bp-nouveau,
.buddypress-wrap,
#buddypress {
	color: var(--th-bone);
}

/* Directory + profile nav tabs. */
.buddypress-wrap .bp-navs,
.buddypress-wrap .bp-navs.bp-subnavs,
.bp-nouveau .bp-navs {
	background: var(--th-stone);
	border: 1px solid var(--th-edge);
	border-radius: 4px;
}

.buddypress-wrap .bp-navs li a,
.bp-nouveau .bp-navs li a {
	color: var(--th-lichen);
}

.buddypress-wrap .bp-navs li a:hover,
.bp-nouveau .bp-navs li a:hover {
	color: var(--th-bone);
	background: var(--th-stone-2);
}

.buddypress-wrap .bp-navs li.current > a,
.buddypress-wrap .bp-navs li.selected > a,
.bp-nouveau .bp-navs li.current > a {
	color: #04120d;
	background: var(--th-venom);
	border-radius: 3px;
}

/* Counts on the tabs. */
.buddypress-wrap .bp-navs li a span,
.bp-nouveau .bp-navs li a span {
	background: var(--th-gold);
	color: #14100a;
}

/* Activity stream, member/group cards, and generic list items. */
.buddypress-wrap .activity-list .activity-item,
.buddypress-wrap ul.item-list > li,
.bp-nouveau .activity-list .activity-item,
#buddypress div.item-list-tabs,
.bp-nouveau .members-list li,
.bp-nouveau .groups-list li {
	background: linear-gradient(180deg, var(--th-stone-2), var(--th-stone));
	border: 1px solid var(--th-edge);
	border-radius: 4px;
	color: var(--th-bone);
}

.buddypress-wrap .activity-list .activity-item:hover,
.bp-nouveau .members-list li:hover,
.bp-nouveau .groups-list li:hover {
	border-color: var(--th-venom);
	box-shadow: 0 0 0 1px var(--th-glow);
}

/* Avatars: gold ring, venom glow on hover. */
.buddypress img.avatar,
.bp-nouveau img.avatar,
#buddypress img.avatar {
	border: 2px solid var(--th-edge);
	border-radius: 50%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bp-nouveau .members-list li:hover img.avatar,
.bp-nouveau .groups-list li:hover img.avatar {
	border-color: var(--th-venom);
	box-shadow: 0 0 16px var(--th-glow);
}

/* Member / group header cover area. */
#buddypress #header-cover-image,
.bp-nouveau #header-cover-image {
	background-image:
		linear-gradient(180deg, rgba(7, 11, 9, 0.35), rgba(7, 11, 9, 0.85)),
		url("../img/cover-1950x300.jpg");
	background-size: cover;
	background-position: center;
}

/* Links inside community surfaces. */
.buddypress-wrap a,
.bp-nouveau a,
#buddypress a {
	color: var(--th-venom);
}

.buddypress-wrap a:hover,
.bp-nouveau a:hover,
#buddypress a:hover {
	color: var(--th-gold-lt);
}

/* Names stay bone so lists don't turn into a wall of teal. */
.bp-nouveau .members-list .member-name a,
.bp-nouveau .groups-list .group-name a,
.buddypress-wrap .activity-header .activity-author a {
	color: var(--th-bone);
}

/* Forms: dark fields, venom focus ring. */
.buddypress-wrap input[type="text"],
.buddypress-wrap input[type="email"],
.buddypress-wrap input[type="password"],
.buddypress-wrap input[type="search"],
.buddypress-wrap textarea,
.buddypress-wrap select,
#buddypress input[type="text"],
#buddypress textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
	background: var(--th-void);
	border: 1px solid var(--th-edge);
	color: var(--th-bone);
	border-radius: 3px;
}

input::placeholder,
textarea::placeholder {
	color: rgba(168, 191, 178, 0.6);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--th-venom);
	box-shadow: 0 0 0 2px var(--th-glow);
	outline: none;
}

/* Activity post box ("what's new"). */
#bp-nouveau-activity-form,
.bp-nouveau #whats-new-form {
	background: linear-gradient(180deg, var(--th-stone-2), var(--th-stone));
	border: 1px solid var(--th-edge);
	border-radius: 4px;
}

/* Notification / info boxes. */
.bp-feedback,
.buddypress-wrap .bp-feedback {
	background: var(--th-stone);
	border: 1px solid var(--th-edge);
	color: var(--th-bone);
}

.bp-feedback.success { border-color: var(--th-venom); }
.bp-feedback.error   { border-color: #c0453a; }

/* ------------------------------------------------------------ scrollbar -- */

* {
	scrollbar-color: var(--th-venom-dim) var(--th-void);
}

/* --------------------------------------------------------- accessibility -- */
/* Keyboard focus must stay visible against the dark ground. */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--th-gold-lt);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.uagb-block-76b447c0 .wp-block-column,
	.main-header-menu .menu-item > .menu-link::after {
		transition: none;
	}
	.uagb-block-76b447c0 .wp-block-column:hover {
		transform: none;
	}
}

/* ------------------------------------------------ inner page header band -- */
/*
 * Every inner page should open the same way: the jungle header image, full
 * bleed, with the page title on it. Three things were stopping that.
 *
 * 1. Bands were different heights. About and Raiding use 100px of vertical
 *    padding; Events had 70px and Apply 10px with a 200px min-height, so the
 *    same image was cropped differently on each. Normalised below — same
 *    specificity as Spectra's own rule, and this file loads after uag-style,
 *    so it wins on source order.
 * 2. Events and Apply printed Astra's plain title block as well, which put a
 *    bare heading on flat void directly above the band. Hidden.
 * 3. Roster and Mythic+ have no Spectra container at all, so they only had
 *    the plain title. Astra's own .entry-header is given the band treatment
 *    there, which means no new markup and it covers any future page built
 *    the same way.
 *
 * No gradient over the image anywhere — the editor-built bands have none, and
 * adding one made the page it was on visibly darker than its neighbours.
 */

.wp-block-uagb-container.uagb-block-82b2193b,
.wp-block-uagb-container.uagb-block-5bf33f08 {
	padding-top: 100px;
	padding-bottom: 100px;
	min-height: 0;
}

/* A Spectra band is already there — Astra's title would be a second one. */
body.thallo-has-band .entry-header {
	display: none;
}

/* No Spectra band: make Astra's title block the band. */
body.page:not(.thallo-has-band) .entry-header {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	width: 100vw;
	max-width: 100vw;
	padding: 100px 10px;
	background-color: var(--th-void);
	background-image: url("../img/pageheader-1920.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: scroll;
	text-align: center;
}

body.page:not(.thallo-has-band) .entry-header .entry-title {
	margin: 0;
	color: var(--th-bone);
}

@media (max-width: 921px) {
	.wp-block-uagb-container.uagb-block-82b2193b,
	.wp-block-uagb-container.uagb-block-5bf33f08,
	body.page:not(.thallo-has-band) .entry-header {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}

/* --------------------------------------------------- AOTC gallery page -- */
/*
 * This page was hand-built with its own <style> block inside the post content,
 * and it never got the jungle repaint: purple radial ground, lavender accents,
 * violet borders throughout. It also has no Spectra container and no Astra
 * title block, so the band rules above find nothing to work with.
 *
 * Two jobs here. Turn its own hero into the same full-bleed header band every
 * other inner page opens with, and swap the leftover purple for the jungle
 * palette.
 *
 * Every selector is prefixed with `html`. The page's <style> is printed in the
 * BODY, so it is later in source order than this file and wins any tie at
 * equal specificity — the extra element bumps us above it. Where its rule
 * carries !important, ours has to as well.
 */

html .thallo-aotc-page {
	/* Top padding cleared: the band brings its own, and .site-content already
	   carries the 110px transparent-header clearance like every other page. */
	padding: 0 20px 82px !important;
	background: var(--th-void);
	color: var(--th-bone);
}

html .thallo-aotc-hero {
	/* !important on the horizontal margins and width: the block group this
	   sits in is `is-layout-constrained`, and WordPress's layout rule for its
	   children (`.wp-block-group-is-layout-constrained > *:not(.alignleft)
	   :not(.alignright):not(.alignfull)`) counts every :not() toward
	   specificity and outranks a plain `html .thallo-aotc-hero`. Without this
	   the band sat 20px in from the left and ran 20px past the right edge,
	   which also gave the page a horizontal scrollbar. */
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-bottom: 34px;
	padding: 100px 10px !important;
	background-color: var(--th-void);
	background-image: url("../img/pageheader-1920.jpg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	background-attachment: scroll;
}

html .thallo-aotc-kicker {
	color: var(--th-venom);
	border-color: rgba(146, 186, 168, 0.34);
	background: rgba(7, 11, 9, 0.54);
}

html .thallo-aotc-title {
	color: var(--th-bone);
	text-shadow: 0 0 20px var(--th-glow);
}

html .thallo-aotc-copy,
html .thallo-aotc-close {
	color: var(--th-lichen);
}

html .thallo-aotc-stat {
	border-color: rgba(146, 186, 168, 0.32);
	background: linear-gradient(180deg, rgba(15, 26, 21, 0.78), rgba(7, 11, 9, 0.82));
}

html .thallo-aotc-stat strong {
	color: var(--th-bone);
}

html .thallo-aotc-stat span {
	color: #93a89e;
}

html .thallo-aotc-shot {
	border-color: rgba(146, 186, 168, 0.3);
	background: var(--th-void);
}

html .thallo-aotc-shot figcaption {
	background: rgba(7, 11, 9, 0.84);
	border-color: rgba(33, 214, 163, 0.4);
	color: var(--th-bone);
}

@media (max-width: 760px) {
	html .thallo-aotc-page {
		padding: 0 14px 64px !important;
	}

	html .thallo-aotc-hero {
		padding: 70px 10px !important;
	}
}

/* ------------------------------------------------------- primary nav fit -- */
/*
 * Nine items at Astra's 20px nav type need 869px, but the header only hands
 * the menu 730px at 1440 and 570px at 1280. The overflow wrapped the last
 * item ("AOTC Gallery") onto a second row, which — because the header is
 * transparent and floats over the page — dropped it on top of the header
 * band. That already happened at 1440 and below with eight items; adding
 * Mythic + moved the break point up to 1512.
 *
 * Scaling the type and trimming the side padding between the burger
 * breakpoint (921px) and 1600px keeps all nine on one row. Above 1600 there
 * is room for the full-size nav, so it is left alone.
 *
 * Deliberately no `flex-wrap: nowrap` here: if a tenth item is ever added and
 * the row stops fitting, wrapping is ugly but overflowing off-screen is worse.
 */

@media (min-width: 1201px) and (max-width: 1599px) {
	/* Astra sets this from an inline <style> as
	   `.ast-builder-menu-1 .menu-item > .menu-link { font-size: 1.25rem; padding: 10px }`
	   — three classes and later in source order, so a plain
	   `.main-header-menu .menu-link` rule here loses on both counts. Matching
	   its selector and adding `html` puts us one element above it. */
	html .ast-builder-menu-1 .menu-item > .menu-link {
		font-size: clamp(13px, 1.02vw, 18px);
		padding-left: 6px;
		padding-right: 6px;
		white-space: nowrap;
	}
}