/**
 * theme1 - Newspaper/Editorial Broadsheet Main Stylesheet
 *
 * Table of Contents:
 *
 * 1.  Custom Properties (CSS Variables)
 * 2.  CSS Reset & Base
 * 3.  Typography
 * 4.  Skip Link & Accessibility
 * 5.  Layout Container
 * 6.  Masthead / Header
 * 7.  Edition Banner
 * 8.  Navigation
 * 9.  Rule Dividers
 * 10. Section Headings
 * 11. Lead Story (Front Page Hero)
 * 12. Column Grid (Multi-Column Layout)
 * 13. Column Cards (Episode & Article)
 * 14. Episode Badge
 * 15. Category Labels
 * 16. Dateline / Byline
 * 17. Single Article
 * 18. Single Episode
 * 19. Episode Player
 * 20. Drop Caps
 * 21. Column Text (Justified Content)
 * 22. Post Navigation
 * 23. Pagination
 * 24. About Page
 * 25. Host Cards
 * 26. Guest Cards
 * 27. Contact Page
 * 28. Contact Form
 * 29. Platform Links
 * 30. Footer
 * 31. No Content / Empty State
 * 32. WordPress Alignment Classes
 * 33. WordPress Block Styles
 * 34. Stagger Animations
 * 35. Scrolled Header State
 * 36. Responsive: Tablet (max-width: 1024px)
 * 37. Responsive: Mobile (max-width: 768px)
 * 38. Responsive: Small Mobile (max-width: 480px)
 * 39. Print Styles
 * 40. Reduced Motion
 * 41. Focus-Visible Styles
 *
 * @package theme1
 */

/* ==========================================================================
   1. Custom Properties (CSS Variables)
   ========================================================================== */

:root {
	/* Colors */
	--color-newsprint: #f5f1eb;
	--color-newsprint-light: #faf8f5;
	--color-newsprint-dark: #ebe5da;
	--color-ink: #1a1a1a;
	--color-ink-light: #333333;
	--color-ink-muted: #555555;
	--color-red: #c41e3a;
	--color-red-dark: #a01830;
	--color-red-light: #e8243f;
	--color-rule: #999999;
	--color-rule-light: #cccccc;
	--color-rule-dark: #666666;
	--color-white: #ffffff;
	--color-overlay: rgba(26, 26, 26, 0.6);

	/* Typography */
	--font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
	--font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Font Sizes */
	--text-xs: 0.7rem;
	--text-sm: 0.8rem;
	--text-base: 1rem;
	--text-md: 1.1rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 2rem;
	--text-3xl: 2.5rem;
	--text-4xl: 3rem;
	--text-5xl: 3.5rem;
	--text-6xl: 4.5rem;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;

	/* Layout */
	--max-width: 1200px;
	--content-width: 800px;
	--sidebar-width: 300px;
	--gutter: 2rem;
	--column-gap: 2rem;
	--rule-width: 1px;
	--rule-width-thick: 2px;
	--rule-width-heavy: 4px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 300ms ease;
	--transition-slow: 500ms ease;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);

	/* Border Radius */
	--radius-sm: 2px;
	--radius-md: 4px;
}

/* ==========================================================================
   2. CSS Reset & Base
   ========================================================================== */

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

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--color-ink);
	background-color: var(--color-newsprint);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headline);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: var(--space-md);
	color: var(--color-ink);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p {
	margin-top: 0;
	margin-bottom: var(--space-md);
}

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

a:hover {
	color: var(--color-red);
}

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

ul, ol {
	margin-top: 0;
	margin-bottom: var(--space-md);
	padding-left: var(--space-xl);
}

blockquote {
	margin: var(--space-xl) 0;
	padding: var(--space-lg) var(--space-xl);
	border-left: var(--rule-width-heavy) solid var(--color-ink);
	font-style: italic;
	font-size: var(--text-lg);
	background-color: var(--color-newsprint-dark);
}

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

hr {
	border: 0;
	border-top: var(--rule-width) solid var(--color-rule);
	margin: var(--space-xl) 0;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-xl);
}

th, td {
	text-align: left;
	padding: var(--space-sm) var(--space-md);
	border-bottom: var(--rule-width) solid var(--color-rule-light);
}

th {
	font-family: var(--font-headline);
	font-weight: 700;
	border-bottom-width: var(--rule-width-thick);
	border-bottom-color: var(--color-ink);
}

code, pre {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 0.9em;
}

code {
	background-color: var(--color-newsprint-dark);
	padding: 0.1em 0.3em;
	border-radius: var(--radius-sm);
}

pre {
	background-color: var(--color-ink);
	color: var(--color-newsprint);
	padding: var(--space-lg);
	overflow-x: auto;
	border-radius: var(--radius-md);
	margin-bottom: var(--space-xl);
}

pre code {
	background-color: transparent;
	padding: 0;
	color: inherit;
}

figure {
	margin: 0 0 var(--space-xl);
}

figcaption {
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
	font-style: italic;
	margin-top: var(--space-sm);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.site-main {
	font-family: var(--font-body);
}

strong, b {
	font-weight: 700;
}

em, i {
	font-style: italic;
}

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

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. Skip Link & Accessibility
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-md);
	z-index: 10000;
	padding: var(--space-sm) var(--space-lg);
	background-color: var(--color-ink);
	color: var(--color-newsprint);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.skip-link:focus {
	top: 0;
	color: var(--color-newsprint);
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

/* ==========================================================================
   5. Layout Container
   ========================================================================== */

.site-main {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-2xl) var(--gutter);
}

.archive-page {
	max-width: 100%;
}

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

.site-header {
	background-color: var(--color-newsprint);
	position: relative;
	z-index: 100;
}

.masthead-rule {
	height: var(--rule-width);
	background-color: var(--color-ink);
	margin: 0;
}

.masthead-rule--top {
	height: var(--rule-width-heavy);
}

.masthead-rule--bottom {
	height: var(--rule-width-thick);
}

.masthead-rule--nav {
	height: var(--rule-width);
}

