/**
 * Techvantara — Global Design System
 *
 * The design foundation for the theme, matching the SIGNAL editorial design
 * (see the Figma source). Design tokens, base element styles and layout
 * utilities. Components are styled in their own sections.
 *
 * Contents:
 * 01. Root variables (tokens)
 * 02. Reset & box sizing
 * 03. Base
 * 04. Typography
 * 05. Headings
 * 06. Paragraphs
 * 07. Links
 * 08. Lists
 * 09. Images
 * 10. Buttons
 * 11. Forms & inputs
 * 12. Layout — container & section
 * 13. Grid
 * 14. Utilities
 * 15. Accessibility & focus
 * 16. Header
 * 17. Footer
 * 18. Article cards
 * 19. Section headers
 * 20. Homepage sections
 * 21. Single article / prose
 * 22. Archives
 * 23. Static pages
 * 24. Responsive breakpoints
 * 25. Reduced motion
 *
 * @package Techvantara
 */


/* 01. Root variables (tokens)
   ========================================================================== */

:root {
	color-scheme: dark;

	/* Colors — SIGNAL design tokens */
	--color-background: #0a0a0c;
	--color-foreground: #f5f5f2;
	--color-card: #111114;
	--color-card-hover: #16161a;
	--color-primary: #ff5500;
	--color-primary-foreground: #ffffff;
	--color-secondary: #1a1a1e;
	--color-secondary-foreground: #f5f5f2;
	--color-muted: #1a1a1e;
	--color-muted-foreground: #888891;
	--color-accent: #ff5500;
	--color-border: rgb(255 255 255 / 0.07);
	--color-ring: #ff5500;
	--color-warning: #facc15;

	/* Adaptive surfaces — dark defaults (light overrides below) */
	--color-border-hover: rgb(255 255 255 / 0.2);
	--color-header-glass: rgb(10 10 12 / 0.95);
	--color-overlay: rgb(10 10 12 / 0.95);
	--color-body-text: rgb(245 245 242 / 0.85);
	--color-body-text-soft: rgb(245 245 242 / 0.7);

	/* Typography */
	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--font-size-xs: 0.75rem;    /* 12px */
	--font-size-sm: 0.875rem;   /* 14px */
	--font-size-md: 1rem;       /* 16px */
	--font-size-lg: 1.125rem;   /* 18px */
	--font-size-xl: 1.25rem;    /* 20px */
	--font-size-2xl: 1.5rem;    /* 24px */
	--font-size-3xl: 1.875rem;  /* 30px */
	--font-size-4xl: 2.25rem;   /* 36px */
	--font-size-5xl: 3rem;      /* 48px */
	--font-size-6xl: 3.75rem;   /* 60px */

	--line-height-tight: 1.15;
	--line-height-snug: 1.35;
	--line-height-base: 1.6;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-black: 900;

	/* Layout */
	--container-max: 1440px;
	--container-padding: 1.5rem;   /* 24px */
	--container-padding-lg: 2.5rem; /* 40px */

	/* Border radius — SIGNAL is sharp (2px). */
	--radius: 2px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Z-index */
	--z-header: 50;
	--z-overlay: 100;

	/* Shadows */
	--shadow-elevated: 0 2px 20px rgb(0 0 0 / 0.4);
	--shadow-mega: 0 8px 32px rgb(0 0 0 / 0.6);
	--shadow-search: 0 8px 32px rgb(0 0 0 / 0.6);
}


/* 01b. Light color scheme — follows the OS setting
   ========================================================================== */

@media (prefers-color-scheme: light) {
	:root {
		color-scheme: light;

		/* Colors — SIGNAL light tokens */
		--color-background: #f7f7f5;
		--color-foreground: #1a1a1e;
		--color-card: #ffffff;
		--color-card-hover: #f0f0ed;
		--color-primary: #ff5500;
		--color-primary-foreground: #ffffff;
		--color-secondary: #ecece9;
		--color-secondary-foreground: #1a1a1e;
		--color-muted: #ecece9;
		--color-muted-foreground: #5c5c66;
		--color-accent: #ff5500;
		--color-border: rgb(0 0 0 / 0.08);
		--color-ring: #ff5500;
		--color-warning: #d97706;

		/* Adaptive surfaces */
		--color-border-hover: rgb(0 0 0 / 0.14);
		--color-header-glass: rgb(247 247 245 / 0.92);
		--color-overlay: rgb(0 0 0 / 0.5);
		--color-body-text: rgb(26 26 30 / 0.85);
		--color-body-text-soft: rgb(26 26 30 / 0.7);

		/* Softer shadows on light surfaces */
		--shadow-elevated: 0 2px 20px rgb(0 0 0 / 0.12);
		--shadow-mega: 0 8px 32px rgb(0 0 0 / 0.16);
		--shadow-search: 0 8px 32px rgb(0 0 0 / 0.16);
	}
}


/* 02. Reset & box sizing
   ========================================================================== */

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

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	background-color: var(--color-background);
	color: var(--color-foreground);
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--font-body);
	font-size: var(--font-size-md);
	line-height: var(--line-height-base);
	color: var(--color-foreground);
	background-color: var(--color-background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

blockquote,
figure,
table,
fieldset {
	margin: 0;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}


/* 03. Base
   ========================================================================== */

::selection {
	background-color: rgb(255 85 0 / 0.25);
	color: var(--color-foreground);
}

a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--color-accent);
}


/* 04. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	color: var(--color-foreground);
}

/* 05. Headings
   ========================================================================== */

h1 {
	font-size: var(--font-size-4xl);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--font-size-3xl);
}

h3 {
	font-size: var(--font-size-2xl);
}

h4 {
	font-size: var(--font-size-xl);
}

h5 {
	font-size: var(--font-size-lg);
}

h6 {
	font-size: var(--font-size-md);
}


/* 06. Paragraphs
   ========================================================================== */

p {
	margin-bottom: var(--font-size-md);
}

p:last-child {
	margin-bottom: 0;
}


/* 07. Links
   ========================================================================== */

a {
	text-underline-offset: 0.2em;
}


/* 08. Lists
   ========================================================================== */

.list-disc {
	list-style: disc;
	padding-left: 1.25em;
}

.list-decimal {
	list-style: decimal;
	padding-left: 1.25em;
}

.list-disc li,
.list-decimal li {
	margin-bottom: var(--font-size-xs);
}

.list-disc li:last-child,
.list-decimal li:last-child {
	margin-bottom: 0;
}


/* 09. Images
   ========================================================================== */

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

img {
	width: auto;
}

figcaption {
	margin-top: var(--font-size-xs);
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}


/* 10. Buttons
   ========================================================================== */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--font-size-xs);
	padding: 0.875rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--font-body);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: transparent;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.button--primary {
	background-color: var(--color-primary);
	color: var(--color-primary-foreground);
}

.button--primary:hover,
.button--primary:focus-visible {
	background-color: #ff7733; /* hover:bg-orange-500 */
	color: #ffffff;
	text-decoration: none;
}

