/* Koło zodiaku na stronie horoskopu — 1:1 z mockupu.
 *
 * Panel w złotej podwójnej ramie z narożnymi ślimacznicami, na mgławicy
 * (`winieta-mglawica.jpg` — nasza własna grafika). Po lewej tarcza dwunastu
 * medalionów, po prawej karta z hasłem, na dole nota o źródłach.
 *
 * Cztery decyzje warte zapamiętania:
 *
 * 1. Barwy idą ze zmiennych `#tsk-horoskop`. Panel ma stać w jednym rzędzie
 *    z pozostałymi i nie może krzyczeć złotem mocniej niż one.
 *
 * 2. Glify obracają się PRZECIWNIE do pierścienia — inaczej na dole stałyby
 *    na głowie. Robi to druga animacja CSS o tym samym czasie, a nie skrypt
 *    liczący klatki; obie startują razem i chodzą po stronie kompozytora.
 *
 * 3. Ślimacznice i gwiazdy to SVG w `background-image` (data URI). Bez
 *    dodatkowych plików i bez zapytań — a że są jednokolorowe, wystarczy je
 *    obrócić do czterech narożników.
 *
 * 4. Promienie, romby i okręgi tarczy rysuje skrypt jednym SVG w układzie
 *    0–100. Siedzi w pierścieniu, więc kręci się razem z medalionami.
 */

#tsk-horoskop .tsk-kolo {
	--r:         clamp( 6.6rem, 19vw, 11.4rem );  /* promień, na którym siedzą medaliony */
	--znak:      3.4rem;
	--scena:     calc( var( --r ) * 2 + var( --znak ) );
	--zl:        rgba( 232, 201, 138, 1 );
	--zl-cichy:  rgba( 232, 201, 138, .55 );
	--zl-slaby:  rgba( 232, 201, 138, .28 );
	--mgla:      url( '/wp-content/uploads/tarot-kompat/horoskop/gfx/tlo-kolo.jpg' );
	--mgla-oko:  url( '/wp-content/uploads/tarot-kompat/horoskop/gfx/tlo-oko.jpg' );

	position: relative;
	padding: 40px 42px 26px;
	border: 1px solid var( --zl-slaby );
	border-radius: 6px;
	background:
		linear-gradient( rgba( 4, 3, 20, .3 ), rgba( 4, 3, 20, .55 ) ),
		var( --mgla ) center / cover no-repeat,
		var( --tlo-panel );
	overflow: hidden;
}

/* Druga, wewnętrzna linia ramy. */
#tsk-horoskop .tsk-kolo::before {
	content: '';
	position: absolute;
	inset: 9px;
	border: 1px solid rgba( 232, 201, 138, .16 );
	border-radius: 3px;
	pointer-events: none;
}

/* ──────────────────────────  ornamenty ramy  ────────────────────────── */

/* Ślimacznica narożna. Jeden rysunek, cztery obroty. */
#tsk-horoskop .tsk-kolo__rog {
	position: absolute;
	width: 74px;
	height: 74px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e8c98a' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M4 36C4 18 18 4 36 4'/%3E%3Cpath d='M4 47C4 23 23 4 47 4' opacity='.4'/%3E%3Cpath d='M12 36C12 22 22 12 36 12'/%3E%3Cpath d='M36 12c7 0 10 4 8 8s-10 4-10-1c0-3 3-4 5-2'/%3E%3Cpath d='M12 36c0 7 4 10 8 8s4-10-1-10c-3 0-4 3-2 5'/%3E%3C/g%3E%3Cpath d='M31 6l1.8 1.8L31 9.6l-1.8-1.8z' fill='%23e8c98a'/%3E%3C/svg%3E" ) center / contain no-repeat;
	opacity: .8;
	pointer-events: none;
}

#tsk-horoskop .tsk-kolo__rog--lg { top: 5px; left: 5px; }
#tsk-horoskop .tsk-kolo__rog--pg { top: 5px; right: 5px; transform: scaleX( -1 ); }
#tsk-horoskop .tsk-kolo__rog--ld { bottom: 5px; left: 5px; transform: scaleY( -1 ); }
#tsk-horoskop .tsk-kolo__rog--pd { bottom: 5px; right: 5px; transform: scale( -1 ); }

