:root {
	--bg: #f7f7f2;
	--paper: #fff;
	--ink: #202723;
	--muted: #67716b;
	--line: #dde2da;
	--orange: #eb681b;
	--dark: #183e31;
	--soft: #edf1e9;
	--radius: 14px;
	--article-size: 19px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.55;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: transparent; }
button, a, input, summary { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 4px;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.18; overflow-wrap: anywhere; }
::selection { background: #ffd8b9; }

.wrap { width: min(1216px, calc(100% - 64px)); margin: auto; }
.skip {
	position: fixed;
	top: -100px;
	left: 20px;
	background: #fff;
	padding: 10px;
	z-index: 20;
}
.skip:focus { top: 10px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.read-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--orange);
	z-index: 50;
}
body.admin-bar .read-progress { top: 32px; }

.topline {
	background: var(--dark);
	color: #eef1ea;
	font-size: 11px;
	letter-spacing: .04em;
	padding: 8px 0;
}
.topline .wrap { display: flex; justify-content: space-between; gap: 15px; }
.topline b { color: #bde0bd; font-weight: 400; }

.header { background: var(--paper); border-bottom: 1px solid var(--line); }
.masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 0;
	gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 16px; min-width: 0; }
.brand img, .custom-logo { height: 52px; width: auto; max-width: 180px; }
.brandline {
	font-size: 12px;
	color: var(--muted);
	border-left: 1px solid var(--line);
	padding-left: 24px;
}
.actions { display: flex; align-items: center; gap: 12px; }
.icon-btn, .search-pop > summary {
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	list-style: none;
}
.search-pop > summary::-webkit-details-marker { display: none; }
.search-pop { position: relative; }
form.header-search { max-width: 420px; }
.search-pop form.header-search { max-width: none; }
	position: absolute;
	right: 0;
	top: 48px;
	width: min(320px, calc(100vw - 32px));
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	z-index: 40;
	box-shadow: 0 8px 24px #00000014;
}
.header-search .eyebrow { display: block; margin-bottom: 8px; }
.header-search input, .search-form input[type="search"] {
	width: 100%;
	border: 1px solid var(--line);
	background: var(--bg);
	border-radius: 8px;
	padding: 13px 15px;
}
.menu-btn { display: none; }
.menu-btn svg, .icon-btn svg, .search-pop summary svg { width: 20px; height: 20px; }

.nav {
	display: flex;
	align-items: center;
	gap: 32px;
	border-top: 1px solid var(--line);
	min-height: 53px;
}
.nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}
.nav a {
	font-size: 13px;
	font-weight: 700;
	padding: 16px 0;
	border-bottom: 3px solid transparent;
}
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.nav a:hover { color: var(--orange); }
.nav-note { margin-left: auto; color: var(--muted); font-size: 11px; }
.nav-list li { position: relative; }
.nav-list .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	z-index: 30;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu { display: block; }
.nav-list .sub-menu a { display: block; padding: 8px 14px; border-bottom: 0; }

.rellablog-ad {
	border: 1px solid var(--line);
	border-radius: 5px;
	background: #fff;
	text-align: center;
}
.rellablog-ad-label {
	display: block;
	letter-spacing: 2px;
	font-size: 9px;
	color: #80877f;
	padding-top: 8px;
}
.rellablog-ad ins,
.rellablog-ad iframe,
.prose .code-block iframe { max-width: 100%; }
.rellablog-ad-header { width: min(970px, 100%); min-height: 90px; margin: 26px auto 30px; }
.rellablog-ad-feed,
.rellablog-ad-footer,
.rellablog-ad-article-end { min-height: 110px; margin: 28px 0; }
.rellablog-ad-sidebar-top,
.rellablog-ad-sidebar-lower { min-height: 250px; }
.cards > .rellablog-ad { grid-column: 1 / -1; }

.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 22px;
}
.section-head h2, .section-head h1 { font-size: 25px; letter-spacing: -.6px; }
.section-head h2:before, .section-head h1:before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 21px;
	background: var(--orange);
	margin-right: 12px;
	border-radius: 3px;
	vertical-align: -2px;
}
.section-head a { font-size: 12px; color: var(--muted); }

.intro {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin: 0 0 27px;
	gap: 20px;
}
.eyebrow {
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--orange);
	font-weight: 700;
}
.intro h1 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 44px;
	letter-spacing: -1.6px;
	font-weight: 400;
	line-height: 1.1;
	margin-top: 8px;
}
.intro p { max-width: 275px; color: var(--muted); font-size: 13px; }

