/* ==========================================================================
   Quantum Nature — the "Ledger" design system
   ==========================================================================
   One stylesheet, no framework, no build step. Roughly in the order a page
   is built:

     1  Tokens                    9  Article shell and furniture
     2  Reset and base           10  Article body (.qn-prose)
     3  Utilities                11  Forms, newsletter, comments
     4  Typography               12  404 and empty states
     5  Controls                 13  Responsive
     6  Masthead                 14  Motion and forced colours
     7  Listings
     8  Homepage

   Both colour schemes are one set of custom properties redefined once. There
   are no duplicated component rules per scheme.
   ========================================================================== */


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

:root {
	/* Ground and surfaces */
	--qn-bg:            #0A0F1C;
	--qn-bg-deep:       #05090F;
	--qn-surface:       #0D1424;
	--qn-card:          #131B2D;

	/* Ink. --qn-prose is long-form body copy: one step below pure white so
	   headings still lead, but well above a mid grey. */
	--qn-text:          #F2F6FC;
	--qn-heading:       #F2F6FC;
	--qn-prose:         #E4EBF5;
	--qn-muted:         #C3CFE0;
	--qn-faint:         #97A6BC;   /* micro-meta only */
	--qn-dim:           #7E8DA4;

	--qn-accent:        #35DCFF;
	--qn-accent-2:      #A78BFA;
	--qn-accent-ink:    #06121B;
	--qn-accent-soft:   rgba(53, 220, 255, .25);
	--qn-violet-soft:   rgba(167, 139, 250, .18);

	--qn-hatch:         rgba(226, 236, 250, .05);
	--qn-border-soft:   rgba(226, 236, 250, .10);
	--qn-border:        rgba(226, 236, 250, .14);
	--qn-border-firm:   rgba(226, 236, 250, .18);
	--qn-border-input:  rgba(226, 236, 250, .22);
	--qn-glass:         rgba(10, 15, 28, .88);

	/* One family, three roles. */
	--qn-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--qn-body:    "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--qn-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Fluid display sizes, carried over from the prototype unchanged. */
	--t-d1:    clamp(34px, 7.2vw, 60px);
	--t-d1-lead: clamp(34px, 7.6vw, 64px);
	--t-d2:    clamp(26px, 4.2vw, 38px);
	--t-h2:    clamp(24px, 3.2vw, 32px);
	--t-card:  clamp(21px, 2.6vw, 25px);
	--t-row:   clamp(19px, 2.2vw, 22px);
	--t-prose: clamp(17px, 1.4vw, 19px);
	--t-dek:   clamp(18px, 2vw, 21px);

	/* Spacing */
	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
	--s-5: 20px; --s-6: 26px; --s-7: 34px; --s-8: 44px; --s-9: 56px;

	--edge: 32px;
	--wrap: 1180px;
	--qn-nav-h: 84px;

	/* Journal-austere: square, ruled, unshadowed. */
	--r-sm: 0px;
	--r-md: 0px;
	--r-lg: 2px;

	--d-fast: .12s;
	--d-base: .22s;
	--ease: cubic-bezier(.2, .6, .2, 1);

	color-scheme: dark;
}

:root[data-theme="light"] {
	--qn-bg:            #FBFCFE;
	--qn-bg-deep:       #EDF1F7;
	--qn-surface:       #FFFFFF;
	--qn-card:          #EDF1F7;

	--qn-text:          #0B1220;
	--qn-heading:       #0B1220;
	--qn-prose:         #17233A;
	--qn-muted:         #3E4B63;
	--qn-faint:         #5A6880;
	/* Darkened from the prototype's #79879D, which reached only 3.55:1 on
	   white. --qn-dim carries 11px uppercase labels — the content-type line
	   on every archive row — so it has to clear 4.5:1 as normal text, on the
	   page ground and on the footer's deeper ground alike. */
	--qn-dim:           #626D7F;

	/* The brand cyan lands at ~1.7:1 on white. This teal is the same hue
	   family at 5.9:1, so kickers, links and the primary button stay legible. */
	--qn-accent:        #0B6E86;
	--qn-accent-2:      #6D28D9;
	--qn-accent-ink:    #FFFFFF;
	--qn-accent-soft:   rgba(11, 110, 134, .20);
	--qn-violet-soft:   rgba(109, 40, 217, .12);

	--qn-hatch:         rgba(15, 23, 42, .07);
	--qn-border-soft:   rgba(15, 23, 42, .11);
	--qn-border:        rgba(15, 23, 42, .16);
	--qn-border-firm:   rgba(15, 23, 42, .24);
	--qn-border-input:  rgba(15, 23, 42, .30);
	--qn-glass:         rgba(251, 252, 254, .92);

	color-scheme: light;
}


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

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--qn-bg);
	color: var(--qn-text);
	font-family: var(--qn-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

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

a { color: var(--qn-text); text-decoration: none; }
a:hover { color: var(--qn-accent); }

button { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { font-family: var(--qn-display); font-weight: 600; letter-spacing: -.022em; }

::placeholder { color: var(--qn-faint); opacity: 1; }
::selection { background: var(--qn-accent); color: var(--qn-accent-ink); }

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


/* ==========================================================================
   3  Utilities
   ========================================================================== */

.qn-wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--edge); }

.qn-sr-only,
.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;
}

.qn-skip {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--qn-accent); color: var(--qn-accent-ink);
	padding: 12px 20px; font-weight: 600;
}
.qn-skip:focus { left: 0; color: var(--qn-accent-ink); }

/* The honeypot has to be reachable to a bot and invisible to everyone else,
   so it is moved off-screen rather than display:none. */
.qn-honeypot {
	position: absolute !important;
	left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

.qn-icon { flex: none; vertical-align: middle; }

.qn-main { display: block; }


/* ==========================================================================
   4  Typography
   ========================================================================== */

.qn-d1 { margin: 0; font-size: var(--t-d1); line-height: 1.04; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.qn-d1--lead { font-size: var(--t-d1-lead); line-height: 1.02; max-width: 17ch; }
.qn-d2 { margin: 0; font-size: var(--t-d2); line-height: 1.12; font-weight: 600; letter-spacing: -.02em; }
.qn-h-card { margin: 0; font-size: var(--t-card); line-height: 1.18; font-weight: 600; letter-spacing: -.01em; }
.qn-h-row { margin: 0; font-size: var(--t-row); line-height: 1.24; font-weight: 600; letter-spacing: -.01em; }

/* The kicker doubles as the content-type label: quiet editorial metadata,
   never a badge. */
.qn-kicker {
	margin: 0 0 var(--s-4);
	font-size: 11px; font-weight: 600; letter-spacing: .18em;
	text-transform: uppercase; color: var(--qn-accent);
}
.qn-kicker a { color: inherit; }
.qn-kicker a:hover { color: var(--qn-text); }
.qn-kicker--quiet { color: var(--qn-faint); }
.qn-kicker__sep { color: var(--qn-dim); }

.qn-dek { color: var(--qn-muted); text-wrap: pretty; }

.qn-meta {
	margin: 0;
	font-size: 13px; color: var(--qn-faint);
	font-variant-numeric: tabular-nums;
	display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
}
.qn-meta a { color: inherit; }

.qn-section-label {
	margin: 0;
	font-size: 13px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--qn-text);
}

.qn-eyebrow {
	margin: 0 0 var(--s-3);
	font-size: 11px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--qn-faint);
}

