/*
Theme Name:   Jack The Strider
Theme URI:    https://giacomoberetta.it
Author:       Giacomo Beretta
Description:  Child theme di Twenty Twenty-Five per giacomoberetta.it. Direzione "cinematica": fondo scuro, tramonto autunnale di Gran Burrone, oro e avorio. Tre mondi con identità propria: Jack The Strider (Tolkien), Il Risveglio della Luce, Saga di fantascienza. Più la sezione Warhammer 40k con palette gotica.
Template:     twentytwentyfive
Version:      0.3.1
Requires at least: 6.7
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  jackthestrider
*/

/* ==========================================================================
   Indice
   1.  Variabili e base (grana, selezione, focus)
   2.  Testata in vetro (sticky) e menu
   3.  Fascia del titolo di pagina (tramonto e anelli)
   4.  Lettura: testo degli articoli e delle pagine
   5.  Stili dei blocchi
   6.  Footer con il nome gigante
   7.  Comparsa allo scorrimento
   8.  Mondo "Il Risveglio della Luce"
   9.  Mondo "Saga di fantascienza"
   10. Telefono e movimento ridotto
   11. Home (front-page.html)
   12. Voce singola del Codex
   13. Link fisso a Jack The Strider nelle testate dei mondi
   14. Sezione "Warhammer 40k" (pagina, articoli e archivi della categoria)
   ========================================================================== */

/* 1. Variabili e base ------------------------------------------------------ */

:root {
	--jts-h: 78px; /* altezza della testata */
	--jts-raggio: 22px;
	--jts-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.5c4.6 4.3 6.2 9.6 0 21-6.2-11.4-4.6-16.7 0-21zm-.45 4.2v14.1h.9V5.7z'/%3E%3C/svg%3E");
	--jts-icona-rot: 35deg;
	--jts-font-titoli: var(--wp--preset--font-family--lora);
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Grana leggera da pellicola su tutto il sito */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection {
	background: var(--wp--preset--color--oro-chiaro);
	color: var(--wp--preset--color--bordeaux);
}

:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--oro);
	outline-offset: 3px;
}

:is(h1, h2, h3, h4) {
	font-family: var(--jts-font-titoli);
}

:is(h1, h2, h3) em {
	color: var(--wp--preset--color--oro-chiaro);
	font-weight: 500;
}

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* 2. Testata in vetro ------------------------------------------------------
   Vale per ogni testata del sito, anche nei modelli ereditati da
   Twenty Twenty-Five (articoli, archivi, ricerca). */

.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	border-bottom: 1px solid transparent;
	transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}

/* Diventa vetro smerigliato quando si scorre (classe aggiunta da tema.js) */
.wp-site-blocks > header.is-scorrendo,
body:not(.jts-ha-apertura) .wp-site-blocks > header {
	background: color-mix(in srgb, var(--wp--preset--color--notte) 72%, transparent);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border-color: color-mix(in srgb, var(--wp--preset--color--oro) 20%, transparent);
}

.wp-site-blocks > header > .wp-block-group > .wp-block-group {
	min-height: calc(var(--jts-h) - 1rem);
}

/* Marchio con icona (foglia; cristallo e rombo negli altri mondi) */
.jts-marchio {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.jts-marchio::before {
	content: "";
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	background: linear-gradient(135deg, var(--wp--preset--color--oro-chiaro), var(--wp--preset--color--oro));
	-webkit-mask: var(--jts-icona) center / contain no-repeat;
	mask: var(--jts-icona) center / contain no-repeat;
	transform: rotate(var(--jts-icona-rot));
}

.jts-marchio a {
	color: var(--wp--preset--color--avorio);
	text-decoration: none;
}

.wp-site-blocks > header .wp-block-navigation-item__content {
	position: relative;
	text-decoration: none;
	opacity: 0.85;
	transition: opacity 0.2s;
}

.wp-site-blocks > header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--wp--preset--color--oro);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.wp-site-blocks > header .wp-block-navigation-item__content:hover {
	opacity: 1;
}

.wp-site-blocks > header .wp-block-navigation-item__content:hover::after,
.wp-site-blocks > header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Menu a tutto schermo su telefono */
.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem;
}

.wp-site-blocks > header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--lora);
	font-size: 2rem;
	padding: 0.35rem 0;
}

/* 3. Fascia del titolo di pagina ----------------------------------------- */

.jts-fascia-titolo {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: calc(-1 * var(--jts-h)) !important;
	padding-top: calc(var(--jts-h) + clamp(3.5rem, 9vw, 7rem)) !important;
	background:
		radial-gradient(circle at 70% calc(15% + 170px), transparent 279px, rgba(246, 217, 138, 0.16) 280px, transparent 282px, transparent 389px, rgba(246, 217, 138, 0.08) 390px, transparent 392px),
		var(--wp--preset--gradient--tramonto);
}

body.jts-trilogia .jts-fascia-titolo,
body.jts-fantascienza .jts-fascia-titolo {
	background: var(--wp--preset--gradient--tramonto);
}

