/* =========================================================================
   Analysis of Fear
   1. Tokens
   2. Reset & base
   3. Layout primitives
   4. Header & navigation
   5. Cards & post lists
   6. Front page
   7. Article
   8. Editorial components (shortcodes)
   9. Sidebar & widgets
  10. Forms, comments, footer
  11. Utilities & motion
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
	--paper:        #fbfaf8;
	--surface:      #ffffff;
	--surface-2:    #f5f3ee;
	--ink:          #14161a;
	--band:         #14161a; /* dark strips with white text; stays dark in both schemes */
	--ink-2:        #3d424d;
	--muted:        #646a78;
	--line:         #e5e2da;
	--line-2:       #f0ede6;
	--field-line:   #878c96; /* form field borders need 3:1 against the page */
	/* Brand orange from the logo. --accent is darkened just enough to pass
	   WCAG AA as link text and under white button labels (5.2:1). */
	--accent:       #c2410c;
	--accent-ink:   #9a3412;
	--accent-wash:  #fff3ec;
	--on-accent:    #ffffff;
	--brand:        #e4571e;
	--low:          #146c43;
	--mid:          #9a5800;
	--high:         #c1121f;

	--font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
	--font-ui:      "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	--wrap:    1240px;
	--measure: 716px;
	--gap:     clamp(16px, 2.6vw, 30px);
	--radius:  12px;
	--radius-control: 10px; /* buttons, inputs, pagination */
	--header-h: 72px;

	--shadow-1: 0 1px 2px rgba(20,22,26,.05), 0 4px 14px rgba(20,22,26,.05);
	--shadow-2: 0 2px 6px rgba(20,22,26,.07), 0 16px 40px rgba(20,22,26,.09);

	color-scheme: light;
}

[data-theme="dark"] {
	--paper:       #101215;
	--surface:     #171a1f;
	--surface-2:   #1e2229;
	--ink:         #f2f1ee;
	--band:        #0a0b0d;
	--ink-2:       #c9ccd3;
	--muted:       #939aa8;
	--line:        #2a2f38;
	--line-2:      #22262d;
	--field-line:  #626875;
	--accent:      #ff7a3d;
	--accent-ink:  #ffa071;
	--accent-wash: #2a1b13;
	--on-accent:   #14161a;
	--brand:       #ff7a3d;
	--low:         #3ec27f;
	--mid:         #e0a136;
	--high:        #ff5a5f;

	--shadow-1: 0 1px 2px rgba(0,0,0,.4);
	--shadow-2: 0 2px 6px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.5);

	color-scheme: dark;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchors, focused links and the skip-link target all clear the sticky header. */
	scroll-padding-top: calc(var(--header-h) + 16px);
	/* Opening the menu hides the scrollbar; reserving its gutter stops the jump. */
	scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Components set their own display, which would otherwise beat the UA rule. */
[hidden] { display: none !important; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1.1em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .88em;
}
code { background: var(--surface-2); padding: .12em .38em; border-radius: 4px; }
pre {
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px;
	overflow-x: auto;
	line-height: 1.55;
}
pre code { background: none; padding: 0; }

blockquote { margin: 0; }

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

button { font: inherit; cursor: pointer; }

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

::selection { background: var(--accent); color: var(--on-accent); }

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

.aof-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: var(--paper);
	padding: 12px 20px; z-index: 999;
	font-weight: 600; border-radius: 0 0 8px 0;
}
.aof-skip:focus { left: 0; }
@media (min-width: 1080px) {
	.aof-skip--toc:focus { position: static; display: inline-block; margin-bottom: 12px; border-radius: var(--radius-control); }
}
@media (max-width: 1079px) { .aof-skip--toc { display: none; } }

/* ---------- 3. Layout primitives ---------- */
.aof-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.aof-main { display: block; min-height: 50vh; }

.aof-section { padding-block: clamp(36px, 6vw, 64px); }
.aof-section + .aof-section { padding-top: 0; }

.aof-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ink);
	flex-wrap: wrap;
}
.aof-section__title {
	font-size: clamp(19px, 2.4vw, 24px);
	margin: 0;
	letter-spacing: -.015em;
}
.aof-section__more {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	text-decoration: none;
	white-space: nowrap;
}
.aof-section__more:hover { text-decoration: underline; }
/* Padding with a matching negative margin: a 40px tap target, no layout change. */
.aof-section__more { display: inline-flex; align-items: center; gap: 6px; padding-block: 10px; margin-block: -10px; }
.aof-section__more .aof-icon { width: 15px; height: 15px; transition: transform .15s ease; }
.aof-section__more:hover .aof-icon { transform: translateX(3px); }

/* ---------- 4. Header & navigation ---------- */
.aof-topbar {
	background: var(--band);
	color: rgba(255,255,255,.72);
	font-size: 12.5px;
	letter-spacing: .01em;
}
.aof-topbar .aof-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
	padding-block: 7px;
}
.aof-topbar__tag { margin: 0; }
.aof-topbar__tag strong { color: #fff; font-weight: 600; }
.aof-topbar__links { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
.aof-topbar a { color: rgba(255,255,255,.72); text-decoration: none; }
.aof-topbar a:hover { color: #fff; text-decoration: underline; }
/* On phones the strap line wraps to two lines and pushes the page down;
   the masthead carries the brand on its own there. */
@media (max-width: 720px) { .aof-topbar { display: none; } }

/* Masthead. Sticky; on small screens it tucks away while reading down. */
.aof-header {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 60;
	transition: transform .25s ease, box-shadow .25s ease;
}
.aof-header.is-tucked { transform: translateY(-100%); }
.aof-header__row {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2.4vw, 32px);
	min-height: var(--header-h);
}

.aof-brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	color: var(--ink);
	border-radius: 6px;
}
.aof-brand__logo { display: block; height: 50px; width: auto; }
.aof-brand__logo--dark,
.aof-drawer__logo--dark { display: none; }
[data-theme="dark"] .aof-brand__logo--light,
[data-theme="dark"] .aof-drawer__logo--light { display: none; }
[data-theme="dark"] .aof-brand__logo--dark,
[data-theme="dark"] .aof-drawer__logo--dark { display: block; }

.aof-nav { flex: 1; min-width: 0; display: flex; justify-content: center; }
.aof-nav__list {
	list-style: none;
	display: flex;
	align-items: center;
	gap: clamp(4px, 1vw, 12px);
	margin: 0; padding: 0;
}
.aof-nav__list > li > a,
.aof-nav__trigger {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-ui);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
	padding: 11px 12px;
	border-radius: 8px;
	background: none;
	border: 0;
	transition: background .15s ease, color .15s ease;
}
.aof-nav__list > li > a:hover,
.aof-nav__trigger:hover,
.aof-nav__trigger[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.aof-nav__list > .current-menu-item > a,
.aof-nav__list > .current-menu-parent > a { color: var(--accent); }
.aof-nav__trigger .aof-icon { width: 15px; height: 15px; transition: transform .2s ease; }
.aof-nav__trigger[aria-expanded="true"] .aof-icon { transform: rotate(180deg); }

.aof-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }

.aof-iconbtn {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius-control);
	color: var(--ink);
	padding: 0;
	transition: background .15s ease, border-color .15s ease;
}
.aof-iconbtn:hover,
.aof-iconbtn[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line); }
.aof-iconbtn .aof-icon { width: 20px; height: 20px; }
[data-aof-theme] .aof-icon--sun { display: none; }
[data-theme="dark"] [data-aof-theme] .aof-icon--sun { display: block; }
[data-theme="dark"] [data-aof-theme]:has(.aof-icon--sun) .aof-icon--moon { display: none; }

@media (min-width: 1080px) { .aof-iconbtn--menu { display: none; } }
@media (max-width: 1079px) {
	.aof-nav { display: none; }
	:root { --header-h: 62px; }
	.aof-brand__logo { height: 40px; }
}
@media (max-width: 420px) { .aof-iconbtn { width: 40px; height: 40px; } }