.qn-link { border-bottom: 1px solid var(--qn-border-firm); padding-bottom: 2px; }
.qn-link--accent { color: var(--qn-accent); border-bottom-color: var(--qn-accent); }

/* Section rule: a label on the left, a link on the right, a hairline under. */
.qn-rulehead {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: var(--s-4); flex-wrap: wrap;
	border-bottom: 1px solid var(--qn-border);
	padding-bottom: var(--s-3);
}
.qn-rulehead--spaced { margin-top: var(--s-8); }
.qn-rulehead__link {
	font-size: 13px; color: var(--qn-faint);
	letter-spacing: .06em; text-transform: uppercase;
}


/* ==========================================================================
   5  Controls
   ========================================================================== */

.qn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 1px solid transparent; border-radius: var(--r-sm);
	font-family: var(--qn-body); font-size: 15px; font-weight: 600;
	letter-spacing: .03em; padding: 13px 24px; cursor: pointer;
	background: none; text-align: center;
	transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.qn-btn--primary { background: var(--qn-accent); color: var(--qn-accent-ink); border-color: var(--qn-accent); }
.qn-btn--primary:hover { color: var(--qn-accent-ink); filter: brightness(1.08); }
.qn-btn--ghost { color: var(--qn-accent); border-color: var(--qn-accent); font-weight: 400; }
.qn-btn--ghost:hover { background: var(--qn-accent-soft); color: var(--qn-accent); }
.qn-btn--sm { padding: 8px 16px; font-size: 14px; }

.qn-chips { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; max-width: 100%; }
.qn-chip {
	border: 1px solid var(--qn-border-firm); color: var(--qn-muted);
	font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	padding: 7px 14px; white-space: nowrap;
	transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.qn-chip:hover { border-color: var(--qn-accent); color: var(--qn-accent); }
.qn-chip.is-on { border-color: var(--qn-accent); color: var(--qn-accent); }

.qn-input {
	width: 100%;
	background: var(--qn-surface);
	border: 1px solid var(--qn-border-input);
	border-radius: var(--r-sm);
	color: var(--qn-text);
	font-family: var(--qn-body); font-size: 16px;
	padding: 13px 15px;
}
.qn-input:focus { border-color: var(--qn-accent); }

.qn-field { display: grid; gap: 8px; margin: 0 0 var(--s-5); }
.qn-field__label,
.qn-field > label {
	font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--qn-faint);
}

.qn-emailrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }

.qn-notice {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 0 0 var(--s-5); padding: 12px 14px;
	border: 1px solid var(--qn-border-firm);
	font-size: 15px; line-height: 1.5;
}
.qn-notice--ok { border-color: var(--qn-accent); color: var(--qn-text); }
.qn-notice--bad { border-color: var(--qn-border-firm); color: var(--qn-muted); }

.qn-searchform { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; max-width: 640px; }


/* ==========================================================================
   6  Masthead
   ========================================================================== */

.qn-masthead {
	position: sticky; top: 0; z-index: 60;
	background: var(--qn-glass);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: 1px solid var(--qn-border);
}

.qn-masthead__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--s-6); flex-wrap: wrap;
	padding-block: 14px;
}

.qn-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qn-brand .custom-logo { display: block; width: 30px; height: auto; }
.qn-brand__link { display: grid; gap: 1px; min-width: 0; }
.qn-brand__name { font-size: 20px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.qn-brand__tagline {
	font-size: 12px; color: var(--qn-faint); letter-spacing: .02em;
	max-width: 44ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.qn-nav__list {
	display: flex; gap: var(--s-6); flex-wrap: wrap;
	list-style: none; margin: 0; padding: 0;
	font-size: 15px;
}
.qn-nav__list a { color: var(--qn-muted); }
.qn-nav__list a:hover { color: var(--qn-accent); }
.qn-nav__list .current-menu-item > a,
.qn-nav__list .current_page_item > a { color: var(--qn-text); }

/* Submenus: a plain nested list, revealed on hover and on focus so the
   keyboard reaches them too. */
.qn-nav__list .sub-menu {
	list-style: none; margin: 0; padding: 10px 0;
	position: absolute; z-index: 70;
	min-width: 200px;
	background: var(--qn-bg-deep); border: 1px solid var(--qn-border);
	opacity: 0; visibility: hidden;
	transition: opacity var(--d-fast) var(--ease);
}
.qn-nav__list li { position: relative; }
.qn-nav__list .sub-menu a { display: block; padding: 7px 16px; }
.qn-nav__list li:hover > .sub-menu,
.qn-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; }

.qn-utility { display: flex; align-items: center; gap: 10px; }

.qn-iconbtn {
	display: inline-flex; align-items: center; gap: 7px;
	background: none; border: 1px solid var(--qn-border-firm);
	color: var(--qn-faint); font-size: 13px;
	padding: 7px 12px; cursor: pointer;
	transition: border-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.qn-iconbtn:hover { border-color: var(--qn-accent); color: var(--qn-accent); }
.qn-utility__subscribe { padding: 8px 16px; font-size: 14px; }

/* Toggle shows the scheme it switches to. */
.qn-theme-toggle__light { display: none; }
:root[data-theme="light"] .qn-theme-toggle__light { display: inline-flex; }
:root[data-theme="light"] .qn-theme-toggle__dark { display: none; }
.qn-theme-toggle__text { display: none; }

.qn-navtoggle { display: none; }

.qn-searchpanel {
	border-bottom: 1px solid var(--qn-border);
	background: var(--qn-bg-deep);
}
.qn-searchpanel__inner { padding-block: var(--s-6); display: grid; gap: var(--s-5); }
.qn-searchpanel__suggest .qn-chips { max-width: 100%; }


/* ==========================================================================
   7  Listings — rows, cards, tiles, figures, filters, pagination
   ========================================================================== */

.qn-grid { display: grid; gap: 36px; }
.qn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.qn-figure {
	display: block; width: 100%; overflow: hidden;
	background: var(--qn-card); border: 1px solid var(--qn-border);
}
.qn-figure__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The placeholder is a fallback for a post with no featured image, never a
   decoration over one. Same ratio as the image it stands in for, so adding an
   image later shifts nothing. */
.qn-figure--placeholder {
	background-image: repeating-linear-gradient(135deg, var(--qn-hatch) 0 1px, transparent 1px 11px);
}

.qn-figcaption {
	margin-top: 10px;
	font-size: 13px; line-height: 1.5; color: var(--qn-faint);
}

/* Row: date and type | headline and dek | topic and reading time */
.qn-rows { border-top: 1px solid var(--qn-border); }
.qn-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) 210px;
	gap: 28px; align-items: baseline;
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--qn-border-soft);
}
.qn-row--pair { grid-template-columns: minmax(0, 1fr) 210px; }
.qn-row__date { display: block; font-size: 13px; color: var(--qn-faint); font-variant-numeric: tabular-nums; }
.qn-row__type {
	display: block; margin-top: 5px;
	font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--qn-dim);
}
.qn-row__title { margin: 0; }
.qn-row__dek { margin: 6px 0 0; font-size: 15px; line-height: 1.5; max-width: 72ch; }
.qn-row__meta { justify-content: flex-end; text-align: right; }