/* Sole e anelli concentrici dietro al titolo */
.jts-fascia-titolo::before {
	content: "";
	position: absolute;
	left: 70%;
	top: 15%;
	width: 340px;
	height: 340px;
	margin-left: -170px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, #fff1c4 0%, #f6d98a 22%, rgba(227, 180, 90, 0.5) 42%, rgba(217, 164, 65, 0) 70%);
	animation: jts-pulsa 7s ease-in-out infinite;
}

/* Profilo di montagne in basso */
.jts-fascia-titolo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 45%;
	z-index: -1;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L150 60 L290 130 L450 20 L600 120 L760 40 L920 130 L1090 50 L1250 120 L1440 70 V300 H0Z' fill='%232b100b'/%3E%3Cpath d='M0 200 L220 130 L430 190 L660 110 L900 190 L1140 130 L1440 180 V300 H0Z' fill='%23120605'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.jts-fascia-titolo .wp-block-post-title {
	text-wrap: balance;
}

@keyframes jts-pulsa {
	50% { transform: scale(1.06); opacity: 0.9; }
}

/* 4. Lettura --------------------------------------------------------------- */

.wp-block-post-content > p,
.wp-block-post-content > ul,
.wp-block-post-content > ol {
	font-size: clamp(1.07rem, 1rem + 0.3vw, 1.2rem);
}

.wp-block-post-content > h2 {
	position: relative;
	padding-top: 1.6rem;
}

/* Piccolo filetto dorato sopra ogni titolo di sezione */
.wp-block-post-content > h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 42px;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--oro-chiaro), var(--wp--preset--color--oro));
}

.wp-block-post-content > h2.has-text-align-center::before {
	left: 50%;
	margin-left: -21px;
}

.wp-block-post-content strong {
	color: var(--wp--preset--color--avorio);
}

.wp-block-post-content em {
	color: var(--wp--preset--color--oro-chiaro);
}

.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--oro);
	padding-left: 1.4em;
	color: var(--wp--preset--color--avorio);
}

/* 5. Stili dei blocchi ------------------------------------------------------ */

/* Gruppo: cornice doppia */
.is-style-jts-cornice {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 70%, transparent);
	border-radius: var(--jts-raggio);
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 30%, transparent);
	outline-offset: -8px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Gruppo: vetro (scheda traslucida) */
.is-style-jts-vetro {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 22%, transparent);
	border-radius: var(--jts-raggio);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Gruppo: pergamena chiara, per un box che deve spiccare */
.is-style-jts-pergamena {
	background-color: var(--wp--preset--color--pergamena);
	background-image: radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, 0.55), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(140, 74, 28, 0.1), transparent 60%);
	color: var(--wp--preset--color--inchiostro);
	border-radius: var(--jts-raggio);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.is-style-jts-pergamena :is(h2, h3, h4, strong) {
	color: var(--wp--preset--color--bordeaux);
}

.is-style-jts-pergamena a,
.is-style-jts-pergamena em {
	color: var(--wp--preset--color--ruggine);
}

/* Immagine: sommità ad arco, le finestre di Gran Burrone */
.is-style-jts-arco img {
	border-radius: 999px 999px var(--jts-raggio) var(--jts-raggio);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Separatore con l'icona del mondo al centro */
.wp-block-separator.is-style-jts-foglia {
	border: none;
	height: 22px;
	max-width: 260px;
	margin-inline: auto;
	position: relative;
	opacity: 1;
	color: var(--wp--preset--color--oro);
	background:
		linear-gradient(90deg, transparent, currentColor) left center / calc(50% - 22px) 1px no-repeat,
		linear-gradient(90deg, currentColor, transparent) right center / calc(50% - 22px) 1px no-repeat;
}

.wp-block-separator.is-style-jts-foglia::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--jts-icona) center / contain no-repeat;
	mask: var(--jts-icona) center / contain no-repeat;
	transform: rotate(90deg);
}

/* Paragrafo: occhiello con filetto, stile iscrizione */
.is-style-jts-occhiello {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro);
}

.is-style-jts-occhiello::before {
	content: "";
	width: 34px;
	height: 1px;
	background: currentColor;
	flex: none;
}

.is-style-jts-occhiello.has-text-align-center {
	justify-content: center;
}

/* Bottone: contorno in vetro */
.wp-block-button.is-style-jts-contorno .wp-block-button__link {
	background: rgba(255, 255, 255, 0.05);
	color: var(--wp--preset--color--avorio);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--avorio) 30%, transparent);
	box-shadow: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

/* Pillola YouTube in testata */
.jts-pill {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 18px 9px 10px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--wp--preset--color--oro-chiaro), var(--wp--preset--color--oro));
	color: var(--wp--preset--color--bordeaux) !important;
	font: 600 0.88rem/1 var(--wp--preset--font-family--inter);
	text-decoration: none !important;
	box-shadow: 0 8px 30px -8px rgba(217, 164, 65, 0.7);
	white-space: nowrap;
}