.masthead {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-lg) var(--gutter);
}

.masthead__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
}

.masthead__meta {
	flex: 1;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-ink-muted);
}

.masthead__meta--left {
	text-align: left;
}

.masthead__meta--right {
	text-align: right;
}

.masthead__branding {
	flex: 2;
	text-align: center;
}

.site-logo {
	display: inline-block;
}

.site-logo img {
	max-height: 80px;
	width: auto;
}

.masthead__title {
	font-family: var(--font-headline);
	font-size: var(--text-5xl);
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1;
	text-transform: none;
}

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

.masthead__title a:hover {
	color: var(--color-ink);
}

.masthead__weather {
	display: block;
	line-height: 1.4;
}

/* ==========================================================================
   7. Edition Banner
   ========================================================================== */

.edition-date {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.edition-date__label {
	display: block;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-xs);
}

.edition-date__number {
	font-weight: 700;
	color: var(--color-ink);
}

.edition-banner {
	background-color: var(--color-newsprint-dark);
	border-top: var(--rule-width) solid var(--color-rule-light);
	border-bottom: var(--rule-width) solid var(--color-rule-light);
}

.edition-banner__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-sm) var(--gutter);
	text-align: center;
}

.edition-banner__date {
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--color-ink-muted);
}

/* ==========================================================================
   8. Navigation
   ========================================================================== */

.main-navigation {
	background-color: var(--color-newsprint);
}

.main-navigation__inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
}

.nav-menu li {
	position: relative;
}

.nav-menu li a {
	display: block;
	padding: var(--space-md) var(--space-lg);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink);
	text-decoration: none;
	transition: color var(--transition-fast), background-color var(--transition-fast);
	border-left: var(--rule-width) solid var(--color-rule-light);
}

.nav-menu li:last-child a {
	border-right: var(--rule-width) solid var(--color-rule-light);
}

.nav-menu li a:hover,
.nav-menu li.current-menu-item a,
.nav-menu li.current_page_item a {
	color: var(--color-red);
	background-color: var(--color-newsprint-dark);
}

/* Sub-menu */
.nav-menu li ul.sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	background-color: var(--color-newsprint);
	border: var(--rule-width) solid var(--color-rule-light);
	min-width: 200px;
	padding: 0;
	list-style: none;
	box-shadow: var(--shadow-md);
}

.nav-menu li:hover > ul.sub-menu {
	display: block;
}

.nav-menu li ul.sub-menu li a {
	padding: var(--space-sm) var(--space-lg);
	font-size: var(--text-xs);
	border-left: 0;
	border-bottom: var(--rule-width) solid var(--color-rule-light);
}

.nav-menu li ul.sub-menu li:last-child a {
	border-right: 0;
	border-bottom: 0;
}

/* Menu toggle button */
.menu-toggle {
	display: none;
	background: none;
	border: var(--rule-width) solid var(--color-ink);
	cursor: pointer;
	padding: var(--space-sm) var(--space-sm);
	width: 44px;
	height: 44px;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--color-ink);
	transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Hamburger animation when open */
.nav-open .menu-toggle .menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.nav-open .menu-toggle .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-open .menu-toggle .menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   9. Rule Dividers
   ========================================================================== */

.rule-divider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-2xl) 0;
	height: 1px;
	background-color: var(--color-rule);
}

.rule-divider--narrow {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

.rule-divider__dot {
	display: block;
	width: 8px;
	height: 8px;
	background-color: var(--color-newsprint);
	border: var(--rule-width) solid var(--color-rule);
	border-radius: 50%;
	position: relative;
	z-index: 1;
}

.rule-divider__dot::before,
.rule-divider__dot::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 4px;
	height: 4px;
	background-color: var(--color-newsprint);
	border: var(--rule-width) solid var(--color-rule);
	border-radius: 50%;
	transform: translateY(-50%);
}

.rule-divider__dot::before {
	right: 14px;
}

.rule-divider__dot::after {
	left: 14px;
}

/* ==========================================================================
   10. Section Headings
   ========================================================================== */

.section-heading {
	font-family: var(--font-headline);
	font-size: var(--text-xl);
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: var(--space-2xl);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	color: var(--color-ink);
}

.section-heading::before,
.section-heading::after {
	content: '';
	flex: 1;
	height: var(--rule-width);
	background-color: var(--color-rule);
}

.section-heading span {
	padding: 0 var(--space-md);
	white-space: nowrap;
}

/* ==========================================================================
   11. Lead Story (Front Page Hero)
   ========================================================================== */

.lead-story {
	margin-bottom: var(--space-xl);
}

.lead-story__article {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2xl);
	align-items: start;
}

.lead-story__image {
	overflow: hidden;
	border: var(--rule-width) solid var(--color-rule-light);
}

.lead-story__image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--transition-slow);
}

.lead-story__image:hover img {
	transform: scale(1.02);
}

.lead-story__content {
	padding-top: var(--space-md);
}

.lead-story__headline {
	font-family: var(--font-headline);
	font-size: var(--text-4xl);
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: var(--space-md);
	letter-spacing: -0.02em;
}

.lead-story__headline a {
	color: var(--color-ink);
	text-decoration: none;
}

.lead-story__headline a:hover {
	color: var(--color-red);
}

.lead-story__excerpt {
	font-size: var(--text-md);
	line-height: 1.7;
	color: var(--color-ink-light);
	margin-bottom: var(--space-lg);
	text-align: justify;
	hyphens: auto;
}

.lead-story__link {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-red);
	border-bottom: var(--rule-width-thick) solid var(--color-red);
	padding-bottom: var(--space-xs);
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.lead-story__link:hover {
	color: var(--color-red-dark);
	border-color: var(--color-red-dark);
}

/* ==========================================================================
   12. Column Grid (Multi-Column Layout)
   ========================================================================== */

.column-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	position: relative;
}

/* Vertical rules between columns */
.column-grid .column-card {
	padding: 0 var(--column-gap);
	border-right: var(--rule-width) solid var(--color-rule-light);
}