.button--secondary {
	border-color: var(--color-border);
	color: var(--color-foreground);
}

.button--secondary:hover,
.button--secondary:focus-visible {
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.button--outline-muted {
	border-color: var(--color-border);
	color: var(--color-muted-foreground);
}

.button--outline-muted:hover,
.button--outline-muted:focus-visible {
	border-color: var(--color-border-hover);
	color: var(--color-foreground);
	text-decoration: none;
}

/* Micro uppercase buttons used for header links, filter pills and the like. */
.button--micro {
	padding: 0.375rem 1rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Load-more style button (outline, larger) */
.button--load {
	padding: 0.75rem 2rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.button--load:hover,
.button--load:focus-visible {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

/* Inline icon inside a button; fixed so an unsized SVG can't inflate it. */
.button__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* Load-more busy state: swap the arrow for a small spinner. */
.button--load.is-loading {
	pointer-events: none;
	opacity: 0.75;
}

.button--load.is-loading .button__icon {
	display: none;
}

.button--load.is-loading::after {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid var(--color-border-hover);
	border-top-color: var(--color-foreground);
	border-radius: 50%;
	animation: techvantara-spin 700ms linear infinite;
}

@keyframes techvantara-spin {
	to {
		transform: rotate(360deg);
	}
}


/* 11. Forms & inputs
   ========================================================================== */

input[type='text'],
input[type='email'],
input[type='url'],
input[type='search'],
textarea,
select {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--color-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-foreground);
	font-size: var(--font-size-sm);
	outline: none;
	transition: border-color var(--transition-fast);
}

input::placeholder,
textarea::placeholder {
	color: rgb(136 136 145 / 0.4);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-primary);
}


/* 12. Layout — container & section
   ========================================================================== */

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

@media (min-width: 1024px) {
	.container {
		padding-inline: var(--container-padding-lg);
	}
}

.section {
	padding-block: 3rem;
}

.section--surface {
	background-color: var(--color-card);
}

.section--bordered {
	border-block: 1px solid var(--color-border);
}

/* Inner page wrapper used by the archive / static pages (pt-12 py-12). */
.page-pad {
	padding-block: 3rem;
}


/* 13. Grid
   ========================================================================== */

.grid {
	display: grid;
	gap: var(--font-size-md);
}

/* Column-count utilities are mobile-first: a single column on phones,
 * stepping up to 2 cols at tablet (min-width 768px) and the full count at
 * desktop (min-width 1024px). */
.grid--2,
.grid--3,
.grid--4,
.grid--8 {
	grid-template-columns: 1fr;
}


/* 14. Utilities
   ========================================================================== */

.hidden {
	display: none !important;
}

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

.text-muted {
	color: var(--color-muted-foreground);
}

.text-sm {
	font-size: var(--font-size-sm);
}

.text-xs {
	font-size: var(--font-size-xs);
}

.mt-0 {
	margin-top: 0;
}

.mb-0 {
	margin-bottom: 0;
}

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

/* Line clamp utilities (must be applied together with overflow rules). */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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


/* 15. Accessibility & focus
   ========================================================================== */

/* Reveal the skip link when it receives keyboard focus. */
.screen-reader-text:focus {
	clip: none;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	padding: 0.75rem 1.5rem;
	background-color: var(--color-primary);
	color: #ffffff;
	text-decoration: none;
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: var(--z-overlay);
	border-radius: var(--radius);
}

:focus-visible {
	outline: 2px solid var(--color-ring);
	outline-offset: 2px;
}


/* 16. Header
   ========================================================================== */

/* Main header bar */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: var(--color-background);
	border-bottom: 1px solid var(--color-border);
	transition: background-color var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);
}

.site-header.is-scrolled {
	background-color: var(--color-header-glass);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-elevated);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: 5rem; /* 80px — room for a larger image logo */
}

/* Brand lockup */
.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.site-branding__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background-color: var(--color-primary);
	color: #ffffff;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: var(--font-weight-black);
}

.site-branding__name {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--font-weight-black);
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--color-foreground);
	text-decoration: none;
}

.site-branding__name:hover {
	color: var(--color-foreground);
	text-decoration: none;
}

.site-branding__link {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.site-branding__link:hover {
	text-decoration: none;
}

.site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-branding .custom-logo {
	max-height: 2.25rem;
	width: auto;
	display: block;
}

/* Adaptive image logo — swaps between light and dark schemes */
.site-logo {
	display: inline-flex;
	align-items: center;
}

.site-logo__img {
	max-height: 3.5rem;
	max-width: 12rem;
	width: auto;
	display: block;
}

/* The header renders the logo larger than the footer's. */
.site-branding .site-logo__img {
	max-height: 4rem;
	max-width: 12rem;
}

/* Footer brand gets breathing room above the tagline. */
.site-footer .site-logo {
	margin-bottom: 1.5rem;
}

/* Dark is the default scheme, so the dark logo shows unless overridden. */
.site-logo__img--light {
	display: none;
}

@media (prefers-color-scheme: light) {
	.site-logo__img--light {
		display: block;
	}

	.site-logo__img--dark {
		display: none;
	}
}

/* Primary navigation */
.site-nav {
	display: none;
	align-items: center;
	gap: 0.25rem;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	color: var(--color-foreground);
	text-decoration: none;
}

.site-nav__item.is-active .site-nav__link,
.site-nav__item.is-open .site-nav__link {
	color: var(--color-primary);
}

.site-nav__indicator {
	position: absolute;
	bottom: 0;
	left: 1rem;
	right: 1rem;
	height: 2px;
	display: none;
	background-color: var(--color-primary);
}

.site-nav__item.is-active .site-nav__indicator,
.site-nav__item.is-open .site-nav__indicator {
	display: block;
}

.site-nav__divider {
	width: 1px;
	height: 1rem;
	margin-inline: 0.5rem;
	background-color: var(--color-border);
}

/* Header actions */
.site-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.site-actions__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--radius);
	color: var(--color-muted-foreground);
	transition: color var(--transition-fast);
}

.site-actions__icon:hover,
.site-actions__icon:focus-visible {
	color: var(--color-foreground);
}

.site-actions__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.375rem 1rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.site-actions__button:hover,
.site-actions__button:focus-visible {
	border-color: var(--color-border-hover);
	color: var(--color-foreground);
	text-decoration: none;
}

.site-actions__button--primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

.site-actions__button--primary:hover,
.site-actions__button--primary:focus-visible {
	background-color: #ff7733;
	border-color: #ff7733;
	color: #ffffff;
}

/* Hamburger */
.site-header__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--color-muted-foreground);
}

.site-header__toggle .icon-close {
	display: none;
}

.site-header__toggle.is-open .icon-burger {
	display: none;
}

.site-header__toggle.is-open .icon-close {
	display: block;
}

/* Mega menu */
.mega-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	display: none;
	background-color: var(--color-card);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-mega);
}

