:root {
	--bg: #E6E4DE;
	--fg: #22201C;
	--accent: #A33F08;
	color-scheme: light;
}

[hidden] { display: none !important; }

.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;
}

body {
	max-width: 1120px;
	padding: calc(var(--space) * 6) calc(var(--space) * 3);
}

.masthead { margin-bottom: calc(var(--space) * 2); }
.masthead h1 { margin-bottom: 0; }
.brand {
	display: flex;
	align-items: center;
	gap: calc(var(--space) * 2);
}
.brand-mark {
	margin: 0;
	font-size: 9px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--accent);
}
.brand h1 { margin: 0; }

.toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px calc(var(--space) * 2);
	margin: 0 0 calc(var(--space) * 3);
}
#feed-meta { margin-left: auto; }
#feed-meta.err { color: var(--accent); }
#filter-toggle { background: var(--fg); color: var(--bg); }
#filter-toggle:hover, #filter-toggle:focus-visible {
	background: var(--bg);
	color: var(--fg);
	outline: 1px solid var(--fg);
	outline-offset: 1px;
}

.filters { margin-bottom: calc(var(--space) * 3); }
.filters h2 { margin-top: calc(var(--space) * 2); }
.filter-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 calc(var(--space) * 3);
	margin: calc(var(--space) * 2) 0;
}
.field { margin-bottom: calc(var(--space) * 1.5); }
.field .select, .field .select select { width: 100%; }
.field .select select { padding-right: 2em; }
.row-between {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px var(--space);
}
.block { margin: calc(var(--space) * 2) 0; }
#tag-hint { font-size: 11px; }
.btn.micro { font-size: 11px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.tag {
	appearance: none;
	background: none;
	border: 0;
	padding: 1px 2px;
	font: inherit;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: color-mix(in srgb, currentColor 78%, transparent);
	cursor: pointer;
}
.tag .n { margin-left: .35em; opacity: .55; }
.tag:hover, .tag:focus-visible { background: var(--fg); color: var(--bg); }
.tag[data-state="include"] { background: var(--fg); color: var(--bg); }
.tag[data-state="include"]:hover {
	background: var(--bg);
	color: var(--fg);
	outline: 1px solid var(--fg);
	outline-offset: 1px;
}
.tag[data-state="exclude"] { color: var(--accent); text-decoration: line-through; }
.tag[data-state="exclude"]::before { content: "NOT "; text-decoration: none; }

.source-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px var(--space);
	margin-top: 4px;
}
.source-list .check {
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	justify-content: space-between;
	width: 100%;
}
.source-list .source-name { flex: 1; margin-left: .4em; }
.source-list .n { margin-left: auto; opacity: .55; font-size: 11px; }

.active-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px var(--space);
	padding: var(--space) 0;
	margin-bottom: calc(var(--space) * 2);
	border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
	border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
#active-summary { line-height: 1.5; }

/* A4 sheets: one/two/three columns, separated by a literal dash line. */
.feed-wrap, .feed { min-width: 0; }
.sheet {
	column-count: 1;
	column-gap: calc(var(--space) * 2);
}
.sheet-rule {
	overflow: hidden;
	white-space: nowrap;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .04em;
	color: color-mix(in srgb, var(--fg) 35%, transparent);
	margin: calc(var(--space) * 3) 0;
}
.graph-head { margin-bottom: 6px; }
.importance-graph {
	margin: 0;
	font-size: 11px;
	line-height: 1.25;
	overflow-x: auto;
}

.card {
	--card-bg: color-mix(in srgb, var(--fg) 3%, var(--bg));
	--card-fg: var(--fg);
	--card-muted: color-mix(in srgb, var(--fg) 58%, transparent);
	--card-body: color-mix(in srgb, var(--fg) 82%, transparent);
	--card-accent: var(--accent);
	display: block;
	vertical-align: top;
	width: 100%;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	margin: 0 0 calc(var(--space) * 2);
	background: var(--card-bg);
	color: var(--card-fg);
	border-left: 1px solid var(--card-muted);
	border-right: 1px solid var(--card-muted);
}

.card-inner { padding: 8px 12px 10px; }

.story:nth-of-type(4n+2) { --card-bg: transparent; }
.story:nth-of-type(6n+5) {
	--card-bg: var(--fg);
	--card-fg: var(--bg);
	--card-muted: color-mix(in srgb, var(--bg) 72%, transparent);
	--card-body: color-mix(in srgb, var(--bg) 86%, transparent);
	--card-accent: color-mix(in srgb, var(--accent) 55%, var(--bg));
}

.card-frame {
	display: flex;
	align-items: baseline;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--card-muted);
}
.card-frame .rule { flex: 1; color: inherit; margin: 0; }
.card-frame.top { margin: 0; }
.card-frame.bottom { margin: 0; }
.story[data-importance="8"] .card-frame.top,
.story[data-importance="9"] .card-frame.top,
.story[data-importance="10"] .card-frame.top { color: var(--card-accent); }

.story-top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px var(--space);
}
.story-source {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--card-fg);
}
.story-time {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--card-muted);
	white-space: nowrap;
}
.story-imp {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 .45em;
	margin: 6px 0 0;
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--card-muted);
}
.story .label, .weather-card .label { color: var(--card-muted); }
.imp-num { color: var(--card-fg); }
.imp-num.hot { color: var(--card-accent); }
.imp-bar {
	display: inline-flex;
	gap: 1px;
}
.imp-seg {
	font-size: 9px;
	line-height: 1;
	color: var(--card-muted);
}
.imp-seg.on { color: var(--card-accent); }

.story-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.3;
	margin: 6px 0 6px;
}
.story-title a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.story-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.45;
	color: var(--card-body);
	margin-bottom: 4px;
}
.story-readmore {
	font-size: 11px;
	letter-spacing: .08em;
	margin: 0 0 8px;
}
.story-readmore a {
	color: var(--card-accent);
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.story-readmore a:hover { background: var(--card-accent); color: var(--card-bg); }
.story-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 6px;
	margin-top: auto;
	color: var(--card-muted);
}
.story-tags .label { font-size: 11px; }
.tag-row { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; }
.story-tags .tag { color: var(--card-accent); text-decoration: none; }
.story-tags .tag:hover { color: var(--card-bg); background: var(--card-fg); }
.story.read { opacity: .6; }

.weather-card {
	--card-bg: color-mix(in srgb, var(--accent) 6%, var(--bg));
}
.weather-head {
	display: flex;
	justify-content: space-between;
	gap: var(--space);
	margin-bottom: var(--space);
}
.weather-temp {
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: .06em;
	margin: 0 0 2px;
}
.weather-desc {
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--card-body);
	margin: 0 0 6px;
}
.weather-meta {
	font-size: 11px;
	letter-spacing: .04em;
	color: var(--card-muted);
	margin: 0;
}

.empty { margin: calc(var(--space) * 3) 0; line-height: 1.6; }
.empty .label { color: var(--accent); }
.more-wrap { margin: calc(var(--space) * 2) 0; text-align: center; }
.preset-actions { display: flex; flex-wrap: wrap; gap: var(--space); margin-top: calc(var(--space) * -0.5); }

@media (min-width: 600px) {
	.filter-grid { grid-template-columns: 1fr 1fr; }
	.source-list { grid-template-columns: 1fr 1fr; }
	.sheet { column-count: 2; }
}

@media (min-width: 1000px) {
	.sheet { column-count: 3; }
}

@media (max-width: 600px) {
	body { padding: calc(var(--space) * 3) calc(var(--space) * 2); }
	#feed-meta { margin-left: 0; flex-basis: 100%; }
}