/* Topics panel */
.aof-mega {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-2);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease;
}
.aof-mega.is-open { opacity: 1; transform: none; }
.aof-mega__inner {
	display: grid;
	grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	padding-block: 26px 30px;
}
.aof-mega__label,
.aof-drawer__label {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .11em;
	color: var(--muted);
	margin: 0 0 12px;
}
.aof-mega__topics {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2px 18px;
}
.aof-mega__topics a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
}
.aof-mega__topics a:hover { background: var(--surface-2); color: var(--accent); }
.aof-mega__topics a:hover .aof-mega__count { background: var(--surface); }
.aof-mega__label { padding-left: 12px; }
.aof-mega__count,
.aof-drawer__count {
	font-size: 12px;
	font-weight: 600;
	color: var(--muted);
	background: var(--surface-2);
	border-radius: 100px;
	padding: 2px 8px;
	min-width: 26px;
	text-align: center;
}
.aof-mega__side { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); }
.aof-mega__formats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aof-mega__formats a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	text-decoration: none;
	color: var(--ink);
}
.aof-mega__formats a:hover { background: var(--surface-2); }
.aof-mega__formats strong { display: block; font-size: 15px; }
.aof-mega__formats span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Search panel */
.aof-searchbar {
	position: absolute;
	left: 0; right: 0; top: 100%;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-2);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease;
}
.aof-searchbar.is-open { opacity: 1; transform: none; }
.aof-searchbar .aof-wrap { padding-block: 20px 22px; }
.aof-searchbar .aof-searchform { max-width: 720px; }
.aof-searchbar__hint { margin: 16px 0 8px; font-size: 13px; color: var(--muted); }

/* Off-canvas menu */
.aof-drawer { position: fixed; inset: 0; z-index: 110; }
.aof-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 11, 13, .5);
	opacity: 0;
	transition: opacity .24s ease;
}
.aof-drawer__panel {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(86vw, 400px);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.2, .8, .2, 1);
	box-shadow: -18px 0 40px rgba(0, 0, 0, .18);
}
.aof-drawer.is-open .aof-drawer__backdrop { opacity: 1; }
.aof-drawer.is-open .aof-drawer__panel { transform: none; }
.aof-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px 10px 20px;
	min-height: 62px;
	border-bottom: 1px solid var(--line);
}
.aof-drawer__logo { height: 36px; width: auto; }
.aof-drawer__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 18px 20px calc(28px + env(safe-area-inset-bottom));
}
.aof-drawer__label { margin-top: 24px; }
.aof-drawer__topics,
.aof-drawer__links { list-style: none; margin: 0; padding: 0; }
.aof-drawer__topics a,
.aof-drawer__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 6px 4px;
	border-bottom: 1px solid var(--line-2);
	font-size: 16px;
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}
.aof-drawer__links a { font-weight: 400; color: var(--ink-2); }
.aof-drawer__topics a:hover,
.aof-drawer__links a:hover { color: var(--accent); }
.aof-drawer__formats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.aof-drawer__theme {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 26px;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: var(--surface-2);
	color: var(--ink);
	font-weight: 600;
	font-size: 15px;
}
.aof-drawer__theme .aof-icon { width: 18px; height: 18px; }
.aof-locked, .aof-locked body { overflow: hidden; }
@media (min-width: 1080px) { .aof-drawer { display: none !important; } }

/* Chips: topic and format pills */
.aof-chips { margin-top: 18px; }
.aof-chips ul {
	position: relative; /* offsetParent for the scroll-to-current script */
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.aof-chip {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: var(--surface);
	color: var(--ink-2);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.aof-chip:hover { border-color: var(--accent); color: var(--accent); }
.aof-chip.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 720px) {
	/* One swipeable row instead of a tall block of wrapped pills. */
	.aof-chips { margin-inline: calc(-1 * clamp(16px, 4vw, 32px)); }
	.aof-chips ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-inline: clamp(16px, 4vw, 32px);
		scroll-padding-inline: clamp(16px, 4vw, 32px);
	}
	.aof-chips ul::-webkit-scrollbar { display: none; }
}

/* Search form */
.aof-searchform { display: flex; gap: 8px; }
.aof-searchform input[type="search"] {
	flex: 1;
	font: inherit;
	font-size: 16px;
	padding: 11px 14px;
	border: 1px solid var(--field-line);
	border-radius: var(--radius-control);
	background: var(--paper);
	color: var(--ink);
	min-width: 0;
	text-overflow: ellipsis;
}
.aof-searchform input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
.aof-searchform input[type="search"]:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}
.aof-searchform button {
	padding: 11px 20px;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	border-radius: var(--radius-control);
	font-weight: 600;
	font-size: 15px;
}
.aof-searchform button:hover { background: var(--accent); }

/* Reading progress */
.aof-progress {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 0;
	background: var(--brand);
	z-index: 100;
	transition: width .08s linear;
}

/* ---------- 5. Cards & post lists ---------- */
.aof-grid {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}

.aof-card-post {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.aof-card-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-2);
	border-color: transparent;
}
/* Ring the card only when its own title link has keyboard focus, not when
   the category label inside it does. */
.aof-card-post:has(.aof-card-post__link:focus-visible) { box-shadow: 0 0 0 2px var(--accent); }
.aof-card-post__media {
	aspect-ratio: 16 / 9;
	background: var(--surface-2);
	overflow: hidden;
}
.aof-card-post__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.aof-card-post:hover .aof-card-post__media img { transform: scale(1.04); }
.aof-card-post__blank {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: var(--line);
	background: repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--paper) 10px 20px);
}
.aof-card-post__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
}
.aof-card-post__title {
	font-size: 18px;
	line-height: 1.25;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.aof-card-post__link { color: var(--ink); text-decoration: none; }
/* Stretch the title link over the card; the eyebrow sits above it. */
.aof-card-post__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.aof-card-post__link:focus-visible { outline: none; }
.aof-card-post:hover .aof-card-post__link { color: var(--accent); }
.aof-card-post .aof-eyebrow { position: relative; z-index: 2; align-self: flex-start; }
.aof-card-post__excerpt {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.aof-card-post__foot { margin-top: auto; padding-top: 4px; }
.aof-card-post--compact .aof-card-post__title { font-size: 16.5px; }

/* A lone card on the last row of a three-up feed becomes a wide feature card
   instead of leaving two empty slots. */
@media (min-width: 1080px) {
	.aof-grid--feed > .aof-card-post:last-child:nth-child(3n+1):not(:first-child) {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	}
	.aof-grid--feed > .aof-card-post:last-child:nth-child(3n+1):not(:first-child) .aof-card-post__media { aspect-ratio: auto; min-height: 100%; }
	.aof-grid--feed > .aof-card-post:last-child:nth-child(3n+1):not(:first-child) .aof-card-post__body { padding: 24px 28px; justify-content: center; }
	.aof-grid--feed > .aof-card-post:last-child:nth-child(3n+1):not(:first-child) .aof-card-post__title { font-size: 22px; }
}

/* Phones: feeds become compact rows so a list of six is not six screens tall. */
@media (max-width: 640px) {
	.aof-grid--feed { gap: 0; grid-template-columns: minmax(0, 1fr); }
	.aof-grid--feed .aof-card-post {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		gap: 14px;
		align-items: start;
		background: none;
		border: 0;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		padding: 16px 0;
		overflow: visible;
	}
	.aof-grid--feed .aof-card-post:first-child { padding-top: 4px; }
	.aof-grid--feed .aof-card-post:hover { transform: none; box-shadow: none; }
	.aof-grid--feed .aof-card-post__media { aspect-ratio: 4 / 3; border-radius: 10px; }
	.aof-grid--feed .aof-card-post__body { padding: 0; gap: 6px; }
	.aof-grid--feed .aof-card-post__title { font-size: 16px; line-height: 1.28; }
	.aof-grid--feed .aof-card-post__excerpt { display: none; }
	.aof-grid--feed .aof-eyebrow { font-size: 10.5px; }
}

/* Category rails: a four-up row on wide screens, a swipeable strip on phones. */
.aof-rail {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1079px) { .aof-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.aof-rail {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
		padding: 2px clamp(16px, 4vw, 32px) 8px;
		scroll-padding-inline: clamp(16px, 4vw, 32px);
	}
	.aof-rail::-webkit-scrollbar { display: none; }
	.aof-rail > .aof-card-post { flex: 0 0 78%; scroll-snap-align: start; }
	.aof-rail > .aof-card-post:hover { transform: none; }
}

.aof-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--accent);
	text-decoration: none;
}
.aof-eyebrow::before {
	content: "";
	width: 14px; height: 2px;
	background: var(--brand);
	flex: none;
}
.aof-eyebrow:hover { text-decoration: underline; }

