/*!
Theme Name: Eye Opener Quotes
Theme URI: https://www.eyeopenerquotes.com/
Author: Wisdom Healing Center
Author URI: https://www.wisdomhealingcenter.com/
Description: A fast, accessible magazine theme built for eyeopenerquotes.com. Square-first layouts for quote artwork, a latest-posts home page, self-hosted fonts, CLS-safe AdSense slots and no page builder anywhere. Colours and type come from the Eye Opener Quotes brand kit, with every contrast ratio measured rather than guessed.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eye-opener-quotes
Tags: blog, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* ==========================================================================
   Contents
   --------------------------------------------------------------------------
   01  Fonts
   02  Tokens
   03  Reset and base
   04  Utilities
   05  Header and navigation
   06  Layout
   07  Section heads and pills
   08  Cards, the lead story and the loop
   09  Single posts and prose
   10  Sidebar and widgets
   11  Footer
   12  Comments
   13  Pagination, breadcrumbs and page heads
   14  Advertising slots
   15  404
   16  Motion, print and forced colours
   ========================================================================== */


/* 01  Fonts ================================================================
   Self-hosted, latin and latin-ext only. An English quotes site never reaches
   the Cyrillic or Vietnamese ranges, and unicode-range means the ext subset is
   only fetched if a page actually contains one of those characters.

   Inter is the variable release, so 400 through 700 arrive in one 48KB file.
   Poppins has no variable release, so 600 and 700 are separate. The theme
   never asks for a weight it has not shipped, which is what stops a browser
   synthesising a smeared fake bold.
   ========================================================================== */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('assets/fonts/inter-latin-var.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 02  Tokens ===============================================================
   Straight from "Eye Opener Quotes Tokens.css". Every colour was measured off
   the logo artwork and every contrast ratio in a comment was computed, not
   estimated.

   The one rule worth reading first: the brand's loudest colours are FILLS.
   --gold, --orange, --red and --pink all fail AA as text, and --red fails as a
   button in both directions. Their *-ink partners are the text-safe versions.

   The page ground here is white rather than the brand's cream, by request.
   Cream stays as the tint on the nav bar, the sidebar panels and the quote
   blocks, which is where it does its work without lowering contrast anywhere.
   ========================================================================== */

:root {
	/* Ground and surface. */
	--eoq-ink: #1B191C;          /* 17.46 on white */
	--eoq-ink-soft: #3A3439;     /* 12.14 on white */
	--eoq-slate: #5B5259;        /* 7.51 on white — meta, captions, bylines */
	--eoq-cream: #F6EEE1;        /* the badge field; tints only on this site */
	--eoq-cream-deep: #EFE3D0;
	--eoq-paper: #FFFFFF;
	--eoq-line: #E6DCCB;         /* hairlines on cream */
	--eoq-line-soft: #ECE7E0;    /* hairlines on white */

	/* Scenery. */
	--eoq-sand: #DEC1A5;
	--eoq-sand-deep: #B8895F;

	/* The wordmark gradient. Fill only, both ends. */
	--eoq-gold: #F7CE4C;         /* 1.51 on white — FILL ONLY */
	--eoq-gold-deep: #E0961E;    /* 2.46 on white — FILL ONLY */
	--eoq-gold-ink: #8A5A05;     /* 5.92 on white — the text-safe gold */
	--eoq-orange: #F5922F;       /* 2.32 on white — FILL ONLY */
	--eoq-orange-deep: #D4700F;  /* 3.43 on white — large text only */
	--eoq-orange-ink: #A24E00;   /* 5.79 on white — the text-safe orange */

	/* The garden. */
	--eoq-red: #EA2728;          /* 4.36 on white — FILL ONLY, never a button */
	--eoq-red-deep: #9E171B;     /* 8.10 under white labels */
	--eoq-red-darker: #7E1216;
	--eoq-pink: #F08CBE;
	--eoq-pink-deep: #8E2E63;
	--eoq-leaf: #3B5A2C;
	--eoq-leaf-deep: #22391D;

	/* Semantic roles. */
	--eoq-bg: var(--eoq-paper);
	--eoq-text: var(--eoq-ink);
	--eoq-text-muted: var(--eoq-slate);
	--eoq-border: var(--eoq-line-soft);
	--eoq-link: var(--eoq-orange-ink);
	--eoq-link-hover: var(--eoq-red-deep);
	--eoq-action: var(--eoq-red-deep);
	--eoq-action-text: var(--eoq-paper);
	--eoq-action-hover: var(--eoq-red-darker);
	--eoq-accent: var(--eoq-gold);

	/* Focus. --eoq-orange-deep is only 3.43 on white and 2.98 on cream, which
	   is under the 3:1 a focus indicator needs on the cream panels. Red-deep
	   clears it on both grounds (8.10 and 7.03), so it is the ring everywhere
	   except the ink footer, where gold takes over at 11.55. */
	--eoq-focus: var(--eoq-red-deep);

	/* On ink: cream, gold or sand only. Every green in the palette collapses
	   below 2.3 on this ground and red is large-display at best. */
	--eoq-on-ink: var(--eoq-cream);        /* 15.17 */
	--eoq-on-ink-muted: var(--eoq-sand);   /* 10.21 */
	--eoq-on-ink-link: var(--eoq-gold);    /* 11.55 */

	/* Type. Poppins is the closest widely-available face to the "Quotes"
	   lettering — geometric, round bowls, wide-set. The "Eye Opener" script has
	   no font equivalent and ships as outlines in the logo; it is never re-set
	   in a typeface anywhere on this site. */
	--eoq-font-display: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--eoq-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

	--eoq-size-xs: 0.75rem;
	--eoq-size-sm: 0.8125rem;
	--eoq-size-md: 0.9375rem;
	--eoq-size-base: 1.0625rem;
	--eoq-size-lg: 1.1875rem;
	--eoq-size-xl: 1.375rem;
	--eoq-size-2xl: 1.75rem;
	--eoq-size-3xl: 2.25rem;
	--eoq-size-4xl: 3rem;

	--eoq-leading-tight: 1.2;
	--eoq-leading-snug: 1.35;
	--eoq-leading-body: 1.68;
	--eoq-tracking-label: 0.12em;   /* "Quotes" is set very wide — echo it */

	/* Space. */
	--eoq-space-1: 0.25rem;
	--eoq-space-2: 0.5rem;
	--eoq-space-3: 0.75rem;
	--eoq-space-4: 1rem;
	--eoq-space-5: 1.5rem;
	--eoq-space-6: 2rem;
	--eoq-space-7: 3rem;
	--eoq-space-8: 4.5rem;

	--eoq-radius-sm: 6px;
	--eoq-radius: 12px;
	--eoq-radius-lg: 20px;
	--eoq-radius-full: 999px;    /* the badge is a circle; pills sit with it */

	--eoq-shadow-sm: 0 1px 2px rgba(27, 25, 28, 0.06);
	--eoq-shadow: 0 2px 10px rgba(27, 25, 28, 0.09);
	--eoq-shadow-lg: 0 14px 34px rgba(27, 25, 28, 0.14);

	--eoq-wrap: 1200px;
	--eoq-gutter: 1.25rem;
	--eoq-sidebar: 320px;
	--eoq-navbar-h: 52px;
}


/* 03  Reset and base ====================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;

	/* Anchors and the sticky nav: without this, jumping to #comments parks the
	   heading underneath the bar. */
	scroll-padding-top: calc(var(--eoq-navbar-h) + 1rem);
}

