@charset "UTF-8";
/* ==========================================================================
   Aspiring Quotes — theme stylesheet
   --------------------------------------------------------------------------
   Palette is lifted verbatim from "Aspiring Quotes Tokens.css" in the brand
   kit, where every ratio was measured against the artwork rather than guessed.
   The one deliberate departure: --page is pure #FFFFFF here instead of the
   kit's #FBFBF9, because the brief asked for a clean white ground. The kit's
   off-white survives as --page-alt and is used for banded sections, so the
   two still read as one family.

   The rules the kit calls out as easy to get wrong are honoured throughout:
     - gold and sand are fills, never type
     - gold fills take ink, never white
     - teal and steel are invisible on ink, so dark surfaces take cream or gold
     - sage buttons take ink, teal and steel buttons take white

   Layout is a single 1120px column, two-up card grid beside a sticky sidebar,
   collapsing to one column under 900px. No framework, no grid library.
   ========================================================================== */

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

:root {
	/* brand core */
	--aq-ink: #0a1a2f;
	--aq-navy: #03203a;
	--aq-deep: #0f2e4a;

	/* mid sky — the workhorse blues */
	--aq-teal: #0f4661;
	--aq-steel: #2b5d72;

	/* horizon band */
	--aq-sage: #83958a;
	--aq-sage-deep: #69776e;
	--aq-sand: #c7bb91;
	--aq-sand-deep: #7b745a;

	/* accent */
	--aq-gold: #f4cd8e;
	--aq-gold-deep: #86714e;
	--aq-gold-warm: #ffedbf;

	/* neutrals */
	--aq-cream: #fdf8ec;
	--aq-page: #ffffff;
	--aq-page-alt: #fbfbf9;
	--aq-paper: #ffffff;
	--aq-line: #e7e4dc;
	--aq-line-soft: #f1efe9;

	/* the badge sky, and the same ramp on its side for rules */
	--aq-sky: linear-gradient(180deg, #03203a 0%, #04243d 15%, #123353 26%, #093f5b 32%, #205369 37%, #436e7b 42%, #6c8887 47%, #99a291 52%, #c7bb91 57%, #e9cb8f 61%, #f4cd8e 65%, #f7e3ba 76%, #fcf3dc 100%);
	--aq-horizon: linear-gradient(90deg, #03203a 0%, #093f5b 24%, #205369 38%, #6c8887 52%, #c7bb91 68%, #f4cd8e 84%, #fcf3dc 100%);

	/* type — the fallbacks are metric-close so the swap barely moves anything */
	--aq-display: "Poppins", "Century Gothic", "Segoe UI", system-ui, -apple-system, sans-serif;
	--aq-body: "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
	--aq-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* measure */
	--aq-wrap: 1120px;
	--aq-gutter: clamp(1rem, 0.55rem + 1.8vw, 2rem);
	--aq-sidebar: 320px;
	--aq-rail-gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);

	/* shape */
	--aq-r: 12px;
	--aq-r-sm: 8px;
	--aq-shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.06), 0 2px 8px rgba(10, 26, 47, 0.05);
	--aq-shadow-md: 0 4px 14px rgba(10, 26, 47, 0.1), 0 12px 32px rgba(10, 26, 47, 0.08);

	/* motion */
	--aq-ease: cubic-bezier(0.32, 0.72, 0.28, 1);
	--aq-speed: 0.22s;

	/* the sticky header's own height, read by JS so anchor scrolling clears it */
	--aq-header-offset: 0px;
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--aq-header-offset) + 1rem);
}

body {
	margin: 0;
	background: var(--aq-page);
	color: var(--aq-ink);
	font-family: var(--aq-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	font-family: var(--aq-display);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--aq-navy);
	text-wrap: balance;
}

h1 {
	font-size: clamp(1.75rem, 1.22rem + 2.1vw, 2.55rem);
}
h2 {
	font-size: clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem);
}
h3 {
	font-size: clamp(1.25rem, 1.08rem + 0.7vw, 1.5rem);
}
h4 {
	font-size: 1.15rem;
}
h5 {
	font-size: 1rem;
}
h6 {
	font-size: 0.9375rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

p,
ul,
ol,
dl,
table,
pre,
blockquote,
figure {
	margin: 0 0 1.4em;
}

a {
	color: var(--aq-teal);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--aq-navy);
}

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

img {
	display: block;
	border-style: none;
}

/* Every image the theme places sits in an aspect-ratio box, so the browser
   knows its geometry before the bytes arrive. Content images from the editor
   keep whatever width/height attributes WordPress wrote. */
figure {
	max-width: 100%;
}

svg {
	fill: currentColor;
	flex: none;
}

hr {
	height: 1px;
	margin: 2.5rem 0;
	border: 0;
	background: var(--aq-line);
}

blockquote {
	margin-inline: 0;
	padding: 0.2rem 0 0.2rem 1.5rem;
	border-left: 3px solid var(--aq-gold);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--aq-deep);
}

blockquote cite,
blockquote footer {
	display: block;
	margin-top: 0.6rem;
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	font-style: normal;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--aq-steel);
}