/* Gwiazdy na osi pionowej — siedzą na linii ramy i ją przełamują. */
#tsk-horoskop .tsk-kolo__gwiazda {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
	padding: 0 12px;
	font-size: 15px;
	line-height: 1;
	color: var( --zl );
	text-shadow: 0 0 12px rgba( 232, 201, 138, .55 );
	pointer-events: none;
}

#tsk-horoskop .tsk-kolo__gwiazda--gora { top: 2px; }
#tsk-horoskop .tsk-kolo__gwiazda--dol  { bottom: 2px; }

/* Kreski po bokach gwiazdy — jak w mockupie. */
#tsk-horoskop .tsk-kolo__gwiazda::before,
#tsk-horoskop .tsk-kolo__gwiazda::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 46px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 232, 201, 138, .5 ) );
}

#tsk-horoskop .tsk-kolo__gwiazda::before { right: 100%; }
#tsk-horoskop .tsk-kolo__gwiazda::after  { left: 100%; transform: scaleX( -1 ); }

/* ────────────────────────────  układ  ───────────────────────────── */

#tsk-horoskop .tsk-kolo__wnetrze {
	position: relative;
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	align-items: center;
	gap: clamp( 24px, 4vw, 56px );
	padding: 14px 10px 6px;
}

/* ─────────────────────────────  tarcza  ─────────────────────────────── */

#tsk-horoskop .tsk-kolo__scena {
	position: relative;
	width: var( --scena );
	height: var( --scena );
	justify-self: center;
}

#tsk-horoskop .tsk-kolo__pierscien {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	animation: tskKoloObrot 96s linear infinite;
}

#tsk-horoskop .tsk-kolo__rysunek {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

@keyframes tskKoloObrot {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( 360deg ); }
}

@keyframes tskKoloPrzeciw {
	from { transform: rotate( 0deg ); }
	to   { transform: rotate( -360deg ); }
}

/* ──────────────────────────  medaliony  ─────────────────────────── */

#tsk-horoskop .tsk-kolo__znak {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var( --znak );
	height: var( --znak );
	margin: calc( var( --znak ) / -2 ) 0 0 calc( var( --znak ) / -2 );
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba( 232, 201, 138, .42 );
	border-radius: 50%;
	background: radial-gradient( circle at 50% 40%, rgba( 26, 18, 56, .95 ), rgba( 8, 6, 24, .95 ) );
	color: var( --zl );
	cursor: pointer;
	transition: border-color .25s, box-shadow .25s, color .25s, background .25s;
}

#tsk-horoskop .tsk-kolo__glif {
	display: block;
	font-family: var( --serif );
	font-size: 1.5rem;
	line-height: 1;
	animation: tskKoloPrzeciw 96s linear infinite;
}

#tsk-horoskop .tsk-kolo__znak:hover,
#tsk-horoskop .tsk-kolo__znak:focus-visible {
	outline: none;
	border-color: rgba( 232, 201, 138, .85 );
	box-shadow: 0 0 18px rgba( 232, 201, 138, .3 );
	color: #fff2d0;
}

/* Wybrany medalion: fiolet, jasne złoto i mocna poświata — jak w mockupie. */
#tsk-horoskop .tsk-kolo__znak[ aria-pressed='true' ] {
	border-color: #f6e3ac;
	background: radial-gradient( circle at 50% 40%, rgba( 96, 62, 186, .95 ), rgba( 52, 30, 122, .95 ) );
	box-shadow:
		0 0 0 1px rgba( 246, 227, 172, .5 ),
		0 0 26px rgba( 232, 201, 138, .55 ),
		0 0 60px rgba( 140, 88, 240, .45 );
	color: #fff6da;
}

/* Człowiek czyta — tarcza stoi. Dotyczy obu animacji naraz, więc glify nie
   rozjeżdżają się względem pierścienia. */