body {
	margin: 0;
	background: var(--eoq-bg);
	color: var(--eoq-text);
	font-family: var(--eoq-font-body);
	font-size: var(--eoq-size-base);
	line-height: var(--eoq-leading-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--eoq-space-3);
	font-family: var(--eoq-font-display);
	font-weight: 600;
	line-height: var(--eoq-leading-tight);
	letter-spacing: -0.01em;
	color: var(--eoq-ink);
}

p,
ul,
ol,
dl,
figure,
blockquote,
pre,
table {
	margin: 0 0 var(--eoq-space-4);
}

a {
	color: var(--eoq-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--eoq-link-hover);
}

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

img {
	display: block;
}

/* The whole archive is square artwork with the words inside the frame, so a
   crop is never allowed to slice a sentence: every media box holds 1:1 and the
   image is contained inside it. */
figure {
	margin-inline: 0;
}

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

button {
	cursor: pointer;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: var(--eoq-space-2) var(--eoq-space-3);
	border-bottom: 1px solid var(--eoq-border);
	text-align: left;
}

hr {
	height: 1px;
	margin: var(--eoq-space-6) 0;
	border: 0;
	background: var(--eoq-border);
}

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

/* Only the elements that genuinely have no visible focus of their own get the
   ring removed on mouse click; keyboard focus always shows. */
:focus:not(:focus-visible) {
	outline: none;
}

::selection {
	background: var(--eoq-gold);
	color: var(--eoq-ink);
}


/* 04  Utilities =========================================================== */

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

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

.screen-reader-text:focus {
	z-index: 100000;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	background: var(--eoq-ink);
	color: var(--eoq-cream);
	border-radius: var(--eoq-radius-sm);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	text-decoration: none;
	white-space: normal;
}

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

.eoq-icon {
	flex: none;
	display: block;
	fill: currentColor;
}

.eoq-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--eoq-space-2);
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-action);
	color: var(--eoq-action-text);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.eoq-btn:hover,
.eoq-btn:focus {
	background: var(--eoq-action-hover);
	color: var(--eoq-action-text);
}

.eoq-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--eoq-radius-full);
	background: transparent;
	color: var(--eoq-ink);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eoq-icon-btn:hover {
	background: var(--eoq-cream);
	color: var(--eoq-red-deep);
}

.eoq-icon-btn__close,
.eoq-icon-btn[aria-expanded='true'] .eoq-icon-btn__open {
	display: none;
}

.eoq-icon-btn[aria-expanded='true'] .eoq-icon-btn__close {
	display: block;
}


/* 05  Header and navigation =============================================== */

.eoq-header {
	position: relative;
	z-index: 40;
	background: var(--eoq-paper);
}

.eoq-header__top {
	border-bottom: 1px solid var(--eoq-line-soft);
}

.eoq-header__inner {
	display: flex;
	align-items: center;
	gap: var(--eoq-space-3);
	min-height: 76px;
	padding-block: var(--eoq-space-3);
}

.eoq-branding {
	flex: 1 1 auto;
	min-width: 0;
}

.eoq-logo,
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}

/* The brand kit puts a floor under the horizontal lockup at 180px wide, which
   at its 2853.8 x 1024 proportions is 65px tall. Below that "Quotes" closes
   up, so the header never goes under it — it uses the icon instead, and there
   is no width in this design where that is needed. */
.eoq-logo img,
.custom-logo {
	width: auto;
	height: 52px;
	min-width: 145px;
}

.eoq-header__actions {
	display: flex;
	align-items: center;
	gap: var(--eoq-space-2);
}

.eoq-social {
	display: flex;
	align-items: center;
	gap: 2px;
}

.eoq-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--eoq-radius-full);
	color: var(--eoq-ink-soft);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eoq-social__link:hover,
.eoq-social__link:focus {
	background: var(--eoq-cream);
	color: var(--eoq-red-deep);
}

.eoq-nav-toggle {
	display: none;
}

/* -- the menu bar -- */

.eoq-navbar {
	position: relative;
	z-index: 30;
	background: var(--eoq-cream);
	border-bottom: 1px solid var(--eoq-line);
}

.eoq-navbar--sticky {
	position: sticky;
	top: 0;
}

.eoq-navbar__inner {
	display: flex;
	align-items: center;
	min-height: var(--eoq-navbar-h);
}

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

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

.eoq-nav__list > li {
	position: relative;
}