code,
kbd,
samp,
pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	border-radius: 4px;
	background: var(--aq-page-alt);
	border: 1px solid var(--aq-line);
}

pre {
	padding: 1.1rem 1.25rem;
	overflow-x: auto;
	border-radius: var(--aq-r-sm);
	background: var(--aq-page-alt);
	border: 1px solid var(--aq-line);
}

pre code {
	padding: 0;
	border: 0;
	background: none;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

th,
td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--aq-line);
	text-align: left;
}

th {
	font-family: var(--aq-display);
	font-weight: 600;
	background: var(--aq-page-alt);
}

/* Tables from the editor can be wider than the column; let them scroll rather
   than force the whole page sideways. */
.aq-entry-content > table,
.aq-entry-content > .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ==========================================================================
   3. Accessibility scaffolding
   ========================================================================== */

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

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto;
	clip-path: none;
	background: var(--aq-navy);
	color: var(--aq-cream);
	border-radius: var(--aq-r-sm);
	font-family: var(--aq-ui);
	font-size: 0.9375rem;
	text-decoration: none;
}

.aq-skip-link:focus {
	position: fixed !important;
}

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

/* Older engines that lack :focus-visible still get a visible ring. */
:focus:not(:focus-visible) {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

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

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

.aq-wrap--narrow {
	max-width: 760px;
}

.aq-site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.aq-main {
	flex: 1 0 auto;
	padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}

.aq-rail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--aq-sidebar);
	gap: var(--aq-rail-gap);
	align-items: start;
}

.aq-rail--full {
	grid-template-columns: minmax(0, 1fr);
}

.aq-content {
	min-width: 0;
}

@media (max-width: 900px) {
	.aq-rail {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   5. Buttons, badges, section rules
   ========================================================================== */

.aq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--aq-teal);
	color: #fff; /* 10.15:1 on teal */
	font-family: var(--aq-display);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.03em;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--aq-speed) var(--aq-ease), transform var(--aq-speed) var(--aq-ease);
}

.aq-btn:hover,
.aq-btn:focus {
	background: var(--aq-navy);
	color: #fff;
	transform: translateY(-1px);
}

/* Gold is a fill and it takes ink — white on gold is 1.50:1 and unreadable. */
.aq-btn--gold {
	background: var(--aq-gold);
	color: var(--aq-ink);
}

.aq-btn--gold:hover,
.aq-btn--gold:focus {
	background: var(--aq-gold-warm);
	color: var(--aq-ink);
}

.aq-btn--ghost {
	background: transparent;
	color: var(--aq-teal);
	box-shadow: inset 0 0 0 1px var(--aq-line);
}

.aq-btn--ghost:hover,
.aq-btn--ghost:focus {
	background: var(--aq-page-alt);
	color: var(--aq-navy);
	box-shadow: inset 0 0 0 1px var(--aq-steel);
}

.aq-btn--sm {
	padding: 0.45rem 1rem;
	font-size: 0.8125rem;
}

.aq-btn--block {
	width: 100%;
}

/* Category chip. Teal ground with white type clears AA comfortably; the
   SmartMag reference uses a hot red here, the brand's equivalent is teal. */
.aq-cat {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
	background: var(--aq-teal);
	color: #fff;
	font-family: var(--aq-display);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--aq-speed) var(--aq-ease);
}

.aq-cat:hover,
.aq-cat:focus {
	background: var(--aq-navy);
	color: #fff;
}

.aq-cat--quiet {
	padding-inline: 0;
	background: none;
	color: var(--aq-teal);
}

.aq-cat--quiet:hover,
.aq-cat--quiet:focus {
	background: none;
	color: var(--aq-navy);
	text-decoration: underline;
}

/* Section heading with the horizon ramp as its underline. The gradient is the
   badge's sky turned on its side — it is the one piece of the identity that
   can repeat across a page without shouting. */
.aq-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--aq-line);
	position: relative;
}

.aq-section-head::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--aq-horizon);
}

.aq-section-head > :first-child {
	margin: 0;
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.aq-section-head__aside {
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	color: var(--aq-steel);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

.aq-topbar {
	border-bottom: 1px solid var(--aq-line-soft);
	background: var(--aq-page);
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	color: var(--aq-steel);
}

.aq-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 42px;
}

.aq-topbar__tag {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aq-brandbar {
	padding-block: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
	text-align: center;
	background: var(--aq-page);
}

.aq-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
	color: inherit;
}

.aq-brand__logo {
	display: block;
	width: auto;
	height: clamp(34px, 2rem + 1.4vw, 52px);
}

.aq-brand__text {
	font-family: var(--aq-display);
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--aq-navy);
	line-height: 1.1;
}

.aq-brand__tagline {
	margin: 0.4rem 0 0;
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--aq-sage-deep);
}

/* The bar that actually sticks. Only this strip is fixed, so the logo scrolls
   away and the sticky element stays 54px tall — a full sticky masthead eats a
   sixth of a phone screen. */
.aq-navbar {
	position: sticky;
	top: 0;
	z-index: 90;
	border-block: 1px solid var(--aq-line);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.6) blur(8px);
	-webkit-backdrop-filter: saturate(1.6) blur(8px);
}