.qn-card { display: grid; gap: 14px; align-content: start; }
.qn-card__media { display: block; }
.qn-card .qn-kicker { margin: 0; }
.qn-card__dek { margin: 0; font-size: 16px; line-height: 1.55; }

/* Ruled cells. No counts, no glow, no shadow. */
.qn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qn-tile {
	display: grid; gap: 6px; align-content: start;
	padding: var(--s-5);
	border-bottom: 1px solid var(--qn-border-soft);
	border-right: 1px solid var(--qn-border-soft);
	border-top: 1px solid var(--qn-border-soft);
	margin-top: -1px;
}
.qn-tiles > .qn-tile:nth-child(3n) { border-right: 0; }
/* The first cell of each row loses its left padding so the tile text lines up
   with the section label above it and with every other column on the page. */
.qn-tiles > .qn-tile:nth-child(3n + 1) { padding-left: 0; }
.qn-tile__name { font-size: 19px; font-weight: 600; }
.qn-tile__name--tight { line-height: 1.2; }
.qn-tile__note { font-size: 14px; line-height: 1.5; color: var(--qn-faint); }
.qn-tile .qn-kicker { margin: 0; }

.qn-filters {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
	padding-block: var(--s-5);
	border-bottom: 1px solid var(--qn-border-soft);
}
.qn-filters__row {
	display: flex; gap: 12px; align-items: center;
	justify-content: space-between; flex-wrap: wrap; min-width: 0;
}
.qn-filters__sort {
	font-size: 13px; color: var(--qn-faint);
	letter-spacing: .06em; text-transform: uppercase;
}

.qn-pagination { margin-top: var(--s-8); }
.qn-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qn-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 42px; padding: 8px 14px;
	border: 1px solid var(--qn-border-firm); color: var(--qn-muted);
	font-size: 14px; font-variant-numeric: tabular-nums;
}
.qn-pagination .page-numbers:hover { border-color: var(--qn-accent); color: var(--qn-accent); }
.qn-pagination .page-numbers.current { border-color: var(--qn-accent); color: var(--qn-accent); }
.qn-pagination .page-numbers.dots { border: 0; min-width: 0; color: var(--qn-dim); }

.qn-pagehead { padding-block: var(--s-9) var(--s-7); border-bottom: 1px solid var(--qn-border); }
.qn-pagehead__dek { margin: var(--s-4) 0 0; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.55; max-width: 60ch; }
.qn-pagehead__count { margin-top: var(--s-4); }
.qn-pagehead__search { margin-top: var(--s-6); }

.qn-crumbs { padding-block: var(--s-4); border-bottom: 1px solid var(--qn-border-soft); }
.qn-crumbs__list {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none; margin: 0; padding: 0;
	font-size: 13px; color: var(--qn-faint);
}
.qn-crumbs__item { display: flex; gap: 8px; align-items: baseline; }
.qn-crumbs__item a { color: var(--qn-faint); }
.qn-crumbs__item a:hover { color: var(--qn-accent); }
.qn-crumbs__item [aria-current] { color: var(--qn-muted); }
.qn-crumbs__sep { color: var(--qn-dim); }


/* ==========================================================================
   8  Homepage
   ========================================================================== */

.qn-positioning {
	margin: 0; padding-block: var(--s-4);
	border-bottom: 1px solid var(--qn-border-soft);
	font-size: 15px; line-height: 1.5; color: var(--qn-muted);
	max-width: 78ch;
}

.qn-home__featured { padding-block: var(--s-9) var(--s-8); border-bottom: 1px solid var(--qn-border); }
.qn-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-9); }
.qn-featured__title { margin: 0; }
.qn-featured__dek { margin: var(--s-6) 0 0; font-size: var(--t-dek); line-height: 1.5; max-width: 52ch; }
.qn-featured__meta { margin-top: var(--s-6); font-size: 14px; }
.qn-featured__meta .qn-meta__author { color: var(--qn-text); }
.qn-featured__cta { margin: var(--s-6) 0 0; }
.qn-featured__figure { margin: 0; }

.qn-home__latest { padding-block: var(--s-8) 0; }
.qn-home__cards { padding-top: var(--s-7); }
.qn-home__rows { margin-top: var(--s-8); }
.qn-home__explainers { padding-block: var(--s-8) var(--s-8); }
.qn-home__topics { padding-block: var(--s-9) var(--s-9); }
.qn-home__topics .qn-tiles { margin-top: var(--s-1); }

/* Topic page: without this the section's rule lands directly on the page
   header's rule and the two hairlines read as one thick line. */
.qn-starthere { padding-block: var(--s-8) 0; }
.qn-starthere .qn-tiles { margin-top: var(--s-1); }


/* ==========================================================================
   9  Article shell and furniture
   ========================================================================== */

.qn-article__header { padding-block: var(--s-8) 0; max-width: 860px; }
.qn-article__title { margin: 0; font-size: clamp(34px, 7vw, 58px); }
.qn-article__dek { margin: var(--s-6) 0 0; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; max-width: 54ch; }

.qn-article__lead { margin: var(--s-7) 0 0; }
.qn-article__lead .qn-figure__img {
	display: block; width: 100%; height: auto;
	border: 1px solid var(--qn-border);
	/* A portrait or square featured image would otherwise fill the screen
	   before a word of the article is visible. */
	max-height: 68vh; object-fit: cover;
}

.qn-byline {
	display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
	margin-top: var(--s-7); padding-block: var(--s-4);
	border-block: 1px solid var(--qn-border);
	font-size: 14px; color: var(--qn-faint);
}
.qn-byline__who { display: flex; align-items: center; gap: 12px; }
.qn-byline__avatar { border-radius: 50%; display: block; }
.qn-byline__author { color: var(--qn-text); }
.qn-byline__dates { gap: 8px; }

.qn-actions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.qn-action {
	display: inline-flex; align-items: center; gap: 7px;
	background: none; border: 0; color: var(--qn-muted);
	font-size: 14px; padding: 6px 8px; cursor: pointer;
}
.qn-action:hover { color: var(--qn-accent); }

.qn-cite {
	flex-basis: 100%;
	margin-top: var(--s-4); padding: var(--s-5);
	border: 1px solid var(--qn-border-firm); background: var(--qn-surface);
}
.qn-cite__text { margin: 0 0 var(--s-4); font-size: 15px; line-height: 1.6; color: var(--qn-muted); }

.qn-shell {
	display: grid; grid-template-columns: 240px minmax(0, 1fr);
	gap: 64px; padding-block: var(--s-9) var(--s-9);
}
.qn-shell--solo { grid-template-columns: minmax(0, 1fr); }
.qn-shell__rail { align-self: start; position: sticky; top: calc(var(--qn-nav-h) + 16px); }
.qn-shell__body { max-width: 70ch; min-width: 0; }
.qn-shell--solo .qn-shell__body { max-width: 70ch; margin-inline: auto; }

/* Contents. A <details> so the mobile disclosure is native HTML; on desktop
   the marker is hidden and it is simply always open. */
