:root {
	--iod-bg: #E8E2D4;
	--iod-surface: #FCF7EB;
	--iod-surface-2: #F6EEDB;
	--iod-ink: #16130E;
	--iod-accent: #FF4A1C;
	--iod-blue: #2C4BFF;
	--iod-mint: #0EB98A;
	--iod-yellow: #FFC93C;
	--iod-lavender: #C9A7FF;
	--iod-cream-bright: #FFF6DC;
	--iod-white: #FFFFFF;
	--iod-border: 3px solid var(--iod-ink);
	--iod-radius: 14px;
	--iod-shadow: 4px 4px 0 var(--iod-ink);
	--iod-display: "Bricolage Grotesque", system-ui, sans-serif;
	--iod-body: "Instrument Sans", system-ui, sans-serif;
	--iod-label: "Space Mono", ui-monospace, monospace;
}

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

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body.iod-theme,
body {
	margin: 0;
	background: var(--iod-bg);
	color: var(--iod-ink);
	font-family: var(--iod-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	overflow-x: clip;
}

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--iod-accent); }

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

.iod-skip {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--iod-ink);
	color: var(--iod-cream-bright);
	padding: 0.6rem 1rem;
	z-index: 999;
}
.iod-skip:focus { left: 1rem; top: 1rem; }

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

.wp-site-blocks,
.iod-page {
	min-height: 100vh;
}

#content,
.iod-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 1.5rem 0 4rem;
}

.iod-wrap {
	width: min(1180px, calc(100% - 2rem));
	margin: 0 auto;
}

/* wpautop leftovers if a shortcode is ever nested in a paragraph */
.iod-header-inner > br,
.iod-nav > br,
.iod-hero > br,
.iod-trio > br,
.iod-marquee > br,
.iod-fresh > br { display: none; }

/* Header */
.iod-header {
	background: var(--iod-surface);
	border-bottom: var(--iod-border);
	position: sticky;
	top: 0;
	z-index: 40;
}
.iod-header-inner {
	width: min(1180px, calc(100% - 2rem));
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
}
.iod-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--iod-display);
	font-weight: 800;
	font-size: 1.45rem;
	letter-spacing: -0.04em;
	text-decoration: none;
	white-space: nowrap;
}
.iod-wordmark:hover { color: var(--iod-ink); }
.iod-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--iod-accent);
	color: var(--iod-ink);
	border: 2px solid var(--iod-ink);
	border-radius: 6px;
	font-family: var(--iod-label);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.18rem 0.32rem;
	transform: rotate(-8deg);
	box-shadow: 2px 2px 0 var(--iod-ink);
}
.iod-nav {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.iod-nav-list {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--iod-label);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.iod-nav-list a { text-decoration: none; }
.iod-nav-text {
	font-family: var(--iod-label);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.iod-icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: var(--iod-border);
	border-radius: 999px;
	background: var(--iod-white);
	box-shadow: var(--iod-shadow);
	color: inherit;
	text-decoration: none;
}
.iod-nav-toggle {
	display: none;
	border: var(--iod-border);
	background: var(--iod-white);
	box-shadow: var(--iod-shadow);
	border-radius: 10px;
	width: 42px;
	height: 42px;
	font-size: 1.2rem;
	cursor: pointer;
}

/* Buttons */
.iod-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--iod-border);
	border-radius: 12px;
	box-shadow: var(--iod-shadow);
	padding: 0.55rem 1rem;
	font-family: var(--iod-display);
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
	background: var(--iod-white);
	color: var(--iod-ink);
	transition: transform 0.08s ease;
}
.iod-btn:hover { color: var(--iod-ink); transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--iod-ink); }
.iod-btn-coral { background: var(--iod-accent); width: 100%; }
.iod-btn-ghost {
	background: var(--iod-ink);
	color: var(--iod-cream-bright);
	padding: 0.4rem 0.9rem;
	font-size: 0.85rem;
	box-shadow: 4px 4px 0 var(--iod-accent);
}
.iod-btn-ghost:hover { color: var(--iod-cream-bright); }

.iod-input {
	width: 100%;
	border: var(--iod-border);
	border-radius: 12px;
	padding: 0.7rem 0.85rem;
	font: inherit;
	background: var(--iod-white);
}
.iod-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	margin: 0.7rem 0;
}
.iod-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--iod-accent); }

.iod-card {
	background: var(--iod-surface);
	border: var(--iod-border);
	border-radius: var(--iod-radius);
	box-shadow: var(--iod-shadow);
}