.mega-menu.is-open {
	display: block;
}

.mega-menu__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 360px;
	gap: 3rem;
	padding-block: 2rem;
}

.mega-menu__label {
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.mega-menu__link {
	display: flex;
	flex-direction: column;
	padding-block: 0.625rem;
	border-bottom: 1px solid var(--color-border);
}

.mega-menu__link-title {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-foreground);
	transition: color var(--transition-fast);
}

.mega-menu__link:hover .mega-menu__link-title {
	color: var(--color-primary);
}

.mega-menu__link-desc {
	margin-top: 0.125rem;
	font-size: var(--font-size-xs);
	color: var(--color-muted-foreground);
}

.mega-menu__featured-media {
	position: relative;
	overflow: hidden;
	margin-bottom: 0.75rem;
	aspect-ratio: 16 / 9;
	background-color: var(--color-secondary);
}

.mega-menu__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.mega-menu__featured:hover .mega-menu__featured-media img {
	transform: scale(1.05);
}

.mega-menu__featured-category {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.mega-menu__featured-title {
	font-family: var(--font-display);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	color: var(--color-foreground);
	transition: color var(--transition-fast);
}

.mega-menu__featured:hover .mega-menu__featured-title {
	color: var(--color-primary);
}

/* Mobile menu */
.site-mobile-menu {
	display: none;
	background-color: var(--color-card);
	border-top: 1px solid var(--color-border);
}

.site-mobile-menu.is-open {
	display: block;
}

.site-mobile-menu__list {
	padding: 1rem 1.5rem;
}

.site-mobile-menu__link {
	display: block;
	padding-block: 0.75rem;
	border-bottom: 1px solid var(--color-border);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-foreground);
	text-decoration: none;
}

.site-mobile-menu__link:hover {
	color: var(--color-primary);
	text-decoration: none;
}

.site-mobile-menu__actions {
	display: flex;
	gap: 0.75rem;
	padding: 1rem 1.5rem 1.5rem;
}

.site-mobile-menu__actions .button {
	flex: 1;
	padding-block: 0.5rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Search overlay */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding-top: 20vh;
	background-color: var(--color-overlay);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.search-overlay.is-open {
	display: flex;
}

.search-overlay__inner {
	width: 100%;
	max-width: 672px;
	padding-inline: 1.5rem;
}

.search-overlay__label {
	margin-bottom: 1rem;
	text-align: center;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.search-overlay__form {
	position: relative;
}

.search-overlay__input {
	padding: 1.25rem 3.5rem 1.25rem 1.5rem;
	background-color: var(--color-card);
	font-family: var(--font-display);
	font-size: var(--font-size-xl);
}

.search-overlay__submit {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted-foreground);
	transition: color var(--transition-fast);
}

.search-overlay__submit:hover {
	color: var(--color-primary);
}

.search-overlay__dismiss {
	display: block;
	margin: 1rem auto 0;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
	transition: color var(--transition-fast);
}

.search-overlay__dismiss:hover {
	color: var(--color-foreground);
}


/* 17. Footer
   ========================================================================== */

.site-footer {
	margin-top: 6rem;
	background-color: var(--color-card);
	border-top: 1px solid var(--color-border);
}

.site-footer__main {
	padding-top: 4rem;
	padding-bottom: 2rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

.site-footer__description {
	max-width: 20rem;
	margin-bottom: 1.5rem;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.site-footer__heading {
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.site-footer__links li + li {
	margin-top: 0.625rem;
}

.site-footer__links a {
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
	transition: color var(--transition-fast);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--color-foreground);
	text-decoration: none;
}

.site-footer__social {
	display: flex;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.site-footer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	color: var(--color-muted-foreground);
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.site-footer__newsletter-copy {
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
	line-height: 1.625;
	margin-bottom: 1rem;
}

.site-footer__newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.site-footer__newsletter-input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	background-color: var(--color-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-foreground);
	font-size: var(--font-size-sm);
	outline: none;
	transition: border-color var(--transition-fast);
}

.site-footer__newsletter-input::placeholder {
	color: rgb(136 136 145 / 0.4);
}

.site-footer__newsletter-input:focus {
	border-color: var(--color-primary);
}

.site-footer__newsletter-submit {
	width: 100%;
	padding-block: 0.625rem;
}

.site-footer__newsletter-note {
	margin-top: 0.5rem;
	font-size: 11px;
	color: rgb(136 136 145 / 0.6);
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--font-size-xs);
	color: var(--color-muted-foreground);
}

.site-footer__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--font-size-xs);
	color: var(--color-muted-foreground);
}

.site-footer__meta-sep {
	margin-inline: 0.5rem;
	color: rgb(136 136 145 / 0.2);
}

.site-footer__live {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--color-muted-foreground);
}

.site-footer__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-primary);
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}


/* 18. Article cards
   ========================================================================== */

.article-card {
	display: flex;
	flex-direction: column;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.article-card:hover {
	background-color: var(--color-card-hover);
}

.article-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-secondary);
}

.article-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.article-card:hover .article-card__media img {
	transform: scale(1.05);
}

.article-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 1.25rem;
}

.article-card__category {
	margin-bottom: 0.5rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.article-card__category a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.article-card__category a:hover {
	color: #ff7733;
}

.article-card__meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
}

.article-card__hot {
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-warning);
}

.article-card__author-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.article-card__title {
	margin-bottom: 0.5rem;
	font-family: var(--font-display);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
}

.article-card__title a {
	color: var(--color-foreground);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.article-card:hover .article-card__title a {
	color: var(--color-primary);
}

.article-card__excerpt {
	margin-bottom: 0.75rem;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.article-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border);
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.article-card__meta-inline {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.article-card__meta-sep {
	color: rgb(136 136 145 / 0.3);
}

/* Featured variant — the "Essential Reading" big card + category hero grid cards */
.article-card--featured .article-card__title {
	font-size: var(--font-size-lg);
}

/* Compact variant — image beside content */
.article-card--compact {
	flex-direction: row;
	gap: 1rem;
	padding-block: 1rem;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background-color: transparent;
}

.article-card--compact:last-child {
	border-bottom: 0;
}

.article-card--compact:hover {
	background-color: transparent;
}

.article-card--compact .article-card__media {
	flex: 0 0 5rem;
	width: 5rem;
	aspect-ratio: 1 / 1;
}

.article-card--compact .article-card__body {
	flex: 1;
	min-width: 0;
	padding: 0;
}

.article-card--compact .article-card__title {
	margin-top: 0.25rem;
	font-size: var(--font-size-sm);
}

/* The compact meta row (date · read time) is a bare .article-card__meta-inline
   on the body, so match the site's meta typography explicitly. */
.article-card--compact .article-card__meta-inline {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--color-muted-foreground);
}

/* Trending variant — numbered rows */
.article-card--trending {
	flex-direction: row;
	align-items: flex-start;
	gap: 1.25rem;
	padding-block: 1rem;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background-color: transparent;
}

.article-card--trending:last-child {
	border-bottom: 0;
}

.article-card--trending:hover {
	background-color: transparent;
}

.article-card--trending .article-card__index {
	flex-shrink: 0;
	min-width: 2rem;
	margin-top: 0.125rem;
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: var(--font-weight-black);
	line-height: 1;
	color: rgb(136 136 145 / 0.2);
	transition: color var(--transition-fast);
}

.article-card--trending:hover .article-card__index {
	color: rgb(255 85 0 / 0.3);
}

.article-card--trending .article-card__body {
	flex: 1;
	min-width: 0;
	padding: 0;
}

.article-card--trending .article-card__title {
	margin-top: 0.25rem;
	font-size: var(--font-size-sm);
}

/* The trending meta row sits directly on the body (no .article-card__meta
   wrapper), so match the site's meta typography explicitly — 11px body font,
   muted, matching the date/views rows on the other card variants. */
.article-card--trending .article-card__meta-inline {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--color-muted-foreground);
}

