.newsTable {
	position: relative;
}

.newsTable summary {
	cursor: pointer;
	user-select: none;
	background: var(--bg-2);
	padding: 13px;
	border: var(--border-3);
	border-radius: var(--radius-2);
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-align: center;
	box-shadow: var(--shadow-1);
	list-style: none;
}

.newsTable summary::-webkit-details-marker {
	display: none;
}

.newsTable summary::marker {
	content: "";
}

details[open] summary {
	border-radius: var(--radius-2) var(--radius-2) 0 0;
}

.summaryIcon {
	height: 20px;
	width: 20px;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-2);
	transition: transform 0.2s ease, color 0.2s ease;
}

details[open] .summaryIcon {
	transform: translateY(-50%) rotate(180deg);
	color: var(--text-1);
}

.newsTable-wrap {
	position: absolute;
	left: 0;
	right: 0;
	max-height: 500px;
	overflow: auto;
	z-index: 100;
	background: var(--bg-2);
	padding: 13px;
	border: var(--border-3);
	border-top: none;
	border-radius: 0 0 3px var(--radius-2);
	scrollbar-width: thin;
	scrollbar-color: var(--text-2) transparent;
	box-shadow: var(--shadow-1);
}

.newsTable-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 3px;
}

.newsTable-table th,
.newsTable-table td {
	color: var(--text-3);
	padding: 6px 13px;;
	text-align: left;
}

.newsTable-table th {
	color: var(--text-1);
	cursor: pointer;
	user-select: none;
	border-radius: var(--radius-1);
	border: 1px solid transparent;
	position: relative;
	padding-right: 35px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.newsTable-table th:hover {
	background: var(--bg-4);
	border: var(--border-1);
}

.newsTable-table th .sortIcon {
	height: 13px;
	width: 13px;
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-2);
	font-size: 0.75em;
	text-align: center;
	transition: transform 0.2s ease, color 0.2s ease;
}

.newsTable-table th.sortAsc .sortIcon {
	transform: translateY(-50%) rotate(0deg);
	color: var(--text-1);
}

.newsTable-table th.sortDesc .sortIcon {
	transform: translateY(-50%) rotate(180deg);
	color: var(--text-1);
}

.newsTable-table th.sortAsc,
.newsTable-table th.sortDesc {
	background: var(--bg-4);
	border: var(--border-1);
}

.newsTable-table tbody tr {
	cursor: pointer;
}

.newsTable-table tbody tr:hover td,
.newsTable-table tbody tr:focus td {
	color: var(--text-4);
}

.newsTable-wrap::-webkit-scrollbar {
	width: 6px;
}

.newsTable-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.newsTable-wrap::-webkit-scrollbar-thumb {
	background: var(--text-3);
	border-radius: 999px;
}

.filterCard {
	display: flex;
	gap: 25px;
	align-items: end;
}

.filter {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	position: relative;
}

.filter label {
	font-family: var(--font-display);
	font-size: 1.2rem;
	letter-spacing: 0.04em;
	paint-order: stroke fill;
	-webkit-text-stroke: 3px var(--black);
}

.filterSelect-btn {
	width: 100%;
	padding: 10px 20px;
	border: var(--border-3);
	background: var(--bg-3);
	border-radius: var(--radius-1);
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	color: var(--text-1);
	transition: background 0.2s ease, border-color 0.2s ease;
}

.filterSelect-btn:hover,
.filterSelect.open .filterSelect-btn {
	background: var(--bg-4);
	border: var(--border-1);
}

.filterSelect {
	position: relative;
	width: 100%;
}

.filterSelect-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 13px;
	cursor: pointer;
	text-align: left;
}

.filterSelect-btn span {
	margin-top: 3px;
}

.filterSelect-arrow {
	color: var(--text-2);
	transition: transform 0.2s ease, color 0.2s ease;
}

.filterSelect-arrow .siteIcon {
	width: 13px;
	height: 13px;
}

.filterSelect.open .filterSelect-arrow {
	transform: rotate(180deg);
	color: var(--text-1);
}

.filterSelect-menu {
	position: absolute;
	top: calc(100% + 3px);
	left: 0;
	right: 0;
	z-index: 200;
	display: none;
	flex-direction: column;
	gap: 6px;
	background: var(--bg-3);
	border: var(--border-3);
	border-radius: var(--radius-1);
	padding: 6px;
	box-shadow: var(--shadow-1);
}

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

.filterSelect-menu button {
	width: 100%;
	padding: 10px 13px;
	border: 1px solid transparent;
	border-radius: var(--radius-1);
	background: transparent;
	color: var(--text-3);
	font: inherit;
	font-weight: bold;
	text-align: left;
	cursor: pointer;
}

.filterSelect-menu button:hover,
.filterSelect-menu button.isSelected {
	background: var(--bg-1);
    color: var(--text-1);
}

