/*
Theme Name: PANGRUAY99
Theme URI: https://pangruay99.net
Author: PANGRUAY99
Description: Tema PANGRUAY99 untuk informasi game online, review, dan panduan.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: dailynews-framework
*/

:root {
	--brand: #e2c56a;
	--brand-bright: #f0d78c;
	--brand-dark: #f8efc2;
	--ink: #f3e0a0;
	--text: #d7d2a4;
	--muted: #b7a86a;
	--line: rgba(226, 197, 106, 0.28);
	--paper: #06140c;
	--canvas: #06140c;
	--frame: rgba(226, 197, 106, 0.4);
	--topbar: #06140c;
	--footer: #06140c;
	--band: #06140c;
	--wrap: 1280px;
	--header: 134px;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--canvas);
	color: var(--text);
	font-family: Bitter, Georgia, "Times New Roman", serif;
	font-size: 14px;
	line-height: 1.5;
}

body.is-locked {
	overflow: hidden;
}

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

button,
input {
	font: inherit;
}

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

.screen-reader,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.wrap {
	width: min(var(--wrap), calc(100% - 40px));
	margin-inline: auto;
}

.icon {
	width: 16px;
	height: 16px;
	display: block;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	overflow: visible;
}

.admin-bar .site-header {
	top: 32px;
}

.topbar {
	background: var(--topbar);
	color: #dddddd;
	height: 35px;
}

.topbar-inner,
.brandbar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.trending {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 18px;
}

.trending-label {
	flex: none;
	color: var(--brand-bright);
	font-size: 14px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.trending-item {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #f2f2f2;
}

.topbar-tools {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
}

.social {
	display: flex;
	align-items: center;
	gap: 2px;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #dddddd;
}

.social-link:hover {
	color: #fff;
}

.brandbar {
	background: var(--footer);
	color: #fff;
	height: auto;
	padding: 8px 0;
	overflow: visible;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	min-width: 0;
}

.logo-img {
	display: block;
	height: 92px;
	width: auto;
	max-width: min(520px, 52vw);
}

.header-logo {
	display: block;
	width: 250px;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	filter:
		drop-shadow(0 2px 1px rgba(255, 215, 90, 0.8))
		drop-shadow(0 5px 5px rgba(0, 0, 0, 0.65))
		drop-shadow(0 0 8px rgba(255, 190, 40, 0.35));
	transform: translateY(-2px);
}

.primary-nav ul,
.offcanvas-nav ul,
.footer-links ul {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-nav a {
	display: flex;
	align-items: center;
	height: auto;
	padding: 10px 15px;
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
}

.primary-nav li.is-current a,
.primary-nav a:hover {
	box-shadow: inset 0 -3px 0 #fff;
}

.nav-toggle,
.search-btn-mobile {
	display: none;
}

.sheet {
	width: min(var(--wrap), calc(100% - 80px));
	margin: 42px auto;
	padding: 30px;
	background: var(--paper);
	border: 1px solid var(--frame);
}

.section-head {
	margin: 0 0 16px;
	border-bottom: 1px solid var(--line);
}

.section-head h2 {
	display: inline-block;
	margin: 0 0 -1px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--brand);
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.2;
}

.section-head a {
	color: inherit;
}

.section-head a:hover {
	color: var(--brand);
}

.block {
	margin-top: 28px;
}

.top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 253px;
	gap: 28px;
	align-items: start;
}

.top-rail {
	position: sticky;
	top: calc(var(--header) + 18px);
	border: 1px solid var(--line);
	padding: 4px 12px 8px;
}

.hero {
	display: grid;
	grid-template-columns: minmax(0, 3.18fr) minmax(160px, 1fr);
	gap: 22px;
	align-items: start;
}

.hero-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mosaic {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 22px;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.quiet {
	display: grid;
	grid-template-columns: minmax(0, 3.18fr) minmax(160px, 1fr);
	gap: 22px;
	align-items: start;
}

.lead-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(180px, 0.78fr);
	gap: 22px;
	align-items: start;
}