.qn-toc { border-bottom: 0; }
.qn-toc__summary {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; cursor: pointer; list-style: none;
	padding-bottom: 10px; border-bottom: 1px solid var(--qn-border);
}
.qn-toc__summary::-webkit-details-marker { display: none; }
.qn-toc__summary .qn-kicker { margin: 0; }
.qn-toc__chevron { color: var(--qn-faint); transition: transform var(--d-base) var(--ease); }
.qn-toc[open] .qn-toc__chevron { transform: rotate(180deg); }

.qn-toc__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 11px; font-size: 14px; line-height: 1.4; }
.qn-toc__item a {
	display: block; color: var(--qn-faint);
	border-left: 2px solid transparent; padding-left: 12px;
	transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.qn-toc__item a:hover { color: var(--qn-accent); border-left-color: var(--qn-accent); }
.qn-toc__item--h3 a { padding-left: 24px; font-size: 13px; }
.qn-toc__item.is-current > a { color: var(--qn-text); border-left-color: var(--qn-accent); }

.qn-railwidgets { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--qn-border); }
.qn-widget + .qn-widget { margin-top: var(--s-6); }
.qn-widget__title { margin: 0 0 var(--s-3); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--qn-faint); }

/* Ruled panel — In short. Never a floating card. */
.qn-panel { border: 1px solid var(--qn-border-firm); background: var(--qn-surface); padding: var(--s-6) var(--s-7); }
.qn-insh { margin-bottom: var(--s-7); }
.qn-insh__list { margin: 0; padding-left: var(--s-5); display: grid; gap: 10px; font-size: 16px; line-height: 1.6; color: var(--qn-muted); }
.qn-insh__list li::marker { color: var(--qn-accent); }

/* Why it matters — ruled top and bottom, deliberately not a card. */
.qn-why { margin-bottom: var(--s-8); padding-block: var(--s-4); border-block: 1px solid var(--qn-border); }
.qn-why--compact { margin: var(--s-6) 0 0; }
.qn-why .qn-kicker { margin-bottom: var(--s-2); }
.qn-why__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--qn-muted); max-width: 56ch; }

.qn-references { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--qn-border); }
.qn-references__title {
	margin: 0 0 var(--s-5);
	font-size: 13px; font-weight: 600; letter-spacing: .16em;
	text-transform: uppercase; color: var(--qn-text);
}
.qn-references__list { margin: 0; padding-left: var(--s-5); display: grid; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--qn-muted); }
.qn-references__list li::marker { color: var(--qn-accent); font-variant-numeric: tabular-nums; }
.qn-references__list a { color: var(--qn-muted); border-bottom: 1px solid var(--qn-border-firm); }
.qn-references__list a:hover { color: var(--qn-accent); border-bottom-color: var(--qn-accent); }
.qn-references__doi { color: var(--qn-dim); font-size: 14px; white-space: nowrap; }

.qn-faq { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--qn-border); }
.qn-faq__list { margin-top: var(--s-5); }
.qn-faq__item { padding-block: var(--s-4); border-bottom: 1px solid var(--qn-border-soft); }
.qn-faq__q { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.qn-faq__a { margin: 0; font-size: 16px; line-height: 1.6; color: var(--qn-muted); }

.qn-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--s-7); }
.qn-tags a {
	border: 1px solid var(--qn-border-firm); color: var(--qn-faint);
	font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px;
}
.qn-tags a:hover { border-color: var(--qn-accent); color: var(--qn-accent); }

.qn-authorbox {
	margin-top: var(--s-8);
	border: 1px solid var(--qn-border-firm);
	padding: var(--s-6) var(--s-7);
	display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start;
}
.qn-authorbox__avatar img { border-radius: 50%; display: block; }
.qn-authorbox__name { margin: 0 0 10px; font-size: 19px; font-weight: 600; font-family: var(--qn-display); }
.qn-authorbox__bio { margin: 0; font-size: 16px; line-height: 1.6; color: var(--qn-muted); }
.qn-authorbox__more { margin: var(--s-4) 0 0; }

.qn-postnav { border-top: 1px solid var(--qn-border); }
.qn-postnav__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7); padding-block: var(--s-7); }
.qn-postnav__link { display: grid; gap: 8px; }
.qn-postnav__link--next { text-align: right; }
.qn-postnav__label {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--qn-faint);
}
.qn-postnav__link--next .qn-postnav__label { justify-content: flex-end; }
.qn-postnav__title { font-family: var(--qn-display); font-size: 19px; font-weight: 600; line-height: 1.25; }

.qn-related { border-top: 1px solid var(--qn-border); background: var(--qn-surface); }
.qn-related .qn-wrap { padding-block: var(--s-8); }
.qn-related .qn-grid { margin-top: var(--s-6); }

.qn-pagelinks { display: flex; gap: 8px; align-items: center; margin-top: var(--s-7); font-size: 14px; }
.qn-pagelinks__label { color: var(--qn-faint); }
.qn-pagelinks__n { border: 1px solid var(--qn-border-firm); padding: 4px 10px; }

.qn-authorhead__inner { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-8); align-items: start; margin-top: var(--s-6); }
.qn-authorhead__avatar img { border-radius: 50%; display: block; max-width: 100%; height: auto; }
.qn-authorhead__name { font-size: clamp(32px, 6vw, 52px); }
.qn-authorhead__links { margin: var(--s-5) 0 0; font-size: 14px; }


/* ==========================================================================
   10  Article body — .qn-prose
   ==========================================================================
   Existing articles are written in Gutenberg and carry hand-added classes
   from earlier versions of the site: .qn-lede, .qn-callout (--accent,
   --violet), .qn-callout__label, .qn-callout__figure, .qn-takeaways,
   .qn-pullquote, .qn-equation, .qn-footnotes, .qn-references, .qn-dropcap,
   .qn-toc. All of them are styled here so no post has to be rewritten.
   ========================================================================== */

.qn-prose { font-size: var(--t-prose); line-height: 1.75; color: var(--qn-prose); }
.qn-prose > *:first-child { margin-top: 0; }
.qn-prose > *:last-child { margin-bottom: 0; }
.qn-prose p { margin: 0 0 var(--s-6); }

.qn-prose h2, .qn-prose h3, .qn-prose h4 {
	font-family: var(--qn-display); font-weight: 600;
	color: var(--qn-heading); letter-spacing: -.02em;
	scroll-margin-top: calc(var(--qn-nav-h) + 24px);
	text-wrap: balance;
}
.qn-prose h2 { font-size: var(--t-h2); line-height: 1.15; margin-block: var(--s-8) var(--s-4); }
.qn-prose h3 { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.3; margin-block: var(--s-7) var(--s-4); }
.qn-prose h4 { font-size: 19px; line-height: 1.4; margin-block: var(--s-6) var(--s-3); }

.qn-prose a {
	color: var(--qn-text);
	background-image: linear-gradient(var(--qn-accent), var(--qn-accent));
	background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
	padding-bottom: 1px;
	transition: color var(--d-fast) var(--ease), background-size var(--d-base) var(--ease);
}
.qn-prose a:hover { color: var(--qn-accent); background-size: 100% 2px; }

.qn-prose strong { font-weight: 600; color: var(--qn-heading); }
.qn-prose em { font-style: italic; }