.admin-bar .aq-navbar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .aq-navbar {
		top: 46px;
	}
}

.aq-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 54px;
}

.aq-navbar__side {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: 0 0 auto;
}

.aq-navbar__side--end {
	justify-content: flex-end;
}

/* Icon buttons: menu toggle, search toggle, close. 44px hit target. */
.aq-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--aq-navy);
	cursor: pointer;
	transition: background var(--aq-speed) var(--aq-ease), color var(--aq-speed) var(--aq-ease);
}

.aq-iconbtn:hover,
.aq-iconbtn:focus {
	background: var(--aq-page-alt);
	color: var(--aq-teal);
}

.aq-iconbtn svg {
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   7. Navigation
   ========================================================================== */

.aq-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.aq-nav__list,
.aq-nav__sub {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-nav__list {
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.15rem 0.35rem;
}

.aq-nav li {
	position: relative;
}

.aq-nav a {
	display: block;
	padding: 0.65rem 0.7rem;
	font-family: var(--aq-display);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--aq-navy);
	white-space: nowrap;
	transition: color var(--aq-speed) var(--aq-ease);
}

.aq-nav a:hover,
.aq-nav a:focus {
	color: var(--aq-teal);
}

.aq-nav .current-menu-item > a,
.aq-nav .current-menu-ancestor > a,
.aq-nav .current_page_item > a {
	color: var(--aq-teal);
}

.aq-nav .current-menu-item > a::after,
.aq-nav .current_page_item > a::after {
	content: "";
	display: block;
	height: 2px;
	margin-top: 3px;
	border-radius: 2px;
	background: var(--aq-horizon);
}

/* Submenus. Opened by hover and by focus-within, and by an explicit toggle
   button on touch — hover alone strands anyone without a mouse. */
.aq-nav .menu-item-has-children > a {
	padding-right: 1.5rem;
}

.aq-nav__toggle {
	position: absolute;
	top: 50%;
	right: 0.1rem;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--aq-steel);
	cursor: pointer;
}

.aq-nav__toggle svg {
	width: 12px;
	height: 12px;
	transition: transform var(--aq-speed) var(--aq-ease);
}

.aq-nav__toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.aq-nav__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	flex-direction: column;
	min-width: 210px;
	padding: 0.4rem 0;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r-sm);
	background: var(--aq-paper);
	box-shadow: var(--aq-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--aq-speed) var(--aq-ease), transform var(--aq-speed) var(--aq-ease), visibility var(--aq-speed);
}

.aq-nav__sub .aq-nav__sub {
	top: -0.4rem;
	left: 100%;
}

.aq-nav li:hover > .aq-nav__sub,
.aq-nav li:focus-within > .aq-nav__sub,
.aq-nav li.is-open > .aq-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.aq-nav__sub a {
	padding: 0.5rem 1rem;
	font-size: 0.78125rem;
	letter-spacing: 0.05em;
	white-space: normal;
}

.aq-nav__sub a::after {
	display: none !important;
}

/* A submenu near the right edge would otherwise run off screen. */
.aq-nav > .aq-nav__list > li:nth-last-child(-n + 2) .aq-nav__sub {
	left: auto;
	right: 0;
}

/* -- Off-canvas drawer (mobile) ------------------------------------------- */

.aq-drawer {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	pointer-events: none;
}

.aq-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
}

.aq-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 26, 47, 0.5);
	opacity: 0;
	transition: opacity var(--aq-speed) var(--aq-ease);
}

.aq-drawer.is-open .aq-drawer__scrim {
	opacity: 1;
}

.aq-drawer__panel {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: min(330px, 86vw);
	display: flex;
	flex-direction: column;
	padding: 1rem 1.25rem 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--aq-paper);
	box-shadow: var(--aq-shadow-md);
	transform: translateX(-100%);
	transition: transform var(--aq-speed) var(--aq-ease);
}

.aq-drawer.is-open .aq-drawer__panel {
	transform: translateX(0);
}

.aq-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--aq-line);
}

.aq-drawer__logo {
	height: 30px;
	width: auto;
}

.aq-drawer .aq-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.aq-drawer .aq-nav a {
	padding: 0.75rem 0;
	font-size: 0.875rem;
	white-space: normal;
	border-bottom: 1px solid var(--aq-line-soft);
}

.aq-drawer .aq-nav a::after {
	display: none;
}

.aq-drawer .aq-nav__sub {
	position: static;
	display: none;
	min-width: 0;
	padding: 0 0 0 1rem;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.aq-drawer .aq-nav li.is-open > .aq-nav__sub {
	display: flex;
}

.aq-drawer .aq-nav__toggle {
	top: 1.15rem;
	right: 0;
	width: 32px;
	height: 32px;
	transform: none;
}

.aq-drawer__foot {
	margin-top: auto;
	padding-top: 1.5rem;
}

/* -- Search overlay -------------------------------------------------------- */

.aq-searchbar {
	display: none;
	padding-block: 1rem;
	border-bottom: 1px solid var(--aq-line);
	background: var(--aq-page-alt);
}

.aq-searchbar.is-open {
	display: block;
}

/* ==========================================================================
   8. Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	width: 100%;
	max-width: 100%;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r-sm);
	background: var(--aq-paper);
	color: var(--aq-ink);
	font-family: var(--aq-ui);
	font-size: 1rem; /* anything under 16px makes iOS zoom the viewport */
	line-height: 1.5;
	transition: border-color var(--aq-speed) var(--aq-ease), box-shadow var(--aq-speed) var(--aq-ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--aq-teal);
	box-shadow: 0 0 0 3px rgba(15, 70, 97, 0.14);
	outline: none;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

label {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--aq-ui);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--aq-deep);
}