.aof-meta {
	font-size: 12.5px;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
}
.aof-meta__sep { opacity: .5; }

/* Compact list rows */
.aof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aof-list__item {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--line-2);
}
.aof-list__item:last-child { border-bottom: 0; }
.aof-list__num {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--brand);
	line-height: 1;
	letter-spacing: -.04em;
}
.aof-list__title {
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 4px;
}
.aof-list__title a { color: var(--ink); text-decoration: none; }
.aof-list__title a:hover { color: var(--accent); }

/* ---------- 6. Front page ---------- */
.aof-hero { padding-block: clamp(20px, 3.4vw, 44px) 0; }
.aof-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
}
@media (max-width: 960px) { .aof-hero__grid { grid-template-columns: minmax(0, 1fr); } }

.aof-lead {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--surface);
	transition: box-shadow .25s ease;
}
.aof-lead:hover { box-shadow: var(--shadow-2); }
.aof-lead__media {
	aspect-ratio: 16 / 9;
	background: var(--surface-2);
	overflow: hidden;
}
.aof-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.aof-lead:hover .aof-lead__media img { transform: scale(1.025); }
.aof-lead__body { padding: clamp(18px, 3vw, 30px); }
.aof-lead .aof-eyebrow { position: relative; z-index: 2; }
.aof-lead__title {
	font-size: clamp(25px, 3.6vw, 40px);
	line-height: 1.08;
	margin: 10px 0 12px;
	letter-spacing: -.03em;
}
.aof-lead__link { color: var(--ink); text-decoration: none; }
.aof-lead__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.aof-lead:hover .aof-lead__link { color: var(--accent); }
.aof-lead__deck {
	font-family: var(--font-body);
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.55;
	color: var(--ink-2);
	margin: 0 0 14px;
	max-width: 60ch;
}

.aof-secondary { display: flex; flex-direction: column; }
.aof-secondary__label {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ink);
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
}
.aof-sec {
	position: relative;
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding-block: 16px;
	border-bottom: 1px solid var(--line);
}
.aof-sec:last-child { border-bottom: 0; }
.aof-sec__body { min-width: 0; }
.aof-sec .aof-eyebrow { position: relative; z-index: 2; font-size: 10.5px; }
.aof-sec__title {
	font-size: 16px;
	line-height: 1.28;
	margin: 6px 0 6px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
@media (max-width: 400px) { .aof-sec__title { -webkit-line-clamp: 4; } }
.aof-sec__link { color: var(--ink); text-decoration: none; }
.aof-sec__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.aof-sec:hover .aof-sec__link { color: var(--accent); }
/* The clamped title would clip a ring on the link itself. */
.aof-sec__link:focus-visible { outline: none; }
.aof-sec:has(.aof-sec__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.aof-sec__media {
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
	background: var(--surface-2);
}
.aof-sec__media img { width: 100%; height: 100%; object-fit: cover; }

/* Topic directory */
.aof-section__note { font-size: 13px; color: var(--muted); font-weight: 600; }
.aof-topics {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(7, minmax(0, 1fr));
}
@media (max-width: 1180px) { .aof-topics { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .aof-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	/* Two swipeable rows keep fourteen topics to one short band. */
	.aof-topics {
		grid-template-columns: none;
		grid-template-rows: repeat(2, auto);
		grid-auto-flow: column;
		grid-auto-columns: 42%;
		gap: 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
		padding: 2px clamp(16px, 4vw, 32px) 6px;
		scroll-padding-inline: clamp(16px, 4vw, 32px);
	}
	.aof-topics::-webkit-scrollbar { display: none; }
	.aof-topics > li { scroll-snap-align: start; }
}
.aof-topic {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--band);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
@media (max-width: 640px) { .aof-topic { aspect-ratio: 4 / 3; } }
.aof-topic__media { position: absolute; inset: 0; z-index: -2; }
.aof-topic__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.aof-topic::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(10,11,13,.05) 25%, rgba(10,11,13,.55) 60%, rgba(10,11,13,.9) 100%);
}
.aof-topic:hover .aof-topic__media img { transform: scale(1.06); }
.aof-topic__body {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 12px 12px 12px;
	display: grid;
	gap: 2px;
}
.aof-topic__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; }
.aof-topic__count { font-size: 12px; color: rgba(255,255,255,.75); }
.aof-topic:hover .aof-topic__name { text-decoration: underline; text-underline-offset: 3px; }

/* The premise strip */
.aof-premise {
	background: var(--band);
	color: #fff;
	padding-block: clamp(34px, 5vw, 56px);
}
/* The sections around the band already carry their own padding. */
.aof-hero + .aof-premise { margin-top: clamp(36px, 6vw, 64px); }
.aof-signup--wide { margin-block: 0; }
.aof-main > .aof-section:last-child { padding-bottom: 0; }
.aof-premise h2 {
	color: #fff;
	font-size: clamp(22px, 3vw, 32px);
	max-width: 20ch;
	margin: 0 0 14px;
}
.aof-premise__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: clamp(24px, 5vw, 60px);
	align-items: center;
}
@media (max-width: 820px) { .aof-premise__grid { grid-template-columns: minmax(0, 1fr); } }
.aof-premise p {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: rgba(255,255,255,.78);
	margin: 0 0 1em;
}
.aof-premise p:last-child { margin-bottom: 0; }
.aof-premise__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
	gap: 20px;
	padding-top: 8px;
}
.aof-premise__stat strong {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1;
	color: #fff;
	letter-spacing: -.03em;
}
.aof-premise__stat span {
	display: block;
	margin-top: 8px;
	font-size: 12.5px;
	color: rgba(255,255,255,.6);
	line-height: 1.4;
}

/* ---------- 7. Article ---------- */
.aof-crumbs { padding-block: 18px 0; }
.aof-crumbs-wrap { max-width: var(--measure); margin-inline: auto; }
.aof-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0; padding: 0;
	font-size: 12.5px;
	color: var(--muted);
}
.aof-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.aof-crumbs a { color: var(--muted); text-decoration: none; }
.aof-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.aof-crumbs [aria-current] { color: var(--ink-2); }
/* Keep the trail on one line; the page title is right below, so the last
   crumb can give way with an ellipsis. */
.aof-crumbs ol { flex-wrap: nowrap; min-width: 0; }
.aof-crumbs li { flex: none; white-space: nowrap; }
.aof-crumbs li:last-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.aof-entry-head {
	max-width: var(--measure);
	margin-inline: auto;
	padding-block: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px);
}
.aof-entry-head--wide { max-width: 900px; }
.aof-title {
	font-size: clamp(29px, 5vw, 47px);
	line-height: 1.08;
	letter-spacing: -.03em;
	margin: 12px 0 16px;
	overflow-wrap: break-word;
}
.aof-deck {
	font-family: var(--font-body);
	font-size: clamp(18px, 2vw, 21px);
	line-height: 1.5;
	color: var(--ink-2);
	margin: 0 0 24px;
}