/* Hero */
.iod-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.7fr);
	gap: 1.25rem;
	align-items: start;
}
.iod-featured {
	padding: 0 1.7rem 1.5rem;
	min-height: 0;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 6px 6px 0 var(--iod-ink);
}
.iod-featured-band {
	display: block;
	height: 108px;
	margin: 0 -1.7rem 1.15rem;
	background: var(--iod-yellow);
	border-bottom: var(--iod-border);
}
.iod-featured-title {
	font-family: var(--iod-display);
	font-weight: 800;
	font-size: clamp(2.1rem, 4.4vw, 3.7rem);
	line-height: 0.98;
	letter-spacing: -0.045em;
	margin: 0.8rem 0 1rem;
}
.iod-featured-title a { text-decoration: none; }
.iod-featured-lede { font-size: 1.15rem; max-width: 38rem; }
.iod-meta {
	font-family: var(--iod-label);
	font-size: 0.78rem;
	margin: 1.4rem 0 0;
}

.iod-chip {
	display: inline-block;
	font-family: var(--iod-label);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	padding: 0.32rem 0.6rem;
	border: 2px solid var(--iod-ink);
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
}
.iod-chip-coral { background: var(--iod-accent); }
.iod-chip-ink { background: var(--iod-ink); color: var(--iod-cream-bright); }
.iod-chip-yellow { background: var(--iod-yellow); }
.iod-chip-blue { background: var(--iod-blue); color: var(--iod-white); }
.iod-chip-mint { background: var(--iod-mint); }
.iod-chip-lavender { background: var(--iod-lavender); }

.iod-hero-side { display: grid; gap: 1.1rem; }
.iod-sunday { padding: 1.25rem 1.3rem 1.4rem; background: var(--iod-mint); }
.iod-sunday h2 {
	font-family: var(--iod-display);
	font-size: 1.55rem;
	line-height: 1.1;
	margin: 0.7rem 0 0.5rem;
}
.iod-sunday p { margin: 0 0 0.8rem; }
.iod-deck-form { display: grid; }
.iod-sunday .iod-deck-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.55rem;
	align-items: center;
}
.iod-sunday .iod-input { flex: 1 1 10rem; min-width: 0; }
.iod-sunday .iod-check { flex: 1 1 100%; margin: 0; }
.iod-sunday .iod-btn-coral { width: auto; }
.iod-deck-ok, .iod-deck-err { font-size: 0.92rem; }
.iod-deck-ok { color: #0a6b4f; }
.iod-deck-err { color: #9b1c1c; }

.iod-bench { padding: 1.2rem 1.3rem; background: var(--iod-surface-2); }
.iod-bench ul { list-style: none; padding: 0; margin: 0.7rem 0 0; }
.iod-bench li {
	display: flex;
	gap: 0.7rem;
	align-items: baseline;
	border-top: 2px dashed var(--iod-ink);
	padding: 0.65rem 0;
}
.iod-bench-num {
	font-family: var(--iod-label);
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--iod-accent);
	flex: 0 0 auto;
}
.iod-bench a { text-decoration: none; font-weight: 650; }

/* Marquee — full viewport width (breaks out of .iod-wrap / any leftover constraint) */
.iod-marquee {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	margin: 2.25rem 0;
	margin-left: -50vw;
	overflow: hidden;
	border-block: none;
	border-radius: 0;
	background: var(--iod-ink);
	color: var(--iod-cream-bright);
	padding: 0.78rem 0;
	box-sizing: border-box;
}
.iod-marquee-track {
	display: inline-block;
	white-space: nowrap;
	font-family: var(--iod-label);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--iod-cream-bright);
	animation: iod-scroll 28s linear infinite;
}
@keyframes iod-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-33.333%); }
}