.lead-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mid-grid {
	display: grid;
	grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.35fr);
	gap: 22px;
	align-items: start;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}

.feature-row {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(160px, 0.62fr);
	gap: 22px;
	align-items: start;
}

.card-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(140px, 0.72fr);
	gap: 16px;
	align-items: start;
}

.card-split .media {
	order: 2;
}

.card-split .card-body {
	order: 1;
	padding-top: 0;
}

.card-kicker {
	margin: 0 0 6px;
	color: var(--brand);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
}

.card-kicker a:hover {
	color: var(--brand-bright);
}

.card-lead {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 16px;
	align-items: center;
}

.media {
	position: relative;
	background: linear-gradient(145deg, #d5e6db 0%, #eef5f1 52%, #d3e4da 100%);
	overflow: hidden;
}

.media-hero {
	aspect-ratio: 647 / 405;
}

.media-stack,
.media-lead {
	aspect-ratio: 16 / 10;
}

.media-natural,
.media-banner {
	aspect-ratio: auto;
	background: transparent;
}

.media-cinema {
	aspect-ratio: 16 / 9;
	min-height: 320px;
	background: linear-gradient(160deg, #1b4630 0%, #0c2418 58%, #214e36 100%);
}

.media img,
.mini-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.media-natural img,
.media-banner img {
	position: static;
	display: block;
	width: 100%;
	height: auto;
	object-fit: unset;
	inset: auto;
}

.mini-thumb {
	position: relative;
	overflow: hidden;
}

.card-title {
	margin: 0;
	color: var(--ink);
	font-family: Bitter, Georgia, serif;
	font-weight: 700;
	line-height: 1.3;
}

.card-title a {
	color: inherit;
	text-decoration: none;
}

.card-title a:hover {
	color: var(--brand);
}

.card-feature .card-title {
	font-size: 28px;
}

.card-lead .card-title {
	font-size: 22px;
}

.card-stack .card-title,
.mini .card-title {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	font-size: 16px;
}

.mini .card-title {
	font-size: 14px;
}

.card-by {
	margin: 8px 0 0;
	color: var(--muted);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
}

.card-excerpt {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin: 8px 0 0;
	color: var(--text);
	font-size: 14px;
	line-height: 1.5;
}

.card-overlay .media::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 55%;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
	pointer-events: none;
}

.card-overlay .overlay-copy {
	z-index: 1;
}

.card-overlay .card-title,
.band .card-title,
.card-overlay .card-title a,
.band .card-title a {
	color: #fff;
}

.card-overlay .card-title {
	font-size: 28px;
}

.card-overlay .card-title a:hover,
.band .card-title a:hover {
	color: #d7ffe6;
}

.link-item a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	color: var(--ink);
	font-family: Bitter, Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
}

.link-item a:hover {
	color: var(--brand);
}

.badge {
	position: absolute;
	top: 0;
	left: 0;
	width: 78px;
	height: 28px;
	background: var(--brand-bright);
}

.card-body {
	padding-top: 12px;
}

.card-feature .card-body {
	padding-top: 16px;
}

.card-lead .card-body {
	padding-top: 0;
}

.skel {
	display: block;
	height: 12px;
	border-radius: 2px;
	background: #e4e4e4;
}

.skel + .skel {
	margin-top: 8px;
}

.skel-title {
	height: 14px;
	background: #dcdcdc;
}

.skel.is-short {
	width: 64%;
}

.card-feature .skel-title {
	height: 20px;
}

.card-feature .skel-title + .skel-title {
	width: 86%;
}

.skel-by {
	width: 34%;
	height: 10px;
	margin-top: 14px;
	background: #ececec;
}

.skel-line {
	height: 10px;
	margin-top: 8px;
	background: #ececec;
}

.overlay-copy {
	position: absolute;
	left: 22px;
	right: 28%;
	bottom: 22px;
}

.card-overlay .skel {
	height: 18px;
	background: rgba(255, 255, 255, 0.82);
}