.aq-search-form {
	display: flex;
	gap: 0.5rem;
}

.aq-search-form__field {
	flex: 1 1 auto;
	min-width: 0;
}

.aq-search-form .aq-btn {
	flex: none;
}

/* ==========================================================================
   9. Cards
   --------------------------------------------------------------------------
   Every thumbnail sits in a 1:1 box. The quote graphics on this site are
   square 600x600 artwork whose whole point is the words inside them, so a
   landscape crop would slice the text in half. Square is the only frame that
   shows the picture the author actually made, and the fixed ratio means the
   grid never shifts while images load.
   ========================================================================== */

.aq-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--aq-r);
	background: var(--aq-page-alt);
	aspect-ratio: 1 / 1;
}

.aq-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.4s var(--aq-ease);
}

.aq-card:hover .aq-thumb img,
.aq-card:focus-within .aq-thumb img {
	transform: scale(1.035);
}

.aq-thumb--placeholder {
	display: grid;
	place-items: center;
	background: var(--aq-page-alt);
	border: 1px solid var(--aq-line);
}

.aq-thumb--placeholder svg {
	width: 44%;
	height: auto;
	color: var(--aq-line);
}

.aq-thumb__cat {
	position: absolute;
	left: 0.7rem;
	bottom: 0.7rem;
	z-index: 2;
	box-shadow: 0 1px 6px rgba(10, 26, 47, 0.28);
}

.aq-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.aq-card__body {
	padding-top: 0.9rem;
}

.aq-card__title {
	margin: 0.35rem 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

.aq-card__title a {
	color: var(--aq-navy);
	text-decoration: none;
	background-image: linear-gradient(var(--aq-teal), var(--aq-teal));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--aq-speed) var(--aq-ease), color var(--aq-speed) var(--aq-ease);
}

.aq-card__title a:hover,
.aq-card__title a:focus {
	color: var(--aq-teal);
	background-size: 100% 1px;
}

.aq-card__excerpt {
	margin: 0 0 0.6rem;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--aq-deep);
}

/* Meta line. Steel is 6.96:1 on white, which is the darkest of the horizon
   colours that still reads as "quiet". */
.aq-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.55rem;
	margin: 0;
	font-family: var(--aq-ui);
	font-size: 0.78125rem;
	line-height: 1.5;
	color: var(--aq-steel);
}

.aq-meta a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
}

.aq-meta a:hover,
.aq-meta a:focus {
	color: var(--aq-teal);
	text-decoration: underline;
}

.aq-meta__sep {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--aq-sand);
}

.aq-meta svg {
	width: 14px;
	height: 14px;
	opacity: 0.75;
}

/* -- Grid of cards --------------------------------------------------------- */

.aq-grid {
	display: grid;
	gap: clamp(1.5rem, 1rem + 1.6vw, 2.4rem) clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
	grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.aq-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

/* -- Lead card: the newest post, given the room it deserves ---------------- */

.aq-lead {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
	gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem);
	align-items: center;
	margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3rem);
	padding-bottom: clamp(2rem, 1.2rem + 2.4vw, 3rem);
	border-bottom: 1px solid var(--aq-line);
}

.aq-lead .aq-thumb {
	border-radius: var(--aq-r);
}

.aq-lead__title {
	margin: 0.6rem 0 0.7rem;
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
	font-weight: 700;
	line-height: 1.2;
}

.aq-lead__title a {
	color: var(--aq-navy);
	text-decoration: none;
}

.aq-lead__title a:hover,
.aq-lead__title a:focus {
	color: var(--aq-teal);
}

.aq-lead__excerpt {
	margin: 0 0 1.1rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--aq-deep);
}

@media (max-width: 640px) {
	.aq-lead {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Compact card: sidebar lists, related strips, drawer ------------------- */

.aq-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-compact {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
}

.aq-compact .aq-thumb {
	border-radius: var(--aq-r-sm);
}

.aq-compact__title {
	margin: 0 0 0.25rem;
	font-family: var(--aq-display);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
}

.aq-compact__title a {
	color: var(--aq-navy);
	text-decoration: none;
}

.aq-compact__title a:hover,
.aq-compact__title a:focus {
	color: var(--aq-teal);
}

.aq-compact .aq-meta {
	font-size: 0.75rem;
}

/* Numbered variant, borrowed from the reference's "Editor's Picks" strip. */
.aq-list--numbered {
	counter-reset: aq-rank;
}

.aq-list--numbered .aq-compact {
	counter-increment: aq-rank;
	grid-template-columns: 1.6rem 76px minmax(0, 1fr);
}

.aq-list--numbered .aq-compact::before {
	content: counter(aq-rank) ".";
	font-family: var(--aq-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--aq-sand-deep);
}

/* ==========================================================================
   10. Page intro / archive header
   ========================================================================== */

.aq-page-head {
	margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
}

.aq-page-head__kicker {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--aq-ui);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aq-sage-deep);
}