.column-grid .column-card:nth-child(3n) {
	border-right: none;
}

.column-grid .column-card:nth-child(n+4) {
	margin-top: var(--space-2xl);
	padding-top: var(--space-2xl);
	border-top: var(--rule-width) solid var(--color-rule-light);
}

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

.column-grid--articles .column-card:nth-child(3n) {
	border-right: var(--rule-width) solid var(--color-rule-light);
}

.column-grid--articles .column-card:nth-child(2n) {
	border-right: none;
}

.column-grid--articles .column-card:nth-child(n+3) {
	margin-top: var(--space-2xl);
	padding-top: var(--space-2xl);
	border-top: var(--rule-width) solid var(--color-rule-light);
}

/* ==========================================================================
   13. Column Cards (Episode & Article)
   ========================================================================== */

.column-card {
	display: flex;
	flex-direction: column;
}

.column-card__image-link {
	display: block;
	margin-bottom: var(--space-md);
	overflow: hidden;
}

.column-card__image {
	position: relative;
	overflow: hidden;
}

.column-card__image img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform var(--transition-slow);
	filter: grayscale(20%) contrast(1.05);
}

.column-card__image-link:hover .column-card__image img {
	transform: scale(1.03);
	filter: grayscale(0%) contrast(1);
}

.column-card__content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.column-card__headline {
	font-family: var(--font-headline);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: var(--space-sm);
}

.column-card__headline a {
	color: var(--color-ink);
	text-decoration: none;
}

.column-card__headline a:hover {
	color: var(--color-red);
}

.column-card__excerpt {
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-ink-muted);
	text-align: justify;
	hyphens: auto;
	margin-top: var(--space-sm);
}

/* ==========================================================================
   14. Episode Badge
   ========================================================================== */

.episode-badge {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-red);
	border: var(--rule-width-thick) solid var(--color-red);
	padding: var(--space-xs) var(--space-sm);
	margin-bottom: var(--space-sm);
	line-height: 1;
}

.episode-badge--large {
	font-size: var(--text-sm);
	padding: var(--space-sm) var(--space-md);
	margin-bottom: var(--space-md);
}

/* ==========================================================================
   15. Category Labels
   ========================================================================== */

.category-label {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-muted);
	border-bottom: var(--rule-width-thick) solid var(--color-red);
	padding-bottom: var(--space-xs);
	margin-bottom: var(--space-sm);
}

/* ==========================================================================
   16. Dateline / Byline
   ========================================================================== */

.dateline {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-ink-muted);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-sm);
}

.byline__separator {
	color: var(--color-rule);
}

.byline__author {
	font-weight: 600;
}

.byline__duration {
	color: var(--color-ink-muted);
}

.byline__reading-time {
	color: var(--color-ink-muted);
}

.column-card__dateline {
	margin-bottom: var(--space-sm);
}

/* ==========================================================================
   17. Single Article
   ========================================================================== */

.single-article {
	max-width: var(--content-width);
	margin: 0 auto;
}

.article-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.article-header__categories {
	margin-bottom: var(--space-md);
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
}

.article-header__headline {
	font-family: var(--font-headline);
	font-size: var(--text-5xl);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-lg);
}

.article-header__byline {
	justify-content: center;
}

.article-featured-image {
	margin-bottom: var(--space-2xl);
	border: var(--rule-width) solid var(--color-rule-light);
}

.article-featured-image img {
	width: 100%;
	height: auto;
}

.article-content {
	margin-bottom: var(--space-2xl);
}

.article-footer {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: var(--rule-width) solid var(--color-rule-light);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
}

.article-tag {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-ink-muted);
	border: var(--rule-width) solid var(--color-rule);
	padding: var(--space-xs) var(--space-sm);
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.article-tag:hover {
	color: var(--color-red);
	border-color: var(--color-red);
}

/* ==========================================================================
   18. Single Episode
   ========================================================================== */

.single-episode {
	max-width: var(--content-width);
	margin: 0 auto;
}

.episode-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.episode-header__headline {
	font-family: var(--font-headline);
	font-size: var(--text-5xl);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: var(--space-lg);
}

.episode-header__byline {
	justify-content: center;
}

.episode-featured-image {
	margin-bottom: var(--space-2xl);
	border: var(--rule-width) solid var(--color-rule-light);
}

.episode-featured-image img {
	width: 100%;
	height: auto;
}

.episode-content {
	margin-bottom: var(--space-2xl);
}

/* ==========================================================================
   19. Episode Player
   ========================================================================== */

.episode-player {
	margin-bottom: var(--space-2xl);
	padding: var(--space-lg);
	border: var(--rule-width) solid var(--color-rule-light);
	background-color: var(--color-newsprint-dark);
}

.episode-player iframe,
.episode-player .ssp-player,
.episode-player audio {
	width: 100%;
	max-width: 100%;
}

/* -- SSP Castos Player: Newsprint Theme Overrides -- */

.castos-player {
	--ssp-light-mode-bg1-color: var(--color-newsprint);
	--ssp-light-mode-bg2-color: var(--color-newsprint-dark);
	--ssp-light-mode-text-color: var(--color-ink);
	--ssp-light-mode-player-panel-bg: var(--color-newsprint-light);
	--ssp-light-mode-player-panel-input-bg: var(--color-newsprint-dark);
	--ssp-dark-mode-bg1-color: var(--color-newsprint);
	--ssp-dark-mode-bg2-color: var(--color-newsprint-dark);
	--ssp-dark-mode-text-color: var(--color-ink);
	--ssp-dark-mode-player-panel-bg: var(--color-newsprint-light);
	--ssp-dark-mode-player-panel-input-bg: var(--color-newsprint-dark);
	--ssp-progress-bar-color: var(--color-red);
	--ssp-play-btn-color: var(--color-ink);
	--ssp-player-btns-opacity: 0.6;
}

.castos-player .player {
	border-radius: 0;
	border: 1px solid var(--color-rule-light);
}

.castos-player .player__artwork {
	display: none !important;
}