.qn-prose ul, .qn-prose ol { padding-left: var(--s-6); margin-block: var(--s-6); }
.qn-prose li + li { margin-top: var(--s-3); }
.qn-prose li::marker { color: var(--qn-accent); }

.qn-prose blockquote {
	margin-block: var(--s-8);
	padding: var(--s-2) 0 var(--s-2) var(--s-6);
	border-left: 2px solid var(--qn-accent);
	font-size: clamp(20px, 2.6vw, 26px); line-height: 1.35;
	font-weight: 600; letter-spacing: -.01em; font-style: normal;
	color: var(--qn-heading);
}
.qn-prose blockquote p:last-child { margin-bottom: 0; }
.qn-prose blockquote cite {
	display: block; margin-top: var(--s-4);
	font-style: normal; font-size: 13px; font-weight: 400;
	letter-spacing: .08em; text-transform: uppercase; color: var(--qn-faint);
}

/* Pull quote — full attention, ruled rather than boxed. */
.qn-prose .qn-pullquote,
.qn-prose .wp-block-pullquote {
	margin-block: var(--s-9); padding: var(--s-7) 0;
	border: 0; border-block: 1px solid var(--qn-border);
	text-align: left; background: transparent;
}
.qn-prose .qn-pullquote blockquote,
.qn-prose .wp-block-pullquote blockquote { border: 0; padding: 0; margin: 0; }
.qn-prose .qn-pullquote p,
.qn-prose .wp-block-pullquote p {
	font-family: var(--qn-display); font-weight: 600;
	font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3;
	letter-spacing: -.022em; color: var(--qn-heading); margin: 0;
}
.qn-prose .qn-pullquote cite,
.qn-prose .wp-block-pullquote cite {
	display: block; margin-top: var(--s-4);
	font-size: 13px; font-style: normal; font-weight: 400;
	letter-spacing: .1em; text-transform: uppercase; color: var(--qn-faint);
}

/* Figures */
.qn-prose figure, .qn-prose .wp-block-image { margin-block: var(--s-8); }
.qn-prose figure img, .qn-prose .wp-block-image img {
	width: 100%; height: auto;
	border: 1px solid var(--qn-border); border-radius: 0;
}
.qn-prose figcaption, .qn-prose .wp-element-caption {
	font-size: 13px; line-height: 1.5; color: var(--qn-faint);
	margin-top: 10px; max-width: 60ch;
}
.qn-prose figcaption strong, .qn-prose .wp-element-caption strong { color: var(--qn-muted); font-weight: 600; }

/* Wide and full-bleed media inside the reading column */
.qn-prose .alignwide,
.qn-prose .wp-block-image.alignwide { width: min(112%, 100vw - 2 * var(--edge)); margin-inline: calc(50% - min(56%, 50vw - var(--edge))); }
.qn-prose .alignfull { width: min(124%, 100vw - 2 * var(--edge)); margin-inline: calc(50% - min(62%, 50vw - var(--edge))); }
.qn-prose .alignleft { float: left; margin: 6px var(--s-6) var(--s-4) 0; max-width: 45%; }
.qn-prose .alignright { float: right; margin: 6px 0 var(--s-4) var(--s-6); max-width: 45%; }
.qn-prose .aligncenter { margin-inline: auto; }

/* Code */
.qn-prose code {
	font-family: var(--qn-mono); font-size: .86em;
	background: var(--qn-card); color: var(--qn-accent);
	padding: 2px 6px; border: 1px solid var(--qn-border-soft);
}
.qn-prose pre {
	font-family: var(--qn-mono); font-size: 14px; line-height: 1.7;
	background: var(--qn-bg-deep); color: #E2E8F0;
	border: 1px solid var(--qn-border);
	padding: var(--s-6); overflow-x: auto;
	margin-block: var(--s-7);
	-webkit-overflow-scrolling: touch; tab-size: 2;
}
.qn-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
:root[data-theme="light"] .qn-prose pre { background: #0F172A; color: #E2E8F0; border-color: transparent; }

/* Tables — always scrollable rather than overflowing the page */
.qn-prose .qn-table-scroll,
.qn-prose .wp-block-table,
.qn-prose figure.wp-block-table { overflow-x: auto; margin-block: var(--s-7); -webkit-overflow-scrolling: touch; }
.qn-prose table {
	width: 100%; border-collapse: collapse;
	font-size: 15px; line-height: 1.6; min-width: 480px;
}
.qn-prose th, .qn-prose td {
	text-align: left; padding: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--qn-border); vertical-align: top;
}
.qn-prose thead th {
	font-size: 11px; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--qn-faint);
	border-bottom-color: var(--qn-border-firm);
}
.qn-prose tbody tr:last-child td { border-bottom: 0; }
.qn-prose td { color: var(--qn-muted); }
.qn-prose .wp-block-table figcaption { padding-left: 0; }

/* Mathematics — MathJax and KaTeX friendly */
.qn-prose .math, .qn-prose .MathJax, .qn-prose mjx-container { font-size: 1.03em; }
.qn-prose mjx-container[display="true"],
.qn-prose .katex-display,
.qn-prose .qn-equation {
	display: block; overflow-x: auto; overflow-y: hidden;
	margin-block: var(--s-7); padding: var(--s-5) var(--s-6);
	background: var(--qn-surface); border: 1px solid var(--qn-border-soft);
	text-align: center;
}
.qn-prose .qn-equation { position: relative; }
.qn-prose .qn-equation__number {
	position: absolute; right: var(--s-5); top: 50%; transform: translateY(-50%);
	font-family: var(--qn-mono); font-size: 13px; color: var(--qn-faint);
}

/* Standfirst paragraph inside body copy */
.qn-prose .qn-lede { font-size: 1.3125rem; line-height: 1.62; color: var(--qn-heading); font-weight: 400; }

/* Drop cap — opt-in via .qn-dropcap, or the core block's own class */
.qn-prose .qn-dropcap::first-letter,
.qn-prose .has-drop-cap:not(:focus)::first-letter {
	float: left; font-family: var(--qn-display); font-weight: 600;
	font-size: 3.9em; line-height: .84; padding: .06em .09em 0 0;
	color: var(--qn-accent);
}

/* Callout / aside */
.qn-prose .qn-callout {
	border: 1px solid var(--qn-border); background: var(--qn-surface);
	padding: clamp(20px, 2.6vw, 30px); margin-block: var(--s-7);
	font-size: 16px; line-height: 1.7;
}
.qn-prose .qn-callout--accent { border-color: color-mix(in srgb, var(--qn-accent) 34%, transparent); background: var(--qn-accent-soft); }
.qn-prose .qn-callout--violet { border-color: color-mix(in srgb, var(--qn-accent-2) 34%, transparent); background: var(--qn-violet-soft); }
.qn-prose .qn-callout__label {
	font-size: 11px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--qn-accent); margin: 0 0 var(--s-3);
}
.qn-prose .qn-callout__figure {
	font-family: var(--qn-display); font-weight: 600;
	font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -.024em;
	color: var(--qn-heading); margin: 0 0 var(--s-2);
	font-variant-numeric: tabular-nums;
}
.qn-prose .qn-callout p:last-child { margin-bottom: 0; }