.aof-byline {
	display: flex;
	align-items: center;
	gap: 13px;
	padding-block: 16px;
	border-block: 1px solid var(--line);
}
.aof-byline__avatar { border-radius: 50%; width: 42px; height: 42px; flex: none; }
.aof-byline__text { min-width: 0; }
.aof-byline__who { margin: 0; font-size: 14.5px; font-weight: 600; }
.aof-byline__who a { color: var(--ink); text-decoration: none; }
.aof-byline__who a:hover { color: var(--accent); text-decoration: underline; }
.aof-byline__when {
	margin: 2px 0 0;
	font-size: 12.5px;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.aof-byline__sep { opacity: .45; }
.aof-byline__updated { color: var(--accent); font-weight: 600; }
@media (max-width: 640px) {
	/* "Updated …" takes its own line instead of stranding a separator. */
	.aof-byline__sep:has(+ .aof-byline__updated) { display: none; }
	.aof-byline__updated { order: 1; flex-basis: 100%; }
}
.aof-byline__note {
	margin: 6px 0 0;
	font-family: var(--font-body);
	font-size: 13.5px;
	color: var(--muted);
	font-style: italic;
}

.aof-hero-figure {
	margin: 0 0 clamp(24px, 4vw, 40px);
	max-width: 1000px;
	margin-inline: auto;
}
.aof-hero-figure img { width: 100%; border-radius: var(--radius); }
.aof-hero-figure figcaption {
	margin-top: 10px;
	font-size: 12.5px;
	color: var(--muted);
	text-align: center;
}

/* The two-column article shell */
.aof-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(28px, 5vw, 64px);
	align-items: start;
	padding-bottom: clamp(40px, 6vw, 72px);
}
@media (max-width: 1079px) { .aof-shell { grid-template-columns: minmax(0, 1fr); } }
.aof-shell__main { min-width: 0; }

/* The body fills the column; it is the text children that are held to the
   reading measure. Capping the container instead would stop a photograph or a
   video from ever breaking out wider than the prose. */
.aof-entry {
	font-family: var(--font-body);
	font-size: 18.5px;
	line-height: 1.72;
	color: var(--ink-2);
	width: 100%;
	overflow-wrap: break-word;
}
.aof-entry > * { max-width: var(--measure); margin-inline: auto; }
@media (max-width: 640px) {
	.aof-deck { font-size: 17.5px; margin-bottom: 18px; }
	.aof-entry { font-size: 17.5px; line-height: 1.7; }
	.aof-byline { padding-block: 13px; }
}

/* Plain-element rules are wrapped in :where() so they weigh no more than a
   single class: the editorial components below (card titles, Fear Index
   labels, box titles) then keep their own spacing instead of inheriting the
   running-text margins. */
.aof-entry :where(p) { margin-block: 0 1.35em; }
.aof-entry :where(h2) {
	font-size: clamp(23px, 3vw, 29px);
	margin-block: 2.1em .55em;
	padding-top: .3em;
	letter-spacing: -.025em;
}
.aof-entry :where(h3) {
	font-size: clamp(19px, 2.2vw, 22px);
	margin-block: 1.7em .45em;
}
.aof-entry :where(h4) { font-size: 17.5px; margin-block: 1.5em .4em; font-family: var(--font-ui); }
.aof-entry :where(ul, ol) { margin: 0 auto 1.35em; padding-left: 1.35em; }
.aof-entry :where(li) { margin-bottom: .45em; }
.aof-entry :where(li)::marker { color: var(--accent); }
.aof-entry :where(a) { color: var(--accent); font-weight: 600; }
.aof-entry :where(strong) { color: var(--ink); font-weight: 600; }
.aof-entry :where(img) { border-radius: var(--radius); }
.aof-entry :where(figure) { margin: 2em auto; }
.aof-entry :where(figcaption) {
	margin-top: 9px;
	font-family: var(--font-ui);
	font-size: 12.5px;
	color: var(--muted);
	text-align: center;
}
.aof-entry :where(blockquote) {
	border-left: 3px solid var(--accent);
	padding: 4px 0 4px 22px;
	margin: 1.8em auto;
	font-size: 20px;
	line-height: 1.5;
	color: var(--ink);
	font-style: italic;
}
.aof-entry .alignwide { max-width: 960px; }
.aof-entry .alignfull { max-width: none; width: 100%; }
.aof-entry > table, .aof-entry .wp-block-table { overflow-x: auto; display: block; }
.aof-archive-head h1, .aof-card-post__title, .aof-sec__title, .aof-lead__title, .aof-list__title, .aof-ranked__link { overflow-wrap: anywhere; }

/* Plain tables written in the body. */
.aof-entry .wp-block-table { margin: 2em auto; }
.aof-entry .wp-block-table table,
.aof-entry > table {
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.45;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--surface);
}
/* A bare table keeps its own horizontal scroll instead of being clipped. */
.aof-entry > table { overflow-x: auto; width: max-content; max-width: 100%; }
.aof-entry .wp-block-table th,
.aof-entry .wp-block-table td,
.aof-entry > table th,
.aof-entry > table td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--line-2);
	color: var(--ink-2);
}
.aof-entry .wp-block-table thead th,
.aof-entry > table thead th {
	background: var(--surface-2);
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-bottom: 1px solid var(--line);
}
.aof-entry .wp-block-table tr:last-child td,
.aof-entry > table tr:last-child td { border-bottom: 0; }
.aof-entry .wp-block-table td:first-child,
.aof-entry > table td:first-child { color: var(--ink); font-weight: 600; }
.aof-entry .wp-block-table figcaption { text-align: left; }
.aof-entry .wp-block-table thead,
.aof-entry .wp-block-table tfoot { border: 0; }

.aof-article-foot {
	max-width: var(--measure);
	margin-inline: auto;
	padding-top: clamp(28px, 4vw, 40px);
}

.aof-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.aof-tags a {
	font-family: var(--font-ui);
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: 100px;
	color: var(--ink-2);
	text-decoration: none;
	background: var(--surface);
}
.aof-tags a:hover { border-color: var(--accent); color: var(--accent); }

.aof-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-block: 18px;
	border-block: 1px solid var(--line);
	margin-bottom: 30px;
}
.aof-share__label {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--muted);
	margin-right: 4px;
}
.aof-share__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--ink-2);
	text-decoration: none;
}
.aof-share__link .aof-icon { width: 15px; height: 15px; flex: none; opacity: .75; }
.aof-share__link:hover { border-color: var(--ink); color: var(--ink); }
.aof-share__link:hover .aof-icon { opacity: 1; }
@media (max-width: 640px) {
	.aof-share__label { flex-basis: 100%; }
	.aof-share__link { flex: 1 1 auto; text-align: center; padding-inline: 10px; }
}

.aof-authorbox {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 18px;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin-bottom: 34px;
}
.aof-authorbox img { border-radius: 50%; width: 64px; height: 64px; }
.aof-authorbox__name { font-size: 17px; margin: 0 0 2px; }
.aof-authorbox__role {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--accent);
	font-weight: 700;
	margin: 0 0 8px;
}
.aof-authorbox__bio {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0;
}
@media (max-width: 560px) {
	.aof-authorbox { grid-template-columns: minmax(0, 1fr); }
	.aof-authorbox img { width: 54px; height: 54px; }
}