.aq-page-head h1 {
	margin: 0;
}

.aq-page-head__desc {
	margin: 0.75rem 0 0;
	max-width: 62ch;
	font-size: 1.0625rem;
	color: var(--aq-deep);
}

.aq-page-head__rule {
	width: 84px;
	height: 3px;
	margin-top: 1.1rem;
	border-radius: 2px;
	background: var(--aq-horizon);
}

/* Breadcrumbs */
.aq-breadcrumbs {
	margin-bottom: 1rem;
	font-family: var(--aq-ui);
	font-size: 0.78125rem;
	color: var(--aq-steel);
}

.aq-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-breadcrumbs li::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--aq-sand);
}

.aq-breadcrumbs li:last-child::after {
	content: none;
}

.aq-breadcrumbs a {
	color: var(--aq-steel);
	text-decoration: none;
}

.aq-breadcrumbs a:hover,
.aq-breadcrumbs a:focus {
	color: var(--aq-teal);
	text-decoration: underline;
}

.aq-breadcrumbs [aria-current="page"] {
	color: var(--aq-ink);
}

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

.aq-entry-head {
	margin-bottom: 1.75rem;
}

.aq-entry-head__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.9rem;
}

.aq-entry-title {
	margin: 0 0 0.9rem;
}

.aq-entry-head .aq-meta {
	font-size: 0.8125rem;
}

.aq-avatar {
	border-radius: 50%;
	flex: none;
}

/* The featured image on the post itself is shown whole. Nothing about a quote
   graphic survives being cropped, so this box is contain, not cover, and it
   never grows past the artwork's own 600px. */
.aq-featured {
	margin: 0 0 1.75rem;
	text-align: center;
}

.aq-featured img {
	display: inline-block;
	width: auto;
	max-width: min(100%, 600px);
	height: auto;
	border-radius: var(--aq-r);
}

.aq-featured figcaption {
	margin-top: 0.6rem;
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	color: var(--aq-steel);
}

.aq-entry-content {
	font-size: 1.0625rem;
	line-height: 1.8;
}

.aq-entry-content > *:last-child {
	margin-bottom: 0;
}

.aq-entry-content h2,
.aq-entry-content h3,
.aq-entry-content h4 {
	margin-top: 1.8em;
}

.aq-entry-content a {
	font-weight: 600;
}

.aq-entry-content ul,
.aq-entry-content ol {
	padding-left: 1.35em;
}

.aq-entry-content li {
	margin-bottom: 0.45em;
}

.aq-entry-content img {
	border-radius: var(--aq-r-sm);
	margin-inline: auto;
}

/* WordPress alignment and caption classes. */
.alignleft {
	float: left;
	margin: 0.35rem 1.5rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.35rem 0 1rem 1.5rem;
}

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

.alignnone {
	margin-bottom: 1.4em;
}

.alignwide {
	width: min(100vw - 2 * var(--aq-gutter), 1120px);
	max-width: none;
	margin-inline: calc(50% - min(100vw - 2 * var(--aq-gutter), 1120px) / 2);
}

.alignfull {
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
}

@media (max-width: 560px) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: auto;
	}
}

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

.wp-caption-text,
.wp-block-image figcaption,
.wp-element-caption {
	margin-top: 0.55rem;
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var(--aq-steel);
}

.gallery {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	margin-bottom: 1.4em;
}

.gallery-item {
	margin: 0;
}

.gallery img {
	border-radius: var(--aq-r-sm);
}

.sticky .aq-card__title::before,
.sticky .aq-lead__title::before {
	content: "★";
	margin-right: 0.35rem;
	color: var(--aq-gold-deep);
}

/* -- Tags, share, author box ---------------------------------------------- */

.aq-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.aq-tags__label {
	font-family: var(--aq-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aq-sage-deep);
}

.aq-tags a {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border: 1px solid var(--aq-line);
	border-radius: 999px;
	background: var(--aq-page-alt);
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	color: var(--aq-deep);
	text-decoration: none;
	transition: border-color var(--aq-speed) var(--aq-ease), color var(--aq-speed) var(--aq-ease);
}

.aq-tags a:hover,
.aq-tags a:focus {
	border-color: var(--aq-teal);
	color: var(--aq-teal);
}

.aq-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--aq-line);
}

.aq-share__label {
	margin-right: 0.35rem;
	font-family: var(--aq-ui);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aq-sage-deep);
}

/* Plain links to each network's share endpoint. No SDKs, no iframes, no
   third-party script — a share button that costs 200KB of JavaScript is not a
   share button, it is a tracker. */
.aq-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--aq-page-alt);
	color: var(--aq-deep);
	transition: background var(--aq-speed) var(--aq-ease), color var(--aq-speed) var(--aq-ease), transform var(--aq-speed) var(--aq-ease);
}