/* Key takeaways */
.qn-prose .qn-takeaways {
	border: 1px solid color-mix(in srgb, var(--qn-accent) 26%, transparent);
	background: var(--qn-accent-soft);
	padding: clamp(20px, 2.6vw, 30px); margin-block: var(--s-7);
}
.qn-prose .qn-takeaways__title {
	font-family: var(--qn-body); font-size: 11px; font-weight: 600;
	letter-spacing: .14em; text-transform: uppercase;
	color: var(--qn-accent); margin: 0 0 var(--s-4);
}
.qn-prose .qn-takeaways ul { margin: 0; padding-left: var(--s-5); }
.qn-prose .qn-takeaways li { font-size: 16px; line-height: 1.7; color: var(--qn-text); }

/* Details / FAQ blocks written into the body */
.qn-prose .wp-block-details, .qn-prose .qn-faq-item {
	border-bottom: 1px solid var(--qn-border); margin-block: 0;
}
.qn-prose .wp-block-details summary, .qn-prose .qn-faq-item summary {
	cursor: pointer; list-style: none; position: relative;
	padding: var(--s-5) var(--s-7) var(--s-5) 0;
	font-family: var(--qn-display); font-weight: 600; font-size: 19px;
	line-height: 1.4; color: var(--qn-heading);
}
.qn-prose summary::-webkit-details-marker { display: none; }
.qn-prose .wp-block-details summary:hover, .qn-prose .qn-faq-item summary:hover { color: var(--qn-accent); }
.qn-prose .wp-block-details summary::after, .qn-prose .qn-faq-item summary::after {
	content: ""; position: absolute; right: 6px; top: 50%;
	width: 11px; height: 11px; margin-top: -6px;
	border-right: 1.5px solid var(--qn-accent); border-bottom: 1.5px solid var(--qn-accent);
	transform: rotate(45deg); transform-origin: center;
	transition: transform var(--d-base) var(--ease);
}
.qn-prose .wp-block-details[open] summary::after,
.qn-prose .qn-faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qn-prose .wp-block-details > *:not(summary),
.qn-prose .qn-faq-item > *:not(summary) { font-size: 16px; line-height: 1.7; color: var(--qn-muted); padding-bottom: var(--s-5); }

/* Footnotes and in-body references */
.qn-prose .qn-footnote-ref, .qn-prose sup a {
	font-size: .68em; font-weight: 600; color: var(--qn-accent);
	background: none; padding: 0 1px; vertical-align: super; line-height: 0;
}
.qn-prose .wp-block-footnotes, .qn-prose .qn-footnotes {
	font-size: 15px; line-height: 1.7; color: var(--qn-muted);
	padding-left: var(--s-5); margin-top: var(--s-8); padding-top: var(--s-6);
	border-top: 1px solid var(--qn-border);
}
.qn-prose .qn-footnotes li + li, .qn-prose .wp-block-footnotes li + li { margin-top: var(--s-3); }

/* An article carrying its own references list keeps the same treatment as
   the field-driven one. */
.qn-prose .qn-references { margin-top: var(--s-8); }
.qn-prose .qn-references ol { margin: 0; padding-left: var(--s-5); font-size: 15px; line-height: 1.7; color: var(--qn-muted); }
.qn-prose .qn-references li + li { margin-top: var(--s-3); }

/* An article shipping its own contents list: the theme suppresses its
   generated rail (see qn_has_toc) and this styles what the author wrote. */
.qn-prose .qn-toc {
	border: 1px solid var(--qn-border); padding: var(--s-5) var(--s-6);
	margin-block: var(--s-7); font-size: 15px;
}
.qn-prose .qn-toc ul, .qn-prose .qn-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.qn-prose .qn-toc li::marker { content: none; }
.qn-prose .qn-toc a { background: none; border-left: 2px solid var(--qn-border-firm); padding-left: 12px; color: var(--qn-muted); }
.qn-prose .qn-toc a:hover { color: var(--qn-accent); border-left-color: var(--qn-accent); }

.qn-prose hr, .qn-prose .wp-block-separator {
	border: 0; border-top: 1px solid var(--qn-border);
	margin-block: var(--s-8); max-width: none;
}
.qn-prose .wp-block-embed, .qn-prose iframe { margin-block: var(--s-7); max-width: 100%; }
.qn-prose .wp-block-button__link { border-radius: 0; background: var(--qn-accent); color: var(--qn-accent-ink); }


/* ------------------------------------------------------------- Footer */

.qn-footer {
	border-top: 1px solid var(--qn-border);
	background: var(--qn-bg-deep);
	margin-top: var(--s-9);
}
.qn-footer__top {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--s-8); align-items: start;
	padding-block: var(--s-8) var(--s-7);
}
.qn-footer__name { font-family: var(--qn-display); font-size: 19px; font-weight: 600; }
.qn-footer__tagline { margin: var(--s-3) 0 0; font-size: 16px; line-height: 1.6; color: var(--qn-muted); max-width: 40ch; }
.qn-footer__list {
	display: flex; flex-wrap: wrap; gap: 14px 32px;
	list-style: none; margin: 0; padding: 0;
	font-size: 15px;
}
.qn-footer__list a { color: var(--qn-muted); }
.qn-footer__list a:hover { color: var(--qn-accent); }
.qn-footer__list .sub-menu { display: none; }

.qn-footer__bottom { border-top: 1px solid var(--qn-border-soft); }
.qn-footer__bottom-inner {
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--s-6); flex-wrap: wrap;
	padding-block: var(--s-4);
	font-size: 13px; color: var(--qn-dim);
}
.qn-footer__legallist {
	display: flex; flex-wrap: wrap; gap: 16px;
	list-style: none; margin: 0; padding: 0;
}
.qn-footer__legallist a { color: var(--qn-dim); }
.qn-footer__legallist a:hover { color: var(--qn-accent); }

/* The newsletter block already carries a bottom rule, so the footer does not
   need a second one — or a gap — directly under it. The block is the last
   child of <main>, not a sibling of the footer, so the match goes through
   :has(); browsers without it simply keep the standing margin. */
.qn-main:has(> .qn-subscribe:last-child) + .qn-footer,
.qn-main:has(> .qn-subscribe:last-of-type:last-child) + .qn-footer {
	margin-top: 0;
	border-top: 0;
}


/* ==========================================================================
   11  Newsletter, forms, comments
   ========================================================================== */

.qn-subscribe {
	margin-top: var(--s-9);
	border-block: 1px solid var(--qn-border);
	background: var(--qn-surface);
}
.qn-subscribe__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--s-9); align-items: center;
	padding-block: var(--s-8);
}
.qn-subscribe__dek { margin: var(--s-4) 0 0; font-size: 17px; line-height: 1.6; max-width: 48ch; }
.qn-subscribe__form { display: grid; gap: 12px; }
.qn-subscribe__note { margin-top: 2px; }
.qn-subscribe__panel { min-width: 0; }