/* ---------- 8. Editorial components ---------- */
.aof-disclosure {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	padding: 12px 16px;
	margin: 0 auto 26px;
	max-width: var(--measure);
}
.aof-disclosure svg { flex: none; margin-top: 4px; color: var(--accent); }
.aof-disclosure a { color: inherit; text-decoration: underline; }
.aof-method {
	font-family: var(--font-ui);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin: 0 auto 26px;
	max-width: var(--measure);
}
.aof-method p { margin: 0 0 8px; font-size: inherit; }
.aof-method p:last-child { margin-bottom: 0; }
.aof-method__title {
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	font-size: 12.5px;
	color: var(--muted);
}
.aof-evidence {
	font-family: var(--font-ui);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
	margin: 0 auto 26px;
	max-width: var(--measure);
}
.aof-evidence__title,
.aof-next__title {
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	font-size: 12.5px !important;
	color: var(--muted);
	margin: 0 0 8px !important;
}
.aof-evidence__list { margin: 0; display: grid; gap: 6px; }
.aof-evidence__list > div { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); gap: 12px; }
.aof-evidence__list dt { font-weight: 600; margin: 0; }
.aof-evidence__list dd { margin: 0; overflow-wrap: anywhere; }
.aof-evidence__foot { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--muted); }
.aof-evidence a, .aof-next a { color: inherit; text-decoration: underline; }
@media (max-width: 560px) {
	.aof-evidence__list > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.aof-hub-pill {
	font-family: var(--font-ui);
	font-size: 14px !important;
	max-width: var(--measure);
	margin: -12px auto 26px !important;
	color: var(--muted);
}
.aof-hub-pill a { color: var(--ink); font-weight: 600; }
.aof-next {
	font-family: var(--font-ui);
	max-width: var(--measure);
	margin: 2em auto;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius);
	background: var(--surface);
}
.aof-next ul { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.45; }
.aof-next li { margin-bottom: .6em; }
.aof-next a { font-weight: 600; }
.aof-next__why { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; }
.aof-next__hub { margin: 10px 0 0 !important; font-size: 14px !important; }
.aof-hub-toc {
	font-family: var(--font-ui);
	max-width: var(--measure);
	margin: 1.5em auto 2em;
	padding: 14px 18px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.aof-hub-toc__title { font-weight: 700; font-size: 12.5px !important; text-transform: uppercase; color: var(--muted); margin: 0 0 8px !important; }
.aof-hub-toc ol { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.6; }
.aof-hub-toc span { color: var(--muted); font-size: 13px; }
.aof-hub-sec { max-width: var(--measure); margin: 0 auto 2.2em; scroll-margin-top: 90px; }
.aof-entry .aof-hub-list { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 10px; }
.aof-entry .aof-hub-item {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-ui);
}
.aof-hub-item:not(:has(.aof-hub-item__img)) { grid-template-columns: minmax(0, 1fr); }
.aof-hub-item__img img { display: block; width: 120px; height: 68px; object-fit: cover; border-radius: 6px; }
.aof-hub-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aof-entry .aof-hub-item__link { font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.aof-entry .aof-hub-item__link:hover { color: var(--accent); text-decoration: underline; }
.aof-hub-item__hook { color: var(--muted); font-size: 14px; line-height: 1.45; }
.aof-hub-foot { max-width: var(--measure); margin: 2em auto 0 !important; font-family: var(--font-ui); font-size: 14px !important; color: var(--muted); }
@media (max-width: 560px) {
	.aof-entry .aof-hub-item { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
	.aof-hub-item__img img { width: 88px; height: 50px; }
}
.aof-btn__sub--note { display: block; color: var(--muted); font-size: 12.5px; }
.aof-paid-note {
	font-family: var(--font-ui);
	font-size: 14px !important;
	line-height: 1.5;
	color: var(--ink);
	background: var(--surface-2);
	border-left: 4px solid var(--accent);
	border-radius: 6px;
	padding: 9px 14px;
	margin: 0 0 14px !important;
}
.aof-table__caption {
	font-family: var(--font-ui);
	font-size: 13px !important;
	color: var(--muted);
	margin: 8px 0 0 !important;
}

.aof-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	padding: 13px 22px;
	border-radius: var(--radius-control);
	background: var(--accent);
	color: var(--on-accent) !important;
	text-decoration: none !important;
	border: 1px solid var(--accent);
	transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
	text-align: center;
	min-height: 48px;
}
.aof-btn:hover {
	background: var(--accent-ink);
	border-color: var(--accent-ink);
	color: var(--on-accent) !important;
	box-shadow: 0 6px 18px rgba(194, 65, 12, .26);
}
.aof-btn:active { transform: translateY(1px); }
.aof-btn--block { display: flex; width: 100%; }
.aof-btn--ghost {
	background: transparent;
	color: var(--ink) !important;
	border-color: var(--line);
	font-size: 13.5px;
	padding: 9px 16px;
}
.aof-btn--ghost:hover {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper) !important;
	box-shadow: none;
}
.aof-btn--ghost { min-height: 40px; }
.aof-btn__icon { flex: none; opacity: .8; }
.aof-btn__sub {
	display: block;
	font-family: var(--font-ui);
	font-size: 11.5px;
	color: var(--muted);
	margin-top: 7px;
	text-align: center;
}

/* Product card */
.aof-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	margin: 2.2em auto;
	max-width: var(--measure);
	box-shadow: var(--shadow-1);
}
.aof-card__badge {
	position: absolute;
	top: -11px;
	left: 20px;
	background: var(--accent);
	color: var(--on-accent);
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	padding: 5px 12px;
	border-radius: 100px;
}
.aof-card__body {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: 22px;
	padding: 26px 24px 24px;
}
@media (max-width: 680px) {
	.aof-card__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
.aof-card__media {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
}
.aof-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.aof-card__media-blank { width: 100%; height: 100%; display: grid; place-items: center; color: var(--line); }
.aof-card__rank {
	display: inline-block;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--accent);
	margin-bottom: 6px;
}
.aof-card__title {
	font-family: var(--font-display);
	font-size: 21px;
	line-height: 1.22;
	margin: 0 0 10px;
}
.aof-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	font-family: var(--font-ui);
}
.aof-card__price { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.aof-card__merchant { font-size: 13px; color: var(--muted); }
.aof-card__score {
	margin-left: auto;
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 100px;
	padding: 3px 11px;
}
.aof-card__score small { font-weight: 400; color: var(--muted); }
.aof-card__blurb {
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--ink-2);
}
.aof-card__blurb p:last-child { margin-bottom: 0; }
.aof-card__pc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 6px 20px;
	margin: 14px 0 18px;
}
@media (max-width: 560px) { .aof-card__pc { grid-template-columns: minmax(0, 1fr); } }
.aof-pros, .aof-cons {
	list-style: none;
	margin: 0; padding: 0;
	font-family: var(--font-ui);
	font-size: 13.5px;
	line-height: 1.45;
}
.aof-pros li, .aof-cons li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 5px;
	color: var(--ink-2);
}
.aof-pros li::before, .aof-cons li::before {
	position: absolute;
	left: 0; top: 0;
	font-weight: 700;
}
.aof-pros li::before { content: "+"; color: var(--low); font-size: 16px; }
.aof-cons li::before { content: "−"; color: var(--high); font-size: 16px; }
/* The article body indents its own lists; these carry their own markers. */
.aof-entry .aof-pros,
.aof-entry .aof-cons { padding-left: 0; margin: 0; max-width: none; }
.aof-entry .aof-pros li::marker,
.aof-entry .aof-cons li::marker { content: ""; }
.aof-card__cta { margin-top: auto; }

/* Comparison table */
.aof-table-wrap {
	margin: 2.2em auto;
	max-width: 940px;
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
}
.aof-table__title {
	font-family: var(--font-ui);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin: 0;
	padding: 14px 18px 0;
}
.aof-table { font-family: var(--font-ui); font-size: 14px; line-height: 1.45; min-width: 640px; }
.aof-table th, .aof-table td {
	text-align: left;
	padding: 13px 16px;
	border-bottom: 1px solid var(--line-2);
	vertical-align: middle;
}
.aof-table thead th {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	background: var(--surface-2);
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.aof-table tbody tr:last-child th, .aof-table tbody tr:last-child td { border-bottom: 0; }
.aof-table tbody tr:hover { background: var(--surface-2); }
.aof-table__product { display: flex; align-items: center; gap: 11px; }
.aof-table__product img { width: 40px; height: 40px; object-fit: contain; border-radius: 5px; flex: none; background: var(--surface-2); }
.aof-table__product a { color: var(--ink); text-decoration: none; font-weight: 600; }
.aof-table__product a:hover { color: var(--accent); }
.aof-table .aof-btn { white-space: nowrap; }

.aof-pill {
	display: inline-block;
	min-width: 34px;
	text-align: center;
	font-weight: 700;
	font-size: 12.5px;
	padding: 3px 9px;
	border-radius: 100px;
}
.aof-pill--low  { background: rgba(20,108,67,.1);  color: var(--low); }
.aof-pill--mid  { background: rgba(169,97,0,.1);   color: var(--mid); }
.aof-pill--high { background: rgba(193,18,31,.1);  color: var(--high); }

@media (max-width: 680px) {
	.aof-table { min-width: 0; }
	.aof-table thead { display: none; }
	.aof-table tbody tr {
		display: block;
		padding: 14px 16px;
		border-bottom: 1px solid var(--line);
	}
	.aof-table tbody th, .aof-table tbody td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		padding: 5px 0;
		border: 0;
	}
	.aof-table tbody td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .07em;
		color: var(--muted);
		flex: none;
	}
	.aof-table-wrap { overflow-x: visible; }
}