.castos-player .player__main {
	grid-template-columns: 1fr !important;
	grid-gap: 0 !important;
}

.castos-player .player__body {
	padding: 13px !important;
}

.castos-player .play-progress {
	margin-left: 0 !important;
}

.castos-player .play-pause-controls .loader {
	border-color: var(--color-ink);
	border-top-color: var(--color-newsprint);
}

.castos-player .loader {
	border-color: var(--color-rule-light);
	border-top-color: var(--color-ink);
}

.castos-player .episode-title {
	font-family: var(--font-headline);
	color: var(--color-ink);
}

.castos-player .currently-playing .show {
	font-family: var(--font-body);
	color: var(--color-ink-muted);
}

.castos-player .player-panel h3 {
	font-family: var(--font-headline);
	color: var(--color-ink);
}

.castos-player .player-panel .player-panel-row .title {
	font-family: var(--font-body);
	color: var(--color-ink);
}

.castos-player .player-panels-nav button {
	font-family: var(--font-ui);
	color: var(--color-ink);
}

.castos-player .player-btn__speed {
	color: var(--color-ink);
	border-color: var(--color-ink);
}

.castos-player .playback__timers {
	color: var(--color-ink-muted);
}

.castos-player .player-btn__fwd,
.castos-player .player-btn__rwd,
.castos-player .player-btn__volume {
	background-color: var(--color-ink);
}

.castos-player .progress,
.castos-player .ssp-progress {
	background-color: var(--color-rule-light);
}

.castos-player .subscribe-icons a {
	font-family: var(--font-ui);
	color: var(--color-ink);
}

.castos-player .subscribe-icons span {
	background-color: var(--color-ink);
}

.castos-player .share-icon {
	background-color: var(--color-newsprint-dark);
}

.castos-player .share-icon span {
	background-color: var(--color-ink);
}

.castos-player .share-icon:hover {
	background-color: var(--color-red) !important;
}

.castos-player .player-panel .player-panel-row input {
	background-color: var(--color-newsprint-dark);
	color: var(--color-ink);
	border: 1px solid var(--color-rule-light);
}

.castos-player .player-panel .player-panel-row button:hover {
	background-color: var(--color-red) !important;
}

.castos-player .close-btn {
	background-color: var(--color-ink);
}

.castos-player .close-btn span {
	background-color: var(--color-newsprint);
}

.castos-player .playlist__wrapper {
	background: var(--color-newsprint-dark);
	color: var(--color-ink);
	border-radius: 0;
}

.castos-player .playlist__item {
	background-color: var(--color-newsprint);
}

.castos-player .playlist__item:hover {
	background-color: var(--color-newsprint-light);
}

.castos-player .playlist__item__details h2,
.castos-player .playlist__item__details p {
	color: var(--color-ink);
}

.castos-player .playlist__item.active h2 {
	color: var(--color-red);
}

.castos-player .playlist__item_meta {
	background-color: var(--color-newsprint-dark);
	color: var(--color-ink-muted);
}

.castos-player .powered-by {
	opacity: 0.3;
}

/* ==========================================================================
   20. Drop Caps
   ========================================================================== */

.column-text > p:first-of-type::first-letter,
.article-content > p:first-of-type::first-letter,
.episode-content > p:first-of-type::first-letter {
	float: left;
	font-family: var(--font-headline);
	font-size: 4.5em;
	font-weight: 900;
	line-height: 0.8;
	padding-right: 0.08em;
	padding-top: 0.05em;
	color: var(--color-ink);
}

/* ==========================================================================
   21. Column Text (Justified Content)
   ========================================================================== */

.column-text {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	line-height: 1.8;
}

.column-text p {
	margin-bottom: var(--space-lg);
}

.column-text h2,
.column-text h3,
.column-text h4 {
	text-align: left;
	margin-top: var(--space-2xl);
}

.column-text img {
	margin: var(--space-xl) 0;
	border: var(--rule-width) solid var(--color-rule-light);
}

.column-text a {
	color: var(--color-red);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color var(--transition-fast);
}

.column-text a:hover {
	color: var(--color-red-dark);
}

/* Two-column layout for desktop episode content */
@media (min-width: 1025px) {
	.single-episode .episode-content.column-text {
		column-count: 2;
		column-gap: var(--column-gap);
		column-rule: var(--rule-width) solid var(--color-rule-light);
	}

	.single-episode .episode-content.column-text p {
		break-inside: avoid;
	}

	.single-episode .episode-content.column-text h2,
	.single-episode .episode-content.column-text h3,
	.single-episode .episode-content.column-text h4 {
		column-span: all;
	}

	.single-episode .episode-content.column-text img,
	.single-episode .episode-content.column-text figure {
		break-inside: avoid;
	}

	.single-episode .episode-content.column-text blockquote {
		break-inside: avoid;
	}
}

/* ==========================================================================
   22. Post Navigation
   ========================================================================== */

.post-navigation,
.episode-navigation {
	display: flex;
	justify-content: space-between;
	gap: var(--space-xl);
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--space-2xl) 0;
}

.post-nav-link {
	display: flex;
	flex-direction: column;
	max-width: 45%;
	text-decoration: none;
	padding: var(--space-lg);
	border: var(--rule-width) solid var(--color-rule-light);
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.post-nav-link:hover {
	border-color: var(--color-ink);
	background-color: var(--color-newsprint-dark);
}

.post-nav-link--prev {
	align-items: flex-start;
}

.post-nav-link--next {
	align-items: flex-end;
	margin-left: auto;
	text-align: right;
}

.post-nav-link__arrow {
	font-size: var(--text-xl);
	line-height: 1;
	color: var(--color-red);
	margin-bottom: var(--space-xs);
}

.post-nav-link__label {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-xs);
}

.post-nav-link__title {
	font-family: var(--font-headline);
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-ink);
}

.post-nav-link:hover .post-nav-link__title {
	color: var(--color-red);
}

/* ==========================================================================
   23. Pagination
   ========================================================================== */

