/* ===================================================================
   Artin — custom layer on top of styles.css
   Loaded AFTER styles.css, so rules here override the base theme.
   The base styles.css stays untouched; remove this <link> to revert.
   =================================================================== */

/* -------------------------------------------------------------------
   1) Design tokens
   ------------------------------------------------------------------- */
:root {
	--artin-red:        #ff485b;
	--artin-red-dark:   #e10c1a;
	--artin-red-glow:   rgba(255, 72, 91, .45);

	--artin-bg:         #f4f1ee;
	--artin-surface:    #ffffff;
	--artin-surface-2:  #faf8f6;
	--artin-line:       rgba(0, 0, 0, .09);
	--artin-text:       #16161a;
	--artin-text-dim:   #6b6b74;

	--artin-radius:     14px;
	--artin-radius-sm:  8px;
	--artin-gap:        20px;
	--artin-shadow:     0 18px 50px -18px rgba(0, 0, 0, .22);

	--artin-maxwidth:   1180px;
	--artin-sidebar:    300px;

	--artin-miniplayer-h: 150px;
}

/* -------------------------------------------------------------------
   1b) Global guards — prevent horizontal overflow / scroll
   ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
/* base styles.css sets body{background:#000}; recolor so the area under the
   content (incl. the player padding) isn't a black band */
html, body { background: var(--artin-bg) !important; }
body { position: relative; }
.page { overflow-x: clip; max-width: 100%; background: var(--artin-bg); }
img, iframe, video, embed, object { max-width: 100%; }

/* Force top-level .wrp sections centered at site width — guards against any
   base rule stretching full-width. (Direct children of .page / #content only,
   so nested .wrp like inside .navigation stays full-width in its column.) */
.page > .wrp,
.page > .headpic > .wrp,
#content > .wrp { max-width: var(--artin-maxwidth) !important; margin-left: auto !important; margin-right: auto !important; }

/* {navigation} and ads are injected by DLE INSIDE .artin-grid, so they land
   as grid cells. Make them span the whole row (full column width). */
.artin-grid > .navigation,
.artin-grid > .artin-ad,
.artin-grid > .ads_in,
.artin-grid > ins { grid-column: 1 / -1; }
.artin-grid > .navigation > .wrp { max-width: none !important; width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.artin-layout, .artin-main, .artin-side, .artin-grid, .artin-card { min-width: 0; max-width: 100%; }

/* Contain third-party widgets (Elfsight / VocarAi etc.) that ship a fixed width */
.artin-hero__widgets,
.artin-hero__media,
.artin-hero__widgets > div,
[class*="elfsight-app-"] {
	max-width: 100% !important;
	overflow: hidden;
}
.artin-hero__widgets iframe,
[class*="elfsight-app-"] iframe { max-width: 100% !important; width: 100% !important; }

/* -------------------------------------------------------------------
   2) Reusable building blocks
   ------------------------------------------------------------------- */
.artin-ad {
	margin: var(--artin-gap) 0;
	text-align: center;
	width: 100%;
	overflow: hidden;
}
.artin-ad ins { display: block; }

.artin-card {
	background: var(--artin-surface);
	border: 1px solid var(--artin-line);
	border-radius: var(--artin-radius);
	box-shadow: var(--artin-shadow);
}

.artin-sechead {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--artin-gap) 0;
	font-size: 22px;
	font-weight: 800;
	color: var(--artin-text);
}
.artin-sechead::before {
	content: "";
	width: 5px;
	height: 22px;
	background: var(--artin-red);
	border-radius: 4px;
	flex: 0 0 auto;
}

.artin-hidden { display: none !important; }

/* -------------------------------------------------------------------
   3) Sticky live player
   ------------------------------------------------------------------- */
body { padding-bottom: var(--artin-miniplayer-h); }

.artin-player {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	width: auto;
	box-sizing: border-box;
	z-index: 9999;
	height: var(--artin-miniplayer-h);
	color: #fff;
	border-top: 1px solid rgba(255,255,255,.08);
	box-shadow: 0 -14px 44px rgba(0,0,0,.5);
	overflow: hidden;
	isolation: isolate;
	/* Promote to its own GPU layer so page scroll never repaints the fixed
	   player (this was the cause of the janky/stuttering scroll on mobile). */
	transform: translateZ(0);
	will-change: transform;
	contain: layout paint size;
}