.contentCard {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.calendarCard {
	width: 320px;
	flex-shrink: 0;
}

.articlesCard {
	flex: 1;
	min-width: 0;
}

.calendarHeader {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-bottom: 13px;
}

.calendarBtn {
	flex-shrink: 0;
}

.calendarBtn .siteIcon {
	width: 1.2rem;
	height: 1.2rem;
}

.calendarTitle {
	flex: 1;
}

.calendarBtn,
.calendarTitle {
	color: var(--text-1);
    background: var(--bg-1);
	border-radius: var(--radius-1);
    border: var(--border-2);
	font-size: 1.2rem;
	cursor: pointer;
	padding: 9px 13px 3px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.calendarBtn:hover,
.calendarTitle:hover {
    background: var(--bg-4);
    border: var(--border-1);
}

.calendarWeekdays,
.calendarDays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
}

.calendarWeekdays {
	margin-bottom: 6px;
}

.calendarWeekdays span {
	text-align: center;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--text-2);
}

.calendarDay {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--text-3);
	background: var(--bg-3);
    border: var(--border-3);
	border-radius: var(--radius-1);
	font-family: var(--font-body);
    font-weight: bold;
	font-size: 1rem;
}

.calendarDay.empty {
	pointer-events: none;
	background: none;
    border: none;
}

.calendarDay.hasPost {
	background: linear-gradient(180deg, var(--orange), var(--orange-deep));
    box-shadow: none;
    border: var(--border-2);
    color: var(--text-1);
	transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.calendarDay.hasPost:hover {
	background: linear-gradient(180deg, var(--orange-deep), var(--orange));
    box-shadow: var(--shadow-2);
    border: var(--border-1);
}

.calendarDay:not(.hasPost):hover {
	transition: color 0.2s ease;
}

.calendarDay:not(.hasPost):hover {
	color: var(--text-2);
}

.calendarBtn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.articlesHeader {
	margin: 0;
}

.articlesHeader-top {
	display: flex;
	justify-content: space-between;
	font-weight: bold;
	margin-bottom: 13px;
	gap: 13px;
}

.articlesHeader-top p {
	margin: 0;
}

.articlesHeader h2 {
	margin: 0;
	font-size: 2.5rem;
}

.sepHori {
	margin: 20px 0;
}

.dayList .sepHori {
	margin: 10px 0;
}

#articlesView-type {
	color: var(--text-3);
}

.articlesView-meta {
	margin: 0;
	color: var(--text-4);
}

.metaDate {
	color: var(--text-4);
}

.metaSource {
	color: var(--text-3);
}

.metaAuthor {
	color: var(--text-2);
}

.articleCtn {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--text-3);
	font-weight: bold;
}

.articleCtn p {
	margin: 0;
}

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

.articleFull h1,
.articleFull h2,
.articleFull h3,
.articleFull p {
	margin: 0;
}

#articlesView-type[hidden] {
	display: none;
}

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

.dayList-post {
	display: flex;
	flex-direction: column;
	font-weight: bold;
	align-items: flex-start;
}

.dayList-post h3 {
	font-family: var(--font-display);
	font-size: 1.25rem;
}

.dayList-post h3,
.dayList-post p {
	margin: 0;
}

.dayList-post button {
	align-self: flex-start;
	cursor: pointer;
}

.newsType,
.articlesView-meta {
	font-weight: bold;
}

.newsType {
	color: var(--text-3);
}

.patreonBtns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
}

.navBtns {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 13px;
}

.navBtn {
	color: var(--text-4);
    text-decoration: none;
	background: none;
	border: none;
	padding: none;
	margin: none;
	font-size: 1rem;
	cursor: pointer;
}

.navBtn:hover {
    text-decoration: underline;
}

.navBtn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}

.readMore {
	color: var(--text-4);
    letter-spacing: 0.04em;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.1rem;
	background: none;
	border: none;
	margin-top: 6px;
	padding: 0;
	font-weight: normal;
}

.readMore:hover {
    text-decoration: underline;
}

.readMore .siteIcon {
	width: 1.1rem;
	height: 1.1rem;
}

.articleSummary {
	color: var(--text-1);
}

.articleLink {
	color: var(--text-4);
    text-decoration: underline;
}

.articleLink:hover {
    text-decoration: none;
}

ul {
	padding-left: 20px;
	margin: 0;
}

.articleGap {
	height: 1rem;
}

.articleGap-small {
	height: 0.4rem;
}

@media screen and (max-width: 1249px) {
	.navBtns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}
	.navBtns:has(.patreonBtns) {
		gap: 13px;
	}
	.patreonBtns {
		grid-column: 1 / -1;
	}
	.patreonBtns .btn {
		width: 100%;
	}
	.prevArticleBtn {
		grid-row: 2;
		justify-self: start;
	}
	.nextArticleBtn {
		grid-row: 2;
		justify-self: end;
	}
}

@media screen and (max-width: 759px) {
	.contentCard {
		align-items: center;
		flex-direction: column;
	}
	.filterCard {
		flex-direction: column;
		align-items: normal;
	}
	.articlesCard {
		width: 100%;
	}
	.newsTable-table th, .newsTable-table td {
		font-size: 0.8rem;
	}
}