.aq-share__link:hover,
.aq-share__link:focus {
	background: var(--aq-teal);
	color: #fff;
	transform: translateY(-2px);
}

.aq-share__link svg {
	width: 18px;
	height: 18px;
}

.aq-authorbox {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 1.1rem;
	margin-top: 2.5rem;
	padding: 1.5rem;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r);
	background: var(--aq-page-alt);
}

.aq-authorbox__name {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
}

.aq-authorbox__name a {
	color: var(--aq-navy);
	text-decoration: none;
}

.aq-authorbox__bio {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--aq-deep);
}

@media (max-width: 480px) {
	.aq-authorbox {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -- Prev / next ----------------------------------------------------------- */

.aq-postnav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--aq-line);
}

.aq-postnav__item {
	display: block;
	padding: 1rem 1.15rem;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r);
	text-decoration: none;
	transition: border-color var(--aq-speed) var(--aq-ease), background var(--aq-speed) var(--aq-ease);
}

.aq-postnav__item:hover,
.aq-postnav__item:focus {
	border-color: var(--aq-steel);
	background: var(--aq-page-alt);
}

.aq-postnav__item--next {
	text-align: right;
}

.aq-postnav__dir {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--aq-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--aq-sage-deep);
}

.aq-postnav__title {
	font-family: var(--aq-display);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--aq-navy);
}

/* Related posts strip. Needs its own top margin because it follows the
   prev/next cards, which end flush with their own border. */
.aq-related {
	margin-top: clamp(2.5rem, 1.6rem + 2.5vw, 3.5rem);
}

/* ==========================================================================
   12. Comments
   ========================================================================== */

.aq-comments {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--aq-line);
}

.aq-comments__list {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.aq-comments__list .children {
	margin: 1.25rem 0 0;
	padding-left: clamp(1rem, 0.5rem + 2vw, 2.5rem);
	list-style: none;
	border-left: 1px solid var(--aq-line);
}

.aq-comment {
	margin-bottom: 1.5rem;
}

.aq-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.6rem;
}

.aq-comment__author {
	font-family: var(--aq-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--aq-navy);
}

.aq-comment__author a {
	color: inherit;
	text-decoration: none;
}

.aq-comment__body {
	font-size: 0.9875rem;
	line-height: 1.7;
}

.aq-comment__body > *:last-child {
	margin-bottom: 0;
}

.aq-comment__actions {
	display: flex;
	gap: 1rem;
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
}

.bypostauthor > .aq-comment .aq-comment__author::after {
	content: "Author";
	margin-left: 0.45rem;
	padding: 0.1rem 0.4rem;
	border-radius: 3px;
	background: var(--aq-gold-warm);
	color: var(--aq-ink);
	font-family: var(--aq-ui);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: 0.1em;
}

.comment-respond {
	padding: 1.5rem;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r);
	background: var(--aq-page-alt);
}

.comment-reply-title {
	margin-top: 0;
	font-size: 1.2rem;
}

.comment-form > p {
	margin-bottom: 1rem;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.comment-form-cookies-consent input {
	width: auto;
	margin-top: 0.35rem;
}

.comment-form-cookies-consent label {
	margin: 0;
	font-weight: 400;
}

.comment-form .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--aq-teal);
	color: #fff;
	font-family: var(--aq-display);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
	background: var(--aq-navy);
}

.comment-notes,
.logged-in-as,
.form-allowed-tags {
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	color: var(--aq-steel);
}

.aq-comments__closed {
	font-family: var(--aq-ui);
	font-size: 0.875rem;
	color: var(--aq-steel);
}

/* ==========================================================================
   13. Pagination
   ========================================================================== */

.aq-pagination {
	margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--aq-line);
}

.aq-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

.aq-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.75rem;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r-sm);
	font-family: var(--aq-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--aq-deep);
	text-decoration: none;
	transition: border-color var(--aq-speed) var(--aq-ease), background var(--aq-speed) var(--aq-ease), color var(--aq-speed) var(--aq-ease);
}

.aq-pagination a.page-numbers:hover,
.aq-pagination a.page-numbers:focus {
	border-color: var(--aq-teal);
	color: var(--aq-teal);
}

.aq-pagination .page-numbers.current {
	border-color: var(--aq-teal);
	background: var(--aq-teal);
	color: #fff;
}

.aq-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 24px;
}

/* Paginated single posts (<!--nextpage-->). */
.aq-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 2rem;
	font-family: var(--aq-display);
	font-size: 0.875rem;
	font-weight: 600;
}

.aq-page-links a,
.aq-page-links > span:not(.aq-page-links__label) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	border: 1px solid var(--aq-line);
	border-radius: var(--aq-r-sm);
	text-decoration: none;
	color: var(--aq-deep);
}

.aq-page-links > span:not(.aq-page-links__label) {
	background: var(--aq-teal);
	border-color: var(--aq-teal);
	color: #fff;
}

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

.aq-sidebar {
	position: sticky;
	top: calc(var(--aq-header-offset) + 1.25rem);
	min-width: 0;
}

@media (max-width: 900px) {
	.aq-sidebar {
		position: static;
	}
}