#tsk-horoskop .tsk-kolo__scena:hover .tsk-kolo__pierscien,
#tsk-horoskop .tsk-kolo__scena:hover .tsk-kolo__glif,
#tsk-horoskop .tsk-kolo__scena:focus-within .tsk-kolo__pierscien,
#tsk-horoskop .tsk-kolo__scena:focus-within .tsk-kolo__glif {
	animation-play-state: paused;
}

/* Po wyborze znaku pierścień ustawia się kątem — animacja ustępuje miejsca
   jawnemu obrotowi, a glify odrabiają go dokładnie tak samo. */
#tsk-horoskop .tsk-kolo.wybrano .tsk-kolo__pierscien {
	animation: none;
	transform: rotate( var( --kat, 0deg ) );
	transition: transform .8s cubic-bezier( .22, 1, .36, 1 );
}

#tsk-horoskop .tsk-kolo.wybrano .tsk-kolo__glif {
	animation: none;
	transform: rotate( calc( -1 * var( --kat, 0deg ) ) );
	transition: transform .8s cubic-bezier( .22, 1, .36, 1 );
}

/* ─────────────────────────────  grot  ──────────────────────────────── */

/* Stoi nieruchomo tuż nad obwodem: to pod niego jedzie wybrany medalion. */
#tsk-horoskop .tsk-kolo__wskaznik {
	position: absolute;
	top: calc( 50% - var( --r ) - var( --znak ) / 2 - 11px );
	left: 50%;
	width: 13px;
	height: 10px;
	margin-left: -6.5px;
	background: var( --zl );
	clip-path: polygon( 50% 100%, 0 0, 100% 0 );
	opacity: 0;
	transition: opacity .4s;
	pointer-events: none;
	z-index: 3;
}

#tsk-horoskop .tsk-kolo.wybrano .tsk-kolo__wskaznik { opacity: 1; }

/* ───────────────────────────  tarcza środkowa  ──────────────────────── */

#tsk-horoskop .tsk-kolo__oko {
	position: absolute;
	inset: 29%;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba( 232, 201, 138, .2 );
	background:
		radial-gradient( circle at 50% 45%, rgba( 62, 38, 132, .45 ), rgba( 10, 7, 32, .88 ) 78% ),
		var( --mgla-oko ) center / cover no-repeat;
	box-shadow: inset 0 0 40px rgba( 8, 5, 26, .8 );
	pointer-events: none;
	z-index: 2;
}

#tsk-horoskop .tsk-kolo__oko-glif {
	font-family: var( --serif );
	font-size: clamp( 2.4rem, 6vw, 3.6rem );
	line-height: 1;
	color: var( --zl );
	text-shadow: 0 0 22px rgba( 232, 201, 138, .45 );
	transition: color .3s;
}

#tsk-horoskop .tsk-kolo:not( .wybrano ) .tsk-kolo__oko-glif {
	color: rgba( 232, 201, 138, .5 );
	font-size: 2rem;
}

/* ──────────────────────────  karta z hasłem  ────────────────────────── */

#tsk-horoskop .tsk-kolo__czytnik {
	min-width: 0;
	padding: 30px 34px 32px;
	border: 1px solid rgba( 232, 201, 138, .22 );
	border-radius: 6px;
	background: rgba( 6, 4, 24, .62 );
	text-align: center;
}

#tsk-horoskop .tsk-kolo__nad {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var( --zl-cichy );
}

#tsk-horoskop .tsk-kolo__nad i { font-style: normal; font-size: 9px; }

#tsk-horoskop .tsk-kolo__tytul {
	margin: 0 0 14px;
	font-family: var( --serif );
	font-weight: 500;
	font-size: clamp( 1.6rem, 3.2vw, 2.35rem );
	letter-spacing: .07em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var( --zl );
}

/* Kreska z gwiazdą na środku — powtórzenie ornamentu ramy. */
#tsk-horoskop .tsk-kolo__kreska {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 20px;
	color: var( --zl-cichy );
}

#tsk-horoskop .tsk-kolo__kreska::before,
#tsk-horoskop .tsk-kolo__kreska::after {
	content: '';
	flex: 0 1 88px;
	height: 1px;
	background: linear-gradient( 90deg, transparent, rgba( 232, 201, 138, .45 ), transparent );
}