.eoq-nav__link {
	display: block;
	padding: 0.9rem var(--eoq-space-3);
	color: var(--eoq-ink);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.eoq-nav__list > li > .eoq-nav__link {
	position: relative;
}

/* The current item is marked twice — colour and a gold rule — so it does not
   depend on colour alone. */
.eoq-nav__list > li > .eoq-nav__link::after {
	content: '';
	position: absolute;
	inset-inline: var(--eoq-space-3);
	bottom: 0;
	height: 3px;
	background: transparent;
	border-radius: 3px 3px 0 0;
}

.eoq-nav__link:hover,
.eoq-nav__link:focus {
	color: var(--eoq-red-deep);
}

.eoq-nav__list > .current-menu-item > .eoq-nav__link,
.eoq-nav__list > .current-menu-ancestor > .eoq-nav__link,
.eoq-nav__list > .current-menu-parent > .eoq-nav__link {
	color: var(--eoq-red-deep);
}

.eoq-nav__list > .current-menu-item > .eoq-nav__link::after,
.eoq-nav__list > .current-menu-ancestor > .eoq-nav__link::after,
.eoq-nav__list > .current-menu-parent > .eoq-nav__link::after {
	background: var(--eoq-gold);
}

.eoq-submenu-toggle {
	position: absolute;
	top: 50%;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--eoq-radius-full);
	background: transparent;
	color: var(--eoq-ink-soft);
	transform: translateY(-50%);
}

.eoq-submenu-toggle .eoq-icon {
	transition: transform 0.18s ease;
}

.eoq-nav--open > .eoq-submenu-toggle .eoq-icon,
li:hover > .eoq-submenu-toggle .eoq-icon {
	transform: rotate(180deg);
}

.menu-item-has-children > .eoq-nav__link {
	padding-right: 1.65rem;
}

/* -- dropdowns -- */

.eoq-nav__sub {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	display: block;
	min-width: 220px;
	margin: 0;
	padding: var(--eoq-space-2) 0;
	background: var(--eoq-paper);
	border: 1px solid var(--eoq-line);
	border-radius: 0 0 var(--eoq-radius) var(--eoq-radius);
	box-shadow: var(--eoq-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.eoq-nav__sub .eoq-nav__link {
	padding: 0.55rem var(--eoq-space-4);
	white-space: normal;
}

.eoq-nav__sub .eoq-nav__sub {
	top: 0;
	left: 100%;
	border-radius: var(--eoq-radius);
}

.eoq-nav__list li:hover > .eoq-nav__sub,
.eoq-nav__list li:focus-within > .eoq-nav__sub,
.eoq-nav__list li.eoq-nav--open > .eoq-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* -- the search panel -- */

.eoq-search-panel {
	display: none;
	padding: var(--eoq-space-5) 0;
	background: var(--eoq-paper);
	border-bottom: 1px solid var(--eoq-line);
	box-shadow: var(--eoq-shadow);
}

.eoq-search-panel.is-open {
	display: block;
}

.eoq-searchform {
	display: flex;
	align-items: stretch;
	gap: var(--eoq-space-2);
	max-width: 560px;
	margin-inline: auto;
}

.eoq-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0.65rem 1rem;
	border: 1px solid var(--eoq-line);
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-paper);
	font-size: var(--eoq-size-base);
}

.eoq-searchform__field:focus {
	border-color: var(--eoq-orange-ink);
}

.eoq-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border: 0;
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-action);
	color: var(--eoq-action-text);
	transition: background-color 0.15s ease;
}

.eoq-searchform__submit:hover,
.eoq-searchform__submit:focus {
	background: var(--eoq-action-hover);
}


/* 06  Layout ============================================================== */

.eoq-site {
	min-height: 40vh;
}

.eoq-main {
	display: block;
	padding-block: var(--eoq-space-6) var(--eoq-space-7);
}

.eoq-main:focus {
	outline: none;
}

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

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

.eoq-section + .eoq-section {
	margin-top: var(--eoq-space-7);
}


/* 07  Section heads and pills ============================================= */

.eoq-section-head {
	display: flex;
	align-items: center;
	gap: var(--eoq-space-4);
	margin-bottom: var(--eoq-space-5);
}

.eoq-section-head__title {
	position: relative;
	margin: 0;
	padding-left: 0.85rem;
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
	color: var(--eoq-ink);
}

/* The gold marker is the badge's own accent doing the one job it is safe for:
   a fill, never type. */
.eoq-section-head__title::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 1.05em;
	background: var(--eoq-gold);
	border-radius: 2px;
	transform: translateY(-50%);
}

.eoq-section-head::after {
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--eoq-border);
}

.eoq-section-head__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	order: 3;
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-sm);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.eoq-pill {
	display: inline-block;
	margin-bottom: var(--eoq-space-2);
	padding: 0.28rem 0.7rem;
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-ink);
	color: var(--eoq-cream);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-xs);
	font-weight: 600;
	letter-spacing: var(--eoq-tracking-label);
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.eoq-pill:hover,
.eoq-pill:focus {
	background: var(--eoq-red-deep);
	color: var(--eoq-paper);
}

.eoq-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-sm);
	line-height: 1.5;
}

.eoq-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.eoq-meta a {
	color: inherit;
	text-decoration: none;
}

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

.eoq-meta__sep {
	color: var(--eoq-line);
}

.eoq-avatar {
	border-radius: var(--eoq-radius-full);
}

.eoq-avatar--md {
	width: 72px;
	height: 72px;
}

.eoq-avatar--lg {
	width: 96px;
	height: 96px;
}


/* 08  Cards, the lead story and the loop ================================== */

.eoq-media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;    /* reserved before the artwork lands: no shift */
	background: var(--eoq-cream);
	border-radius: var(--eoq-radius);
	text-decoration: none;
}

.eoq-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

/* No zoom on hover anywhere in this theme. The picture *is* the quote — a
   scale transform crops the words off its own edges. The card lifts instead. */