/* --------------------------------------------------------- Brevo's form
   The Brevo plugin emits its own markup and writes inline styles from its
   form designer, so this is deliberate taming of something the theme does
   not own. Two consequences:

     · Selectors target element types inside .qn-brevo rather than the
       plugin's class names, which change between releases and between the
       form templates an author can pick.
     · !important is used where the plugin sets the property inline, which no
       amount of specificity would beat.

   The aim is only that Brevo's fields read as Ledger fields. Anything the
   plugin adds beyond a label, an input and a button — a name field, a GDPR
   checkbox — inherits the same treatment.
   -------------------------------------------------------------------- */

.qn-brevo { min-width: 0; }

/* The plugin's wrappers carry their own panel chrome; the section is already
   a panel, so it comes off. */
.qn-brevo div,
.qn-brevo form {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin-inline: 0 !important;
	max-width: none !important;
	width: auto !important;
	float: none !important;
	font-family: var(--qn-body) !important;
	color: var(--qn-muted) !important;
}

.qn-brevo form { display: grid; gap: 12px; }
.qn-brevo p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; color: var(--qn-muted); }
.qn-brevo p:last-child { margin-bottom: 0; }

.qn-brevo label {
	display: block; margin-bottom: 8px;
	font-family: var(--qn-body) !important;
	font-size: 12px !important; letter-spacing: .14em; text-transform: uppercase;
	color: var(--qn-faint) !important;
}

.qn-brevo input[type="text"],
.qn-brevo input[type="email"],
.qn-brevo input[type="tel"],
.qn-brevo select,
.qn-brevo textarea {
	width: 100% !important;
	box-sizing: border-box;
	background: var(--qn-bg) !important;
	border: 1px solid var(--qn-border-input) !important;
	border-radius: 0 !important;
	color: var(--qn-text) !important;
	font-family: var(--qn-body) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	padding: 13px 15px !important;
	height: auto !important;
	box-shadow: none !important;
}
.qn-brevo input:focus,
.qn-brevo select:focus,
.qn-brevo textarea:focus { border-color: var(--qn-accent) !important; }
.qn-brevo ::placeholder { color: var(--qn-faint) !important; }

.qn-brevo input[type="submit"],
.qn-brevo button {
	display: inline-flex; align-items: center; justify-content: center;
	width: auto !important;
	background: var(--qn-accent) !important;
	border: 1px solid var(--qn-accent) !important;
	border-radius: 0 !important;
	color: var(--qn-accent-ink) !important;
	font-family: var(--qn-body) !important;
	font-size: 15px !important; font-weight: 600;
	letter-spacing: .03em;
	padding: 13px 24px !important;
	height: auto !important;
	cursor: pointer;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: filter var(--d-fast) var(--ease);
}
.qn-brevo input[type="submit"]:hover,
.qn-brevo button:hover { filter: brightness(1.08); }

/* Consent and other checkboxes stay checkbox-sized. */
.qn-brevo input[type="checkbox"],
.qn-brevo input[type="radio"] {
	width: auto !important;
	margin-right: 8px;
	accent-color: var(--qn-accent);
}
.qn-brevo input[type="checkbox"] + label,
.qn-brevo input[type="radio"] + label {
	display: inline; text-transform: none; letter-spacing: 0;
	font-size: 14px !important; color: var(--qn-muted) !important;
}

/* Brevo's own success and failure messages, given the theme's notice look. */
.qn-brevo [class*="alert"] {
	padding: 12px 14px !important;
	border: 1px solid var(--qn-border-firm) !important;
	font-size: 15px; line-height: 1.5;
	color: var(--qn-text) !important;
}
.qn-brevo [class*="alert-success"],
.qn-brevo [class*="alert_success"] { border-color: var(--qn-accent) !important; }

.qn-brevo a { color: var(--qn-accent) !important; }

.qn-contactform { display: grid; gap: var(--s-5); }
.qn-contactform .qn-field { margin: 0; }
.qn-contactform__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.qn-contactform fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.qn-contactform legend { padding: 0; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--qn-faint); }

/* Reason chooser: real radios, visually the chip treatment. The input keeps
   focus and keyboard behaviour; the label carries the appearance. */
.qn-reasons { display: flex; flex-wrap: wrap; gap: 10px; }
.qn-reason { position: relative; }
.qn-reason input {
	position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer;
}
.qn-reason span {
	display: block;
	border: 1px solid var(--qn-border-firm); color: var(--qn-muted);
	font-size: 14px; padding: 8px 16px;
}
.qn-reason input:checked + span { border-color: var(--qn-accent); color: var(--qn-accent); }
.qn-reason input:focus-visible + span { outline: 2px solid var(--qn-accent); outline-offset: 2px; }

.qn-comments { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--qn-border); }
.qn-comments__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.qn-comments__list .children { list-style: none; margin: 0; padding-left: var(--s-6); border-left: 1px solid var(--qn-border-soft); }
.qn-comments__list li.comment { padding-block: var(--s-5); border-bottom: 1px solid var(--qn-border-soft); }
.qn-comments .comment-author { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.qn-comments .comment-author img { border-radius: 50%; }
.qn-comments .comment-metadata { font-size: 13px; color: var(--qn-faint); margin-top: 4px; }
.qn-comments .comment-content { font-size: 16px; line-height: 1.7; color: var(--qn-prose); }
.qn-comments .reply { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.qn-comments__closed { margin-top: var(--s-5); }
.qn-commentform__title { margin: var(--s-7) 0 var(--s-4); font-size: 19px; }
.qn-comments input[type="text"],
.qn-comments input[type="email"],
.qn-comments input[type="url"],
.qn-comments textarea {
	width: 100%; background: var(--qn-surface);
	border: 1px solid var(--qn-border-input); color: var(--qn-text);
	font-family: var(--qn-body); font-size: 16px; padding: 12px 14px;
}
.qn-comments .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.qn-comments .comment-form-cookies-consent input { width: auto; }


/* ==========================================================================
   12  404, empty states
   ========================================================================== */

.qn-empty { padding-block: var(--s-9); display: grid; gap: var(--s-5); justify-items: start; }
.qn-empty__title { margin: 0; font-family: var(--qn-display); font-size: 24px; font-weight: 600; }
.qn-empty__text { margin: 0; color: var(--qn-muted); max-width: 56ch; }
.qn-empty__search { width: 100%; max-width: 640px; }

.qn-pagehead--404 { border-bottom: 0; }
.qn-404__back { margin: var(--s-6) 0 0; }
.qn-404__recent { padding-block: var(--s-7) var(--s-9); }


/* ==========================================================================
   13  Responsive
   ==========================================================================
   The layout reflows from 360px up. Every multi-column grid collapses, the
   contents rail becomes a native disclosure, and the filter scrollers are
   given an explicit track so they cannot widen the page.
   ========================================================================== */

@media (max-width: 1080px) {
	.qn-shell { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); padding-block: var(--s-8) var(--s-8); }
	.qn-shell__rail { position: static; }
	.qn-shell__body, .qn-shell--solo .qn-shell__body { max-width: 70ch; margin-inline: 0; }

	/* Contents becomes a collapsed disclosure rather than a rail. */
	.qn-toc { border: 1px solid var(--qn-border); padding: var(--s-4) var(--s-5); }
	.qn-toc__summary { padding-bottom: 0; border-bottom: 0; }
	.qn-toc[open] .qn-toc__summary { padding-bottom: var(--s-3); border-bottom: 1px solid var(--qn-border); }
	.qn-toc__list { max-height: 42vh; overflow-y: auto; }
}

@media (max-width: 1000px) {
	.qn-featured { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
	.qn-featured__figure { order: -1; }
	.qn-subscribe__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
	.qn-authorhead__inner { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-6); }
}

@media (max-width: 900px) {
	/* The masthead stacks: brand and utilities on one line, nav under. */
	.qn-masthead__inner { gap: var(--s-4); }
	.qn-brand { flex: 1 1 auto; }
	.qn-utility { order: 2; }
	.qn-nav { order: 3; flex-basis: 100%; }
	.qn-navtoggle { display: inline-flex; }
	.qn-utility__subscribe { display: none; }

	/* With JavaScript, the nav is a disclosure. Without it, the class is
	   never added and the list simply stays visible — no dead menu. */
	.js .qn-nav { display: none; }
	.js .qn-nav.is-open { display: block; }
	.qn-nav__list { flex-direction: column; gap: 0; padding-bottom: var(--s-3); }
	.qn-nav__list > li { border-top: 1px solid var(--qn-border-soft); }
	.qn-nav__list > li > a { display: block; padding: 12px 0; font-size: 17px; }
	.qn-nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible;
		border: 0; padding: 0 0 8px var(--s-4); background: none;
	}
}