/* List variant — the archive row */
.article-card--list {
	display: grid;
	grid-template-columns: 1fr 200px;
	gap: 1.5rem;
	padding-block: 1.5rem;
	border: 0;
	border-bottom: 1px solid var(--color-border);
	border-radius: 0;
	background-color: transparent;
}

.article-card--list:last-child {
	border-bottom: 0;
}

.article-card--list:hover {
	background-color: transparent;
}

.article-card--list .article-card__media {
	aspect-ratio: auto;
	height: 100%;
	min-height: 100%;
}

.article-card--list .article-card__media img {
	object-fit: cover;
}

.article-card--list .article-card__body {
	padding: 0;
}

.article-card--list .article-card__title {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-xl);
}

.article-card--list .article-card__meta {
	justify-content: flex-start;
	gap: 0.75rem;
	border-top: 0;
	padding-top: 0;
}

/* Hero variant — full-bleed image with gradient */
.article-card--hero {
	position: relative;
	overflow: hidden;
	min-height: 520px;
	background-color: var(--color-secondary);
	border: 0;
	border-radius: 0;
}

.article-card--hero .article-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.article-card--hero .article-card__media img {
	transition: transform 700ms ease;
}

.article-card--hero:hover .article-card__media img {
	transform: scale(1.05);
}

.article-card--hero .article-card__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.4), transparent);
}

.article-card--hero .article-card__body {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2rem;
}

.article-card--hero .article-card__trending {
	margin-left: 0.75rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-warning);
}

.article-card--hero .article-card__title {
	margin-bottom: 1rem;
	font-size: clamp(1.875rem, 3vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
	color: #ffffff;
}

.article-card--hero .article-card__excerpt {
	max-width: 42rem;
	margin-bottom: 1.25rem;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: rgb(255 255 255 / 0.7);
}

.article-card--hero .article-card__author-line {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
}

/* Hero card in light mode: the dark gradient + white text are tuned for the
   dark scheme, so flip them here or the lead story reads as a black block
   against the light page. */
@media (prefers-color-scheme: light) {
	.article-card--hero {
		background-color: var(--color-card);
	}

	.article-card--hero .article-card__overlay {
		background-image: linear-gradient(to top, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.25), transparent);
	}

	.article-card--hero .article-card__title,
	.article-card--hero .article-card__title a {
		color: var(--color-foreground);
	}

	.article-card--hero .article-card__excerpt {
		color: var(--color-body-text);
	}
}

