/* Emblemat hero (wspólny). Kotwiczy się do kontenera strony, który wszędzie ma
   position: relative. Pointer-events: none — to ozdoba, nie przycisk. */
.tem { --k: #cda474; position: absolute; top: 78px; right: 40px; z-index: 0; width: min( 34vw, 500px ); aspect-ratio: 1; margin: 0; pointer-events: none; }
.tem__poswiata { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient( circle, color-mix( in srgb, var( --k ) 26%, transparent ) 0%, color-mix( in srgb, var( --k ) 9%, transparent ) 38%, transparent 66% ); filter: blur( 6px ); }
.tem__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tem__obw { fill: none; stroke: color-mix( in srgb, #e6c48a 55%, transparent ); stroke-width: 1.2; }
.tem__obw--cienka { stroke: color-mix( in srgb, #e6c48a 26%, transparent ); stroke-width: .8; }
.tem__kreski line { stroke: color-mix( in srgb, #e6c48a 60%, transparent ); stroke-width: 1; }
.tem__lotosy path { fill: color-mix( in srgb, #f9d57a 78%, transparent ); }
@media ( prefers-reduced-motion: no-preference ) {
	.tem__kreski { transform-origin: 200px 200px; animation: tem-obrot 240s linear infinite; }
	@keyframes tem-obrot { to { transform: rotate( 360deg ); } }
}
.tem__glif { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp( 120px, 16vw, 230px ); line-height: 1; color: #f9d57a; text-shadow: 0 0 28px color-mix( in srgb, var( --k ) 70%, transparent ), 0 0 80px color-mix( in srgb, var( --k ) 40%, transparent ); opacity: .92; }
/* `place-items: center` centruje PUDELKO WIERSZA, nie tusz znaku — a tusz w kazdym
   z tych pism lezy gdzie indziej wzgledem linii pisma. Stad ॐ wisialo wyraznie
   nad srodkiem pierscienia. Przesuniecia nizej sa policzone z metryk fontu
   (actualBoundingBox wzgledem srodka pudelka), a nie dobrane na oko. */
.tem__glif.pismo-han { font-family: 'Noto Serif SC', 'Noto Serif JP', 'Noto Serif TC', serif; font-weight: 400; transform: translateY( .02em ); }
.tem__glif.pismo-dev { font-family: 'Noto Serif Devanagari', serif; font-weight: 400; transform: translateY( .27em ); }
.tem__glif.pismo-tyb { font-family: 'Noto Serif Tibetan', 'Microsoft Himalaya', serif; font-weight: 400; transform: translate( -.06em, .615em ); }
.tem__glif.pismo-sym { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; transform: translateY( -.045em ); }
/* Hieroglify: przesuniecie domierzone po wdrozeniu, jak przy pozostalych pismach. */
.tem__glif.pismo-hier { font-family: 'Noto Sans Egyptian Hieroglyphs', 'Segoe UI Historic', serif; font-weight: 400; transform: translateY( -.013em ); }
/* Pisma, dla ktorych krój wczytuje class-tarot-emblemat.php. Bez nich glif
   zalezal od tego, co czytelnik ma zainstalowane. Przesuniecia optyczne
   zmierzone z metryk kroju, nie dobrane na oko. */
.tem__glif.pismo-klin { font-family: 'Noto Sans Cuneiform', 'Segoe UI Historic', serif; font-weight: 400; transform: translateY( -.139em ); }
.tem__glif.pismo-fen  { font-family: 'Noto Sans Phoenician', 'Segoe UI Historic', serif; font-weight: 400; transform: translateY( -.033em ); }
.tem__glif.pismo-pahl { font-family: 'Noto Sans Inscriptional Pahlavi', 'Segoe UI Historic', serif; font-weight: 400; transform: translateY( -.104em ); }
.tem__glif.pismo-ar   { font-family: 'Noto Naskh Arabic', 'Segoe UI', serif; font-weight: 400; transform: translateY( -.17em ); }
.tem__glif.pismo-znak { font-family: 'Noto Sans Symbols 2', serif; font-weight: 400; }
/* Grafika: koło wpisane w wewnętrzny pierścień, miękka krawędź, żeby wyglądała jak
   namalowana na tle, a nie naklejona. Glif schodzi wtedy do roli cienia za obrazem. */
.tem__obraz { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: cover; border-radius: 50%; -webkit-mask-image: radial-gradient( circle, #000 58%, transparent 74% ); mask-image: radial-gradient( circle, #000 58%, transparent 74% ); filter: saturate( .94 ) contrast( 1.04 ); }
.tem.ma-grafike .tem__glif { opacity: .0; }

/* ── Hero musi zmiescic emblemat ────────────────────────────────────────
   Emblemat kotwiczy sie do kontenera strony, nie do hera. Przy krotkim lidzie
   hero konczyl sie wyzej niz pierscien, wiec emblemat schodzil pod pierwszy
   panel i przeswitywal przez jego tlo — a przy najkrotszych lidach krawedz
   panelu przecinala sam znak. Hero dostaje wysokosc rowna zasiegowi emblematu
   (jego `top` plus wysokosc, minus wlasny odstep hera od gory strony).
   Tam, gdzie lid i tak jest dlugi, ta regula nie zmienia niczego. */
.tem ~ [class$="-hero"] { min-height: calc( min( 34vw, 500px ) + 30px ); }
@media ( max-width: 1240px ) { .tem ~ [class$="-hero"] { min-height: calc( min( 30vw, 380px ) + 40px ); } }
/* Ponizej 1020 px emblemat wchodzi w normalny przeplyw i niczego nie przykrywa. */
@media ( max-width: 1020px ) { .tem ~ [class$="-hero"] { min-height: 0; } }

@media ( max-width: 1240px ) { .tem { width: min( 30vw, 380px ); top: 88px; } }
@media ( max-width: 1020px ) {
	.tem { position: static; width: 220px; margin: 18px auto 0; }
	.tem__glif { font-size: 96px; }
}