#tsk-horoskop .tsk-kolo__kreska i { font-style: normal; font-size: 10px; }

#tsk-horoskop .tsk-kolo__lede {
	margin: 0 0 24px;
	font-family: var( --serif );
	font-size: 16px;
	line-height: 1.75;
	color: var( --tekst-mocny );
	text-align: left;
}

/* Wybrany znak — pionowa złota kreska z gwiazdką u góry, jak w mockupie. */
#tsk-horoskop .tsk-kolo__wybor {
	position: relative;
	margin: 0 0 26px;
	padding-left: 26px;
	min-height: 5.2em;
	text-align: left;
}

#tsk-horoskop .tsk-kolo__wybor::before {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 4px;
	left: 6px;
	width: 1px;
	background: linear-gradient( rgba( 232, 201, 138, .7 ), rgba( 232, 201, 138, 0 ) );
}

#tsk-horoskop .tsk-kolo__wybor::after {
	content: '✦';
	position: absolute;
	top: -4px;
	left: 0;
	font-size: 11px;
	line-height: 1;
	color: var( --zl );
}

#tsk-horoskop .tsk-kolo__nazwa {
	margin: 0 0 6px;
	font-family: var( --serif );
	font-weight: 400;
	font-size: clamp( 1.5rem, 3vw, 2.05rem );
	line-height: 1.1;
	color: var( --zl );
}

#tsk-horoskop .tsk-kolo__miara {
	margin: 0 0 10px;
	font-family: var( --serif );
	font-size: 16px;
	line-height: 1.7;
	color: var( --tekst-mocny );
}

/* Motto miesiąca — jedno zdanie, złotem, nad właściwym tekstem. */
#tsk-horoskop .tsk-kolo__motto {
	margin: 0 0 10px;
	font-family: var( --serif );
	font-size: 17px;
	font-style: italic;
	line-height: 1.6;
	color: var( --zloto-cieply );
}

/* Sam horoskop bywa dłuższy niż tarcza obok — dostaje własne przewijanie,
   żeby panel nie rósł w nieskończoność przy jednym znaku. */
#tsk-horoskop .tsk-kolo__tekst {
	margin: 0;
	max-height: 11.5em;
	overflow-y: auto;
	padding-right: 10px;
	font-family: var( --serif );
	font-size: 15.5px;
	line-height: 1.75;
	color: var( --tekst-mocny );
	scrollbar-width: thin;
	scrollbar-color: rgba( 232, 201, 138, .35 ) transparent;
}

#tsk-horoskop .tsk-kolo__tekst::-webkit-scrollbar { width: 4px; }
#tsk-horoskop .tsk-kolo__tekst::-webkit-scrollbar-thumb {
	background: rgba( 232, 201, 138, .35 );
	border-radius: 4px;
}

/* Zastrzeżenie: co to jest, a czym nie jest. Musi być widoczne od razu,
   nie schowane pod „więcej". */
#tsk-horoskop .tsk-kolo__zastrzezenie {
	margin: 14px 0 0;
	font-size: 11.5px;
	line-height: 1.65;
	color: var( --tekst-slaby );
}

#tsk-horoskop .tsk-kolo__laduje {
	margin: 0;
	font-family: var( --serif );
	font-size: 15.5px;
	font-style: italic;
	color: var( --zloto-etyk );
}

#tsk-horoskop .tsk-kolo__wiecej {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-width: 16rem;
	padding: 13px 30px;
	border: 1px solid rgba( 232, 201, 138, .55 );
	border-radius: 9999px;
	background: linear-gradient( rgba( 46, 26, 98, .75 ), rgba( 26, 14, 62, .75 ) );
	color: var( --zl );
	font-family: var( --sans );
	font-size: 12.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	cursor: pointer;
	box-shadow: 0 0 22px rgba( 140, 88, 240, .22 );
	transition: border-color .25s, box-shadow .25s, color .25s;
}

#tsk-horoskop .tsk-kolo__wiecej i { font-style: normal; font-size: 10px; }