/* Fresh off the deck */
.iod-fresh { margin-top: 0.35rem; }
.iod-section-head h2 {
	font-family: var(--iod-display);
	font-weight: 800;
	font-size: clamp(2rem, 3.8vw, 2.85rem);
	letter-spacing: -0.045em;
	line-height: 1;
	margin: 0 0 0.35rem;
}
.iod-section-head p {
	margin: 0;
	max-width: 36rem;
}
.iod-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.15rem;
	margin-top: 1.35rem;
	align-items: stretch;
}
/* Ghost <p>/<br> from wpautop must not become extra grid cards */
.iod-trio > :not(.iod-series):not(.iod-card) { display: none; }
.iod-series {
	padding: 0 1.3rem 1.25rem;
	text-decoration: none;
	min-height: 268px;
	display: flex;
	flex-direction: column;
	color: var(--iod-ink);
	background: var(--iod-white);
	border: var(--iod-border);
	border-radius: var(--iod-radius);
	box-shadow: var(--iod-shadow);
	overflow: hidden;
}
.iod-series:hover { color: var(--iod-ink); transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--iod-ink); }
.iod-series-band {
	display: block;
	height: 76px;
	margin: 0 -1.3rem 1.05rem;
}
.iod-series-band-blue { background: var(--iod-blue); }
.iod-series-band-lavender { background: var(--iod-lavender); }
.iod-series-band-mint { background: var(--iod-mint); }
.iod-series-kicker {
	font-family: var(--iod-label);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
}
.iod-series .iod-chip { align-self: flex-start; }
.iod-series h3 {
	font-family: var(--iod-display);
	font-weight: 800;
	font-size: clamp(1.7rem, 2.5vw, 2.15rem);
	line-height: 1.02;
	margin: 0.65rem 0 0.55rem;
	letter-spacing: -0.04em;
}
.iod-series p {
	margin: 0;
	flex: 1 1 auto;
	font-size: 1.02rem;
	line-height: 1.45;
}
.iod-series-more,
.iod-series p.iod-series-more {
	display: block;
	flex: 0 0 auto;
	margin-top: 1.15rem;
	font-family: var(--iod-label);
	font-size: 0.78rem;
	letter-spacing: 0.03em;
	font-weight: 700;
}
.wp-block-columns.iod-trio {
	display: grid;
	flex-wrap: unset;
}
.iod-series-blue { background: var(--iod-white); color: var(--iod-ink); }
.iod-series-blue:hover,
.iod-series-blue h3,
.iod-series-blue p,
.iod-series-blue .iod-series-more { color: var(--iod-ink); }
.iod-series-lavender,
.iod-series-mint { background: var(--iod-white); }