.jts-pill::before {
	content: "";
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--bordeaux) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M9 7l6 4-6 4z' fill='%23F6D98A'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 6. Footer ----------------------------------------------------------------- */

.jts-piede {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 20%, transparent);
	overflow: hidden;
}

.jts-piede a {
	color: var(--wp--preset--color--avorio-testo);
	text-decoration: none;
	opacity: 0.85;
}

.jts-piede a:hover {
	color: var(--wp--preset--color--oro-chiaro);
	opacity: 1;
}

.jts-piede .jts-elenco p {
	margin: 0.4rem 0;
}

/* Il nome gigante, solo contornato */
.jts-nome-gigante {
	font-family: var(--jts-font-titoli) !important;
	font-size: clamp(3rem, 11.5vw, 12rem) !important;
	line-height: 0.85 !important;
	font-weight: 600;
	letter-spacing: -0.04em;
	white-space: nowrap;
	color: transparent !important;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--wp--preset--color--oro-chiaro) 38%, transparent);
	margin-block: 3rem 1.5rem !important;
	user-select: none;
}

/* 7. Comparsa allo scorrimento -------------------------------------------
   tema.js aggiunge .jts-rivela ai blocchi principali e .is-visibile
   quando entrano nello schermo. Senza JavaScript tutto resta visibile. */