#tsk-horoskop .tsk-kolo__wiecej:hover,
#tsk-horoskop .tsk-kolo__wiecej:focus-visible {
	outline: none;
	border-color: #f6e3ac;
	box-shadow: 0 0 28px rgba( 232, 201, 138, .35 );
	color: #fff6da;
}

#tsk-horoskop .tsk-kolo__wiecej[ disabled ] {
	opacity: .45;
	cursor: default;
	box-shadow: none;
}

/* ──────────────────────────  nota o źródłach  ───────────────────────── */

/* Źródło jest obowiązkowe: cytujemy wyłącznie teksty z domeny publicznej
   i zawsze mówimy, z której księgi pochodzą. */
#tsk-horoskop .tsk-kolo__nota {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba( 232, 201, 138, .14 );
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1.7;
	color: rgba( 232, 201, 138, .42 );
	text-align: center;
}

#tsk-horoskop .tsk-kolo__nota i { font-style: normal; font-size: 8px; }

/* ──────────────────────────────  wąsko  ─────────────────────────────── */

@media ( max-width: 980px ) {
	#tsk-horoskop .tsk-kolo { padding: 34px 22px 22px; }

	#tsk-horoskop .tsk-kolo__wnetrze {
		grid-template-columns: minmax( 0, 1fr );
		gap: 28px;
		justify-items: center;
	}

	#tsk-horoskop .tsk-kolo__czytnik { width: min( 100%, 30rem ); }
	#tsk-horoskop .tsk-kolo__rog { width: 44px; height: 44px; }
}

@media ( max-width: 560px ) {
	#tsk-horoskop .tsk-kolo {
		--znak: 2.7rem;
		--r: clamp( 5.2rem, 31vw, 7.2rem );
		padding: 30px 14px 20px;
	}

	#tsk-horoskop .tsk-kolo__glif { font-size: 1.2rem; }
	#tsk-horoskop .tsk-kolo__czytnik { padding: 24px 18px 26px; }
	#tsk-horoskop .tsk-kolo__gwiazda::before,
	#tsk-horoskop .tsk-kolo__gwiazda::after { width: 26px; }
	#tsk-horoskop .tsk-kolo__nota { letter-spacing: .12em; }
}

@media ( prefers-reduced-motion: reduce ) {
	#tsk-horoskop .tsk-kolo__pierscien,
	#tsk-horoskop .tsk-kolo__glif { animation: none; }

	#tsk-horoskop .tsk-kolo.wybrano .tsk-kolo__pierscien,
	#tsk-horoskop .tsk-kolo.wybrano .tsk-kolo__glif { transition: none; }
}

/* ─────────────────────────  hasło w oknie  ──────────────────────────── */

#tsk-horoskop .tsk-haslo__esencja {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.8;
	color: var( --tekst-mocny );
}

#tsk-horoskop .tsk-haslo__cytat {
	margin: 0;
	padding: 14px 18px;
	border-left: 2px solid rgba( 232, 201, 138, .5 );
	background: rgba( 70, 38, 138, .16 );
	border-radius: 0 10px 10px 0;
}

#tsk-horoskop .tsk-haslo__cytat p {
	margin: 0 0 8px;
	font-family: var( --serif );
	font-size: 17px;
	font-style: italic;
	line-height: 1.7;
	color: var( --krem );
}

#tsk-horoskop .tsk-haslo__zrodlo {
	display: block;
	font-family: var( --sans );
	font-size: 11.5px;
	font-style: normal;
	letter-spacing: .08em;
	line-height: 1.6;
	color: var( --zloto-etyk );
}

/* ────────────────  emblemat i kołowrotek w oknie  ──────────────── */

/* Konstelacja na górze okna. Obrazek jest jasny u dołu, więc wygaszamy go
   w tło panelu — inaczej kończyłby się twardą krawędzią nad nazwą znaku. */
#tsk-horoskop .tsk-h-hero {
	position: relative;
	margin: -6px -6px 18px;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
}