.feature-grid {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 23px;
	margin-bottom: 38px;
}
.lead, .side-feature, .panel {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.lead { overflow: hidden; }
.lead .art { height: 292px; }
.lead .lead-copy { padding: 27px 30px 25px; }
.lead h2 {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 31px;
	font-weight: 400;
	letter-spacing: -.65px;
	margin: 10px 0 12px;
}
.lead p { font-size: 13px; color: var(--muted); max-width: 520px; }
.meta {
	font-size: 11px;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 9px;
	margin-top: 16px;
	flex-wrap: wrap;
}
.meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #a1a79f; }
.lead-side { display: grid; grid-template-rows: 1fr 1fr; gap: 23px; }
.side-feature {
	display: grid;
	grid-template-columns: 1fr 138px;
	overflow: hidden;
	min-height: 220px;
}
.side-feature .copy { padding: 24px; }
.side-feature h3 { font-size: 19px; letter-spacing: -.5px; margin-top: 12px; }
.side-feature .art { height: 100%; min-height: 220px; }
.side-feature > a { display: block; min-height: 100%; }
.art {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ddd;
}
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art.is-fallback {
	background: var(--soft);
	color: var(--dark);
	font-family: Georgia, "Times New Roman", serif;
	padding: 16px;
	text-align: center;
}
.art.is-fallback span {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.link-title:hover { color: var(--orange); }

.content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 40px;
	align-items: start;
}
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px 24px; }
.card { background: transparent; }
.card-media { display: block; }
.card .art { height: 190px; border-radius: 10px; }
.card-copy { padding: 0 16px 16px; }
.card .eyebrow { margin-top: 16px; display: inline-block; }
.card h3 { font-size: 20px; letter-spacing: -.5px; margin: 9px 0 8px; }
.card p { font-size: 13px; color: var(--muted); line-height: 1.65; }
.card .meta { margin-top: 11px; }