.eoq-card:hover .eoq-media img,
.eoq-lead:hover .eoq-media img {
	opacity: 0.92;
}

.eoq-media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--eoq-sand-deep);
}

.eoq-loop {
	display: grid;
	gap: var(--eoq-space-6);
}

.eoq-loop--list {
	gap: 0;
}

.eoq-loop--list > .eoq-card + .eoq-card {
	margin-top: var(--eoq-space-5);
	padding-top: var(--eoq-space-5);
	border-top: 1px solid var(--eoq-border);
}

.eoq-card--list {
	display: grid;
	grid-template-columns: minmax(104px, 30%) 1fr;
	gap: var(--eoq-space-4);
	align-items: start;
}

.eoq-card--list.eoq-card--no-media {
	grid-template-columns: 1fr;
}

.eoq-card--list.eoq-card--no-media .eoq-media {
	display: none;
}

.eoq-card__body {
	min-width: 0;
}

.eoq-card__title {
	margin: 0 0 var(--eoq-space-2);
	font-size: var(--eoq-size-lg);
	line-height: var(--eoq-leading-snug);
}

.eoq-card__title a {
	color: var(--eoq-ink);
	text-decoration: none;
}

.eoq-card__title a:hover,
.eoq-card__title a:focus {
	color: var(--eoq-red-deep);
}

.eoq-card__excerpt {
	margin-top: var(--eoq-space-2);
	color: var(--eoq-ink-soft);
	font-size: var(--eoq-size-md);
}

.eoq-card__excerpt p {
	margin: 0;
}

/* 190px is chosen against the real column, not by eye: the article column is
   768px once the sidebar and gutters come out of the 1200px wrap, and at 240px
   that fitted only two cards across — a 380px square of artwork per card, which
   made an archive read like a gallery. 190 fits three. */
.eoq-loop--grid {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.eoq-card--grid .eoq-card__body {
	padding-top: var(--eoq-space-3);
}

.eoq-card--grid .eoq-card__title {
	font-size: var(--eoq-size-base);
}

/* -- the lead story -- */

.eoq-lead {
	display: grid;
	gap: var(--eoq-space-5);
	margin-bottom: var(--eoq-space-7);
	padding-bottom: var(--eoq-space-6);
	border-bottom: 3px solid var(--eoq-cream);
}

.eoq-lead__title {
	margin-bottom: var(--eoq-space-3);
	font-size: var(--eoq-size-2xl);
	font-weight: 700;
	line-height: var(--eoq-leading-tight);
}

.eoq-lead__title a {
	color: var(--eoq-ink);
	text-decoration: none;
}

.eoq-lead__title a:hover,
.eoq-lead__title a:focus {
	color: var(--eoq-red-deep);
}

.eoq-lead__excerpt {
	margin-top: var(--eoq-space-3);
	color: var(--eoq-ink-soft);
}

.eoq-lead__excerpt p {
	margin: 0;
}

.eoq-lead__more {
	margin-top: var(--eoq-space-4);
}

.eoq-lead .eoq-meta__author img {
	width: 32px;
	height: 32px;
}


/* 09  Single posts and prose ============================================== */

.eoq-single {
	margin-bottom: var(--eoq-space-6);
}

.eoq-single__head {
	margin-bottom: var(--eoq-space-5);
}

.eoq-single__title {
	margin-bottom: var(--eoq-space-3);
	font-size: var(--eoq-size-3xl);
	font-weight: 700;
	line-height: 1.15;
}

/* The artwork is the point of the page. It is capped at its own 600px so it
   is never upscaled, centred, and given its square box up front so nothing
   below it moves when it arrives. */
.eoq-single__art {
	max-width: 600px;
	margin: 0 auto var(--eoq-space-6);
}

.eoq-single__art img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--eoq-radius);
	background: var(--eoq-cream);
}

.eoq-single__caption {
	margin-top: var(--eoq-space-2);
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-sm);
	text-align: center;
}

.eoq-prose {
	max-width: 68ch;
	font-size: var(--eoq-size-base);
}

.eoq-prose > * {
	margin-bottom: var(--eoq-space-5);
}

.eoq-prose h2 {
	margin-top: var(--eoq-space-6);
	font-size: var(--eoq-size-xl);
}

.eoq-prose h3 {
	margin-top: var(--eoq-space-5);
	font-size: var(--eoq-size-lg);
}

.eoq-prose img {
	height: auto;
	border-radius: var(--eoq-radius);
}

.eoq-prose a {
	text-decoration: underline;
}

/* Posts here open with the quote itself, set bold. Giving that first run of
   bold paragraphs a little more air and a cream rule beside it separates the
   quotation from the commentary underneath without touching the content. */
.eoq-prose blockquote {
	margin-inline: 0;
	padding: var(--eoq-space-4) var(--eoq-space-5);
	background: var(--eoq-cream);
	border-left: 4px solid var(--eoq-gold);
	border-radius: 0 var(--eoq-radius) var(--eoq-radius) 0;
	font-size: var(--eoq-size-lg);
}

.eoq-prose blockquote p:last-child {
	margin-bottom: 0;
}

.eoq-prose ul,
.eoq-prose ol {
	padding-left: 1.4rem;
}

.eoq-prose li + li {
	margin-top: var(--eoq-space-2);
}

.eoq-prose code,
.eoq-prose pre {
	background: var(--eoq-cream);
	border-radius: var(--eoq-radius-sm);
	font-size: 0.9em;
}

.eoq-prose code {
	padding: 0.15em 0.4em;
}

.eoq-prose pre {
	padding: var(--eoq-space-4);
	overflow-x: auto;
}

.eoq-prose .wp-caption,
.eoq-prose figure {
	max-width: 100%;
}

.eoq-prose figcaption,
.eoq-prose .wp-caption-text {
	margin-top: var(--eoq-space-2);
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-sm);
	text-align: center;
}

.alignleft {
	float: left;
	margin: 0 var(--eoq-space-5) var(--eoq-space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--eoq-space-4) var(--eoq-space-5);
}