.aq-widget {
	margin-bottom: 2.25rem;
}

.aq-widget:last-child {
	margin-bottom: 0;
}

.aq-widget__title {
	position: relative;
	margin: 0 0 1.15rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--aq-line);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.aq-widget__title::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--aq-horizon);
}

.aq-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--aq-ui);
	font-size: 0.9375rem;
}

.aq-widget li {
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--aq-line-soft);
}

.aq-widget li:last-child {
	border-bottom: 0;
}

.aq-widget li a {
	color: var(--aq-deep);
	text-decoration: none;
}

.aq-widget li a:hover,
.aq-widget li a:focus {
	color: var(--aq-teal);
	text-decoration: underline;
}

.aq-widget .aq-list li {
	padding: 0;
	border: 0;
}

.aq-widget select {
	font-size: 0.9375rem;
}

.aq-widget .aq-btn {
	margin-top: 0.75rem;
}

/* Category and archive counts, which core prints as a bare text node after the
   link. Flex pushes that count to the right margin. */
.widget_categories li,
.widget_archive li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.widget_categories li a,
.widget_archive li a {
	flex: 1 1 auto;
}

/* A child category is a nested <ul> *inside* the parent <li>, so without this
   the flex row lays the whole sub-tree out alongside its own parent — the
   child term ends up on the same line, reading as a second category rather
   than a subdivision of the first. Forcing the nested list onto its own full
   -width row restores the hierarchy. */
.widget_categories li > ul,
.widget_archive li > ul,
.widget_pages li > ul,
.widget_nav_menu li > ul {
	flex: 0 0 100%;
	width: 100%;
	margin-top: 0.45rem;
	padding-left: 0.9rem;
	border-left: 1px solid var(--aq-line);
}

.widget_categories li > ul li:last-child,
.widget_archive li > ul li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* Tag cloud */
.wp-block-tag-cloud a,
.tagcloud a {
	display: inline-block;
	margin: 0 0.3rem 0.45rem 0;
	padding: 0.25rem 0.65rem;
	border: 1px solid var(--aq-line);
	border-radius: 999px;
	background: var(--aq-page-alt);
	font-family: var(--aq-ui);
	font-size: 0.8125rem !important;
	color: var(--aq-deep);
	text-decoration: none;
}

.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
	border-color: var(--aq-teal);
	color: var(--aq-teal);
}

/* A quiet promo panel for the sidebar or the drawer foot. */
.aq-promo {
	padding: 1.35rem 1.25rem;
	border-radius: var(--aq-r);
	background: var(--aq-gold-warm);
	color: var(--aq-ink);
	text-align: center;
}

.aq-promo h3,
.aq-promo p {
	color: var(--aq-ink);
}

.aq-promo h3 {
	margin-bottom: 0.4rem;
	font-size: 1.05rem;
}

.aq-promo p {
	margin-bottom: 1rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* ==========================================================================
   15. Advertising slots
   --------------------------------------------------------------------------
   Every slot reserves its height before the AdSense script runs. An unsized
   ad container is the single most common cause of a failing CLS score on a
   monetised blog: the ad arrives late, pushes the article down, and the shift
   is attributed to the page. Reserving the box costs a little whitespace when
   an ad does not fill, and costs nothing when it does.
   ========================================================================== */

.aq-ad {
	display: block;
	margin-inline: auto;
	overflow: hidden;
	text-align: center;
	contain: layout paint style;
}

.aq-ad__label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--aq-ui);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--aq-sage-deep);
}

.aq-ad ins {
	display: block;
}

.aq-ad--header {
	margin-block: 1.25rem;
	min-height: 100px;
}

.aq-ad--incontent {
	margin-block: 2rem;
	min-height: 280px;
}

.aq-ad--footer {
	margin-block: 2rem;
	min-height: 280px;
}

.aq-ad--sidebar {
	min-height: 250px;
}

@media (min-width: 768px) {
	.aq-ad--header {
		min-height: 90px;
	}
	.aq-ad--incontent,
	.aq-ad--footer {
		min-height: 250px;
	}
}

/* ==========================================================================
   16. Footer
   --------------------------------------------------------------------------
   Ink ground. The kit is explicit that teal and steel disappear here (1.72:1
   and 2.42:1), so links are gold and body text is cream.
   ========================================================================== */

.aq-footer {
	margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	background: var(--aq-ink);
	color: var(--aq-cream);
}

.aq-footer__rule {
	height: 3px;
	background: var(--aq-horizon);
}

.aq-footer__top {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	padding-block: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
}

.aq-footer a {
	color: var(--aq-gold); /* 11.62:1 on ink */
	text-decoration: none;
}

.aq-footer a:hover,
.aq-footer a:focus {
	color: var(--aq-gold-warm);
	text-decoration: underline;
}

.aq-footer h2,
.aq-footer h3,
.aq-footer .aq-widget__title {
	color: var(--aq-cream);
	border-bottom-color: rgba(253, 248, 236, 0.16);
}

.aq-footer .aq-widget__title {
	font-size: 0.95rem;
}

.aq-footer .aq-widget li {
	border-bottom-color: rgba(253, 248, 236, 0.1);
}