.newspaper-pagination {
	margin-top: var(--space-3xl);
	padding-top: var(--space-xl);
	border-top: var(--rule-width) solid var(--color-rule);
}

.newspaper-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
}

.newspaper-pagination__item {
	display: inline-flex;
}

.newspaper-pagination__item a,
.newspaper-pagination__item span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: var(--space-xs) var(--space-sm);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--color-ink);
	border: var(--rule-width) solid var(--color-rule-light);
	transition: all var(--transition-fast);
}

.newspaper-pagination__item a:hover {
	color: var(--color-red);
	border-color: var(--color-red);
}

.newspaper-pagination__item span.current {
	color: var(--color-newsprint);
	background-color: var(--color-ink);
	border-color: var(--color-ink);
}

.newspaper-pagination__item .prev,
.newspaper-pagination__item .next {
	font-size: var(--text-lg);
}

/* ==========================================================================
   24. About Page
   ========================================================================== */

.about-page {
	max-width: var(--content-width);
	margin: 0 auto;
}

.about-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.about-header__title {
	font-family: var(--font-headline);
	font-size: var(--text-4xl);
	font-weight: 900;
	margin-bottom: var(--space-lg);
}

.about-intro {
	margin-bottom: var(--space-2xl);
}

.about-section {
	margin-bottom: var(--space-3xl);
}

/* ==========================================================================
   25. Host Cards
   ========================================================================== */

.hosts-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2xl);
}

.host-card {
	display: flex;
	gap: var(--space-lg);
	padding: var(--space-lg);
	border: var(--rule-width) solid var(--color-rule-light);
	background-color: var(--color-newsprint-light);
}

.host-card__photo {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border: var(--rule-width) solid var(--color-rule-light);
}

.host-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(30%) contrast(1.1);
}

.host-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-newsprint-dark);
	font-family: var(--font-headline);
	font-size: var(--text-3xl);
	font-weight: 900;
	color: var(--color-rule);
}

.host-card__info {
	flex: 1;
	min-width: 0;
}

.host-card__name {
	font-family: var(--font-headline);
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: var(--space-xs);
}

.host-card__role {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-red);
	margin-bottom: var(--space-sm);
}

.host-card__bio {
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-sm);
}

.host-card__links {
	display: flex;
	gap: var(--space-sm);
}

.host-card__link {
	color: var(--color-ink-muted);
	transition: color var(--transition-fast);
}

.host-card__link:hover {
	color: var(--color-red);
}

.host-card__link svg {
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   26. Guest Cards
   ========================================================================== */

.guests-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-xl);
}

.guests-row {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-xl);
}

.guest-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-lg);
	border: var(--rule-width) solid var(--color-rule-light);
	background-color: var(--color-newsprint-light);
	transition: border-color var(--transition-fast);
}

.guest-card:hover {
	border-color: var(--color-ink);
}

.guest-card__photo {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--space-md);
	border: var(--rule-width-thick) solid var(--color-ink);
}

.guest-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(30%) contrast(1.1);
}

.guest-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-newsprint-dark);
	font-family: var(--font-headline);
	font-size: var(--text-2xl);
	font-weight: 900;
	color: var(--color-rule);
}

.guest-card__info {
	width: 100%;
}

.guest-card__name {
	font-family: var(--font-headline);
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: var(--space-xs);
}

.guest-card__name a {
	color: var(--color-ink);
	text-decoration: none;
}

.guest-card__name a:hover {
	color: var(--color-red);
}

.guest-card__bio {
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-ink-muted);
	margin-bottom: var(--space-sm);
}

.guest-card__count {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* ==========================================================================
   27. Contact Page
   ========================================================================== */

.contact-page {
	max-width: var(--content-width);
	margin: 0 auto;
}

.contact-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.contact-header__title {
	font-family: var(--font-headline);
	font-size: var(--text-4xl);
	font-weight: 900;
	margin-bottom: var(--space-lg);
}

.contact-intro {
	margin-bottom: var(--space-2xl);
}

.contact-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-3xl);
	align-items: start;
}

.contact-form-section {
	order: 1;
}

.contact-platforms {
	order: 2;
}

/* ==========================================================================
   28. Contact Form
   ========================================================================== */

.contact-form-wrapper {
	padding: var(--space-xl);
	border: var(--rule-width) solid var(--color-rule-light);
	background-color: var(--color-newsprint-light);
}

.newspaper-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.newspaper-form__field {
	margin-bottom: var(--space-lg);
}

.newspaper-form__label {
	display: block;
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-ink);
	margin-bottom: var(--space-sm);
}

.newspaper-form__input,
.newspaper-form__textarea {
	display: block;
	width: 100%;
	padding: var(--space-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-ink);
	background-color: var(--color-newsprint);
	border: var(--rule-width) solid var(--color-rule);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

.newspaper-form__input:focus,
.newspaper-form__textarea:focus {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.1);
}

.newspaper-form__textarea {
	resize: vertical;
	min-height: 150px;
}

.newspaper-form__actions {
	text-align: left;
}

.newspaper-form__submit {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-newsprint);
	background-color: var(--color-ink);
	border: var(--rule-width-thick) solid var(--color-ink);
	padding: var(--space-md) var(--space-2xl);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.newspaper-form__submit:hover {
	color: var(--color-ink);
	background-color: var(--color-newsprint);
}

.newspaper-form__submit:active {
	transform: translateY(1px);
}

/* CF7 and WPForms compatibility */
.contact-form-wrapper .wpcf7 input[type="text"],
.contact-form-wrapper .wpcf7 input[type="email"],
.contact-form-wrapper .wpcf7 textarea {
	display: block;
	width: 100%;
	padding: var(--space-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--color-ink);
	background-color: var(--color-newsprint);
	border: var(--rule-width) solid var(--color-rule);
}

.contact-form-wrapper .wpcf7 input[type="submit"] {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-newsprint);
	background-color: var(--color-ink);
	border: var(--rule-width-thick) solid var(--color-ink);
	padding: var(--space-md) var(--space-2xl);
	cursor: pointer;
}