/* Author line (avatar + name + date) */
.author-line {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.author-line__avatar {
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	object-fit: cover;
}

.author-line__text {
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.author-line__text a {
	color: inherit;
	text-decoration: none;
}

.author-line__text a:hover {
	color: var(--color-foreground);
}

.author-line__sep {
	margin-inline: 0.375rem;
	color: rgb(136 136 145 / 0.4);
}


/* 19. Section headers
   ========================================================================== */

.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.section-header__label {
	margin-bottom: 0.5rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.section-header__title-row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.section-header__bar {
	width: 4px;
	height: 1.75rem;
	background-color: var(--color-primary);
	flex-shrink: 0;
}

.section-header__title {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
}

.section-header__link {
	flex-shrink: 0;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.section-header__link:hover {
	color: var(--color-primary);
	text-decoration: none;
}

/* Small title-with-bar used in sidebars and "More from" rows */
.title-with-bar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.title-with-bar__bar {
	width: 4px;
	height: 1.25rem;
	background-color: var(--color-primary);
	flex-shrink: 0;
}

.title-with-bar__title {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
}


/* 20. Homepage sections
   ========================================================================== */

/* Hero */
.hero-section {
	padding-top: 2rem;
	padding-bottom: 3rem;
}

.hero-section__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.hero-section__stack {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* Hero side card (small thumb cards) */
.hero-side-card {
	display: flex;
	gap: 1rem;
	flex: 1;
	padding: 1rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: background-color var(--transition-fast);
	text-decoration: none;
}

.hero-side-card:hover {
	background-color: var(--color-card-hover);
	text-decoration: none;
}

.hero-side-card__media {
	flex: 0 0 6rem;
	width: 6rem;
	height: 5rem;
	overflow: hidden;
	background-color: var(--color-secondary);
}

.hero-side-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.hero-side-card:hover .hero-side-card__media img {
	transform: scale(1.1);
}

.hero-side-card__body {
	flex: 1;
	min-width: 0;
}

.hero-side-card__category {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.hero-side-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-foreground);
	transition: color var(--transition-fast);
}

.hero-side-card:hover .hero-side-card__title {
	color: var(--color-primary);
}

.hero-side-card__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	font-size: 11px;
	color: var(--color-muted-foreground);
}

/* Trending + latest two-column */
.trending-latest {
	padding-block: 3rem;
	border-top: 1px solid var(--color-border);
}

.trending-latest__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

/* Latest stories filter tabs */
.latest-filters {
	display: flex;
	gap: 0.25rem;
	padding-bottom: 0.25rem;
	overflow-x: auto;
}

.latest-filters__button {
	padding: 0.375rem 1rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-muted-foreground);
	background-color: transparent;
	white-space: nowrap;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.latest-filters__button:hover {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
}

.latest-filters__button.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

/* Categories grid tiles */
.categories-grid {
	padding-block: 3rem;
	border-top: 1px solid var(--color-border);
}

.category-tile {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast);
	text-decoration: none;
}

.category-tile:hover {
	border-color: rgb(255 85 0 / 0.3);
	text-decoration: none;
}

.category-tile__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.category-tile__name {
	margin: 0 0 0.25rem;
	font-family: var(--font-display);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	line-height: 1.25;
	color: var(--color-foreground);
	transition: color var(--transition-fast);
}

.category-tile:hover .category-tile__name {
	color: var(--color-primary);
}

.category-tile__count {
	margin: 0;
	font-size: 11px;
	color: var(--color-muted-foreground);
}

/* Newsletter CTA */
.newsletter-cta {
	background-color: var(--color-card);
	border-block: 1px solid var(--color-border);
}

.newsletter-cta__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
	padding-block: 4rem;
	padding-inline: var(--container-padding);
}

.newsletter-cta__divider {
	display: none;
	width: 1px;
	align-self: stretch;
	background-color: var(--color-border);
}

.newsletter-cta__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.newsletter-cta__title {
	margin-bottom: 1rem;
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

.newsletter-cta__copy {
	margin: 0;
	font-size: var(--font-size-md);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.newsletter-cta__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}

.newsletter-cta__stat-value {
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: 1.875rem;
	font-weight: var(--font-weight-black);
	line-height: 1;
}

.newsletter-cta__stat-label {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-muted-foreground);
}

.newsletter-cta__form {
	display: flex;
	gap: 0.5rem;
}

.newsletter-cta__input {
	flex: 1;
}

.newsletter-cta__submit {
	padding: 0.75rem 1.5rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.newsletter-cta__note {
	margin-top: 0.625rem;
	font-size: 11px;
	color: rgb(136 136 145 / 0.6);
}

/* Newsletter success state */
.newsletter-success {
	padding-block: 2rem;
	text-align: center;
}

.newsletter-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	background-color: rgb(255 85 0 / 0.1);
	border: 1px solid rgb(255 85 0 / 0.2);
	border-radius: var(--radius);
}

.newsletter-success__title {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.newsletter-success__copy {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

/* Advertise CTA panel */
.advertise-cta {
	padding-block: 4rem;
}

.advertise-cta__panel {
	position: relative;
	overflow: hidden;
	padding: 2rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.advertise-cta__grid-bg {
	position: absolute;
	inset: 0;
	opacity: 0.03;
	background-image: linear-gradient(var(--color-foreground) 1px, transparent 1px), linear-gradient(90deg, var(--color-foreground) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.advertise-cta__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	align-items: center;
}

.advertise-cta__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.advertise-cta__title {
	margin-bottom: 1rem;
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

.advertise-cta__copy {
	margin-bottom: 2rem;
	font-size: var(--font-size-md);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.advertise-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.advertise-cta__actions .button {
	padding-block: 0.75rem;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.02em;
}

.advertise-cta__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.advertise-cta__stat {
	padding: 1.25rem;
	background-color: var(--color-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.advertise-cta__stat-value {
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: var(--font-weight-black);
	line-height: 1;
}

.advertise-cta__stat-label {
	margin: 0;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

/* Section top/bottom borders for home sections */
.section--border-top {
	border-top: 1px solid var(--color-border);
}

/* Editors' choice — big featured card spanning two rows beside grid cards */
.editors-picks__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
}

.editors-picks__big .article-card {
	height: 100%;
}

.editors-picks__big .article-card--featured .article-card__media {
	aspect-ratio: 4 / 5;
}

/* Latest stories header row + footer */
.latest-section__header {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}

.latest-section__header .section-header {
	margin-bottom: 0;
}

.latest-section__footer {
	display: flex;
	justify-content: center;
	padding-top: 2.5rem;
}

/* Categories grid tiles (2 cols, expanded in breakpoints) */
.categories-grid__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

/* Newsletter signup column + inline success swap */
.newsletter-cta__intro {
	max-width: 30rem;
}

.newsletter-cta__signup .newsletter-success {
	display: none;
}

.newsletter-cta__signup.is-submitted .newsletter-cta__form,
.newsletter-cta__signup.is-submitted .newsletter-cta__note {
	display: none;
}

.newsletter-cta__signup.is-submitted .newsletter-success {
	display: block;
}

/* Advertise CTA intro column */
.advertise-cta__intro {
	max-width: 32rem;
}


/* 21. Single article / prose
   ========================================================================== */

.article-hero {
	position: relative;
	height: 50vh;
	min-height: 400px;
	max-height: 600px;
	overflow: hidden;
	background-color: var(--color-secondary);
}

.article-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.article-hero__overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, var(--color-background), rgb(10 10 12 / 0.3), transparent);
}

.article-single__wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

.article-single__main {
	margin-top: -5rem;
	position: relative;
}

.article-single__meta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.article-single__category {
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
}

.article-single__category:hover {
	color: #ff7733;
}

.article-single__trending {
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-warning);
}

.article-single__title {
	margin-bottom: 1.5rem;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: var(--font-weight-bold);
	line-height: 1.1;
}

.article-single__excerpt {
	margin-bottom: 1.5rem;
	font-family: var(--font-display);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.article-single__meta-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	padding-block: 1rem;
	border-block: 1px solid var(--color-border);
}

.article-single__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.article-single__author-avatar {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.article-single__author-name {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-foreground);
	text-decoration: none;
}

.article-single__author-name:hover {
	color: var(--color-primary);
}

.article-single__author-title {
	display: block;
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.article-single__pub-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-left: auto;
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.article-single__share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}

.share-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.share-button:hover {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.share-button svg {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}

/* Article body prose */
.article-body {
	color: var(--color-foreground);
}

.article-body > *:last-child {
	margin-bottom: 0;
}

.article-body p {
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--color-body-text);
	margin-bottom: 1.5rem;
}

.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 {
	font-family: var(--font-display);
	color: var(--color-foreground);
}

.article-body h2 {
	font-size: 1.75rem;
	font-weight: var(--font-weight-bold);
	margin: 2.5rem 0 1rem;
	line-height: 1.25;
}

.article-body h3 {
	font-size: 1.375rem;
	font-weight: var(--font-weight-semibold);
	margin: 2rem 0 0.75rem;
}

.article-body blockquote {
	border-left: 3px solid var(--color-primary);
	padding-left: 1.5rem;
	margin: 2rem 0;
	color: var(--color-body-text-soft);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.7;
}

.article-body ul,
.article-body ol {
	padding-left: 1.5rem;
	margin-bottom: 1.5rem;
	color: var(--color-body-text);
}

.article-body ul {
	list-style: disc;
}

.article-body ol {
	list-style: decimal;
}

.article-body li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

.article-body a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body a:hover {
	color: #ff7733;
}

.article-body img,
.article-body iframe,
.article-body embed,
.article-body video,
.article-body table {
	max-width: 100%;
}

.article-body img {
	margin-block: 2rem;
	height: auto;
}

.article-body .lead {
	font-size: 1.25rem;
	line-height: 1.7;
	color: var(--color-body-text);
	font-weight: var(--font-weight-regular);
	margin-bottom: 2rem;
	font-family: var(--font-display);
}

/* Tags */
.article-tags {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-border);
}

.article-tags__label {
	margin-bottom: 0.75rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.article-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.article-tags__link {
	padding: 0.375rem 0.75rem;
	background-color: var(--color-secondary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.03em;
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.article-tags__link:hover {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

/* Author bio card */
.author-bio {
	margin-top: 2.5rem;
	padding: 1.5rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.author-bio__inner {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
}

.author-bio__avatar {
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.author-bio__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.author-bio__name {
	display: block;
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	color: var(--color-foreground);
	text-decoration: none;
}

.author-bio__name:hover {
	color: var(--color-primary);
}

.author-bio__role {
	margin-bottom: 0.5rem;
	font-size: 11px;
	color: var(--color-primary);
}

.author-bio__text {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

/* Article sidebar */
.article-sidebar {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-top: 2rem;
}

.newsletter-mini {
	padding: 1.25rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.newsletter-mini__label {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.newsletter-mini__title {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
}

.newsletter-mini__copy {
	margin-bottom: 1rem;
	font-size: var(--font-size-xs);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.newsletter-mini__form .newsletter-cta__form {
	flex-direction: column;
	gap: 0.5rem;
}

.newsletter-mini__input {
	font-size: var(--font-size-xs);
}

.newsletter-mini__submit {
	width: 100%;
	padding-block: 0.625rem;
}

/* Related articles */
.related {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--color-border);
}

.related__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.related__title {
	margin: 0;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
}


/* 22. Archives
   ========================================================================== */

.archive-header {
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--color-border);
}

.archive-header__label {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.archive-header__title {
	margin-bottom: 0.75rem;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: var(--font-weight-black);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.archive-header__desc {
	max-width: 36rem;
	margin-bottom: 0.5rem;
	font-size: var(--font-size-md);
	color: var(--color-muted-foreground);
}

.archive-header__meta {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

.archive-controls {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.archive-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.filter-pill {
	padding: 0.375rem 0.75rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-muted-foreground);
	background-color: transparent;
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.filter-pill:hover {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.filter-pill.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

.archive-sort {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 0.25rem;
}

.archive-sort__label {
	margin-right: 0.5rem;
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.sort-link {
	padding: 0.375rem 0.75rem;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-muted-foreground);
	background-color: transparent;
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.sort-link:hover {
	color: var(--color-foreground);
	text-decoration: none;
}

.sort-link.is-active {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
}

.archive-count {
	margin-bottom: 1.5rem;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

.archive-list {
	display: flex;
	flex-direction: column;
}

.archive-load-more {
	margin-top: 3rem;
	text-align: center;
}

.archive-load-more [hidden] {
	display: none;
}

.archive-empty {
	padding-block: 3rem;
	text-align: center;
	color: var(--color-muted-foreground);
}

/* Archive pagination */
.archive-pagination {
	margin-top: 3rem;
	text-align: center;
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	margin: 0 0.25rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted-foreground);
	background-color: transparent;
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers:focus-visible {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.archive-pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
	cursor: default;
}

.archive-pagination .page-numbers.dots {
	cursor: default;
	pointer-events: none;
	color: var(--color-muted-foreground);
	border-color: transparent;
	background-color: transparent;
}

.archive-pagination .page-numbers.prev,
.archive-pagination .page-numbers.next {
	min-width: auto;
	padding: 0 1rem;
}

/* Category archive */
.category-archive__icon-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.category-archive__icon {
	font-size: 1.875rem;
	line-height: 1;
}

.category-archive__icon-label {
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.category-archive__hero {
	height: 420px;
	margin-bottom: 2.5rem;
}

.category-archive__hero .article-card--hero {
	min-height: 0;
	height: 100%;
}

.category-archive__hero .article-card--hero .article-card__body {
	padding: 1.75rem;
}

/* All categories page */
.categories-overview__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-bottom: 4rem;
}

.category-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast);
	text-decoration: none;
}

.category-card:hover {
	border-color: rgb(255 85 0 / 0.3);
	text-decoration: none;
}

.category-card__media {
	position: relative;
	height: 12rem;
	overflow: hidden;
	background-color: var(--color-secondary);
}

.category-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.category-card:hover .category-card__media img {
	transform: scale(1.05);
}

.category-card__media-overlay {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(to top, var(--color-card), rgb(17 17 20 / 0.6), transparent);
}

.category-card__body {
	padding: 1.5rem;
}

.category-card__title-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.category-card__icon {
	font-size: 1.5rem;
	line-height: 1;
}

.category-card__title {
	margin: 0;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-foreground);
	transition: color var(--transition-fast);
}

.category-card:hover .category-card__title {
	color: var(--color-primary);
}

.category-card__count {
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.category-card__desc {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

/* Search */
.search-form-wrap {
	max-width: 48rem;
	margin-bottom: 3rem;
}

.search-form__form {
	position: relative;
}

.search-form__input {
	padding: 1.25rem 3.5rem 1.25rem 1.5rem;
	background-color: var(--color-card);
	font-family: var(--font-display);
	font-size: var(--font-size-2xl);
}

.search-form__submit {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	background-color: var(--color-primary);
	color: #ffffff;
	border-radius: var(--radius);
	transition: background-color var(--transition-fast);
}

.search-form__submit:hover {
	background-color: #ff7733;
}

.search-topics {
	margin-bottom: 3rem;
}

.search-topics__label {
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.search-topics__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.topic-chip {
	padding: 0.5rem 1rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.topic-chip:hover {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.search-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-border);
}

.search-results-header p {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

.search-results-header strong {
	color: var(--color-foreground);
	font-weight: var(--font-weight-semibold);
}

.search-clear {
	font-size: 11px;
	color: var(--color-muted-foreground);
	text-decoration: none;
}

.search-clear:hover {
	color: var(--color-foreground);
}

.search-empty {
	padding-block: 3rem;
	text-align: center;
}

.search-empty__mark {
	margin-bottom: 1rem;
	font-family: var(--font-display);
	font-size: 2.25rem;
	color: var(--color-muted-foreground);
}

.search-empty__title {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-md);
	color: var(--color-muted-foreground);
}

.search-empty__copy {
	margin-bottom: 1.5rem;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

.search-empty__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

/* Author archive */
.author-profile {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--color-border);
}

.author-profile__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

.author-profile__main {
	min-width: 0;
}

.author-profile__avatar {
	width: 8rem;
	height: 8rem;
	object-fit: cover;
	border-radius: var(--radius);
}

.author-profile__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.author-profile__name {
	margin-bottom: 0.25rem;
	font-size: 2.25rem;
	font-weight: var(--font-weight-black);
	line-height: 1.1;
}

.author-profile__role {
	margin-bottom: 1rem;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

.author-profile__social {
	display: inline-flex;
	padding: 0.375rem 0.75rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted-foreground);
	text-decoration: none;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.author-profile__social:hover {
	color: var(--color-foreground);
	border-color: var(--color-border-hover);
	text-decoration: none;
}

.author-profile__bio {
	max-width: 42rem;
	margin-bottom: 2rem;
	font-size: var(--font-size-md);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.author-profile__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.author-profile__stat {
	padding: 1rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.author-profile__stat-value {
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--font-weight-black);
	line-height: 1;
}

.author-profile__stat-label {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-muted-foreground);
}

.author-profile__specialties {
	margin-top: 1.5rem;
}

.author-profile__specialties-label {
	margin-bottom: 0.75rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.author-profile__specialties-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.specialty-chip {
	padding: 0.375rem 0.75rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	color: var(--color-muted-foreground);
}

.author-articles__count {
	flex-shrink: 0;
	margin: 0 0 0.25rem;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}


/* 23. Static pages
   ========================================================================== */

/* About hero */
.about-hero {
	padding-top: 4rem;
	padding-bottom: 5rem;
	border-bottom: 1px solid var(--color-border);
}

.about-hero__inner {
	max-width: 48rem;
}

.about-hero__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.about-hero__title {
	margin-bottom: 1.5rem;
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: var(--font-weight-black);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.about-hero__copy {
	margin: 0;
	font-size: var(--font-size-xl);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.about-section {
	padding-block: 4rem;
	border-bottom: 1px solid var(--color-border);
}

.about-section--last {
	border-bottom: 0;
}

.about-section__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	align-items: start;
}

.about-section__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.about-section__title {
	margin-bottom: 1.5rem;
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.15;
}

.about-section__copy p {
	margin-bottom: 1rem;
	font-size: var(--font-size-md);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.about-stat {
	padding: 1.5rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.about-stat__value {
	margin-bottom: 0.5rem;
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: var(--font-weight-black);
	line-height: 1;
}

.about-stat__label {
	margin: 0;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.about-values__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.value-card {
	padding: 1.5rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.value-card__icon {
	display: block;
	margin-bottom: 1rem;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-primary);
}

.value-card__title {
	margin-bottom: 0.75rem;
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
}

.value-card__desc {
	margin: 0;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.about-team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.team-card {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast);
	text-decoration: none;
}

.team-card:hover {
	border-color: rgb(255 85 0 / 0.3);
	text-decoration: none;
}

.team-card__avatar {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	flex-shrink: 0;
}

.team-card__name {
	margin-bottom: 0.125rem;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
	color: var(--color-foreground);
	transition: color var(--transition-fast);
}

.team-card:hover .team-card__name {
	color: var(--color-primary);
}

.team-card__role {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-xs);
	color: var(--color-primary);
}

.team-card__bio {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-xs);
	line-height: 1.4;
	color: var(--color-muted-foreground);
}

.team-card__count {
	margin: 0;
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.about-cta {
	padding-block: 4rem;
}

.about-cta__panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 2.5rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.about-cta__title {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-bold);
}

.about-cta__copy {
	margin: 0;
	font-size: var(--font-size-sm);
	color: var(--color-muted-foreground);
}

.about-cta__actions {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* Contact */
.contact-header {
	max-width: 48rem;
	padding-bottom: 2.5rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--color-border);
}

.contact-header__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.contact-header__title {
	margin-bottom: 1rem;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: var(--font-weight-black);
	line-height: 1.1;
}

.contact-header__copy {
	margin: 0;
	font-size: var(--font-size-md);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

.contact-type-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.contact-type {
	display: block;
	padding: 1rem;
	text-align: left;
	cursor: pointer;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color var(--transition-fast);
}

.contact-type:hover {
	border-color: var(--color-border-hover);
}

.contact-type:focus-within,
.contact-type.is-active {
	border-color: var(--color-primary);
	background-color: rgb(255 85 0 / 0.05);
}

.contact-type__input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.contact-type__title {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	color: var(--color-foreground);
}

.contact-type__desc {
	display: block;
}

.contact-type.is-active .contact-type__title {
	color: var(--color-primary);
}

.contact-type__desc {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--color-muted-foreground);
}

.contact-form .newsletter-cta__form {
	flex-direction: column;
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.contact-form__label {
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.contact-form textarea {
	resize: none;
}

.contact-form form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact-form .button {
	padding-block: 0.75rem;
	/* Sits a touch closer than the field gap above it. */
	margin-top: -0.5rem;
}

.contact-form__error {
	padding: 0.75rem 1rem;
	background-color: rgb(220 38 38 / 0.08);
	border: 1px solid rgb(220 38 38 / 0.25);
	border-radius: var(--radius);
	color: #b3261e;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

/* Contact Form 7 — keep the authored markup and theme styles intact. */
.contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* CF7's own response box reads as the theme's validation error. */
.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 0.75rem 1rem;
	background-color: rgb(220 38 38 / 0.08);
	border: 1px solid rgb(220 38 38 / 0.25);
	border-radius: var(--radius);
	color: #b3261e;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

/* Invalid fields and per-field tips. */
.contact-form input.wpcf7-not-valid,
.contact-form textarea.wpcf7-not-valid,
.contact-form select.wpcf7-not-valid {
	border-color: #b3261e;
}

.contact-form .wpcf7-not-valid-tip {
	margin-top: 0.25rem;
	color: #b3261e;
	font-size: var(--font-size-sm);
}

/* A successful submission hides the CF7 form and shows the theme panel.
   Class-based so it keeps applying if CF7 re-renders the form. */
.contact-form.is-sent .wpcf7 {
	display: none;
}

.contact-success {
	padding: 2.5rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	text-align: center;
}

.contact-success__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	background-color: rgb(255 85 0 / 0.1);
	border: 1px solid rgb(255 85 0 / 0.2);
	border-radius: var(--radius);
	color: var(--color-primary);
	font-size: 1.25rem;
}

.contact-success__title {
	margin-bottom: 0.5rem;
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.contact-success__copy {
	max-width: 24rem;
	margin: 0 auto;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.contact-success__action {
	margin-top: 1.5rem;
}

.contact-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.info-card {
	padding: 1.25rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.info-card__title {
	margin-bottom: 0.75rem;
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-bold);
}

.info-card__copy {
	margin-bottom: 1rem;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.info-card__link {
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-primary);
	text-decoration: none;
}

.info-card__link:hover {
	color: #ff7733;
}

.info-card__list li {
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-border);
}

.info-card__list li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.info-card__role {
	margin: 0;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.info-card__name {
	margin: 0.125rem 0;
	font-size: var(--font-size-sm);
	color: var(--color-foreground);
}

.info-card__email {
	font-size: var(--font-size-xs);
	color: var(--color-primary);
	text-decoration: none;
}

.info-card__email:hover {
	color: #ff7733;
}

/* Advertise */
.advertise-hero {
	padding-block: 4rem 6rem;
	border-bottom: 1px solid var(--color-border);
}

.advertise-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}

.advertise-hero__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.advertise-hero__title {
	margin-bottom: 1.5rem;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: var(--font-weight-black);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.advertise-hero__copy {
	margin-bottom: 2rem;
	font-size: var(--font-size-lg);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.advertise-hero__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
}

.advertise-hero__stat {
	padding: 1.5rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.advertise-hero__stat-value {
	margin-bottom: 0.25rem;
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: var(--font-weight-black);
	line-height: 1;
}

.advertise-hero__stat-label {
	margin: 0;
	font-size: 11px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.audience-strip {
	background-color: var(--color-card);
	border-bottom: 1px solid var(--color-border);
}

.audience-strip__inner {
	padding-block: 3rem;
}

.audience-strip__label {
	margin-bottom: 1.5rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-muted-foreground);
}

.audience-strip__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.audience-stat {
	text-align: center;
}

.audience-stat__value {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--font-weight-black);
	line-height: 1.2;
}

.audience-stat__label {
	margin-top: 0.25rem;
	font-size: 10px;
	line-height: 1.3;
	color: var(--color-muted-foreground);
}

.ad-products {
	padding-block: 4rem;
	border-bottom: 1px solid var(--color-border);
}

.ad-products__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.ad-products__title {
	margin-bottom: 2.5rem;
	font-size: 1.875rem;
	font-weight: var(--font-weight-bold);
}

.ad-products__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.ad-product {
	padding: 1.75rem;
	background-color: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: border-color 0.2s ease;
}

.ad-product--highlight {
	border-color: rgb(255 85 0 / 0.4);
}

.ad-product:hover {
	border-color: rgb(255 85 0 / 0.4);
}

.ad-product__badge {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.ad-product__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.ad-product__name {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-bold);
}

.ad-product__price-wrap {
	flex-shrink: 0;
	margin-left: 1rem;
	text-align: right;
}

.ad-product__price {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: var(--font-weight-black);
	text-align: right;
	line-height: 1.1;
}

.ad-product__period {
	font-size: 11px;
	color: var(--color-muted-foreground);
}

.ad-product__reach-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
	font-size: 11px;
}

.ad-product__reach {
	color: var(--color-primary);
	font-weight: var(--font-weight-semibold);
}

.ad-product__open-rate {
	color: var(--color-muted-foreground);
}

.ad-product__desc {
	margin-bottom: 1rem;
	font-size: var(--font-size-sm);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.ad-product__features {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ad-product__features li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
	font-size: var(--font-size-xs);
	color: var(--color-muted-foreground);
}

.ad-product__features li::before {
	content: '';
	width: 6px;
	height: 6px;
	background-color: var(--color-primary);
	flex-shrink: 0;
}

.ad-contact {
	padding-block: 4rem;
}

.ad-contact__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

.ad-contact__label {
	display: block;
	margin-bottom: 1rem;
	font-size: 10px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-primary);
}

.ad-contact__title {
	margin-bottom: 1rem;
	font-size: 2.25rem;
	font-weight: var(--font-weight-bold);
}

.ad-contact__copy {
	margin-bottom: 1.5rem;
	font-size: var(--font-size-md);
	line-height: 1.625;
	color: var(--color-muted-foreground);
}

.ad-contact__emails li {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	font-size: var(--font-size-sm);
}

.ad-contact__email-label {
	width: 7rem;
	color: var(--color-muted-foreground);
	flex-shrink: 0;
}

.ad-contact__email {
	color: var(--color-primary);
	text-decoration: none;
}

.ad-contact__email:hover {
	color: #ff7733;
}


/* 24. Responsive breakpoints
   ========================================================================== */

@media (min-width: 640px) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.latest-filters {
		overflow-x: visible;
	}

	.ad-products__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.audience-strip__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.about-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-team__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.contact-type-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 768px) {
	h1 {
		font-size: var(--font-size-5xl);
	}

	h2 {
		font-size: var(--font-size-4xl);
	}

	h3 {
		font-size: var(--font-size-3xl);
	}

	.grid--2,
	.grid--3,
	.grid--4,
	.grid--8 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.categories-overview__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.article-card--list {
		grid-template-columns: 1fr 200px;
	}

	.categories-grid__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.trending-latest__grid {
		gap: 3rem;
	}
}

@media (min-width: 1024px) {
	.site-nav {
		display: flex;
	}

	.site-footer__grid {
		grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr;
		gap: 2rem;
	}

	.site-header__toggle {
		display: none;
	}

	.site-mobile-menu {
		display: none !important;
	}

	.site-actions__button--advertise {
		display: inline-flex;
	}

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

	.grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.grid--8 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.categories-grid__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.editors-picks__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}

	.editors-picks__big {
		grid-row: span 2;
	}

	.latest-section__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.hero-section__grid {
		grid-template-columns: 1fr 400px;
	}

	.trending-latest__grid {
		grid-template-columns: 1fr 1fr;
		gap: 5rem;
	}

	.newsletter-cta__inner {
		grid-template-columns: 1fr 1px 1fr;
		gap: 3rem;
		padding-inline: var(--container-padding-lg);
	}

	.newsletter-cta__divider {
		display: block;
	}

	.advertise-cta__inner {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}

	.article-single__wrap {
		grid-template-columns: 1fr 360px;
		gap: 5rem;
	}

	.article-sidebar {
		padding-top: 1rem;
	}

	.archive-controls {
		flex-direction: row;
		align-items: center;
	}

	.author-profile {
		grid-template-columns: 280px 1fr;
	}

	.about-section__grid {
		grid-template-columns: 1fr 1fr;
	}

	.about-values__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.about-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.about-cta__panel {
		flex-direction: row;
		align-items: center;
	}

	.contact-grid {
		grid-template-columns: 1fr 360px;
		gap: 5rem;
	}

	.advertise-hero__grid {
		grid-template-columns: 1fr 1fr;
	}

	.audience-strip__grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.ad-contact__grid {
		grid-template-columns: 1fr 1fr;
		gap: 5rem;
	}
}

@media (min-width: 1280px) {
	.hero-section__grid {
		grid-template-columns: 1fr 400px;
	}

	.trending-latest__grid {
		gap: 5rem;
	}
}

@media (max-width: 1023px) {
	.site-actions__button--advertise {
		display: none;
	}

	.site-nav {
		display: none;
	}

	.site-header__toggle {
		display: flex;
	}
}

@media (max-width: 767px) {
	.grid--2,
	.grid--3,
	.grid--4,
	.grid--8 {
		grid-template-columns: 1fr;
	}

	.article-card--list {
		grid-template-columns: 1fr;
	}

	.article-card--list .article-card__media {
		aspect-ratio: 16 / 9;
		order: -1;
	}

	.article-single__main {
		margin-top: -3rem;
	}

	.article-single__pub-meta {
		margin-left: 0;
	}

	.newsletter-cta__form {
		flex-direction: column;
	}

	.newsletter-cta__submit {
		width: 100%;
	}

	.advertise-cta__panel {
		padding: 1.5rem;
	}

	.author-profile__stats {
		grid-template-columns: 1fr;
	}

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

	.site-footer__grid {
		grid-template-columns: 1fr;
	}

	.hero-side-card__media {
		flex: 0 0 5rem;
		width: 5rem;
		height: 4rem;
	}

	.mega-menu__grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

/* 25. Reduced motion
   ========================================================================== */

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