.aq-footer .aq-widget li a,
.aq-footer .aq-compact__title a {
	color: var(--aq-cream);
}

.aq-footer .aq-widget li a:hover,
.aq-footer .aq-widget li a:focus,
.aq-footer .aq-compact__title a:hover,
.aq-footer .aq-compact__title a:focus {
	color: var(--aq-gold);
}

.aq-footer .aq-meta {
	color: var(--aq-sand);
}

.aq-footer .aq-thumb {
	background: rgba(253, 248, 236, 0.08);
}

.aq-footer__logo {
	height: 40px;
	width: auto;
	margin-bottom: 1rem;
}

.aq-footer__about {
	font-size: 0.9375rem;
	line-height: 1.75;
	color: rgba(253, 248, 236, 0.86);
}

.aq-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	padding-block: 1.25rem;
	border-top: 1px solid rgba(253, 248, 236, 0.14);
	font-family: var(--aq-ui);
	font-size: 0.8125rem;
	color: rgba(253, 248, 236, 0.78);
}

.aq-footer__bottom p {
	margin: 0;
}

.aq-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* -- Social icon row (header and footer) ----------------------------------- */

.aq-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aq-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--aq-steel);
	transition: background var(--aq-speed) var(--aq-ease), color var(--aq-speed) var(--aq-ease);
}

.aq-social a:hover,
.aq-social a:focus {
	background: var(--aq-page-alt);
	color: var(--aq-teal);
}

.aq-social svg {
	width: 17px;
	height: 17px;
}

.aq-footer .aq-social a {
	background: rgba(253, 248, 236, 0.08);
	color: var(--aq-cream);
}

.aq-footer .aq-social a:hover,
.aq-footer .aq-social a:focus {
	background: var(--aq-gold);
	color: var(--aq-ink);
}

/* Back to top */
.aq-totop {
	position: fixed;
	right: clamp(0.75rem, 2vw, 1.5rem);
	bottom: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--aq-line);
	border-radius: 50%;
	background: var(--aq-paper);
	color: var(--aq-navy);
	box-shadow: var(--aq-shadow-sm);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--aq-speed) var(--aq-ease), transform var(--aq-speed) var(--aq-ease), visibility var(--aq-speed);
}

.aq-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.aq-totop svg {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   17. 404, search results, empty states
   ========================================================================== */

.aq-nothing {
	padding: clamp(2rem, 1.4rem + 2vw, 3.5rem) 0;
	text-align: center;
}

.aq-nothing__mark {
	width: clamp(96px, 18vw, 150px);
	height: auto;
	margin: 0 auto 1.5rem;
	color: var(--aq-line);
}

.aq-nothing h1,
.aq-nothing h2 {
	margin-bottom: 0.75rem;
}

.aq-nothing p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--aq-deep);
}

.aq-nothing .aq-search-form {
	max-width: 460px;
	margin: 1.75rem auto 0;
}

.aq-nothing__links {
	margin-top: 2.5rem;
	text-align: left;
}

/* ==========================================================================
   18. Utilities
   ========================================================================== */

.aq-band {
	background: var(--aq-page-alt);
	border-block: 1px solid var(--aq-line-soft);
}

.aq-stack > * + * {
	margin-top: 1rem;
}

.aq-hidden {
	display: none !important;
}

@media (max-width: 900px) {
	.aq-hide-lg {
		display: none !important;
	}
}

@media (min-width: 901px) {
	.aq-hide-sm {
		display: none !important;
	}
}

@media (max-width: 560px) {
	.aq-hide-xs {
		display: none !important;
	}
}

/* Line clamping for card titles in tight grids. */
.aq-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

/* ==========================================================================
   19. Responsive adjustments
   ========================================================================== */

@media (max-width: 900px) {
	.aq-navbar__inner {
		min-height: 52px;
	}

	.aq-nav--primary {
		display: none;
	}

	.aq-navbar .aq-brand {
		gap: 0.5rem;
	}

	.aq-navbar__brand .aq-brand__logo {
		height: 28px;
	}
}

@media (min-width: 901px) {
	/* The compact logo in the sticky bar is only needed once the masthead has
	   scrolled past, and it would duplicate it otherwise. */
	.aq-navbar__brand {
		display: none;
	}

	.aq-drawer {
		display: none;
	}
}

@media (max-width: 480px) {
	.aq-compact {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.aq-list--numbered .aq-compact {
		grid-template-columns: 1.3rem 64px minmax(0, 1fr);
	}

	.aq-topbar__inner {
		justify-content: center;
	}
}

/* Very wide screens: let the grid breathe rather than stretch two cards. */
@media (min-width: 1400px) {
	:root {
		--aq-wrap: 1200px;
	}
}

/* ==========================================================================
   20. Forced colours / high contrast
   ========================================================================== */

@media (forced-colors: active) {
	.aq-cat,
	.aq-btn,
	.aq-pagination .page-numbers.current {
		forced-color-adjust: none;
		border: 1px solid ButtonText;
	}

	.aq-section-head::after,
	.aq-widget__title::after,
	.aq-page-head__rule,
	.aq-footer__rule {
		background: CanvasText;
	}
}