#tsk-horoskop .tsk-h-hero img {
	display: block;
	width: 100%;
	height: clamp( 150px, 26vh, 230px );
	object-fit: cover;
	object-position: center 42%;
}

#tsk-horoskop .tsk-h-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 7, 5, 24, .1 ) 40%, rgba( 7, 5, 24, .95 ) 100% );
	pointer-events: none;
}

/* Kołowrotek: złoty pierścień z przerwą, obok zmieniające się zdanie. */
#tsk-horoskop .tsk-kolowrotek {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 6px 0 4px;
}

#tsk-horoskop .tsk-kolowrotek__tarcza {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid rgba( 232, 201, 138, .22 );
	border-top-color: var( --zloto );
	border-right-color: rgba( 232, 201, 138, .6 );
	animation: tskKolowrotek 1.1s linear infinite;
}

@keyframes tskKolowrotek {
	to { transform: rotate( 360deg ); }
}

#tsk-horoskop .tsk-kolowrotek__slowa {
	margin: 0;
	font-family: var( --serif );
	font-size: 16px;
	font-style: italic;
	line-height: 1.6;
	color: var( --zloto-etyk );
}

@media ( prefers-reduced-motion: reduce ) {
	#tsk-horoskop .tsk-kolowrotek__tarcza { animation-duration: 3s; }
}

/* ─────────────────  pełne czytanie w oknie  ─────────────────── */

#tsk-horoskop .tsk-h-motto {
	margin: 0 0 16px;
	font-family: var( --serif );
	font-size: 19px;
	font-style: italic;
	line-height: 1.6;
	color: var( --zloto-cieply );
}

#tsk-horoskop .tsk-h-wstep {
	margin: 0 0 20px;
	font-family: var( --serif );
	font-size: 16.5px;
	line-height: 1.8;
	color: var( --tekst-mocny );
}

#tsk-horoskop .tsk-h-obszary {
	margin: 0 0 22px;
	padding: 16px 20px;
	border-left: 2px solid rgba( 232, 201, 138, .4 );
	border-radius: 0 10px 10px 0;
	background: rgba( 70, 38, 138, .14 );
}

#tsk-horoskop .tsk-h-obszar {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.75;
	color: var( --tekst-mocny );
}

#tsk-horoskop .tsk-h-obszar:last-child { margin-bottom: 0; }

#tsk-horoskop .tsk-h-obszar b {
	font-weight: 400;
	color: var( --zloto-cieply );
}

#tsk-horoskop .tsk-h-nad {
	margin: 22px 0 12px;
	padding-top: 18px;
	border-top: 1px solid rgba( 232, 201, 138, .16 );
	font-size: 11px;
	letter-spacing: .26em;
	color: var( --zloto-etyk );
}

#tsk-horoskop .tsk-h-akapit {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.8;
	color: var( --tekst-mocny );
}

#tsk-horoskop .tsk-h-rada {
	margin: 18px 0 0;
	font-family: var( --serif );
	font-size: 16px;
	font-style: italic;
	line-height: 1.7;
	color: var( --lawenda );
}

/* Nagłówek działu w bloku ksiąg nie potrzebuje drugiej kreski nad sobą. */
#tsk-horoskop .tsk-haslo__skrot .tsk-h-nad {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ───────────────────  miesiąc w skrócie (w oknie)  ─────────────────── */

#tsk-horoskop .tsk-haslo__skrot {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid rgba( 232, 201, 138, .16 );
}

#tsk-horoskop .tsk-haslo__nad {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: .26em;
	color: var( --zloto-etyk );
}

#tsk-horoskop .tsk-haslo__obszar {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.7;
	color: var( --tekst-mocny );
}

#tsk-horoskop .tsk-haslo__obszar b {
	font-weight: 400;
	color: var( --zloto-cieply );
}

/* Selektor musi być mocniejszy niż reguła dla akapitów cytatu wyżej —
   inaczej oryginał dostawał krój i rozmiar polskiego przekładu. */
#tsk-horoskop .tsk-haslo__cytat p.tsk-haslo__oryginal {
	margin: 12px 0 0;
	font-family: var( --sans );
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.65;
	color: var( --tekst-slaby );
}