.jts-js .jts-rivela {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jts-js .jts-rivela.is-visibile {
	opacity: 1;
	transform: none;
}

/* 8. Mondo "Il Risveglio della Luce" ----------------------------------------
   Palette ricavata dalle copertine: abisso blu notte, petrolio, turchese,
   cielo e l'azzurro del cristallo. Stessi nomi di variabile: tutta l'area
   cambia colore senza toccare i modelli. */

body.jts-trilogia,
.jts-trilogia-blocco,
.jts-mondo--trilogia {
	--wp--preset--color--notte: #081521;           /* abisso */
	--wp--preset--color--bordeaux: #0f2633;        /* notte d'oceano */
	--wp--preset--color--bordeaux-medio: #285363;  /* petrolio */
	--wp--preset--color--oro: #4fc3e8;             /* cristallo */
	--wp--preset--color--oro-acceso: #7fd6f0;
	--wp--preset--color--oro-chiaro: #89cbdc;      /* cielo */
	--wp--preset--color--avorio: #ffffff;
	--wp--preset--color--avorio-testo: #dceef2;    /* ghiaccio */
	--wp--preset--color--attenuato: #8fb0ba;
	--wp--preset--color--ruggine: #285363;
	--wp--preset--color--pergamena: #e3f1f2;
	--wp--preset--color--inchiostro: #081521;
	--wp--preset--color--base: #081521;
	--wp--preset--color--contrast: #dceef2;
	--wp--preset--gradient--oro: linear-gradient(135deg, #a8e6f7 0%, #4fc3e8 100%);
	--wp--preset--gradient--tramonto: radial-gradient(90% 90% at 30% 20%, rgba(79, 195, 232, 0.25), transparent 60%), linear-gradient(160deg, #081521, #0f2633 55%, #285363);
	--jts-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 19 9 12 23 5 9z'/%3E%3C/svg%3E");
	--jts-icona-rot: 0deg;
}

/* Titoli in maiuscolo spaziato, come "RISVEGLIO" in copertina */
body.jts-trilogia :is(h1, h2) {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.04;
}

body.jts-trilogia h3 {
	font-weight: 500;
	letter-spacing: 0.01em;
}

body.jts-trilogia .wp-element-button,
body.jts-trilogia .wp-block-button__link {
	box-shadow: 0 14px 50px -10px rgba(79, 195, 232, 0.8);
}

/* Nella Trilogia la fascia del titolo ha un bagliore di cristallo, non il sole */
body.jts-trilogia .jts-fascia-titolo::before {
	background: radial-gradient(circle, rgba(170, 235, 255, 0.85) 0%, rgba(79, 195, 232, 0.4) 30%, transparent 65%);
	width: 260px;
	height: 260px;
	margin-left: -130px;
}

body.jts-trilogia .jts-fascia-titolo::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath d='M0 170 C240 120 480 210 720 160 S1200 110 1440 170 V300 H0Z' fill='%230f2633'/%3E%3Cpath d='M0 220 C300 180 520 250 760 210 S1180 180 1440 220 V300 H0Z' fill='%23081521'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

/* 9. Mondo "Saga di fantascienza" ------------------------------------------
   Nero dello spazio, ocra e ambra da pianeta desertico, titoli tecnici,
   angoli squadrati con mirini. */

body.jts-fantascienza,
.jts-mondo--fantascienza {
	--wp--preset--color--notte: #06080c;
	--wp--preset--color--bordeaux: #0d1117;
	--wp--preset--color--bordeaux-medio: #1a1f27;
	--wp--preset--color--oro: #f2a541;             /* ambra */
	--wp--preset--color--oro-acceso: #f7bd6a;
	--wp--preset--color--oro-chiaro: #f2d3a0;
	--wp--preset--color--avorio: #f2e6d0;
	--wp--preset--color--avorio-testo: #c3cad2;    /* acciaio */
	--wp--preset--color--attenuato: #7d8792;
	--wp--preset--color--ruggine: #c8792e;         /* spezia */
	--wp--preset--color--base: #06080c;
	--wp--preset--color--contrast: #c3cad2;
	--wp--preset--gradient--oro: linear-gradient(135deg, #f7bd6a 0%, #c8792e 100%);
	--wp--preset--gradient--tramonto: radial-gradient(60% 90% at 80% 20%, rgba(200, 121, 46, 0.45), transparent 60%), #06080c;
	--jts-raggio: 4px;
	--jts-font-titoli: var(--wp--preset--font-family--inter);
	--jts-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.4 7.6H22l-6.2 4.6 2.4 7.6L12 17.2 5.8 21.8l2.4-7.6L2 9.6h7.6z'/%3E%3C/svg%3E");
	--jts-icona-rot: 0deg;
}

body.jts-fantascienza :is(h1, h2, h3) {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	line-height: 1.1;
}

body.jts-fantascienza h1 {
	letter-spacing: 0.08em;
}

body.jts-fantascienza .wp-element-button,
body.jts-fantascienza .wp-block-button__link {
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.85rem;
}

/* Linee da schermo e stelle nella fascia del titolo */
body.jts-fantascienza .jts-fascia-titolo::before {
	left: 78%;
	width: 300px;
	height: 300px;
	margin-left: -150px;
	background: radial-gradient(circle at 32% 30%, #f0b46a, #a5561f 45%, #3a1a08 75%, #120700);
	box-shadow: inset -40px -30px 70px rgba(0, 0, 0, 0.85), 0 0 80px rgba(200, 121, 46, 0.35);
	animation: none;
}

body.jts-fantascienza .jts-fascia-titolo::after {
	height: 100%;
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
		radial-gradient(1px 1px at 10% 20%, #fff, transparent),
		radial-gradient(1px 1px at 30% 70%, #fffb, transparent),
		radial-gradient(1px 1px at 55% 15%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 62% 60%, #fff, transparent),
		radial-gradient(1px 1px at 20% 45%, #fff8, transparent),
		radial-gradient(1px 1px at 45% 85%, #fff, transparent);
}

/* Riquadri con mirini agli angoli al posto della cornice doppia */
body.jts-fantascienza .is-style-jts-cornice {
	border: 1px solid rgba(242, 165, 65, 0.2);
	outline: none;
	background:
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) top left / 22px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) top left / 1px 22px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) top right / 22px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) top right / 1px 22px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) bottom left / 22px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) bottom left / 1px 22px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) bottom right / 22px 1px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) bottom right / 1px 22px no-repeat;
}

/* 10. Telefono e movimento ridotto ----------------------------------------- */

@media (max-width: 781px) {
	:root {
		--jts-h: 68px;
	}

	.jts-pill {
		display: none;
	}

	.jts-fascia-titolo::before {
		left: 86%;
		top: 8%;
		width: 220px;
		height: 220px;
		margin-left: -110px;
		opacity: 0.75;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.jts-js .jts-rivela {
		opacity: 1;
		transform: none;
	}
}


/* 11. Home ------------------------------------------------------------------ */

/* Apertura a tutto schermo con tramonto, montagne e foglie */
.jts-apertura {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: max(680px, 100svh);
	margin-top: calc(-1 * var(--jts-h)) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: calc(var(--jts-h) + 2rem);
	padding-bottom: 4rem;
	background: radial-gradient(110% 80% at 68% 34%, #a64a1a 0%, #5b2010 30%, #260d0a 62%, var(--wp--preset--color--notte) 100%);
}

.jts-apertura__scena {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.jts-apertura__sole {
	position: absolute;
	left: 64%;
	top: 20%;
	width: 360px;
	height: 360px;
	margin-left: -180px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff1c4 0%, #f6d98a 22%, rgba(227, 180, 90, 0.55) 42%, rgba(217, 164, 65, 0) 70%);
	animation: jts-pulsa 6s ease-in-out infinite;
}

.jts-apertura__anelli {
	position: absolute;
	left: 64%;
	top: calc(20% + 180px);
}

.jts-apertura__anelli i {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	border: 1px solid rgba(246, 217, 138, 0.16);
	transform: translate(-50%, -50%);
}

.jts-apertura__anelli i:nth-child(1) { width: 560px; height: 560px; }
.jts-apertura__anelli i:nth-child(2) { width: 760px; height: 760px; border-color: rgba(246, 217, 138, 0.09); }
.jts-apertura__anelli i:nth-child(3) { width: 1000px; height: 1000px; border-color: rgba(246, 217, 138, 0.05); }

.jts-strato {
	position: absolute;
	left: -5%;
	bottom: 0;
	width: 110%;
	will-change: transform;
}

.jts-strato--1 { height: 62%; }
.jts-strato--2 { height: 48%; }
.jts-strato--3 { height: 30%; }

.jts-apertura__nebbia {
	position: absolute;
	inset: auto 0 0;
	height: 40%;
	background: linear-gradient(180deg, transparent, rgba(18, 6, 5, 0.6) 60%, var(--wp--preset--color--notte));
}

.jts-apertura__foglie {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.jts-apertura__foglie i {
	position: absolute;
	top: -40px;
	background: linear-gradient(135deg, var(--wp--preset--color--oro-chiaro), #b8651f);
	-webkit-mask: var(--jts-icona) center / contain no-repeat;
	mask: var(--jts-icona) center / contain no-repeat;
	animation: jts-cade linear infinite;
}

@keyframes jts-cade {
	0% { transform: translate(0, -5vh) rotate(0); }
	25% { transform: translate(40px, 25vh) rotate(120deg); }
	50% { transform: translate(-30px, 55vh) rotate(220deg); }
	75% { transform: translate(50px, 80vh) rotate(320deg); }
	100% { transform: translate(0, 110vh) rotate(420deg); }
}

.jts-apertura__testo {
	position: relative;
	width: 100%;
}

.jts-apertura__titolo {
	margin: 1.4rem 0 1.6rem !important;
	max-width: 11.5ch;
	font-size: clamp(3rem, min(7.6vw, 12.5vh), 7.75rem) !important;
	line-height: 0.92 !important;
	letter-spacing: -0.035em !important;
	animation: jts-sale-tema 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Riflesso di luce che attraversa il corsivo dorato */
.jts-apertura__titolo em {
	font-weight: 500;
	background: linear-gradient(100deg, #f6d98a 0%, #fff3cf 25%, #e3b45a 50%, #f6d98a 75%, #fff3cf 100%);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
	animation: jts-luce 6s linear infinite;
}

@keyframes jts-luce {
	to { background-position: 200% center; }
}

@keyframes jts-sale-tema {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: none; }
}

.jts-apertura__lead {
	max-width: 540px;
	font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	animation: jts-sale-tema 1.1s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.jts-apertura__testo .jts-bottone {
	margin: 1.2rem 0.7rem 0 0;
	animation: jts-sale-tema 1.1s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Nastro scorrevole dei pilastri */
.jts-nastro {
	max-width: none !important;
	border-block: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 20%, transparent);
	padding: 1.4rem 0;
	overflow: hidden;
	white-space: nowrap;
	background: linear-gradient(90deg, var(--wp--preset--color--notte), #1d0907, var(--wp--preset--color--notte));
}

.jts-nastro > div {
	display: inline-flex;
	animation: jts-scorri 40s linear infinite;
}

.jts-nastro span {
	display: inline-flex;
	align-items: center;
	gap: 4rem;
	padding: 0 2rem;
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-style: italic;
	color: var(--wp--preset--color--avorio);
}

.jts-nastro span::after {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--wp--preset--color--oro);
	-webkit-mask: var(--jts-icona) center / contain no-repeat;
	mask: var(--jts-icona) center / contain no-repeat;
	transform: rotate(35deg);
}

.jts-nastro span.o {
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(246, 217, 138, 0.6);
}

@keyframes jts-scorri {
	to { transform: translateX(-50%); }
}

/* Sezioni della home */
.jts-sezione {
	padding-block: clamp(5rem, 10vw, 8rem) 0;
}

.jts-sezione__titolo {
	margin: 1rem 0 3rem !important;
	font-size: clamp(2.4rem, 5vw, 4.5rem) !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
}

/* Tre mondi */
.jts-mondi {
	gap: 20px !important;
}

.jts-mondo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2.1rem !important;
	border-radius: 28px;
	color: var(--wp--preset--color--avorio-testo);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--oro) 28%, transparent);
	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jts-mondo:hover {
	transform: translateY(-8px);
}

.jts-mondo > * {
	margin-block: 0 !important;
}

.jts-mondo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jts-mondo:hover::before {
	transform: scale(1.07);
}

.jts-mondo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, 0.85));
}

.jts-mondo__num {
	position: absolute;
	top: 1.75rem;
	left: 2.1rem;
	font: 600 0.8rem var(--wp--preset--font-family--inter);
	letter-spacing: 0.25em;
	color: var(--wp--preset--color--oro);
}

.jts-mondo__k {
	font: 600 0.72rem var(--wp--preset--font-family--inter);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro);
}

.jts-mondo h3 {
	margin: 0.6rem 0 0.7rem !important;
	font-size: clamp(1.8rem, 2.6vw, 2.5rem) !important;
	line-height: 1.05;
}

.jts-mondo p {
	font-size: 1rem;
	max-width: 34ch;
}

.jts-mondo__vai {
	margin-top: 1.4rem !important;
	font: 600 0.9rem var(--wp--preset--font-family--inter);
}

.jts-mondo__vai a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--avorio);
	text-decoration: none;
}

.jts-mondo__vai a::after {
	content: "→";
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid currentColor;
	transition: background 0.3s, color 0.3s;
}

.jts-mondo:hover .jts-mondo__vai a::after {
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--notte);
	border-color: var(--wp--preset--color--oro);
}