/* Fear Index gauge */
.aof-fear {
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr);
	gap: 20px;
	align-items: center;
	margin: 2.2em auto;
	max-width: var(--measure);
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 4px solid var(--mid);
	border-radius: var(--radius);
}
.aof-fear--low  { border-left-color: var(--low); }
.aof-fear--mid  { border-left-color: var(--mid); }
.aof-fear--high { border-left-color: var(--high); }
@media (max-width: 560px) { .aof-fear { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

.aof-fear__gauge {
	position: relative;
	width: 108px; height: 108px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: conic-gradient(currentColor calc(var(--aof-score) * 1%), var(--line-2) 0);
	font-family: var(--font-display);
	align-content: center;
	gap: 3px;
}
.aof-fear--low .aof-fear__gauge  { color: var(--low); }
.aof-fear--mid .aof-fear__gauge  { color: var(--mid); }
.aof-fear--high .aof-fear__gauge { color: var(--high); }
.aof-fear__gauge::before {
	content: "";
	position: absolute;
	inset: 9px;
	background: var(--surface);
	border-radius: 50%;
}
.aof-fear__num {
	position: relative;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -.04em;
	color: var(--ink);
	line-height: 1;
}
.aof-fear__den { position: relative; font-size: 11px; color: var(--muted); font-weight: 600; }
.aof-fear__kicker {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin: 0 0 6px;
}
.aof-fear--low .aof-fear__kicker strong  { color: var(--low); }
.aof-fear--mid .aof-fear__kicker strong  { color: var(--mid); }
.aof-fear--high .aof-fear__kicker strong { color: var(--high); }
.aof-fear__label {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ink);
	margin: 0 0 6px;
}
.aof-fear__note {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
}
.aof-fear__note p:last-child { margin-bottom: 0; }

/* Verdict / TL;DR */
.aof-verdict, .aof-tldr {
	margin: 2em auto;
	max-width: var(--measure);
	padding: 20px 24px;
	border-radius: var(--radius);
	background: var(--accent-wash);
	border: 1px solid rgba(194, 65, 12, .2);
}
.aof-tldr { background: var(--surface-2); border-color: var(--line); }
.aof-verdict__title, .aof-tldr__title {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--accent);
	margin: 0 0 10px;
}
.aof-tldr__title { color: var(--muted); }
.aof-verdict__body {
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
}
.aof-verdict__body p:last-child { margin-bottom: 0; }
.aof-tldr ul { margin: 0; padding-left: 1.2em; font-family: var(--font-body); font-size: 16px; line-height: 1.6; }
.aof-tldr li { margin-bottom: .4em; color: var(--ink-2); }
.aof-tldr li:last-child { margin-bottom: 0; }
.aof-tldr li::marker { color: var(--accent); }

.aof-takeaway {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.6vw, 25px);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--ink);
	max-width: var(--measure);
	margin: 1.8em auto;
	padding-left: 20px;
	border-left: 3px solid var(--accent);
}

/* Cited data */
.aof-data {
	margin: 2em auto;
	max-width: var(--measure);
	padding: 18px 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.aof-data blockquote {
	border: 0;
	padding: 0;
	margin: 0;
	font-style: normal;
	font-family: var(--font-body);
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--ink);
}
.aof-data blockquote p:last-child { margin-bottom: 0; }
.aof-data figcaption {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line-2);
	font-family: var(--font-ui);
	font-size: 12px;
	color: var(--muted);
	text-align: left;
}

/* FAQ */
.aof-faq { margin: 2.4em auto; max-width: var(--measure); }
.aof-faq__title { font-size: clamp(21px, 2.6vw, 26px); margin: 0 0 16px; }
.aof-faq__item {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	margin-bottom: 8px;
	overflow: hidden;
}
.aof-faq__item summary {
	cursor: pointer;
	list-style: none;
	padding: 15px 46px 15px 18px;
	font-family: var(--font-display);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
	position: relative;
}
.aof-faq__item summary::-webkit-details-marker { display: none; }
.aof-faq__item summary::after {
	content: "";
	position: absolute;
	right: 18px; top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: translateY(-65%) rotate(45deg);
	transition: transform .2s ease;
}
.aof-faq__item[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.aof-faq__item summary:hover { background: var(--surface-2); }
/* The item clips overflow, so the ring is drawn inside the question. */
.aof-faq__item summary:focus-visible { outline-offset: -4px; border-radius: var(--radius); }
.aof-faq__answer {
	padding: 0 18px 16px;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink-2);
}
.aof-faq__answer p:last-child { margin-bottom: 0; }

/* ---------- 9. Sidebar & widgets ---------- */
.aof-aside { display: grid; gap: 26px; }
/* Only the contents list sticks. The whole aside is taller than a laptop
   screen, so sticking it hid its lower half for the entire article. The list
   rides down an empty track, and the panels wait at the bottom of the column. */
@media (min-width: 1080px) {
	.aof-aside { align-self: stretch; display: flex; flex-direction: column; }
	.aof-toc-sticky { flex: 1 0 auto; }
	.aof-toc-sticky > .aof-toc {
		position: sticky;
		top: calc(var(--header-h) + 20px);
		max-height: calc(100vh - var(--header-h) - 40px);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}
@media (max-width: 1079px) {
	/* Stacked under the article, the aside copy would repeat the signup form
	   the article footer already shows. */
	.aof-aside .aof-signup--aside { display: none; }
}

.aof-toc {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.aof-toc__title {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin: 0 0 12px;
}
.aof-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.aof-toc li { margin-bottom: 9px; font-size: 13.5px; line-height: 1.45; }
.aof-toc li.is-h3 { padding-left: 14px; }
.aof-toc a {
	font-family: var(--font-ui);
	font-size: 13.5px;
	color: var(--ink-2);
	text-decoration: none;
	transition: color .15s ease;
}
.aof-toc a:hover { color: var(--accent); }
.aof-toc a.is-active { color: var(--accent); font-weight: 600; }
.aof-toc li { position: relative; }
.aof-toc a.is-active::before {
	content: "";
	position: absolute;
	left: -12px; top: .25em; bottom: .25em;
	width: 2px;
	border-radius: 2px;
	background: var(--brand);
}

/* Collapsible copy above the body on narrow screens */
.aof-toc-inline { max-width: var(--measure); margin: 0 auto 28px; }
.aof-toc--inline { padding: 0; }
.aof-toc--inline summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 15px 18px;
	min-height: 52px;
}
.aof-toc--inline summary::-webkit-details-marker { display: none; }
.aof-toc--inline summary::after {
	content: "";
	width: 8px; height: 8px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg);
	margin: -4px 4px 0 auto;
	transition: transform .2s ease;
}
.aof-toc--inline[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
.aof-toc__count { font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 12.5px; color: var(--muted); }
.aof-toc--inline ol { padding: 0 18px 16px 30px; }
.aof-toc--inline li { margin-bottom: 0; }
.aof-toc--inline a { display: block; padding: 8px 0; font-size: 15px; border-top: 1px solid var(--line-2); }

.aof-widget, .aof-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.aof-widget__title, .aof-panel__title {
	font-family: var(--font-ui);
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-2);
}
.aof-widget ul { list-style: none; margin: 0; padding: 0; }
.aof-widget li { margin-bottom: 9px; font-size: 14px; }
.aof-widget a { color: var(--ink-2); text-decoration: none; }
.aof-widget a:hover { color: var(--accent); }