.sidebar { display: grid; gap: 30px; }
.panel { padding: 23px; }
.panel h2 { font-size: 18px; letter-spacing: -.4px; margin-bottom: 20px; }
.rank {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 12px;
	border-bottom: 1px solid var(--line);
	padding: 16px 0;
}
.rank:first-of-type { padding-top: 0; }
.rank:last-child { border: 0; padding-bottom: 0; }
.rank > span { font-family: Georgia, serif; font-size: 27px; color: #adb5ab; line-height: 1; }
.rank h3 { font-size: 13px; line-height: 1.5; }
.rank small { display: block; color: var(--muted); font-size: 10px; margin-top: 5px; }
.about { background: var(--dark); color: #fff; padding: 28px; border-radius: var(--radius); }
.about .eyebrow { color: #c4dcb4; }
.about h2 { font-family: Georgia, serif; font-size: 28px; font-weight: 400; margin: 13px 0; }
.about p { color: #c5d3c8; font-size: 12px; }
.about a { display: inline-block; border-bottom: 1px solid #84a68c; font-size: 12px; margin-top: 20px; }

.category-banner {
	background: #e9eee4;
	border-radius: var(--radius);
	padding: 31px 34px;
	margin-bottom: 28px;
}
.category-banner h1 {
	font-family: Georgia, serif;
	font-weight: 400;
	font-size: 43px;
	letter-spacing: -1px;
	margin-top: 6px;
}
.category-banner p, .archive-desc { font-size: 13px; color: var(--muted); margin-top: 10px; max-width: 650px; }
.crumb { font-size: 11px; color: var(--muted); margin-bottom: 21px; display: flex; gap: 8px; flex-wrap: wrap; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.chip {
	font-size: 12px;
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 7px 15px;
	background: #fff;
}
.chip.selected { background: var(--dark); color: #fff; border-color: var(--dark); }

.pagination { margin: 34px 0 45px; }
.pagination .nav-links, .pagination { display: flex; justify-content: center; gap: 7px; align-items: center; flex-wrap: wrap; }
.pagination .page-numbers, .pagination a, .pagination span {
	display: inline-grid;
	place-items: center;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 6px;
	min-width: 37px;
	min-height: 37px;
	font-size: 12px;
	padding: 0 8px;
}
.pagination .page-numbers.current, .pagination .current { background: var(--dark); color: #fff; }
.pagination .page-numbers.dots { border: 0; background: transparent; min-width: 20px; }

.editorial {
	margin: 10px 0 47px;
	background: #ede5d8;
	border-radius: var(--radius);
	padding: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.editorial h2 { font-family: Georgia, serif; font-weight: 400; font-size: 29px; margin: 7px 0; }
.editorial p { font-size: 12px; color: #64655c; }
.editorial a { border: 1px solid #7c8175; border-radius: 25px; padding: 11px 20px; font-size: 12px; white-space: nowrap; }

.article-top { max-width: 850px; margin-bottom: 28px; }
.article-top h1 {
	font-family: Georgia, serif;
	font-weight: 400;
	font-size: 48px;
	letter-spacing: -1.4px;
	line-height: 1.12;
	margin: 13px 0 17px;
}
.article-deck { color: var(--muted); font-size: 17px; line-height: 1.7; }
.byline {
	display: flex;
	gap: 12px;
	align-items: center;
	border-top: 1px solid var(--line);
	padding-top: 20px;
	margin-top: 24px;
}
.byline img, .byline .avatar { width: 39px; height: 39px; border-radius: 50%; }
.byline strong { font-size: 12px; }
.byline .meta { margin: 2px 0 0; }
.article-cover { height: 370px; border-radius: var(--radius); }
.caption { font-size: 10px; color: var(--muted); margin: 8px 0 26px; }
.reading-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 0;
	margin-bottom: 24px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.reading-tools small { font-size: 11px; color: var(--muted); }
.toolset { display: flex; gap: 7px; flex-wrap: wrap; }
.toolset button {
	border: 1px solid var(--line);
	border-radius: 5px;
	background: #fff;
	font-size: 12px;
	padding: 5px 10px;
}

.prose {
	max-width: 720px;
	margin: auto;
	font-size: var(--article-size);
	line-height: 1.85;
	font-family: Georgia, "Times New Roman", serif;
}
.prose p { margin: 0 0 24px; }
.prose h2, .prose h3, .prose h4 {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: -.6px;
	margin: 36px 0 18px;
	line-height: 1.25;
}
.prose h2 { font-size: 26px; }
.prose h3 { font-size: 22px; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 1.2em; }
.prose li { margin: 0 0 8px; }
.prose blockquote {
	margin: 30px 0;
	padding: 20px 26px;
	border-left: 3px solid var(--orange);
	background: #edf1e9;
	font-size: 24px;
	line-height: 1.4;
	color: var(--dark);
}
.prose img, .prose video { height: auto; }
.prose iframe, .prose embed { max-width: 100%; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-family: Arial, sans-serif; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.prose .wp-block-table, .prose figure { max-width: 100%; }
.prose pre {
	overflow-x: auto;
	background: #fff;
	border: 1px solid var(--line);
	padding: 16px;
	font-size: 14px;
	line-height: 1.5;
}
.prose .alignwide, .prose .alignfull { max-width: none; width: 100%; }
.prose .code-block { margin: 34px auto; text-align: center; clear: both; }
.prose .code-block::before {
	content: "Reklam";
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 2px;
	color: #80877f;
	margin-bottom: 6px;
}
.prose input, .prose textarea, .prose select, .is-builder input, .is-builder textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}
.is-builder { max-width: none; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.55; }

.tags { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 22px; }
.tags a { font-size: 11px; background: #e8ede4; border-radius: 5px; padding: 6px 12px; }
.related { margin: 44px 0; }
.related .cards { grid-template-columns: 1fr; }

.comments-area { margin-top: 36px; max-width: 720px; }
.comments-title, .comment-reply-title { font-size: 22px; margin-bottom: 16px; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list .children { padding-left: 20px; }
.comment-body { border-top: 1px solid var(--line); padding: 16px 0; }
.comment-form p { margin: 0 0 14px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px;
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
}
.comment-form .submit {
	background: var(--dark);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 10px 16px;
}

.footer { border-top: 1px solid var(--line); background: #fff; padding: 37px 0 20px; margin-top: 24px; }
.footer-main { display: flex; align-items: start; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.footer-main p { font-size: 12px; color: var(--muted); max-width: 330px; margin-top: 12px; }
.footer-links, ul.footer-links {
	display: flex;
	gap: 26px;
	font-size: 12px;
	flex-wrap: wrap;
	padding-top: 12px;
	list-style: none;
	margin: 0;
}
.footer-bottom {
	border-top: 1px solid var(--line);
	padding-top: 18px;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	font-size: 10px;
	color: var(--muted);
}
.empty { padding: 50px 20px; text-align: center; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; }
.toast {
	position: fixed;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--dark);
	color: #fff;
	padding: 12px 20px;
	border-radius: 9px;
	font-size: 13px;
	z-index: 30;
}
.toast[hidden] { display: none; }

@media (min-width: 1400px) {
	.wrap { width: 1216px; }
	.lead .art { height: 315px; }
}
@media (max-width: 1000px) {
	.wrap { width: calc(100% - 40px); }
	.content-grid { gap: 25px; grid-template-columns: minmax(0, 1fr) 280px; }
	.feature-grid { grid-template-columns: 1.4fr 1fr; }
	.side-feature { grid-template-columns: 1fr; }
	.side-feature .art { display: none; }
	.side-feature .copy { padding: 25px; }
	.brandline { display: none; }
	.article-top h1 { font-size: 42px; }
	.card .art { height: 160px; }
	.card h3 { font-size: 18px; }
	.lead h2 { font-size: 29px; }
	.nav, .nav-list { gap: 25px; }
	.nav-note { display: none; }
	.lead .art { height: 245px; }
}
@media (max-width: 780px) {
	.content-grid { grid-template-columns: 1fr; }
	.sidebar { grid-template-columns: 1fr 1fr; }
	.about { align-self: start; }
	.feature-grid { grid-template-columns: 1fr; }
	.lead-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 17px; }
	.side-feature { min-height: 170px; }
	.intro h1 { font-size: 38px; }
	.intro p { max-width: 220px; }
	.article-cover { height: 330px; }
	.article-top { max-width: 100%; }
	.article-grid .sidebar { margin-top: 20px; }
	.rellablog-ad-sidebar-lower { min-height: 250px; }
}
@media (max-width: 782px) {
	body.admin-bar .read-progress { top: 46px; }
}
@media (max-width: 560px) {
	.wrap { width: calc(100% - 32px); }
	.topline .wrap { justify-content: center; }
	.topline .context { display: none; }
	.masthead { padding: 18px 0; }
	.actions { gap: 7px; }
	.icon-btn, .search-pop > summary { width: 44px; height: 44px; }
	html.js .menu-btn { display: grid; }
	html.js .nav { display: none; min-height: 0; gap: 0; flex-direction: column; align-items: stretch; }
	html.js .nav.is-open { display: flex; }
	html:not(.js) .nav { flex-direction: column; align-items: stretch; min-height: 0; }
	.nav-list, html.js .nav.is-open .nav-list, html:not(.js) .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav a { padding: 13px 8px; border-bottom: 1px solid var(--line); }
	.nav .current-menu-item > a { color: var(--orange); border-bottom-color: var(--line); }
	.nav-list .sub-menu { position: static; display: block; border: 0; padding: 0 0 0 12px; }
	.rellablog-ad-header { min-height: 100px; margin: 20px auto 25px; }
	.rellablog-ad-feed, .rellablog-ad-footer, .rellablog-ad-article-end { min-height: 100px; }
	.intro { display: block; margin-bottom: 22px; }
	.intro h1 { font-size: 36px; letter-spacing: -1px; }
	.intro p { max-width: 310px; margin-top: 13px; }
	.lead .art { height: 215px; }
	.lead .lead-copy { padding: 23px; }
	.lead h2 { font-size: 28px; }
	.feature-grid { gap: 17px; margin-bottom: 32px; }
	.lead-side { gap: 13px; }
	.side-feature .copy { padding: 18px 15px; }
	.side-feature h3 { font-size: 16px; }
	.cards { gap: 26px; grid-template-columns: 1fr; }
	.card {
		display: grid;
		grid-template-columns: 116px minmax(0, 1fr);
		gap: 15px;
		padding-bottom: 22px;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		border-top: 0;
		background: transparent;
	}
	.card-copy { padding: 0; }
	.card .art { height: 116px; border-radius: 8px; }
	.card .eyebrow { margin: 0; font-size: 9px; letter-spacing: .6px; }
	.card h3 { font-size: 17px; margin: 7px 0; }
	.card p { display: none; }
	.card .meta { font-size: 10px; gap: 5px; }
	.section-head h2, .section-head h1 { font-size: 23px; }
	.sidebar { grid-template-columns: 1fr; gap: 25px; }
	.rellablog-ad-sidebar-top, .rellablog-ad-sidebar-lower { width: min(300px, 100%); margin-left: auto; margin-right: auto; }
	.category-banner { padding: 25px; }
	.category-banner h1 { font-size: 36px; }
	.editorial { display: block; padding: 25px; margin-top: 35px; }
	.editorial h2 { font-size: 26px; }
	.editorial a { display: inline-block; margin-top: 18px; white-space: normal; }
	.article-top h1 { font-size: 36px; letter-spacing: -.9px; }
	.article-deck { font-size: 15px; }
	.article-cover { height: 235px; }
	.prose { font-size: calc(var(--article-size) - 1px); line-height: 1.8; }
	.prose h2 { font-size: 23px; }
	.prose blockquote { font-size: 22px; padding: 17px 20px; }
	.reading-tools { gap: 8px; }
	.reading-tools small { font-size: 10px; }
	.toolset button { font-size: 11px; padding: 5px 8px; }
	.footer-main { display: block; }
	.footer-links, ul.footer-links { margin-top: 20px; gap: 20px; }
	.footer-bottom { display: block; }
	.footer-bottom span { display: block; margin-bottom: 5px; }
	.crumb { font-size: 10px; }
	.lead p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}