.mini {
	display: grid;
	grid-template-columns: 81px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
}

.mini + .mini {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.mini-text {
	grid-template-columns: 1fr;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.mini-thumb {
	aspect-ratio: 4 / 3;
	background: linear-gradient(145deg, #d5e6db, #e7f0eb);
}

.mosaic-list .mini {
	grid-template-columns: 108px minmax(0, 1fr);
}

.mosaic-list .mini-thumb {
	aspect-ratio: 108 / 72;
}

.link-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	margin-top: 22px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.band {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(220px, 0.85fr);
	background: var(--band);
}

.band-list {
	padding: 18px 16px 18px 8px;
}

.band .mini {
	grid-template-columns: 89px minmax(0, 1fr);
}

.band .mini + .mini {
	border-top-color: rgba(255, 255, 255, 0.14);
}

.band .mini-thumb {
	background: #1d4632;
}

.band .skel-title {
	background: rgba(255, 255, 255, 0.28);
}

.stories-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 253px;
	gap: 28px;
	align-items: start;
	margin-top: 28px;
}

.brief .card + .card {
	margin-top: 18px;
}

.latest-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 22px 18px;
}

.load-more {
	display: block;
	margin: 28px auto 4px;
	text-align: center;
	text-decoration: none;
	min-width: 168px;
	padding: 12px 28px;
	border: 1px solid #d5d5d5;
	background: #fff;
	color: #222;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.load-more:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.page-article {
	max-width: 760px;
	margin: 8px auto 12px;
}

.entry-kicker {
	margin: 0 0 10px;
	color: var(--brand);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.entry-kicker a {
	color: inherit;
}

.entry-meta {
	margin: -6px 0 20px;
	color: var(--muted);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
}

.page-header h1 {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--brand);
	color: var(--ink);
	font-family: Bitter, Georgia, serif;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.page-header h1 a.quiet-link,
.page-header h1 a.quiet-link:hover,
.page-header h1 a.quiet-link:visited,
.page-content a.quiet-link,
.page-content a.quiet-link:hover,
.page-content a.quiet-link:visited {
	position: relative;
	z-index: 2;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

.page-content p,
.page-content li {
	color: var(--text);
	font-size: 16.5px;
	line-height: 1.75;
}

.page-content .wp-block-image {
	margin: 0 0 22px;
}

.page-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.page-content h2,
.page-content h3,
.contact-form h2 {
	margin: 28px 0 10px;
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.page-content h2,
.contact-form h2 {
	font-size: 22px;
}

.page-content h3 {
	font-size: 18px;
}

.page-content a {
	color: var(--brand);
}

.page-content a:hover {
	color: var(--brand-dark);
}

.page-content ul {
	margin: 0 0 16px;
	padding-left: 1.2em;
}

.page-content li + li {
	margin-top: 8px;
}

.contact-form {
	margin-top: 28px;
	padding-top: 8px;
	border-top: 1px solid var(--line);
}

.contact-form p {
	margin: 0 0 14px;
}

.contact-form label {
	display: block;
	margin-bottom: 6px;
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #d5dde6;
	background: #fff;
	color: var(--ink);
	font-family: Bitter, Georgia, serif;
	font-size: 16px;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid var(--brand);
	border-color: var(--brand);
}

.contact-form button {
	margin-top: 4px;
	padding: 12px 28px;
	border: 0;
	background: var(--brand);
	color: #06140c;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.contact-form button:hover {
	background: var(--brand-dark);
}

.form-note {
	padding: 12px 14px;
	font-size: 15px;
}

.form-note.is-ok {
	background: #e8f6ee;
	color: #085c27;
}

.form-note.is-warn {
	background: #f8f1e4;
	color: #6a4b12;
}

.hp {
	position: absolute;
	left: -9999px;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	color: var(--muted);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
}

.crumbs a:hover {
	color: var(--brand);
}

.archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 28px;
	align-items: start;
}

.cat-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.72fr);
	gap: 22px;
	align-items: start;
}

.cat-stack {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.cat-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-top: 26px;
}

.card-tile {
	padding: 0 0 12px;
	background: rgba(226, 197, 106, 0.08);
}

.card-tile .card-body {
	padding: 10px 10px 0;
}

.card-flag {
	position: relative;
}

.card-flag .card-kicker {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	padding: 6px 10px;
	background: var(--brand);
	color: #06140c;
}

.card-flag .card-kicker a {
	color: inherit;
}

.read-more {
	display: inline-block;
	margin-top: 14px;
	padding: 8px 14px;
	border: 1px solid var(--frame);
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.read-more:hover {
	border-color: var(--brand);
	color: var(--brand);
}

.cat-stream {
	margin-top: 8px;
}

.stream-item {
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 18px 0;
	border-top: 1px solid var(--line);
}

.stream-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: rgba(226, 197, 106, 0.08);
}

.stream-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cat-side {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.side-box {
	padding: 16px;
	border: 1px solid var(--line);
}

.side-box h2 {
	margin: 0 0 12px;
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
}

.side-search {
	display: flex;
	gap: 0;
}

.side-search input {
	min-width: 0;
	flex: 1;
	padding: 8px 10px;
	border: 1px solid var(--frame);
	background: transparent;
	color: var(--ink);
	font: inherit;
}

.side-search button {
	padding: 8px 12px;
	border: 0;
	background: var(--brand);
	color: #06140c;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.side-box .mini:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.archive-note {
	margin-bottom: 18px;
}

.archive-list {
	margin: 8px 0 0;
	padding-left: 1.2em;
}

.archive-list a {
	color: var(--brand);
	font-size: 17px;
}

.archive-empty {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 16px;
}

.archive-note {
	margin-bottom: 18px;
}

.archive-list {
	margin: 8px 0 0;
	padding-left: 1.2em;
}

.archive-list a {
	color: var(--brand);
	font-size: 17px;
}

.archive-empty {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 16px;
}

.archive-note {
	margin-bottom: 18px;
}

.archive-list {
	margin: 8px 0 0;
	padding-left: 1.2em;
}

.archive-list a {
	color: var(--brand);
	font-size: 17px;
}

.archive-empty {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 16px;
}

.empty-state {
	padding: 48px 8px 64px;
	text-align: center;
}

.empty-state h1 {
	margin: 0 0 10px;
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 28px;
}

.empty-state p {
	margin: 0 auto;
	max-width: 46ch;
	color: var(--muted);
}

.site-footer {
	background: var(--footer);
	color: #ffffff;
	padding: 36px 0 28px;
}

.footer-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 14px;
}

.footer-logo .logo-img {
	height: 84px;
	max-width: min(480px, 80vw);
}

.social-footer {
	justify-content: center;
	gap: 6px;
}

.social-footer .social-link {
	width: 34px;
	height: 34px;
	color: #d1d1d1;
}

.social-footer .icon {
	width: 18px;
	height: 18px;
}

.footer-rule {
	height: 1px;
	margin: 22px 0;
	background: rgba(255, 255, 255, 0.16);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 34px;
}

.footer-col h2 {
	margin: 0 0 14px;
	color: #f0f0f0;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.footer-col p {
	margin: 0 0 12px;
	color: #ffffff;
	font-size: 14px;
	line-height: 1.65;
}

.footer-col a:hover {
	color: #b7ebc8;
}

.contact-line strong {
	font-family: "Open Sans", Arial, sans-serif;
}

.footer-list .mini-thumb {
	background: #1a3a28;
}

.footer-list .skel-title {
	background: rgba(255, 255, 255, 0.22);
}

.footer-list .mini + .mini {
	border-top-color: rgba(255, 255, 255, 0.12);
}

.copyright {
	margin: 0;
	text-align: center;
	color: #ffffff;
	font-size: 14px;
}

.footer-links {
	margin-top: 14px;
}

.footer-links ul {
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.footer-links a {
	color: #d1d1d1;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14px;
}

.footer-links a:hover {
	color: #fff;
}

.footer-links a.is-brand {
	color: #ffe14a;
	font-weight: 700;
}

.footer-links a.is-brand:hover {
	color: #fff4a8;
}

.float-btn {
	position: fixed;
	right: 22px;
	z-index: 45;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.float-btn .icon {
	width: 26px;
	height: 26px;
}

.float-telegram {
	bottom: 88px;
	background: #2aa4e6;
}

.float-whatsapp {
	bottom: 24px;
	background: #25d366;
}

.backdrop {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 70;
	width: min(370px, 88vw);
	height: 100%;
	padding: 8px 22px 28px;
	background: #141414;
	color: #fff;
	transform: translateX(-105%);
	visibility: hidden;
	transition: transform 0.25s ease;
	overflow: auto;
}

.offcanvas.is-open {
	transform: translateX(0);
	visibility: visible;
}

.offcanvas-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 74px;
}

.offcanvas .logo-img {
	height: 42px;
	max-width: 210px;
}

.offcanvas-nav {
	margin-top: 12px;
}

.offcanvas-nav ul {
	flex-direction: column;
	align-items: stretch;
}

.offcanvas-nav a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
}

.offcanvas-nav li.is-current a {
	color: #8ddeaf;
}

.offcanvas .social {
	margin-top: 22px;
}

.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 20px 20px;
	background: rgba(255, 255, 255, 0.97);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.search-close {
	position: absolute;
	top: 18px;
	right: 18px;
	display: inline-flex;
	border: 0;
	background: transparent;
	color: var(--ink);
}

.search-panel {
	width: min(720px, 100%);
}

.search-panel input {
	width: 100%;
	border: 0;
	border-bottom: 2px solid var(--brand);
	background: transparent;
	color: var(--ink);
	font-family: Bitter, Georgia, serif;
	font-size: 28px;
	outline: none;
}

.search-panel input::placeholder {
	color: #9a9a9a;
}

@media (max-width: 1100px) {
	.top-grid,
	.stories-grid,
	.archive-layout {
		grid-template-columns: 1fr;
	}

	.top-rail {
		position: static;
	}

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

	.logo-img {
		height: 60px;
	}
}

@media (max-width: 860px) {
	.topbar {
		display: none;
	}

	.nav-toggle,
	.search-btn-mobile {
		display: inline-flex;
	}

	.primary-nav {
		display: none;
	}

	.brandbar {
		height: auto;
	}

	.brandbar-inner {
		display: grid;
		grid-template-columns: 36px 1fr 36px;
		justify-items: center;
	}

	.sheet {
		width: calc(100% - 24px);
		margin: 16px auto 24px;
		padding: 16px;
	}

	.hero,
	.quiet,
	.lead-grid,
	.mid-grid,
	.pair,
	.feature-row,
	.card-split,
	.card-lead,
	.cat-hero,
	.footer-grid {
		grid-template-columns: 1fr;
	}

	.cat-tiles {
		grid-template-columns: 1fr 1fr;
	}

	.stream-item {
		grid-template-columns: 1fr;
	}

	.link-row,
	.latest-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.logo-img {
		height: 62px;
	}

	.card-overlay .overlay-copy {
		right: 16px;
	}
}

@media (max-width: 560px) {
	.latest-grid,
	.link-row {
		grid-template-columns: 1fr;
	}

	.logo-img {
		height: 40px;
	}

	.page-header h1 {
		font-size: 32px;
	}

	.float-btn {
		width: 46px;
		height: 46px;
		right: 14px;
	}
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.header-logo {
	width: min(250px, 100%);
	height: auto;
}

.archive-list li + li {
	margin-top: 14px;
}

.archive-list time {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 12px;
}

.archive-pager {
	margin-top: 26px;
}

.archive-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.archive-pager a,
.archive-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	padding: 7px 12px;
	border: 1px solid var(--frame);
	color: var(--ink);
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
}

.archive-pager a:hover,
.archive-pager .current {
	background: var(--brand);
	border-color: var(--brand);
	color: #06140c;
}