/* layered background: occasion image (player-bg.jpg) + dark gradient overlay */
.artin-player__bg {
	position: absolute; inset: 0; z-index: -2;
	background-color: #101015;
	background-size: cover; background-position: center; background-repeat: no-repeat;
}
.artin-player::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(18,18,24,.86), rgba(8,8,11,.94));
}
.artin-player::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
	background: linear-gradient(90deg, var(--artin-red), var(--artin-red-glow), var(--artin-red));
	background-size: 200% 100%;
	opacity: .5;
}
.artin-player.is-playing::before { animation: artin-flow 3s linear infinite; opacity: 1; }
@keyframes artin-flow { from { background-position: 0 0; } to { background-position: 200% 0; } }

.artin-player__inner {
	position: relative; z-index: 1;
	height: 100%;
	max-width: var(--artin-maxwidth);
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.artin-player__inner > * { min-width: 0; }

/* Cover artwork */
.artin-player__cover {
	flex: 0 0 auto;
	width: 96px; height: 96px;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.artin-player__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Play / pause / loading button — same height as cover, rounded square */
.artin-player__btn {
	flex: 0 0 auto;
	width: 96px; height: 96px;
	border: none; border-radius: 18px;
	background: var(--artin-red);
	color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	transition: transform .15s ease, box-shadow .2s ease, filter .15s ease;
	box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.artin-player__btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.artin-player__btn:active { transform: scale(.97); }
.artin-player__btn .artin-ic { fill: #fff; width: 38px; height: 38px; }
.artin-player__btn .artin-ic-pause,
.artin-player__btn .artin-ic-load { display: none; }
.artin-player.is-playing .artin-ic-play  { display: none; }
.artin-player.is-playing .artin-ic-pause { display: block; }
.artin-player.is-loading .artin-ic-play,
.artin-player.is-loading .artin-ic-pause { display: none; }
.artin-player.is-loading .artin-ic-load  { display: block; animation: artin-spin .8s linear infinite; }
@keyframes artin-spin { to { transform: rotate(360deg); } }

/* Meta text */
.artin-player__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; line-height: 1.25; }
.artin-player__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.artin-player__tabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.10); border-radius: 999px; padding: 3px; }
.artin-tab { border: none; cursor: pointer; background: transparent; color: #d6d6de; font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: .3px; padding: 5px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.artin-tab:hover { color: #fff; }
.artin-tab.is-on { background: var(--artin-red); color: #fff; }
.artin-player__channel { font-size: 12px; color: #b6b6c2; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artin-player__title { font-weight: 800; font-size: 22px; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artin-player__artist { font-size: 14px; color: #c2c2cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artin-player__artist:empty { display: none; }

.artin-live { display: inline-flex; align-items: center; gap: 6px; color: #fff !important; background: var(--artin-red); font-weight: 800; font-size: 11px; letter-spacing: .6px; padding: 3px 9px; border-radius: 6px; }
.artin-live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: 0 0 auto; animation: artin-pulse 1.4s infinite; }
@keyframes artin-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Equalizer (animates only while playing) */
.artin-player__bars { display: flex; align-items: flex-end; gap: 4px; height: 40px; flex: 0 0 auto; }
.artin-player__bars i { width: 4px; height: 8px; background: var(--artin-red); border-radius: 2px; opacity: .9; }
.artin-player.is-playing .artin-player__bars i { animation: artin-eq 1s infinite ease-in-out; }
.artin-player.is-playing .artin-player__bars i:nth-child(2) { animation-delay: .18s; }
.artin-player.is-playing .artin-player__bars i:nth-child(3) { animation-delay: .38s; }
.artin-player.is-playing .artin-player__bars i:nth-child(4) { animation-delay: .54s; }
.artin-player.is-playing .artin-player__bars i:nth-child(5) { animation-delay: .28s; }
@keyframes artin-eq { 0%,100% { height: 8px; } 50% { height: 38px; } }

/* Volume + mute */
.artin-player__vol { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.artin-player__mute {
	background: none; border: none; cursor: pointer; padding: 4px;
	display: flex; align-items: center; opacity: .8; transition: opacity .15s;
}
.artin-player__mute:hover { opacity: 1; }
.artin-player__mute svg { fill: #fff; }
.artin-player__mute .artin-ic-muted { display: none; }
.artin-player.is-muted .artin-ic-sound { display: none; }
.artin-player.is-muted .artin-ic-muted { display: block; }
.artin-player__vol input[type=range] { width: 96px; max-width: 96px; accent-color: var(--artin-red); cursor: pointer; }

/* Responsive */
@media (max-width: 860px) {
	.artin-player__btn  { width: 64px; height: 64px; }
	.artin-player__cover { width: 84px; height: 84px; }
	.artin-player__title { font-size: 19px; }
}
@media (max-width: 760px) {
	.artin-player__vol input[type=range] { display: none; }
}
@media (max-width: 600px) {
	.artin-player__vol { display: none; }
	.artin-player__bars { display: none; }
	.artin-player__cover { width: 72px; height: 72px; }
	.artin-player__btn  { width: 60px; height: 60px; }
	.artin-player__title { font-size: 18px; }
}
@media (max-width: 400px) {
	.artin-player__cover { display: none; }
}

.artin-player__cover {
	flex: 0 0 auto;
	width: 104px; height: 104px;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.55);
}
.artin-player__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.artin-player__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; line-height: 1.3; }
.artin-player__eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.artin-player__tabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.10); border-radius: 999px; padding: 3px; }
.artin-tab { border: none; cursor: pointer; background: transparent; color: #d6d6de; font-family: inherit; font-weight: 700; font-size: 12px; letter-spacing: .3px; padding: 5px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.artin-tab:hover { color: #fff; }
.artin-tab.is-on { background: var(--artin-red); color: #fff; }
.artin-player__channel { font-size: 13px; color: #c9c9d2; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artin-player__title { font-weight: 800; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artin-player__artist { font-size: 15px; color: #c2c2cc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artin-player__artist:empty { display: none; }

.artin-live { display: inline-flex; align-items: center; gap: 6px; color: var(--artin-red); font-weight: 800; font-size: 12px; letter-spacing: .5px; }
.artin-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--artin-red); box-shadow: 0 0 0 0 var(--artin-red-glow); animation: artin-pulse 1.5s infinite; }
@keyframes artin-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 var(--artin-red-glow); } 50% { opacity: .5; box-shadow: 0 0 0 6px rgba(255,72,91,0); } }

.artin-player__bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; flex: 0 0 auto; }
.artin-player__bars i { width: 4px; height: 8px; background: var(--artin-red); border-radius: 2px; opacity: .85; }
.artin-player.is-playing .artin-player__bars i { animation: artin-eq .9s infinite ease-in-out; }
.artin-player.is-playing .artin-player__bars i:nth-child(2) { animation-delay: .15s; }
.artin-player.is-playing .artin-player__bars i:nth-child(3) { animation-delay: .35s; }
.artin-player.is-playing .artin-player__bars i:nth-child(4) { animation-delay: .5s; }
.artin-player.is-playing .artin-player__bars i:nth-child(5) { animation-delay: .25s; }
@keyframes artin-eq { 0%,100% { height: 8px; } 50% { height: 44px; } }