.aligncenter {
	margin-inline: auto;
}

.alignwide,
.alignfull {
	max-width: 100%;
}

.eoq-embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--eoq-radius);
	background: var(--eoq-cream);
}

.eoq-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.eoq-more__link {
	font-family: var(--eoq-font-display);
	font-weight: 600;
}

.eoq-single__foot {
	margin-top: var(--eoq-space-6);
	padding-top: var(--eoq-space-5);
	border-top: 1px solid var(--eoq-border);
}

.eoq-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eoq-space-2);
	margin-bottom: var(--eoq-space-5);
}

.eoq-tags__label {
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-xs);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
	color: var(--eoq-text-muted);
}

.eoq-tag {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	border: 1px solid var(--eoq-line);
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-cream);
	color: var(--eoq-ink-soft);
	font-size: var(--eoq-size-sm);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eoq-tag:hover,
.eoq-tag:focus {
	background: var(--eoq-ink);
	color: var(--eoq-cream);
}

.eoq-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eoq-space-3);
}

.eoq-share__label {
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-xs);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
	color: var(--eoq-text-muted);
}

.eoq-share__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eoq-space-2);
}

.eoq-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--eoq-line);
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-paper);
	color: var(--eoq-ink-soft);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.eoq-share__link:hover,
.eoq-share__link:focus {
	background: var(--eoq-ink);
	border-color: var(--eoq-ink);
	color: var(--eoq-cream);
}

.eoq-share__copy.is-copied {
	background: var(--eoq-leaf);
	border-color: var(--eoq-leaf);
	color: var(--eoq-paper);
}

/* -- author box, post navigation -- */

.eoq-authorbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--eoq-space-4);
	align-items: start;
	margin-bottom: var(--eoq-space-6);
	padding: var(--eoq-space-5);
	background: var(--eoq-cream);
	border-radius: var(--eoq-radius-lg);
}

.eoq-authorbox__kicker {
	display: block;
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-xs);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
	color: var(--eoq-slate);
}

.eoq-authorbox__name {
	margin: 0.15rem 0 var(--eoq-space-2);
	font-size: var(--eoq-size-lg);
}

.eoq-authorbox__name a {
	color: var(--eoq-ink);
	text-decoration: none;
}

.eoq-authorbox__bio {
	margin: 0;
	color: var(--eoq-ink-soft);
	font-size: var(--eoq-size-md);
}

.eoq-post-nav {
	display: grid;
	gap: var(--eoq-space-3);
	margin-bottom: var(--eoq-space-7);
}

.eoq-post-nav__link {
	display: block;
	padding: var(--eoq-space-4);
	border: 1px solid var(--eoq-border);
	border-radius: var(--eoq-radius);
	text-decoration: none;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.eoq-post-nav__link:hover,
.eoq-post-nav__link:focus {
	background: var(--eoq-cream);
	border-color: var(--eoq-line);
}

.eoq-post-nav__label {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-xs);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
	color: var(--eoq-orange-ink);
}

.eoq-post-nav__title {
	display: block;
	color: var(--eoq-ink);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
	line-height: var(--eoq-leading-snug);
}

.eoq-post-nav__link--next {
	text-align: right;
}

.eoq-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eoq-space-2);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
}

.eoq-page-links a,
.eoq-page-links > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 0.5rem;
	border: 1px solid var(--eoq-border);
	border-radius: var(--eoq-radius-sm);
	text-decoration: none;
}


/* 10  Sidebar and widgets ================================================= */

.eoq-sidebar {
	min-width: 0;
}

.eoq-widget {
	margin-bottom: var(--eoq-space-5);
	padding: var(--eoq-space-5);
	background: var(--eoq-cream);
	border-radius: var(--eoq-radius-lg);
}

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

.eoq-widget__title {
	position: relative;
	margin: 0 0 var(--eoq-space-4);
	padding-left: 0.85rem;
	font-size: var(--eoq-size-md);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
}

.eoq-widget__title::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 4px;
	height: 1.05em;
	background: var(--eoq-gold);
	border-radius: 2px;
	transform: translateY(-50%);
}

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

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

.eoq-widget a {
	color: var(--eoq-ink);
	text-decoration: none;
}

.eoq-widget a:hover,
.eoq-widget a:focus {
	color: var(--eoq-red-deep);
	text-decoration: underline;
}

.eoq-widget select,
.eoq-widget input[type='text'],
.eoq-widget input[type='email'],
.eoq-widget input[type='search'] {
	width: 100%;
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--eoq-line);
	border-radius: var(--eoq-radius-sm);
	background: var(--eoq-paper);
}

.eoq-minilist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.eoq-minilist__item {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--eoq-space-3);
	align-items: center;
}

.eoq-minilist__item + .eoq-minilist__item {
	margin-top: var(--eoq-space-3);
	padding-top: var(--eoq-space-3);
	border-top: 1px solid var(--eoq-line);
}

.eoq-media--mini {
	border-radius: var(--eoq-radius-sm);
}

.eoq-minilist__title {
	display: block;
	color: var(--eoq-ink);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
	line-height: var(--eoq-leading-snug);
	text-decoration: none;
}

.eoq-minilist__date {
	display: block;
	margin-top: 0.2rem;
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-xs);
}

.eoq-topics {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eoq-space-2);
}

.eoq-topics__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--eoq-line);
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-paper);
	color: var(--eoq-ink);
	font-size: var(--eoq-size-sm);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.eoq-topics__item:hover,
.eoq-topics__item:focus {
	background: var(--eoq-ink);
	color: var(--eoq-cream);
	text-decoration: none;
}

.eoq-topics__count {
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-xs);
	font-variant-numeric: tabular-nums;
}

.eoq-topics__item:hover .eoq-topics__count,
.eoq-topics__item:focus .eoq-topics__count {
	color: var(--eoq-sand);
}

.eoq-about {
	text-align: center;
}

.eoq-about__mark {
	width: 96px;
	height: 96px;
	margin: 0 auto var(--eoq-space-3);
}