/* ---------- 10. Forms, comments, footer ---------- */
.aof-signup {
	background: var(--band);
	color: #fff;
	border-radius: var(--radius);
	padding: clamp(22px, 3.4vw, 34px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(18px, 3vw, 40px);
	align-items: center;
	margin: 2.4em auto;
	max-width: var(--measure);
}
.aof-signup--wide { max-width: none; }
[data-theme="dark"] .aof-signup { box-shadow: inset 0 0 0 1px var(--line); }
.aof-signup--aside { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 16px; }
@media (max-width: 760px) { .aof-signup { grid-template-columns: minmax(0, 1fr); } }
.aof-signup__title {
	font-family: var(--font-display);
	font-size: clamp(19px, 2.4vw, 23px);
	font-weight: 700;
	letter-spacing: -.02em;
	margin: 0 0 8px;
	color: #fff;
}
.aof-signup__sub {
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255,255,255,.7);
	margin: 0;
}
.aof-signup__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.aof-signup--aside .aof-signup__form { grid-template-columns: minmax(0, 1fr); }
.aof-signup__form input {
	font: inherit;
	font-size: 15px;
	padding: 12px 14px;
	border: 1px solid rgba(255,255,255,.2);
	background: rgba(255,255,255,.07);
	color: #fff;
	border-radius: var(--radius-control);
	min-width: 0;
}
.aof-signup__form input::placeholder { color: rgba(255,255,255,.55); }
.aof-signup__form input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
	background: rgba(255,255,255,.12);
}
.aof-signup__form button {
	padding: 12px 22px;
	min-height: 48px;
	background: var(--accent);
	color: #fff;
	border: 0;
	border-radius: var(--radius-control);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}
.aof-signup__form button:hover { background: var(--accent-ink); }
[data-theme="dark"] .aof-signup__form button { color: var(--on-accent); }
.aof-signup__form input { min-height: 48px; }
.aof-signup__msg {
	grid-column: 1 / -1;
	margin: 0;
	font-size: 13px;
	color: rgba(255,255,255,.8);
	min-height: 0;
}
.aof-signup__msg:empty { display: none; }
.aof-signup__msg.is-error { color: #ff9aa0; }

.aof-comments { max-width: var(--measure); margin-inline: auto; padding-top: 12px; }
.aof-comments__title { font-size: 21px; margin: 0 0 20px; }
.aof-comments .comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.aof-comments .comment-list ol.children { list-style: none; margin: 16px 0 0 26px; padding: 0; border-left: 2px solid var(--line); padding-left: 20px; }
.aof-comment { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.aof-comment__head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.aof-comment__head img { border-radius: 50%; }
.aof-comment__author { margin: 0; font-weight: 600; font-size: 14.5px; }
.aof-comment__date { margin: 0; font-size: 12px; color: var(--muted); }
.aof-comment__body { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.aof-comment__body p:last-child { margin-bottom: 0; }
.aof-comment__foot { margin-top: 8px; font-size: 13px; }

.comment-form { display: grid; gap: 14px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	padding: 11px 13px;
	border: 1px solid var(--field-line);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--ink);
}
.comment-form input:focus, .comment-form textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: var(--accent);
}
.comment-form .submit:focus-visible,
.comment-form input[type=checkbox]:focus-visible { outline-offset: 2px; }
.comment-form .submit {
	padding: 12px 26px;
	background: var(--ink);
	color: var(--paper);
	border: 0;
	border-radius: var(--radius-control);
	font-weight: 700;
	font-size: 15px;
	justify-self: start;
}
.comment-form .submit:hover { background: var(--accent); }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form-cookies-consent input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--accent); }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--ink-2); }

.aof-pagination { margin-top: clamp(30px, 5vw, 48px); }
.aof-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0; padding: 0;
}
.aof-pagination .page-numbers,
.aof-pagination .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 42px;
	min-height: 42px;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-control);
	background: var(--surface);
	color: var(--ink-2);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: border-color .15s ease, color .15s ease;
}
/* The arrows inside Newer/Older are spans too; they are not boxes. */
.aof-pagination .page-numbers span,
.aof-pagination .post-page-numbers span { display: inline; padding: 0; border: 0; background: none; color: inherit; }
.aof-pagination a:hover { border-color: var(--ink); color: var(--ink); }
.aof-pagination .current { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.aof-pagination .dots { border-color: transparent; background: none; min-width: 28px; padding-inline: 4px; }
@media (max-width: 640px) {
	/* Page numbers on one row, Newer / Older as two wide buttons below. */
	.aof-pagination ul::after { content: ""; order: 1; flex-basis: 100%; }
	.aof-pagination li:has(> .prev),
	.aof-pagination li:has(> .next) { order: 2; flex: 1 1 calc(50% - 3px); }
	.aof-pagination .prev,
	.aof-pagination .next { display: flex; }
}

.aof-footer {
	background: var(--band);
	color: rgba(255,255,255,.66);
	margin-top: clamp(48px, 8vw, 90px);
	padding-block: clamp(36px, 5vw, 56px) 24px;
	font-size: 14px;
}
.aof-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 48px);
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 860px) { .aof-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .aof-footer__grid { grid-template-columns: minmax(0, 1fr); } }
.aof-footer h2, .aof-fwidget__title {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 14px;
}
.aof-footer ul { list-style: none; margin: 0; padding: 0; }
.aof-footer li { margin-bottom: 9px; }
.aof-footer a { color: rgba(255,255,255,.66); text-decoration: none; }
.aof-footer a:hover { color: #fff; text-decoration: underline; }
.aof-footer__about {
	font-family: var(--font-body);
	line-height: 1.65;
	color: rgba(255,255,255,.6);
	max-width: 42ch;
	margin: 0 0 14px;
}
.aof-footer__brand { margin-bottom: 16px; }
.aof-footer__logo { display: block; height: 46px; width: auto; }
.aof-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	padding-top: 22px;
	font-size: 12.5px;
	color: rgba(255,255,255,.5);
}
@media (min-width: 521px) and (max-width: 1299px) { .aof-footer__bottom { padding-right: 60px; } }
.aof-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.aof-footer .aof-footer__legal li { margin-bottom: 0; }
.aof-footer__disclaimer {
	margin: 18px 0 0;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(255,255,255,.55);
	max-width: 80ch;
}

/* 404 & search empty states */
.aof-empty {
	text-align: center;
	padding-block: clamp(48px, 9vw, 100px);
	max-width: 620px;
	margin-inline: auto;
}
.aof-empty .aof-empty__code {
	max-width: none;
	font-family: var(--font-display);
	font-size: clamp(66px, 14vw, 130px);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.05em;
	color: var(--accent);
	margin: 0 0 12px;
}
.aof-empty h1,
.aof-empty h2 { font-size: clamp(24px, 4vw, 34px); margin: 0 0 12px; }
.aof-empty p {
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--ink-2);
	margin: 0 auto 24px;
	max-width: 46ch;
}

/* Archive intro */
.aof-archive-head {
	padding-block: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 32px);
	border-bottom: 1px solid var(--line);
	margin-bottom: clamp(28px, 4vw, 40px);
}
.aof-archive-head h1 {
	font-size: clamp(28px, 5vw, 44px);
	letter-spacing: -.035em;
	margin: 10px 0 14px;
}
.aof-archive-head__intro {
	font-family: var(--font-body);
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--ink-2);
	max-width: 68ch;
}
.aof-archive-head__intro p:last-child { margin-bottom: 0; }
@media (min-width: 1080px) {
	.aof-archive-head__intro--long { max-width: none; columns: 2; column-gap: clamp(32px, 4vw, 56px); }
	.aof-archive-head__intro--long p { orphans: 3; widows: 3; }
}
/* Long topic intros would fill a phone's first screen before any article;
   the script folds them to a few lines behind a toggle. */
.aof-archive-head__toggle { display: none; }
@media (max-width: 640px) {
	.aof-archive-head__intro.is-clamped {
		max-height: 8.25em;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
		mask-image: linear-gradient(180deg, #000 55%, transparent);
	}
	.aof-archive-head__toggle {
		display: inline-flex;
		align-items: center;
		min-height: 40px;
		margin-top: 2px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--accent);
		font-family: var(--font-ui);
		font-size: 14px;
		font-weight: 700;
	}
}
.aof-archive-head__count {
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	font-weight: 600;
	margin: 14px 0 0;
}

/* ---------- 11. Utilities & motion ---------- */
/* Entrance for cards below the fold. The script marks only those as pending,
   so nothing on the first screen blinks, a failed script hides nothing, and
   the classes come off afterwards so the card hover lift still works. */