.artin-player__vol { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.artin-player__mute {
	background: none; border: none; cursor: pointer; padding: 4px;
	display: flex; align-items: center; opacity: .85; transition: opacity .15s;
}
.artin-player__mute:hover { opacity: 1; }
.artin-player__mute svg { fill: #fff; }
.artin-player__mute .artin-ic-muted { display: none; }
.artin-player.is-muted .artin-ic-sound { display: none; }
.artin-player.is-muted .artin-ic-muted { display: block; }
.artin-player__vol input[type=range] { width: 84px; max-width: 84px; accent-color: var(--artin-red); cursor: pointer; }

@media (max-width: 760px) {
	.artin-player__vol input[type=range] { display: none; }
}
@media (max-width: 600px) {
	.artin-player__vol { display: none; }
	.artin-player__title { font-size: 15px; }
}
@media (max-width: 420px) {
	.artin-player__bars { display: none; }
	.artin-player__cover { width: 50px; height: 50px; }
}

/* -------------------------------------------------------------------
   4) Homepage redesign
   ------------------------------------------------------------------- */

/* Header: base theme reserved 360px for an in-header hero we no longer use.
   Shrink it to just the nav bar and drop iOS-buggy fixed background. */
.headpic {
	min-height: 0 !important;
	background-attachment: scroll !important;
}
.headpic > .wrp { padding: 0 !important; }
.headpic.fixed { background-attachment: scroll !important; }

/* Brand in the top bar */
.artin-topbar { display: flex; align-items: center; gap: 18px; padding: 10px 0; }
.artin-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; }
.artin-brand img { height: 38px; width: auto; display: block; }
.artin-brand__txt { font-weight: 800; letter-spacing: .5px; font-size: 18px; color: #fff; white-space: nowrap; }
.artin-topbar #topmenu { margin-left: auto; }
@media (max-width: 860px) { .artin-brand__txt { display: none; } }

/* Hero */
.artin-hero { padding: 22px 0 6px; }
.artin-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--artin-gap); }
.artin-hero__media { overflow: hidden; padding: 0; }
.artin-hero__np { display: block; width: 100%; height: auto; }
.artin-hero__pod { padding: 12px 14px 14px; }
.artin-hero__pod iframe { display: block; width: 100%; border: 0; border-radius: var(--artin-radius-sm); }
.artin-hero__widgets { display: grid; gap: var(--artin-gap); }