/* Link esteso: tutta la scheda è cliccabile */
.jts-mondo__vai a::before {
	content: "";
	position: absolute;
	inset: 0;
}

.jts-mondo--tolkien::before {
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 620' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23F6D98A' stroke-opacity='.28'%3E%3Cpath d='M80 620 V300 a120 120 0 0 1 240 0 V620'/%3E%3Cpath d='M100 620 V305 a100 100 0 0 1 200 0 V620'/%3E%3C/g%3E%3Cpath d='M100 620 V305 a100 100 0 0 1 200 0 V620Z' fill='%23F6D98A' fill-opacity='.05'/%3E%3C/svg%3E") center / cover no-repeat,
		radial-gradient(70% 50% at 50% 30%, #c0662a, #5b2010 45%, #1a0907 85%);
}

.jts-mondo--trilogia::before {
	background: var(--jts-img-libro, linear-gradient(160deg, #081521, #285363)) center 58% / cover no-repeat;
}

.jts-mondo--trilogia h3 {
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: clamp(1.5rem, 2.1vw, 2rem) !important;
}

.jts-mondo--fantascienza {
	border-radius: 6px;
}

.jts-mondo--fantascienza::before {
	background:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
		radial-gradient(circle at 50% 210px, transparent 0, transparent 114px, rgba(0, 0, 0, 0) 115px),
		radial-gradient(1px 1px at 10% 20%, #fff, transparent),
		radial-gradient(1px 1px at 30% 70%, #fffb, transparent),
		radial-gradient(1px 1px at 55% 15%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent),
		radial-gradient(1px 1px at 90% 30%, #fff9, transparent),
		radial-gradient(60% 50% at 70% 25%, rgba(200, 121, 46, 0.45), transparent 60%),
		#06080c;
}

/* Il pianeta */
.jts-mondo--fantascienza > .jts-mondo__num::after {
	content: "";
	position: absolute;
	left: calc(50% - 2.1rem);
	top: 100px;
	width: 230px;
	height: 230px;
	margin-left: -115px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 30%, #f0b46a, #a5561f 45%, #3a1a08 75%, #120700);
	box-shadow: inset -40px -30px 70px rgba(0, 0, 0, 0.85), 0 0 80px rgba(200, 121, 46, 0.35);
	z-index: -1;
}

.jts-mondo--fantascienza .jts-mondo__num {
	position: static;
	width: 100%;
	height: 0;
	overflow: visible;
	font-size: 0;
}

.jts-mondo--fantascienza h3 {
	font-family: var(--wp--preset--font-family--inter) !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 1.5rem !important;
}

.jts-mondo--fantascienza .jts-mondo__k {
	letter-spacing: 0.4em;
}

.jts-mondo--fantascienza .jts-mondo__vai a::after {
	border-radius: 2px;
}

/* Carosello degli ultimi articoli */
.jts-carosello .wp-block-post-template {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: minmax(340px, 1fr);
	grid-template-columns: none !important;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 0 1rem !important;
	margin: 0 !important;
	scrollbar-width: none;
	list-style: none;
}

.jts-carosello .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

.jts-carosello .wp-block-post {
	scroll-snap-align: start;
	margin: 0 !important;
}

.jts-carosello .wp-block-post-featured-image {
	margin: 0 0 1rem;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--oro) 18%, transparent);
	transition: box-shadow 0.4s;
	background: radial-gradient(90% 120% at 25% 0%, #c0662a, #3a1712 60%, #160806);
}

.jts-carosello .wp-block-post-featured-image img {
	transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.jts-carosello .wp-block-post:hover .wp-block-post-featured-image {
	box-shadow: 0 0 0 1px var(--wp--preset--color--oro), 0 30px 60px -25px rgba(217, 164, 65, 0.5);
}

.jts-carosello .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.jts-carosello .wp-block-post-terms {
	font: 600 0.7rem var(--wp--preset--font-family--inter);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.jts-carosello .wp-block-post-terms a {
	text-decoration: none;
	color: var(--wp--preset--color--oro);
}

.jts-carosello .wp-block-post-title {
	margin: 0.5rem 0 !important;
	font-size: 1.45rem !important;
	line-height: 1.22;
}

.jts-carosello .wp-block-post-title a {
	color: var(--wp--preset--color--avorio);
	text-decoration: none;
}

.jts-carosello .wp-block-post-date {
	color: var(--wp--preset--color--attenuato);
}

/* Frase manifesto, si illumina parola per parola (tema.js) */
.jts-manifesto {
	max-width: 18ch !important;
	margin: clamp(6rem, 12vw, 9rem) auto !important;
	font-size: clamp(2rem, 4.2vw, 3.9rem) !important;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 500;
	color: var(--wp--preset--color--avorio);
}

.jts-manifesto em {
	color: var(--wp--preset--color--oro-chiaro);
}

.jts-js .jts-manifesto .jts-parola {
	opacity: 0.15;
	transition: opacity 0.4s;
}

.jts-js .jts-manifesto .jts-parola.is-accesa {
	opacity: 1;
}

.jts-trilogia-blocco {
	padding-bottom: 3rem;
}

@media (max-width: 781px) {
	.jts-apertura__sole,
	.jts-apertura__anelli {
		left: 88%;
	}

	.jts-apertura__sole {
		top: 7%;
		width: 230px;
		height: 230px;
		margin-left: -115px;
		opacity: 0.75;
	}

	.jts-apertura__anelli {
		top: calc(7% + 115px);
	}

	.jts-mondi {
		grid-template-columns: 1fr !important;
	}

	.jts-mondo {
		min-height: 480px;
	}

	.jts-carosello .wp-block-post-template {
		grid-auto-columns: 85%;
	}
}


/* 12. Voce singola del Codex ---------------------------------------------- */

.jts-codex-estratto {
	max-width: 740px;
	margin: 2.5rem auto 0 !important;
	padding-left: 1rem;
	border-left: 2px solid var(--wp--preset--color--oro);
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
	font-size: 0.95rem;
	color: var(--wp--preset--color--oro-chiaro);
}

.jts-codex-ritorno {
	margin-top: 3rem !important;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Courier New", monospace;
	letter-spacing: 0.1em;
}

.jts-codex-ritorno a {
	text-decoration: none;
}


/* 13. Link fisso a Jack The Strider nelle testate dei mondi -------------- */

.jts-ritorno-home {
	margin: 0;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--inter);
	font-weight: 600;
}

.jts-ritorno-home a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 45%, transparent);
	border-radius: 999px;
	color: var(--wp--preset--color--avorio) !important;
	text-decoration: none;
}

.jts-ritorno-home a::before {
	content: "←";
}

.jts-ritorno-home a:hover {
	background: var(--wp--preset--color--oro);
	color: var(--wp--preset--color--notte) !important;
}

/* Sottomenu del menu principale */
.wp-site-blocks > header .wp-block-navigation__submenu-container {
	min-width: 230px !important;
	padding: 0.5rem !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 25%, transparent) !important;
	border-radius: 14px;
	background: color-mix(in srgb, var(--wp--preset--color--notte) 92%, transparent) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
}

.wp-site-blocks > header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.8rem !important;
	border-radius: 8px;
}

.wp-site-blocks > header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.wp-site-blocks > header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, 0.06);
}