.aof-reveal.is-pending { opacity: 0; transform: translateY(12px); }
.aof-reveal.is-in { transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) {
	.aof-reveal.is-pending { opacity: 1; transform: none; transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Cited sources at the end of an article */
.aof-entry .aof-sources {
	max-width: var(--measure);
	margin: 2em auto;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--surface);
	font-family: var(--font-ui);
}
.aof-entry .aof-sources__title {
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin: 0 0 8px;
}
.aof-entry .aof-sources ul { margin: 0; padding-left: 1.1em; font-size: 14.5px; line-height: 1.5; }
.aof-entry .aof-sources li { margin-bottom: .4em; }
.aof-entry .aof-sources a { font-weight: 400; overflow-wrap: anywhere; }

/* Public counters */
.aof-stats { display: inline-flex; align-items: center; gap: 10px; }
.aof-stats:not(:has(.aof-stat:not([hidden]))) { display: none; }
.aof-meta .aof-stats::before,
.aof-byline__when .aof-stats::before { content: "·"; opacity: .5; margin-right: -3px; }
.aof-stat { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.aof-stat__icon { width: 14px; height: 14px; flex: none; opacity: .75; }
.aof-card-post .aof-stats { position: relative; z-index: 2; }

/* Ranked lists on the front page */
.aof-ranked { display: grid; grid-template-columns: repeat(var(--aof-cols, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 900px) { .aof-ranked { grid-template-columns: minmax(0, 1fr); } }
.aof-ranked__title {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 4px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
}
.aof-ranked__list { list-style: none; margin: 0; padding: 0; }
.aof-ranked__item {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 10px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
.aof-ranked__item:last-child { border-bottom: 0; }
.aof-ranked__num { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; color: var(--brand); letter-spacing: -.04em; }
.aof-ranked__link { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--ink); text-decoration: none; display: block; margin-bottom: 5px; }
.aof-ranked__link:hover { color: var(--accent); }
.aof-ranked__fear { font-weight: 600; color: var(--high); }

/* Back to top */
.aof-totop {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(18px, env(safe-area-inset-bottom));
	z-index: 55;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	box-shadow: var(--shadow-2);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.aof-totop.is-open { opacity: 1; transform: none; }
.aof-totop:hover { background: var(--ink); color: var(--paper); }
.aof-totop .aof-icon { width: 20px; height: 20px; }

.aof-archive-head__search { max-width: 560px; margin-top: 18px; }
.aof-empty__search { max-width: 460px; margin: 0 auto 22px; }
.aof-empty__topics { margin-top: 32px; }
.aof-empty .aof-empty__topics .aof-searchbar__hint { margin: 0 0 4px; font-family: var(--font-ui); font-size: 13px; color: var(--muted); }
/* Centred only while the chips wrap; a centred overflowing row would cut off its first chips. */
@media (min-width: 721px) { .aof-empty__topics .aof-chips ul { justify-content: center; } }
.aof-drawer .aof-searchform input[type="search"] { min-width: 0; }
@media (max-width: 420px) {
	.aof-searchform button { padding-inline: 14px; }
}

/* Footer on phones: brand block full width, link columns side by side. */
@media (max-width: 520px) {
	.aof-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aof-footer__grid > :first-child { grid-column: 1 / -1; }
	.aof-footer li { margin-bottom: 0; }
	.aof-footer li a { display: inline-block; padding-block: 6px; }
	.aof-footer__bottom { flex-direction: column; }
}

/* One table of contents shows at a time: sticky beside wide screens,
   inline above the body when the sidebar is gone. */
@media (min-width: 1080px) { .aof-toc-inline  { display: none; } }
@media (max-width: 1079px) { .aof-toc-sticky  { display: none; } }

/* An offer with no image gives its whole width to the copy. */
.aof-card__body--noimg { grid-template-columns: minmax(0, 1fr); }

/* ---------- 12. Editorial media ---------- */

/* Photographs. Caption sets in the UI face at small size, credit set apart
   from it, the way a newspaper separates the two. */
.aof-figure {
	margin: 2.2em auto;
	max-width: var(--measure);
}
.aof-figure--wide { max-width: 1000px; }
.aof-entry > .aof-figure--wide,
.aof-entry > .aof-video { max-width: 1000px; }
.aof-figure__img,
.aof-hero-figure img {
	width: 100%;
	border-radius: var(--radius);
	background: var(--surface-2);
}
.aof-hero-figure img {
	max-height: min(560px, 70vh);
	max-height: min(560px, 70svh);
	object-fit: cover;
	object-position: center;
}
/* Landscape phones: a 16:9 lead image alone is taller than the screen. */
@media (orientation: landscape) and (max-height: 520px) {
	.aof-lead__media { aspect-ratio: auto; height: 60vh; height: 60svh; }
}

.aof-figure figcaption,
.aof-hero-figure figcaption {
	margin-top: 10px;
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}
.aof-figure__caption { color: var(--ink-2); }

/* Never uppercase this: it carries photographers' names, and "I am R."
   must not be published as "I AM R.". */
.aof-credit {
	font-size: 12px;
	letter-spacing: .01em;
	color: var(--muted);
	white-space: normal;
}
.aof-credit a { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; }
.aof-credit a:hover { color: var(--accent); }

/* The core image block gets the same caption treatment. */
.aof-entry .wp-block-image figcaption {
	margin-top: 10px;
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
	text-align: left;
}
.aof-entry .wp-block-image img { border-radius: var(--radius); }

/* Video: a click-to-play facade. No YouTube request until the reader asks. */
.aof-video {
	margin: 2.4em auto;
	max-width: 1000px;
}
.aof-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	max-width: 100%;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
	cursor: pointer;
}
.aof-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, opacity .2s ease;
}
.aof-video__frame:hover .aof-video__poster { transform: scale(1.02); opacity: .9; }

.aof-video__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 68px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	display: grid;
	place-items: center;
}
.aof-video__play svg { width: 68px; height: 48px; display: block; }
.aof-video__play-bg { fill: rgba(20, 22, 26, .78); transition: fill .18s ease; }
.aof-video__frame:hover .aof-video__play-bg,
.aof-video__play:focus-visible .aof-video__play-bg { fill: var(--accent); }

.aof-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.aof-video figcaption {
	margin-top: 10px;
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	justify-content: flex-start;
	text-align: left;
}

/* Portrait photographs would otherwise run far taller than the screen inside a
   wide figure. Cap the height and letterbox them on the neutral ground instead
   of cropping the subject. */
.aof-figure__img {
	max-height: min(720px, 80vh);
	max-height: min(720px, 80svh);
	object-fit: contain;
}

/* ---------- 13. Print ---------- */
@media print {
	.aof-topbar, .aof-header, .aof-drawer, .aof-progress, .aof-totop, .aof-crumbs-wrap, .aof-toc-inline,
	.aof-aside, .aof-share, .aof-signup, .aof-comments, .aof-authorbox, .aof-main > .aof-section,
	.aof-footer, .aof-video, .aof-disclosure, .aof-skip { display: none !important; }
	html { scroll-behavior: auto; }
	body { background: #fff; }
	.aof-wrap { max-width: none; padding-inline: 0; }
	.aof-shell { display: block; padding-bottom: 0; }
	.aof-entry-head { max-width: none; padding-top: 0; }
	.aof-entry, .aof-entry > * { max-width: none !important; }
	.aof-entry { font-size: 11pt; line-height: 1.55; color: #111; }
	.aof-deck { font-size: 13pt; }
	.aof-title { font-size: 24pt; }
	.aof-hero-figure { max-width: none; }
	.aof-hero-figure img { max-height: 8cm; width: auto; max-width: 100%; }
	.aof-figure__img { max-height: 9cm; }
	.aof-card, .aof-fear, .aof-verdict, .aof-tldr, .aof-data, .aof-figure, .aof-table tr, .aof-faq__item, .aof-takeaway { break-inside: avoid; box-shadow: none; }
	.aof-entry h2, .aof-entry h3 { break-after: avoid; }
	.aof-reveal { opacity: 1 !important; transform: none !important; }
	.aof-btn { background: none !important; color: #111 !important; border-color: #999; }
}