/* Layout: main + optional sidebar */
.artin-layout { padding: 10px 0 30px; }
.artin-layout.has-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--artin-sidebar);
	gap: 28px;
	align-items: start;
}
.artin-main { min-width: 0; }

/* News grid — equal-height post cards (.artin-pcard); responsive column count */
.artin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0 0 10px; }
@media (max-width: 980px)  { .artin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.artin-pcard {
	float: none !important; width: auto !important; margin: 0 !important; padding: 0 !important;
	background: var(--artin-surface); border: 1px solid var(--artin-line);
	border-radius: var(--artin-radius); overflow: hidden;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.artin-pcard:hover { transform: translateY(-3px); border-color: var(--artin-red); box-shadow: var(--artin-shadow); }
.artin-pcard > a { display: flex; flex-direction: column; height: 100%; color: var(--artin-text); text-decoration: none; }

/* fixed-ratio thumbnail so every card lines up */
.artin-pcard__thumb { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--artin-surface-2); overflow: hidden; }
.artin-pcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.artin-pcard:hover .artin-pcard__thumb img { transform: scale(1.04); }

/* title block: clamp to 2 lines so heights match */
.artin-pcard__body { display: flex; flex: 1 1 auto; padding: 12px 14px; }
.artin-pcard__title {
	font-size: 14px; font-weight: 700; line-height: 1.45; color: var(--artin-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.artin-pcard .hover_arrow { display: none; }

@media (max-width: 600px) { .artin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 360px) { .artin-grid { grid-template-columns: 1fr; } }

/* Sidebar widgets */
.artin-side { display: flex; flex-direction: column; gap: 22px; }
.artin-side .artin-card, .artin-main .artin-card { padding: 16px; }
.artin-widget__title { margin: 0 0 12px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--artin-text); }
.artin-widget__title::before { content: ""; width: 4px; height: 18px; background: var(--artin-red); border-radius: 3px; }
.artin-widget__sub { margin: 0 0 14px; font-size: 13px; color: var(--artin-text-dim); }
@media (min-width: 861px) { .artin-ad--sticky { position: sticky; top: 16px; } }

/* Donate — desktop in sidebar; on mobile it jumps below the first ad */
.artin-donate-mobile { display: none; }   /* hidden on desktop */
@media (max-width: 860px) {
	.artin-donate-mobile { display: block; margin-top: var(--artin-gap); }
	.artin-side-donate { display: none; }   /* remove the duplicate from the sidebar on mobile */
}
.artin-donate__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.artin-donate__list li { margin: 0; }
.artin-donate__list img { display: block; width: 100%; height: auto; border-radius: var(--artin-radius-sm); transition: transform .15s ease; }
.artin-donate__list a:hover img { transform: scale(1.04); }

/* Call buttons */
.artin-call__btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.artin-call__btns a { flex: 1 1 auto; }
.artin-call__btns img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Social (linktree) */
.artin-social article, .artin-social .story, .artin-social .shadow { all: unset; }
.artin-social .linktree { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.artin-social .linktree a { display: block; }
.artin-social .linktree img { display: block; width: 100%; height: auto; border-radius: 8px; opacity: .9; transition: transform .15s ease, opacity .15s ease; }
.artin-social .linktree a:hover img { transform: translateY(-2px); opacity: 1; }

/* Text color inside light content areas (base styles.css sets body to #fff for the dark header) */
.artin-main,
.artin-card,
.artin-article,
.artin-article__body,
.artin-article__body .text,
.artin-widget,
.artin-pcard { color: var(--artin-text); }
.artin-article__title { color: var(--artin-text); margin: 0 0 10px; font-size: 26px; font-weight: 800; line-height: 1.3; }
.artin-article__body { font-size: 16px; line-height: 1.8; }
.artin-article__body a { color: var(--artin-red); }
.artin-article__head { padding-bottom: 6px; }
.artin-article__meta { list-style: none; margin: 0 0 6px; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; color: var(--artin-text-dim); font-size: 13px; }
.artin-article__meta li { margin: 0; }
.artin-article__pod { margin: 0 0 16px; }
.artin-article__pod iframe { display: block; width: 100%; border: 0; border-radius: var(--artin-radius-sm); }

/* Comments are disabled site-wide — hide any DLE-injected comment UI */
#dle-comments-list,
#dle-comments-form,
#addcomment,
.addcomments_form,
.comments,
.artin-comments { display: none !important; }

/* Footer */
.artin-footer { margin-top: 10px; padding: 24px 0; border-top: 1px solid var(--artin-line); }

/* Responsive */
@media (max-width: 860px) {
	.artin-layout.has-side { grid-template-columns: 1fr; }
	.artin-ad--sticky { position: static; }
}