/* Su telefono il ritorno a Jack The Strider sta dentro il pannello del menu */
@media (max-width: 960px) {
	.jts-ritorno-home {
		display: none;
	}
}


/* 14. Sezione "Warhammer 40k" ---------------------------------------------
   Palette gotica: nero canna di fucile, acciaio brunito, ottone e un rosso
   cupo da forgia. Niente loghi né simboli ufficiali: solo un ingranaggio,
   guglie da cattedrale e rivetti. Vale per la pagina con modello
   "Warhammer 40k" e per articoli e archivi della categoria "warhammer". */

body.jts-warhammer {
	--wp--preset--color--notte: #0b0c0e;
	--wp--preset--color--bordeaux: #15171a;          /* canna di fucile */
	--wp--preset--color--bordeaux-medio: #25282c;    /* acciaio brunito */
	--wp--preset--color--oro: #b8924a;               /* ottone */
	--wp--preset--color--oro-acceso: #d4ab5f;
	--wp--preset--color--oro-chiaro: #e3c98f;        /* ottone lucidato */
	--wp--preset--color--avorio: #ece3cf;            /* osso */
	--wp--preset--color--avorio-testo: #d2cbbd;
	--wp--preset--color--attenuato: #8e897f;
	--wp--preset--color--ruggine: #8c1d14;           /* rosso cupo */
	--wp--preset--color--pergamena: #e6dcc3;
	--wp--preset--color--inchiostro: #121314;
	--wp--preset--color--base: #0b0c0e;
	--wp--preset--color--contrast: #d2cbbd;
	--wp--preset--gradient--oro: linear-gradient(135deg, #e3c98f 0%, #b8924a 55%, #8a6a2f 100%);
	--wp--preset--gradient--tramonto: radial-gradient(70% 80% at 50% 0%, rgba(140, 29, 20, 0.45), transparent 60%), linear-gradient(180deg, #15171a, #0b0c0e);
	--jts-raggio: 6px;
	--jts-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.3 1h3.4l.5 2.9 1.9.8 2.4-1.7 2.4 2.4-1.7 2.4.8 1.9 2.9.5v3.4l-2.9.5-.8 1.9 1.7 2.4-2.4 2.4-2.4-1.7-1.9.8-.5 2.9h-3.4l-.5-2.9-1.9-.8-2.4 1.7-2.4-2.4 1.7-2.4-.8-1.9L1 13.7v-3.4l2.9-.5.8-1.9L3 5.5 5.4 3.1l2.4 1.7 1.9-.8zM12 8a4 4 0 100 8 4 4 0 000-8z'/%3E%3C/svg%3E");
	--jts-icona-rot: 0deg;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 120px),
		radial-gradient(120% 60% at 50% 100%, rgba(140, 29, 20, 0.08), transparent 70%);
}

body.jts-warhammer :is(h1, h2) {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	line-height: 1.05;
}

body.jts-warhammer h1 {
	letter-spacing: 0.06em;
}

body.jts-warhammer h3 {
	letter-spacing: 0.02em;
}

/* Filetto d'ottone sotto i titoli di sezione, con un rivetto al centro */
body.jts-warhammer .wp-block-post-content > h2::after {
	content: "";
	display: block;
	width: 120px;
	height: 9px;
	margin-top: 0.9rem;
	background:
		radial-gradient(circle, var(--wp--preset--color--oro) 0 3px, transparent 3.5px) center / 9px 9px no-repeat,
		linear-gradient(var(--wp--preset--color--oro), var(--wp--preset--color--oro)) left center / 100% 1px no-repeat;
	opacity: 0.8;
}

body.jts-warhammer .wp-element-button,
body.jts-warhammer .wp-block-button__link,
body.jts-warhammer .jts-bottone {
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
	box-shadow: 0 14px 40px -14px rgba(184, 146, 74, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Fascia del titolo: bagliore di forgia e guglie da cattedrale gotica */
body.jts-warhammer .jts-fascia-titolo::before {
	left: 50%;
	top: -10%;
	width: 520px;
	height: 520px;
	margin-left: -260px;
	background: radial-gradient(circle, rgba(196, 64, 32, 0.55) 0%, rgba(140, 29, 20, 0.28) 32%, transparent 66%);
	box-shadow: none;
	animation: jts-forgia 6s ease-in-out infinite alternate;
}

body.jts-warhammer .jts-fascia-titolo::after {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath fill='%2315171a' d='M0 300V210h40v-30l14-60 14 60v30h30v-55l10-20 10 20v55h40v-80l18-90 18 90v80h36v-40l10-18 10 18v40h44v-110l22-100 22 100v110h40v-60l12-26 12 26v60h50v-35l8-14 8 14v35h46v-95l20-85 20 85v95h38v-48l11-22 11 22v48h52v-130l26-110 26 110v130h44v-62l13-28 13 28v62h40v-38l9-16 9 16v38h48v-90l20-80 20 80v90h36v-50l11-22 11 22v50h46v-72l16-60 16 60v72h42v-34l9-16 9 16v34h40v-60l14-30 14 30v60h34V300z'/%3E%3Cpath fill='%230b0c0e' d='M0 300v-40h1440v40z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

@keyframes jts-forgia {
	from { opacity: 0.75; transform: scale(0.96); }
	to { opacity: 1; transform: scale(1.04); }
}

/* Riquadri: al posto della cornice doppia, piastra d'acciaio con rivetti */
body.jts-warhammer .is-style-jts-cornice {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--oro) 40%, transparent);
	outline: none;
	background:
		radial-gradient(circle at 12px 12px, var(--wp--preset--color--oro) 0 2.5px, transparent 3px),
		radial-gradient(circle at calc(100% - 12px) 12px, var(--wp--preset--color--oro) 0 2.5px, transparent 3px),
		radial-gradient(circle at 12px calc(100% - 12px), var(--wp--preset--color--oro) 0 2.5px, transparent 3px),
		radial-gradient(circle at calc(100% - 12px) calc(100% - 12px), var(--wp--preset--color--oro) 0 2.5px, transparent 3px),
		linear-gradient(180deg, #1b1e22, #121416);
}

/* Tabelle (per esempio "Dalla Terra di Mezzo al 41° millennio") */
body.jts-warhammer .wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--oro);
}

body.jts-warhammer .wp-block-table th {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--oro-chiaro);
}