.contact-form-wrapper .wpcf7 input[type="submit"]:hover {
	color: var(--color-ink);
	background-color: var(--color-newsprint);
}

/* ==========================================================================
   29. Platform Links
   ========================================================================== */

.platform-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.platform-link {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	border: var(--rule-width) solid var(--color-rule-light);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-ink);
	text-decoration: none;
	transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.platform-link:hover {
	border-color: var(--color-ink);
	background-color: var(--color-newsprint-dark);
	color: var(--color-ink);
}

.platform-link svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}

/* ==========================================================================
   30. Footer
   ========================================================================== */

.site-footer {
	margin-top: var(--space-4xl);
	background-color: var(--color-newsprint);
}

.footer-rule {
	height: var(--rule-width-thick);
	background-color: var(--color-ink);
}

.footer-inner {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-2xl) var(--gutter);
	text-align: center;
}

.footer-nav {
	margin-bottom: var(--space-lg);
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

.footer-menu li a {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-ink-muted);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.footer-menu li a:hover {
	color: var(--color-red);
}

.footer-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
	margin-bottom: var(--space-lg);
}

.footer-social__link {
	color: var(--color-ink-muted);
	transition: color var(--transition-fast);
}

.footer-social__link:hover {
	color: var(--color-red);
}

.footer-social__link svg {
	width: 20px;
	height: 20px;
}

.footer-copyright {
	padding-top: var(--space-lg);
	border-top: var(--rule-width) solid var(--color-rule-light);
}

.footer-copyright__text {
	font-family: var(--font-ui);
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
	letter-spacing: 0.05em;
	margin: 0;
}

/* ==========================================================================
   31. No Content / Empty State
   ========================================================================== */

.no-content {
	text-align: center;
	padding: var(--space-4xl) var(--space-xl);
}

.no-content__title {
	font-family: var(--font-headline);
	font-size: var(--text-2xl);
	margin-bottom: var(--space-md);
}

.no-content__text {
	font-size: var(--text-md);
	color: var(--color-ink-muted);
}

/* ==========================================================================
   32. WordPress Alignment Classes
   ========================================================================== */

.alignnone {
	margin: var(--space-xl) 0;
}

.aligncenter {
	display: block;
	margin: var(--space-xl) auto;
}

.alignleft {
	float: left;
	margin: var(--space-sm) var(--space-xl) var(--space-md) 0;
}

.alignright {
	float: right;
	margin: var(--space-sm) 0 var(--space-md) var(--space-xl);
}