.eoq-about__text {
	margin: 0 0 var(--eoq-space-3);
	color: var(--eoq-ink-soft);
	font-size: var(--eoq-size-md);
}

.eoq-social--stack {
	justify-content: center;
}


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

/* The garden band from the badge, drawn out into a divider.
   Tiled rather than stretched: the artwork is 1600x300 of sixteen tulips, and
   at full page width that is 225px tall — far too much for a rule. Sizing it
   by height and repeating it keeps every flower its own shape at any viewport,
   which cropping to a 64px strip did not: that showed nothing but leaves.
   The image URL is set inline from the theme URI in footer.php. */
.eoq-band {
	height: 88px;
	background-color: var(--eoq-cream);
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: auto 88px;
}

.eoq-footer {
	padding-block: var(--eoq-space-7) var(--eoq-space-5);
	background: var(--eoq-ink);
	color: var(--eoq-on-ink);
}

.eoq-footer__top {
	display: grid;
	gap: var(--eoq-space-6);
	padding-bottom: var(--eoq-space-6);
}

.eoq-footer__brand .eoq-logo img {
	height: 60px;
	margin-bottom: var(--eoq-space-4);
}

.eoq-footer__tagline {
	max-width: 40ch;
	margin: 0 0 var(--eoq-space-4);
	color: var(--eoq-on-ink-muted);
	font-size: var(--eoq-size-md);
}

.eoq-footer a {
	color: var(--eoq-on-ink-link);
}

.eoq-footer a:hover,
.eoq-footer a:focus {
	color: var(--eoq-paper);
}

.eoq-footer :focus-visible {
	outline-color: var(--eoq-gold);
}

.eoq-social--footer .eoq-social__link {
	color: var(--eoq-on-ink-muted);
}

.eoq-social--footer .eoq-social__link:hover,
.eoq-social--footer .eoq-social__link:focus {
	background: rgba(246, 238, 225, 0.1);
	color: var(--eoq-gold);
}

.eoq-footer__widgets {
	display: grid;
	gap: var(--eoq-space-6);
}

.eoq-footer .eoq-widget {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
}

.eoq-footer .eoq-widget__title {
	color: var(--eoq-on-ink);
}

.eoq-footer .eoq-widget a {
	color: var(--eoq-on-ink-link);
}

.eoq-footer .eoq-widget a:hover,
.eoq-footer .eoq-widget a:focus {
	color: var(--eoq-paper);
}

.eoq-footer .eoq-widget li + li {
	border-top-color: rgba(246, 238, 225, 0.14);
}

.eoq-footer .eoq-minilist__title {
	color: var(--eoq-on-ink);
}

.eoq-footer .eoq-minilist__date,
.eoq-footer .eoq-topics__count {
	color: var(--eoq-on-ink-muted);
}

.eoq-footer .eoq-topics__item {
	background: rgba(246, 238, 225, 0.06);
	border-color: rgba(246, 238, 225, 0.18);
	color: var(--eoq-on-ink);
}

.eoq-footer .eoq-topics__item:hover,
.eoq-footer .eoq-topics__item:focus {
	background: var(--eoq-gold);
	border-color: var(--eoq-gold);
	color: var(--eoq-ink);
}

.eoq-colophon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--eoq-space-3);
	padding-top: var(--eoq-space-5);
	border-top: 1px solid rgba(246, 238, 225, 0.16);
	color: var(--eoq-on-ink-muted);
	font-size: var(--eoq-size-sm);
}

.eoq-colophon p {
	margin: 0;
}

.eoq-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--eoq-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.eoq-footer-nav a {
	text-decoration: none;
}

.eoq-to-top {
	position: fixed;
	z-index: 50;
	right: 1rem;
	bottom: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-ink);
	color: var(--eoq-cream);
	box-shadow: var(--eoq-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.eoq-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}


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

.eoq-comments {
	margin-top: var(--eoq-space-7);
	padding-top: var(--eoq-space-6);
	border-top: 1px solid var(--eoq-border);
}

.eoq-comments__list,
.eoq-comments__list .children {
	margin: 0 0 var(--eoq-space-6);
	padding: 0;
	list-style: none;
}

.eoq-comments__list .children {
	margin: var(--eoq-space-4) 0 0;
	padding-left: var(--eoq-space-5);
	border-left: 2px solid var(--eoq-cream);
}

.eoq-comment {
	padding: var(--eoq-space-4) 0;
}

.eoq-comments__list > li + li {
	border-top: 1px solid var(--eoq-border);
}

.eoq-comment__head {
	display: flex;
	align-items: center;
	gap: var(--eoq-space-3);
	margin-bottom: var(--eoq-space-3);
}

.eoq-comment__author {
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
}

.eoq-comment__author a {
	color: var(--eoq-ink);
	text-decoration: none;
}

.eoq-comment__byline .eoq-meta {
	margin: 0;
	font-size: var(--eoq-size-xs);
}

.eoq-comment__body {
	color: var(--eoq-ink-soft);
}

.eoq-comment__body p:last-child {
	margin-bottom: 0;
}

.eoq-comment__moderation {
	color: var(--eoq-orange-ink);
	font-size: var(--eoq-size-sm);
}

.eoq-comment__actions {
	margin-top: var(--eoq-space-2);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-sm);
	font-weight: 600;
}

.eoq-comments__title,
.comment-reply-title {
	margin-bottom: var(--eoq-space-3);
	font-size: var(--eoq-size-xl);
}

.comment-form {
	display: grid;
	gap: var(--eoq-space-4);
}

.comment-form p {
	margin: 0;
}

.comment-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-sm);
	font-weight: 600;
}

.comment-form input[type='text'],
.comment-form input[type='email'],
.comment-form input[type='url'],
.comment-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.9rem;
	border: 1px solid var(--eoq-line);
	border-radius: var(--eoq-radius-sm);
	background: var(--eoq-paper);
	font-size: var(--eoq-size-base);
}

.comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.comment-form .form-submit {
	margin: 0;
}

.comment-form input[type='submit'] {
	min-height: 48px;
	padding: 0.6rem 1.6rem;
	border: 0;
	border-radius: var(--eoq-radius-full);
	background: var(--eoq-action);
	color: var(--eoq-action-text);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
}

.comment-form input[type='submit']:hover,
.comment-form input[type='submit']:focus {
	background: var(--eoq-action-hover);
}

.eoq-commentform__note,
.comment-notes {
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-sm);
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--eoq-space-2);
}

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


/* 13  Pagination, breadcrumbs and page heads ============================== */

.eoq-pagination {
	margin-top: var(--eoq-space-6);
}

.eoq-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--eoq-space-2);
}

.eoq-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--eoq-border);
	border-radius: var(--eoq-radius-sm);
	color: var(--eoq-ink);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-md);
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.eoq-pagination a.page-numbers:hover,
.eoq-pagination a.page-numbers:focus {
	background: var(--eoq-cream);
	border-color: var(--eoq-line);
	color: var(--eoq-red-deep);
}

.eoq-pagination .page-numbers.current {
	background: var(--eoq-ink);
	border-color: var(--eoq-ink);
	color: var(--eoq-cream);
}

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

.eoq-crumbs {
	margin-bottom: var(--eoq-space-4);
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-sm);
}

.eoq-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eoq-crumbs__item + .eoq-crumbs__item::before {
	content: '/';
	margin-right: 0.4rem;
	color: var(--eoq-line);
}

.eoq-crumbs a {
	color: var(--eoq-text-muted);
	text-decoration: none;
}

.eoq-crumbs a:hover,
.eoq-crumbs a:focus {
	color: var(--eoq-link-hover);
	text-decoration: underline;
}

.eoq-page-head {
	margin-bottom: var(--eoq-space-6);
	padding-bottom: var(--eoq-space-5);
	border-bottom: 1px solid var(--eoq-border);
}

.eoq-page-head__kicker {
	display: block;
	margin-bottom: var(--eoq-space-2);
	color: var(--eoq-orange-ink);
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-xs);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
}

.eoq-page-head__title {
	margin: 0 0 var(--eoq-space-2);
	font-size: var(--eoq-size-3xl);
	font-weight: 700;
}

.eoq-page-head__desc {
	max-width: 62ch;
	color: var(--eoq-ink-soft);
}

.eoq-page-head__count {
	margin: 0;
	color: var(--eoq-text-muted);
	font-size: var(--eoq-size-sm);
}

.eoq-page-head__search {
	margin-top: var(--eoq-space-4);
}

.eoq-page-head__search .eoq-searchform {
	margin-inline: 0;
}

.eoq-author-head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--eoq-space-4);
	align-items: center;
}

.eoq-empty {
	max-width: 46rem;
	padding: var(--eoq-space-7) 0;
	text-align: center;
}

.eoq-empty__title {
	font-size: var(--eoq-size-2xl);
}

.eoq-empty__text {
	color: var(--eoq-ink-soft);
}

.eoq-empty .eoq-searchform {
	margin-block: var(--eoq-space-5);
}


/* 14  Advertising slots ===================================================
   The unit carries only `display:inline-block` inline; every dimension comes
   from here. That is deliberate — see the note at the top of inc/ads.php. The
   wrapper reserves the height at each breakpoint, so an unfilled slot occupies
   exactly the space a filled one would and nothing below it ever moves.
   ========================================================================== */

.eoq-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-block: var(--eoq-space-5);
	text-align: center;
}

.eoq-ad--leaderboard {
	margin-block: 0;
	padding-block: var(--eoq-space-4);
	background: var(--eoq-cream);
}