body.jts-warhammer .wp-block-table td:first-child {
	color: var(--wp--preset--color--avorio);
	font-weight: 600;
}

body.jts-warhammer .wp-block-table table {
	table-layout: auto;
}

body.jts-warhammer .wp-block-table td:first-child,
body.jts-warhammer .wp-block-table th:first-child {
	width: 18%;
}

body.jts-warhammer .wp-block-table td:nth-child(2),
body.jts-warhammer .wp-block-table th:nth-child(2) {
	width: 24%;
}

@media (max-width: 640px) {
	body.jts-warhammer .wp-block-table {
		overflow-x: auto;
	}

	body.jts-warhammer .wp-block-table table {
		min-width: 560px;
	}
}


/* 15. Pagina episodio -------------------------------------------------------
   Titolo un po' più piccolo che nelle pagine (i titoli dei video sono lunghi)
   e il sole spostato a destra per non coprire il testo. */

body.jts-episodio .jts-ep-titolo {
	max-width: 22ch;
	margin-left: 0 !important;
	font-size: clamp(2.2rem, 5.2vw, 4rem) !important;
	line-height: 1.02;
}

body.jts-episodio .jts-fascia-titolo::before {
	left: 84%;
	width: 260px;
	height: 260px;
	margin-left: -130px;
}

body.jts-episodio .wp-block-post-content:empty {
	display: none;
}