.alignwide {
	margin-left: calc(-25vw + 50%);
	margin-right: calc(-25vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

.wp-caption {
	max-width: 100%;
	margin-bottom: var(--space-xl);
}

.wp-caption img {
	display: block;
	max-width: 100%;
	height: auto;
}

.wp-caption-text {
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
	font-style: italic;
	margin-top: var(--space-sm);
	text-align: center;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.gallery-item {
	margin: 0;
}

.gallery-item img {
	width: 100%;
	height: auto;
}

.gallery-caption {
	font-size: var(--text-xs);
	color: var(--color-ink-muted);
	text-align: center;
	padding: var(--space-xs);
}

/* ==========================================================================
   33. WordPress Block Styles
   ========================================================================== */

.wp-block-image {
	margin-bottom: var(--space-xl);
}

.wp-block-image figcaption {
	font-size: var(--text-sm);
	color: var(--color-ink-muted);
	font-style: italic;
	text-align: center;
	margin-top: var(--space-sm);
}

.wp-block-quote {
	margin: var(--space-xl) 0;
	padding: var(--space-lg) var(--space-xl);
	border-left: var(--rule-width-heavy) solid var(--color-ink);
	font-style: italic;
	font-size: var(--text-lg);
	background-color: var(--color-newsprint-dark);
}

.wp-block-quote cite {
	display: block;
	font-size: var(--text-sm);
	font-style: normal;
	color: var(--color-ink-muted);
	margin-top: var(--space-sm);
}

.wp-block-pullquote {
	border-top: var(--rule-width-heavy) solid var(--color-ink);
	border-bottom: var(--rule-width-heavy) solid var(--color-ink);
	padding: var(--space-xl) 0;
	margin: var(--space-2xl) 0;
	text-align: center;
}

.wp-block-pullquote blockquote {
	border: none;
	padding: 0;
	background: none;
}

.wp-block-pullquote blockquote p {
	font-family: var(--font-headline);
	font-size: var(--text-2xl);
	font-weight: 700;
	font-style: italic;
	line-height: 1.3;
}

.wp-block-separator {
	border: none;
	border-top: var(--rule-width) solid var(--color-rule);
	margin: var(--space-2xl) 0;
}

.wp-block-separator.is-style-wide {
	border-top-width: var(--rule-width-thick);
}

.wp-block-separator.is-style-dots {
	border: none;
	text-align: center;
}

.wp-block-separator.is-style-dots::before {
	content: '\00b7 \00b7 \00b7';
	font-size: var(--text-xl);
	letter-spacing: 1em;
	color: var(--color-rule);
}

.wp-block-code {
	background-color: var(--color-ink);
	color: var(--color-newsprint);
	padding: var(--space-lg);
	font-size: 0.9em;
	overflow-x: auto;
	margin-bottom: var(--space-xl);
}

.wp-block-table {
	margin-bottom: var(--space-xl);
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	padding: var(--space-sm) var(--space-md);
	border: var(--rule-width) solid var(--color-rule-light);
}

.wp-block-table th {
	font-family: var(--font-headline);
	font-weight: 700;
	background-color: var(--color-newsprint-dark);
}

.wp-block-embed {
	margin-bottom: var(--space-xl);
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed iframe {
	max-width: 100%;
}

.wp-block-columns {
	display: flex;
	gap: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.wp-block-column {
	flex: 1;
}

.wp-block-button .wp-block-button__link {
	font-family: var(--font-ui);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: var(--space-md) var(--space-xl);
	transition: all var(--transition-fast);
}

/* ==========================================================================
   34. Stagger Animations
   ========================================================================== */

.column-card,
.guest-card,
.host-card,
.lead-story__article,
.platform-link {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.column-card.is-visible,
.guest-card.is-visible,
.host-card.is-visible,
.lead-story__article.is-visible,
.platform-link.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.section-heading {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.section-heading.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   35. Scrolled Header State
   ========================================================================== */

.site-header.is-scrolled .masthead {
	padding: var(--space-sm) var(--gutter);
	transition: padding var(--transition-base);
}

.site-header.is-scrolled .masthead__title {
	font-size: var(--text-3xl);
	transition: font-size var(--transition-base);
}

.site-header.is-scrolled .edition-banner {
	display: none;
}

/* ==========================================================================
   36. Responsive: Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	:root {
		--gutter: 1.5rem;
		--column-gap: 1.5rem;
	}

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

	/* Masthead */
	.masthead__title {
		font-size: var(--text-4xl);
	}

	/* Lead Story */
	.lead-story__headline {
		font-size: var(--text-3xl);
	}

	/* Column Grid: 2 columns on tablet */
	.column-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.column-grid .column-card:nth-child(3n) {
		border-right: var(--rule-width) solid var(--color-rule-light);
	}

	.column-grid .column-card:nth-child(2n) {
		border-right: none;
	}

	.column-grid .column-card:nth-child(n+3) {
		margin-top: var(--space-xl);
		padding-top: var(--space-xl);
		border-top: var(--rule-width) solid var(--color-rule-light);
	}

	.column-grid .column-card:nth-child(n+4) {
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}

	.column-grid .column-card:nth-child(2n+1):nth-child(n+3) {
		border-top: var(--rule-width) solid var(--color-rule-light);
		margin-top: var(--space-xl);
		padding-top: var(--space-xl);
	}

	.column-grid .column-card:nth-child(2n):nth-child(n+3) {
		border-top: var(--rule-width) solid var(--color-rule-light);
		margin-top: var(--space-xl);
		padding-top: var(--space-xl);
	}

	/* Hosts */
	.hosts-grid {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}

	/* Guests */
	.guests-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Contact */
	.contact-layout {
		grid-template-columns: 1fr;
	}

	.contact-platforms {
		order: 1;
	}

	.contact-form-section {
		order: 2;
	}

	/* Single templates */
	.article-header__headline,
	.episode-header__headline {
		font-size: var(--text-3xl);
	}
}

/* ==========================================================================
   37. Responsive: Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--gutter: 1rem;
		--space-2xl: 2rem;
		--space-3xl: 3rem;
		--space-4xl: 4rem;
	}

	/* Typography */
	h1 { font-size: var(--text-2xl); }
	h2 { font-size: var(--text-xl); }
	h3 { font-size: var(--text-lg); }

	/* Masthead: compact with hamburger inline */
	.site-header {
		position: relative;
	}

	.masthead__inner {
		flex-direction: column;
		gap: var(--space-sm);
	}

	.masthead__meta {
		display: none;
	}

	.masthead__branding {
		text-align: center;
	}

	.masthead__title {
		font-size: var(--text-2xl);
	}

	.site-header.is-scrolled .masthead__title {
		font-size: var(--text-xl);
	}

	.site-logo img {
		max-height: 50px;
	}

	/* Hide decorative rules between masthead and nav */
	.masthead-rule--bottom,
	.masthead-rule--nav {
		display: none;
	}

	/* Mobile navigation: hamburger pinned to site-header top-right */
	.menu-toggle {
		display: flex;
		position: absolute;
		top: calc(var(--rule-width-heavy) + var(--space-lg));
		right: var(--gutter);
		z-index: 200;
	}

	.main-navigation {
		background: transparent;
	}

	.main-navigation__inner {
		padding: 0;
		height: 0;
		overflow: visible;
		position: static;
	}

	/* Dropdown positions relative to site-header */
	.nav-menu {
		position: absolute;
		left: 0;
		right: 0;
	}

	.nav-open .nav-menu {
		top: 100%;
	}

	.nav-menu {
		display: none;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		z-index: 500;
		flex-direction: column;
		align-items: stretch;
		background-color: var(--color-newsprint);
		border: var(--rule-width) solid var(--color-rule-light);
		border-top: var(--rule-width-thick) solid var(--color-ink);
		box-shadow: var(--shadow-lg);
	}

	.nav-open .nav-menu {
		display: flex;
	}

	.nav-menu li a {
		border-left: 0;
		border-bottom: var(--rule-width) solid var(--color-rule-light);
		text-align: center;
		padding: var(--space-md);
	}

	.nav-menu li:last-child a {
		border-right: 0;
		border-bottom: 0;
	}

	/* Sub-menu mobile */
	.nav-menu li ul.sub-menu {
		position: static;
		border: none;
		box-shadow: none;
		background-color: var(--color-newsprint-dark);
		display: block;
	}

	.nav-menu li ul.sub-menu li a {
		padding-left: var(--space-2xl);
	}

	/* Lead Story */
	.lead-story__article {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	.lead-story__headline {
		font-size: var(--text-2xl);
	}

	.lead-story__excerpt {
		text-align: left;
	}

	/* Column Grid: single column */
	.column-grid,
	.column-grid--articles {
		grid-template-columns: 1fr;
	}

	.column-grid .column-card,
	.column-grid--articles .column-card {
		border-right: 0;
		padding: 0;
		padding-bottom: var(--space-xl);
		margin-bottom: var(--space-xl);
		border-bottom: var(--rule-width) solid var(--color-rule-light);
		margin-top: 0 !important;
		padding-top: 0 !important;
		border-top: none !important;
	}

	.column-grid .column-card:last-child,
	.column-grid--articles .column-card:last-child {
		border-bottom: 0;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/* Single templates */
	.article-header__headline,
	.episode-header__headline {
		font-size: var(--text-2xl);
	}

	/* Single pages: reduce spacing on mobile */
	.single-episode .episode-header,
	.single-article .article-header {
		margin-bottom: var(--space-md);
	}

	.episode-header__byline,
	.article-header__byline {
		display: none;
	}

	.single-episode .rule-divider--narrow,
	.single-article .rule-divider--narrow {
		display: none;
	}

	/* Hide edition banner on mobile */
	.edition-banner {
		display: none;
	}

	/* Drop caps smaller on mobile */
	.column-text > p:first-of-type::first-letter,
	.article-content > p:first-of-type::first-letter,
	.episode-content > p:first-of-type::first-letter {
		font-size: 3.5em;
	}

	/* Column text no justify on mobile */
	.column-text {
		text-align: left;
		hyphens: none;
	}

	/* Navigation */
	.post-navigation,
	.episode-navigation {
		flex-direction: column;
		gap: var(--space-md);
	}

	.post-nav-link {
		max-width: 100%;
	}

	.post-nav-link--next {
		align-items: flex-start;
		text-align: left;
	}

	/* Guests */
	.guests-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.guests-row {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	/* Host cards */
	.host-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Contact form */
	.newspaper-form__row {
		grid-template-columns: 1fr;
	}

	/* Footer */
	.footer-menu {
		flex-direction: column;
		gap: var(--space-sm);
	}

	/* About */
	.about-header__title {
		font-size: var(--text-2xl);
	}

	/* Contact */
	.contact-header__title {
		font-size: var(--text-2xl);
	}

	/* Page header */
	.page-header__title {
		font-size: var(--text-2xl);
	}

	/* Archive header */
	.archive-header__title {
		font-size: var(--text-2xl);
	}
}

/* ==========================================================================
   38. Responsive: Small Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
	:root {
		--gutter: 0.75rem;
	}

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

	.site-header.is-scrolled .masthead__title {
		font-size: var(--text-lg);
	}

	.site-logo img {
		max-height: 40px;
	}

	.lead-story__headline {
		font-size: var(--text-xl);
	}

	.article-header__headline,
	.episode-header__headline {
		font-size: var(--text-xl);
	}

	.section-heading {
		font-size: var(--text-base);
	}

	/* Single column guests */
	.guests-grid,
	.guests-row {
		grid-template-columns: 1fr;
	}

	/* Smaller drop caps */
	.column-text > p:first-of-type::first-letter,
	.article-content > p:first-of-type::first-letter,
	.episode-content > p:first-of-type::first-letter {
		font-size: 3em;
	}

	/* Episode badge */
	.episode-badge--large {
		font-size: var(--text-xs);
		padding: var(--space-xs) var(--space-sm);
	}

	/* Pagination */
	.newspaper-pagination__item a,
	.newspaper-pagination__item span {
		min-width: 36px;
		height: 36px;
		font-size: var(--text-xs);
	}

	/* Platform links */
	.platform-link {
		padding: var(--space-sm) var(--space-md);
		font-size: var(--text-xs);
	}

	/* Contact form */
	.contact-form-wrapper {
		padding: var(--space-md);
	}

	.newspaper-form__submit {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   39. Print Styles
   ========================================================================== */

@media print {
	*,
	*::before,
	*::after {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	body {
		font-size: 12pt;
		line-height: 1.5;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}

	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}

	img {
		max-width: 100% !important;
		page-break-inside: avoid;
	}

	h2, h3, h4 {
		page-break-after: avoid;
	}

	p {
		orphans: 3;
		widows: 3;
	}

	/* Hide non-essential elements */
	.site-header,
	.main-navigation,
	.menu-toggle,
	.skip-link,
	.episode-player,
	.footer-social,
	.footer-nav,
	.post-navigation,
	.episode-navigation,
	.newspaper-pagination,
	.contact-form-section,
	.platform-links,
	.host-card__links {
		display: none !important;
	}

	.site-main {
		max-width: 100%;
		padding: 0;
		margin: 0;
	}

	/* Print masthead */
	.masthead__title {
		font-size: 24pt;
		text-align: center;
	}

	/* Print content */
	.column-text {
		column-count: 2;
		column-gap: 2em;
		column-rule: 1px solid #ccc;
	}

	/* Force page breaks */
	.single-article,
	.single-episode {
		page-break-before: always;
	}

	/* Show URL for links in content */
	.column-text a[href]::after {
		content: " [" attr(href) "]";
		font-size: 0.8em;
		font-style: italic;
	}
}

/* ==========================================================================
   40. 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;
	}

	html {
		scroll-behavior: auto;
	}

	.column-card,
	.guest-card,
	.host-card,
	.lead-story__article,
	.section-heading,
	.platform-link {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.column-card__image img,
	.lead-story__image img {
		transition: none;
	}
}

/* ==========================================================================
   41. Focus-Visible Styles
   ========================================================================== */

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

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

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

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 0;
}

.menu-toggle:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

.post-nav-link:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

.column-card__headline a:focus-visible,
.lead-story__headline a:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

.footer-social__link:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 4px;
}

.newspaper-pagination__item a:focus-visible {
	outline: 2px solid var(--color-red);
	outline-offset: 2px;
}

/* Remove default outline for non-keyboard users */
:focus:not(:focus-visible) {
	outline: none;
}

/* Additional page header styles */
.page-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.page-header__title {
	font-family: var(--font-headline);
	font-size: var(--text-4xl);
	font-weight: 900;
	margin-bottom: var(--space-lg);
}

.newspaper-page {
	max-width: var(--content-width);
	margin: 0 auto;
}

/* Archive header styles */
.archive-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.archive-header__title {
	font-family: var(--font-headline);
	font-size: var(--text-3xl);
	font-weight: 900;
	margin-bottom: var(--space-lg);
}

.archive-header__description {
	font-size: var(--text-md);
	color: var(--color-ink-muted);
	max-width: 600px;
	margin: 0 auto var(--space-lg);
}

/* Episodes section spacing */
.episodes-section {
	margin-bottom: var(--space-xl);
}

.articles-section {
	margin-bottom: var(--space-xl);
}

/* Episode guests section on single page */
.episode-guests {
	margin-top: var(--space-xl);
}