/* Feed */
.iod-latest-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.6fr);
	gap: 1.5rem;
	margin-top: 2.85rem;
}
.iod-feed { list-style: none; margin: 0; padding: 0; }
.iod-feed-row {
	display: grid;
	grid-template-columns: 2.2rem auto minmax(0, 1fr) auto;
	gap: 0.7rem;
	align-items: center;
	padding: 0.85rem 0;
	border-bottom: 2px solid var(--iod-ink);
}
.iod-latest-list {
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.85rem;
}
.iod-latest-card { padding: 0; overflow: hidden; }
.iod-latest-link {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	text-decoration: none;
	min-height: 88px;
}
.iod-latest-thumb { display: block; min-height: 88px; }
.iod-latest-thumb-coral { background: var(--iod-accent); }
.iod-latest-thumb-blue { background: var(--iod-blue); }
.iod-latest-thumb-mint { background: var(--iod-mint); }
.iod-latest-thumb-lavender { background: var(--iod-lavender); }
.iod-latest-thumb-yellow { background: var(--iod-yellow); }
.iod-latest-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.75rem 0.9rem 0.8rem;
	justify-content: center;
}
.iod-latest-title {
	font-weight: 700;
	font-family: var(--iod-display);
	letter-spacing: -0.03em;
	line-height: 1.15;
}
.iod-load-more { margin: 1.1rem 0 0; }
.iod-auth {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
	white-space: nowrap;
}
.iod-num { font-family: var(--iod-label); font-size: 0.8rem; }
.iod-feed-title { font-weight: 700; text-decoration: none; }
.iod-feed-meta { font-family: var(--iod-label); font-size: 0.72rem; }
.iod-badge {
	font-family: var(--iod-label);
	font-size: 0.62rem;
	padding: 0.2rem 0.4rem;
	border: 2px solid var(--iod-ink);
	border-radius: 6px;
	white-space: nowrap;
}
.iod-badge-coral { background: var(--iod-accent); }
.iod-badge-blue { background: var(--iod-blue); color: #fff; }
.iod-badge-mint { background: var(--iod-mint); }
.iod-badge-lavender { background: var(--iod-lavender); }
.iod-badge-yellow { background: var(--iod-yellow); }

.iod-most-read { padding: 1.2rem 1.3rem; }
.iod-most-read h2 { font-family: var(--iod-display); margin: 0 0 0.3rem; font-size: 1.4rem; }
.iod-fineprint { font-size: 0.82rem; margin: 0 0 0.8rem; }
.iod-most-read ol { margin: 0; padding-left: 1.2rem; }
.iod-most-read li { margin: 0.55rem 0; }

/* Ads off */
.iod-ad-slot--off { display: none; }
.iod-ad-slot--empty {
	border: 2px dashed var(--iod-ink);
	padding: 1rem;
	margin: 1rem 0;
	background: var(--iod-surface-2);
}
.iod-ad-label { font-family: var(--iod-label); font-size: 0.7rem; margin: 0; }
body.iod-ads-off .iod-ad-slot:not(.iod-ad-slot--off) { display: none; }

/* Footer */
.iod-footer {
	background: var(--iod-ink);
	color: var(--iod-cream-bright);
	margin-top: 3rem;
	padding: 2.4rem 0 1.4rem;
}
.iod-footer a { color: var(--iod-cream-bright); }
.iod-footer a:hover { color: var(--iod-accent); }
.iod-footer-inner {
	width: min(1180px, calc(100% - 2rem));
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
	gap: 1.5rem;
}
.iod-wordmark-on-dark { color: var(--iod-cream-bright); }
.iod-footer-label {
	font-family: var(--iod-label);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.iod-footer ul { list-style: none; padding: 0; margin: 0; }
.iod-footer li { margin: 0.35rem 0; }
.iod-footer-legal {
	width: min(1180px, calc(100% - 2rem));
	margin: 2rem auto 0;
	border-top: 2px solid #3a342c;
	padding-top: 1rem;
	font-size: 0.85rem;
}
.iod-footer .iod-btn-coral { color: var(--iod-ink); width: auto; }

/* Single / page */
.iod-article,
.iod-page-content {
	width: min(720px, calc(100% - 2rem));
	margin: 2rem auto 3rem;
}
.iod-article h1,
.iod-page-content h1 {
	font-family: var(--iod-display);
	font-size: clamp(2rem, 5vw, 3.3rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}
.iod-prose { font-size: 1.125rem; }
.iod-prose p { margin: 0 0 1.1rem; }
.wp-block-quote.is-style-iod-callout,
.iod-callout {
	border: var(--iod-border);
	border-radius: var(--iod-radius);
	box-shadow: var(--iod-shadow);
	background: var(--iod-yellow);
	padding: 1rem 1.2rem;
	margin: 1.5rem 0;
}
.iod-aff {
	border-top: 2px solid var(--iod-ink);
	padding-top: 1rem;
	font-size: 0.92rem;
}
.iod-related { margin-top: 2.5rem; }
.iod-related ul { padding-left: 1.1rem; }

.iod-comments { margin-top: 2.5rem; }
.iod-must-login,
.iod-comment-card {
	border: var(--iod-border);
	border-radius: var(--iod-radius);
	box-shadow: var(--iod-shadow);
	background: var(--iod-surface);
	padding: 1rem 1.1rem;
}
.iod-comment { list-style: none; margin: 1rem 0; }
.iod-comment-meta { font-family: var(--iod-label); font-size: 0.75rem; display: flex; gap: 1rem; }
.comment-form textarea {
	width: 100%;
	border: var(--iod-border);
	border-radius: 12px;
	padding: 0.8rem;
	font: inherit;
	background: var(--iod-white);
}

.iod-search { margin: 1rem 0 2rem; display: flex; gap: 0.6rem; }
.iod-empty {
	border: var(--iod-border);
	border-radius: var(--iod-radius);
	box-shadow: var(--iod-shadow);
	padding: 1.5rem;
	background: var(--iod-surface);
}

.is-style-iod-card {
	border: var(--iod-border);
	border-radius: var(--iod-radius);
	box-shadow: var(--iod-shadow);
	background: var(--iod-surface);
	padding: 1rem;
}

@media (max-width: 900px) {
	.iod-hero,
	.iod-trio,
	.iod-latest-wrap,
	.iod-footer-inner {
		grid-template-columns: 1fr;
	}
	.iod-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.iod-nav {
		display: none;
		position: absolute;
		left: 1rem;
		right: 1rem;
		top: 64px;
		background: var(--iod-surface);
		border: var(--iod-border);
		box-shadow: var(--iod-shadow);
		border-radius: var(--iod-radius);
		padding: 1rem;
		flex-direction: column;
		align-items: flex-start;
	}
	.iod-nav.is-open { display: flex; }
	.iod-nav-list { flex-direction: column; flex-wrap: wrap; gap: 0.5rem; }
	.iod-nav-list a {
		display: inline-block;
		border: 2px solid var(--iod-ink);
		border-radius: 8px;
		padding: 0.32rem 0.55rem;
		background: var(--iod-white);
		box-shadow: 2px 2px 0 var(--iod-ink);
	}
	.iod-header { position: relative; }
	.iod-feed-row { grid-template-columns: 2rem 1fr; }
	.iod-latest-link { grid-template-columns: 72px minmax(0, 1fr); }
	.iod-btn-coral { width: 100%; }
	.iod-sunday .iod-btn-coral,
	.iod-load-more .iod-btn { width: auto; }
}