.eoq-ad__label {
	margin-bottom: 0.35rem;
	color: var(--eoq-text-muted);
	font-family: var(--eoq-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
}

.eoq-ad__unit {
	display: inline-block;
	overflow: hidden;
	background: transparent;
}

.eoq-ad--leaderboard .eoq-ad__unit {
	width: 320px;
	height: 100px;
}

.eoq-ad--incontent .eoq-ad__unit {
	width: 300px;
	height: 250px;
}

.eoq-ad--sidebar .eoq-ad__unit {
	width: 300px;
	height: 250px;
}

/* An in-article slot is a break in someone's reading, so it gets air on both
   sides and a hairline to say it is not part of the article. */
.eoq-prose .eoq-ad,
.eoq-ad--incontent {
	padding-block: var(--eoq-space-4);
	border-block: 1px solid var(--eoq-border);
}


/* 15  404 ================================================================= */

.eoq-404 {
	max-width: 46rem;
	margin-inline: auto;
	padding-block: var(--eoq-space-7);
	text-align: center;
}

.eoq-404__code {
	margin: 0;
	font-family: var(--eoq-font-display);
	font-size: var(--eoq-size-4xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--eoq-gold);
}

.eoq-404__title {
	margin-top: var(--eoq-space-3);
	font-size: var(--eoq-size-2xl);
	font-weight: 700;
}

.eoq-404__text {
	color: var(--eoq-ink-soft);
}

.eoq-404__search {
	margin-block: var(--eoq-space-5);
}

.eoq-404__subtitle {
	margin-bottom: var(--eoq-space-3);
	font-size: var(--eoq-size-md);
	font-weight: 700;
	letter-spacing: var(--eoq-tracking-label);
	text-transform: uppercase;
	color: var(--eoq-text-muted);
}

.eoq-404__topics .eoq-topics {
	justify-content: center;
}


/* ==========================================================================
   Breakpoints
   --------------------------------------------------------------------------
   Mobile first. 37.5rem is 600px, 48rem is 768px, 62rem is 992px — the width
   at which the sidebar can sit beside a comfortable measure rather than
   squeezing it.
   ========================================================================== */

@media (max-width: 61.999rem) {

	/* -- the header collapses to one row -- */

	.eoq-nav-toggle {
		display: inline-flex;
		order: -1;
	}

	.eoq-header__inner {
		min-height: 64px;
	}

	.eoq-branding {
		text-align: center;
	}

	.eoq-logo img,
	.custom-logo {
		height: 46px;
		min-width: 128px;
		margin-inline: auto;
	}

	.eoq-social--header,
	.eoq-header__cta {
		display: none;
	}

	/* The bar itself disappears, but it cannot be `display: none` — the menu
	   lives inside it and has to survive. Un-sticking it also matters: a
	   sticky element is a containing block for anything absolutely positioned
	   inside it, which would anchor the panel below to the bar rather than to
	   the header. */
	.eoq-navbar,
	.eoq-navbar--sticky {
		position: static;
		background: transparent;
		border: 0;
	}

	.eoq-navbar__inner {
		min-height: 0;
		padding: 0;
	}

	/* The menu drops out of the top bar as a panel rather than a drawer: no
	   focus trap to get wrong, no scroll position to restore, and it cannot
	   cover the page it came from. */
	.eoq-nav {
		position: absolute;
		z-index: 35;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: 74vh;
		overflow-y: auto;
		padding: var(--eoq-space-3) var(--eoq-gutter) var(--eoq-space-5);
		background: var(--eoq-paper);
		border-bottom: 1px solid var(--eoq-line);
		box-shadow: var(--eoq-shadow-lg);
	}

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

	.eoq-nav__list {
		display: block;
	}

	.eoq-nav__list > li {
		border-bottom: 1px solid var(--eoq-line-soft);
	}

	.eoq-nav__link {
		padding: 0.85rem 0.25rem;
		font-size: var(--eoq-size-base);
		white-space: normal;
	}

	.eoq-nav__list > li > .eoq-nav__link::after {
		display: none;
	}

	.eoq-submenu-toggle {
		top: 0.6rem;
		right: 0.25rem;
		width: 40px;
		height: 40px;
		transform: none;
	}

	.eoq-nav__sub {
		position: static;
		display: none;
		min-width: 0;
		margin: 0 0 var(--eoq-space-2) var(--eoq-space-3);
		padding: 0;
		border: 0;
		border-left: 2px solid var(--eoq-cream);
		border-radius: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.eoq-nav__sub .eoq-nav__link {
		padding-left: var(--eoq-space-4);
		font-size: var(--eoq-size-md);
	}

	/* Hover must not open a submenu on a touch screen: the first tap would
	   open it and the same tap would follow the link. */
	.eoq-nav__list li:hover > .eoq-nav__sub,
	.eoq-nav__list li:focus-within > .eoq-nav__sub {
		display: none;
	}

	.eoq-nav__list li.eoq-nav--open > .eoq-nav__sub {
		display: block;
	}

	body.eoq-menu-open {
		overflow: hidden;
	}
}

@media (min-width: 37.5rem) {

	:root {
		--eoq-gutter: 1.5rem;
	}

	.eoq-lead {
		grid-template-columns: minmax(0, 42%) 1fr;
		align-items: center;
		gap: var(--eoq-space-6);
	}

	.eoq-card--list {
		grid-template-columns: 200px 1fr;
		gap: var(--eoq-space-5);
	}

	.eoq-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	.eoq-post-nav__link--next:only-child {
		grid-column: 2;
	}

	.eoq-ad--leaderboard .eoq-ad__unit {
		width: 728px;
		height: 90px;
	}

	.eoq-ad--incontent .eoq-ad__unit {
		width: 336px;
		height: 280px;
	}

	.eoq-404__code {
		font-size: 5rem;
	}
}

@media (min-width: 48rem) {

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

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

@media (min-width: 62rem) {

	:root {
		--eoq-gutter: 2rem;
	}

	.eoq-has-sidebar .eoq-layout {
		grid-template-columns: minmax(0, 1fr) var(--eoq-sidebar);
	}

	/* Sticky, and only as tall as the viewport minus the bar it sits under, so
	   a long sidebar still scrolls its own overflow instead of being cut. */
	.eoq-sidebar__inner {
		position: sticky;
		top: calc(var(--eoq-navbar-h) + var(--eoq-space-4));
		max-height: calc(100vh - var(--eoq-navbar-h) - var(--eoq-space-5));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.eoq-footer__top {
		grid-template-columns: minmax(0, 28%) 1fr;
		gap: var(--eoq-space-8);
	}

	.eoq-single__title {
		font-size: var(--eoq-size-4xl);
	}

	.eoq-lead__title {
		font-size: var(--eoq-size-3xl);
	}

	.eoq-ad--leaderboard .eoq-ad__unit {
		width: 970px;
		height: 90px;
	}

	.eoq-ad--sidebar .eoq-ad__unit {
		width: 300px;
		height: 600px;
	}

	.eoq-band {
		height: 116px;
		background-size: auto 116px;
	}
}


/* 16  Motion, print and forced colours ==================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Windows High Contrast: the borders below are the only thing separating a
   card from its neighbour once the palette is thrown away. */
@media (forced-colors: active) {

	.eoq-pill,
	.eoq-btn,
	.eoq-tag,
	.eoq-topics__item,
	.eoq-share__link,
	.eoq-pagination .page-numbers {
		border: 1px solid currentColor;
	}

	.eoq-section-head__title::before,
	.eoq-widget__title::before {
		forced-color-adjust: none;
	}
}

@media print {

	.eoq-header,
	.eoq-navbar,
	.eoq-sidebar,
	.eoq-footer,
	.eoq-band,
	.eoq-to-top,
	.eoq-share,
	.eoq-post-nav,
	.eoq-related,
	.eoq-ad,
	.eoq-pagination,
	.eoq-comments,
	.eoq-crumbs {
		display: none !important;
	}

	body {
		font-size: 11pt;
		color: #000;
	}

	.eoq-single__art {
		max-width: 90mm;
	}

	.eoq-prose a::after {
		content: ' (' attr(href) ')';
		font-size: 0.85em;
		word-break: break-all;
	}
}