@media (max-width: 860px) {
	.qn-grid--3 { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
	.qn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.qn-tiles > .qn-tile:nth-child(3n) { border-right: 1px solid var(--qn-border-soft); }
	.qn-tiles > .qn-tile:nth-child(2n) { border-right: 0; }
	.qn-tiles > .qn-tile:nth-child(3n + 1) { padding-left: var(--s-5); }
	.qn-tiles > .qn-tile:nth-child(2n + 1) { padding-left: 0; }

	.qn-row, .qn-row--pair { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.qn-row__stamp { display: flex; gap: 10px; align-items: baseline; }
	.qn-row__type { margin-top: 0; }
	.qn-row__meta { justify-content: flex-start; text-align: left; }

	.qn-postnav__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
	.qn-postnav__link--next { text-align: left; }
	.qn-postnav__link--next .qn-postnav__label { justify-content: flex-start; }

	.qn-footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

@media (max-width: 720px) {
	:root { --edge: 20px; }

	.qn-shell__body, .qn-shell--solo .qn-shell__body { max-width: none; }

	/* Filters scroll sideways rather than stacking into a wall of chips. */
	.qn-filters .qn-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
	.qn-filters__sort { display: none; }

	.qn-emailrow, .qn-searchform { grid-template-columns: minmax(0, 1fr); }
	.qn-contactform__pair { grid-template-columns: minmax(0, 1fr); }
	.qn-panel { padding: var(--s-5); }
	.qn-authorbox { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); }
	.qn-authorbox__avatar img { width: 56px; height: 56px; }
	.qn-byline { gap: 10px; }
	.qn-actions { margin-left: 0; flex-basis: 100%; }
	.qn-prose .alignleft, .qn-prose .alignright { float: none; margin-inline: 0; max-width: 100%; }
}

@media (max-width: 560px) {
	.qn-tiles { grid-template-columns: minmax(0, 1fr); }
	/* Single column: no vertical rules at all, whatever the wider
	   breakpoints set on the nth-child selectors. */
	.qn-tile,
	.qn-tiles > .qn-tile:nth-child(2n),
	.qn-tiles > .qn-tile:nth-child(2n + 1),
	.qn-tiles > .qn-tile:nth-child(3n),
	.qn-tiles > .qn-tile:nth-child(3n + 1) { padding-inline: 0; border-right: 0; }

	.qn-authorhead__inner { grid-template-columns: minmax(0, 1fr); }
	.qn-authorhead__avatar img { width: 88px; height: 88px; }
	.qn-brand__tagline { display: none; }
	.qn-footer__list { gap: 12px 24px; }
	.qn-iconbtn__label { display: none; }
	.qn-iconbtn { padding: 8px 10px; }
}


/* ==========================================================================
   14  Motion and forced colours
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

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

@media (forced-colors: active) {
	.qn-chip, .qn-iconbtn, .qn-btn, .qn-tile, .qn-panel { border-color: ButtonBorder; }
	.qn-figure--placeholder { background-image: none; }
}


/* Contact form submit row — the button and its note sit on one line until
   there is no room for both. */
.qn-contactform__submit {
	display: flex; flex-wrap: wrap; gap: var(--s-5);
	align-items: center; margin: 0;
}

/* The shortcode drops the form into ordinary page content, so it needs the
   reading measure back rather than the prose column's inherited type. */
.qn-prose .qn-contact { margin-block: var(--s-7); font-size: 16px; }
.qn-prose .qn-contact a { background: none; }
.qn-prose .qn-contact label { margin: 0; }
.qn-prose .qn-subscribe { margin-top: var(--s-7); }


/* ==========================================================================
   15  Homepage lead — headline and figure placement
   --------------------------------------------------------------------------
   Append this to the very end of assets/css/main.css. It comes after the
   responsive section on purpose: every rule here has the same specificity as
   the one it replaces, so source order is what makes it win. Nothing above
   needs editing or deleting.

   Pairs with the rewritten template-parts/content-featured.php, which splits
   the kicker and headline into .qn-featured__lead and leaves the dek, byline
   and call to action in .qn-featured__body.
   ========================================================================== */

/* Desktop is unchanged to the pixel: lead and body stack in the left column,
   the figure holds the right column and is top-aligned to the kicker. Row gap
   is zero because .qn-featured__dek already carries its own top margin. */
.qn-featured {
	grid-template-areas:
		"lead figure"
		"body figure";
	align-content: start;
	column-gap: var(--s-9);
	row-gap: 0;
}

.qn-featured__lead   { grid-area: lead; min-width: 0; }
.qn-featured__body   { grid-area: body; min-width: 0; }
.qn-featured__figure { grid-area: figure; align-self: start; margin: 0; }

@media (max-width: 1000px) {
	/* Headline first, then the image, then the dek. The claim leads; the
	   picture supports it rather than standing in front of it. */
	.qn-featured {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"lead"
			"figure"
			"body";
		column-gap: 0;
		row-gap: var(--s-6);
	}

	/* The old rule pulled the figure above everything. Grid areas place it
	   now, so the override is retired rather than fought. */
	.qn-featured__figure { order: 0; }

	/* Row gap supplies the spacing the dek used to supply itself. */
	.qn-featured__body > :first-child { margin-top: 0; }

	/* 17ch is right for a headline sharing a line with a figure. In one
	   column it forces a four-line stack out of a title that fits in two. */
	.qn-featured__title { max-width: none; }

	/* 56px of air above the kicker is desktop generosity. On a phone it is
	   the fold. */
	.qn-home__featured { padding-block: var(--s-6) var(--s-7); }
}

@media (max-width: 720px) {
	/* qn_thumbnail() writes aspect-ratio inline, so this needs the flag to
	   reach it. A 4:3 crop is 293px tall at 390px wide and swallows the
	   screen; 16:9 is 220px and leaves the dek visible under it. */
	.qn-featured__figure .qn-figure { aspect-ratio: 16 / 9 !important; }
}