/* ==========================================================================
   Dark refresh layer: black pages, the theme font (lightest cuts) for display type and UI,
   Helvetica for reading. Loaded after style.css; remove its enqueue in functions.php to revert.
   ========================================================================== */

/* the theme font: one family, nine weights (woff2). Title/Display keep the old look via fixed cuts. */
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/efd31f1820.woff2) format('woff2'); font-weight: 100; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/db7e376140.woff2) format('woff2'); font-weight: 200; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/34404aa073.woff2) format('woff2'); font-weight: 300; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/8afc67ab46.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/08dcc6659e.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/283e0a2610.woff2) format('woff2'); font-weight: 600; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/ae41f3d080.woff2) format('woff2'); font-weight: 700; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/8acd4db6ec.woff2) format('woff2'); font-weight: 800; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42'; src: url(../fonts/fb7bab9/cadf599071.woff2) format('woff2'); font-weight: 900; font-style: normal; font-display: swap }
@font-face { font-family: 'fab71633f42t'; src: url(../fonts/fb7bab9/8afc67ab46.woff2) format('woff2'); font-display: swap }
@font-face { font-family: 'fab71633f42d'; src: url(../fonts/fb7bab9/08dcc6659e.woff2) format('woff2'); font-display: swap }

/* Legacy font names used throughout style.css resolve to the new families (no Google Fonts). */
@font-face { font-family: 'Montserrat'; src: url(../fonts/fb7bab9/8afc67ab46.woff2) format('woff2'); font-weight: 100 400; font-display: swap }
@font-face { font-family: 'Montserrat'; src: url(../fonts/fb7bab9/08dcc6659e.woff2) format('woff2'); font-weight: 500 900; font-display: swap }
@font-face { font-family: 'Allerta'; src: url(../fonts/fb7bab9/8afc67ab46.woff2) format('woff2'); font-display: swap }
@font-face { font-family: 'Open Sans'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Helvetica'), local('Arial'), local('Liberation Sans'); font-weight: 100 600 }
@font-face { font-family: 'Open Sans'; src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'), local('Helvetica Bold'), local('Helvetica-Bold'), local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'); font-weight: 700 900 }

:root {
	--bg: #000;
	--surface: #0c0c0c;
	--line: #262626;
	--head: #fff;
	--text: #cdcdcd;
	--muted: #8a8a8a;
	--bar: 64px;
	--mono: 'fab71633f42', ui-monospace, Menlo, Consolas, monospace;
	--title: 'fab71633f42t', 'fab71633f42', ui-monospace, Menlo, Consolas, monospace;
	--display: 'fab71633f42d', 'fab71633f42t', ui-monospace, Menlo, Consolas, monospace;
	--body: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
}

html { overflow-x: clip; background: var(--bg) }
body, html { font-family: var(--body) }
body { color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased }
*::selection { background: #fff; color: #000 }
*::-moz-selection { background: #fff; color: #000 }
a, a:hover, a:focus, a:active { color: var(--head) }
h1, h2, h3, h4, h5, h6 { color: var(--head) }
input, textarea, select { color: var(--head); background: transparent; border: 1px solid #333; border-radius: 0 }

/* ---------- Top bar ---------- */
.mobile, .mobile:hover { position: fixed !important; z-index: 99; width: 100%; height: var(--bar); background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,0)); transition: background-color .35s, background .35s }
.mobile:hover, body.is-scrolled .mobile, body:not(.home) .mobile, .mobile.opacitymenu { background: #000 }
body.is-scrolled .mobile, body:not(.home) .mobile { box-shadow: 0 1px 0 var(--line) }
.spacer, .logged-in .spacer { height: var(--bar) }
.bar { position: relative; display: flex; align-items: center; height: var(--bar); padding: 0 clamp(8px, 2vw, 28px) 0 clamp(16px, 3vw, 40px); gap: clamp(24px, 3.5vw, 56px) }
.bar-logo { flex: none; display: block; line-height: 0 }
.bar .imgsvg { position: static; float: none; display: block; height: 30px; width: auto; margin: 0; padding: 0; border: 0 }
.bar-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px) }
.bar-nav ul { display: flex; flex-wrap: nowrap; gap: inherit; list-style: none; margin: 0; padding: 0 }
.bar-nav li { float: none; margin: 0; height: auto; line-height: 1; white-space: nowrap }
.bar-nav a, .bar-nav a:hover { display: block; padding: 8px 0; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff; border-bottom: 1px solid transparent; transition: border-color .2s, opacity .2s }
.bar-nav a:hover, .bar-nav .current-menu-item > a, .bar-nav .current_page_item > a { border-bottom-color: #fff }
.searchbox { position: absolute; top: 0; right: 0; height: var(--bar); min-width: var(--bar); width: 0; background: transparent; overflow: hidden }
.searchbox-open { width: 100%; background: #000 }
.searchbox-input { height: var(--bar); padding: 0 calc(var(--bar) + 8px) 0 clamp(16px, 3vw, 40px); font: 400 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 0; background: transparent }
.searchbox-input::-webkit-input-placeholder { color: rgba(255,255,255,.45) }
.searchbox-input::-moz-placeholder { color: rgba(255,255,255,.45) }
.searchbox-icon, .searchbox-submit { width: var(--bar); height: var(--bar); line-height: var(--bar) }

.menuBtn { display: none; position: relative; left: auto; top: auto; flex: none; width: 30px; height: 30px; padding: 0; background: none; border: 0; z-index: 99999 }
.menuBtn.act > span:after, .menuBtn.act > span:before { background-color: #fff }
@media (max-width: 1179px) {
	.menuBtn { display: block }
	.bar-nav { display: none }
	.bar-logo { position: absolute; left: 50%; transform: translateX(-50%) }
	.bar { justify-content: space-between }
}

/* ---------- Full-screen menu ---------- */
.mainMenu { position: fixed; inset: 0; z-index: 100; display: block; width: 100%; height: 100vh; height: 100dvh; background: #000; opacity: 0; visibility: hidden; transform: none; border-radius: 0; text-align: left; overflow-y: auto; text-transform: none; transition: opacity .35s ease, visibility 0s linear .35s }
.mainMenu.act { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease }
@media (min-width: 1180px) { .mainMenu, .mainMenu.act { display: none !important } }
.noscroll { position: static !important; overflow: hidden !important; width: auto !important }
.overlay-inner { min-height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: 1100px; margin: 0 auto; padding: calc(var(--bar) + 24px) clamp(20px, 6vw, 64px) 40px }
.mainMenu div { display: block }
.mainMenu .overlay-inner, .mainMenu .overlay-search, .mainMenu .overlay-social { display: flex }
.mainMenu .overlay-menu ul { display: block !important; list-style: none; margin: 0; padding: 0 }
.mainMenu .overlay-menu ul li { display: block; padding: 0; margin: 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease }
.mainMenu.act .overlay-menu ul li { opacity: 1; transform: none }
.mainMenu.act .overlay-menu ul li:nth-child(1) { transition-delay: .12s } .mainMenu.act .overlay-menu ul li:nth-child(2) { transition-delay: .18s }
.mainMenu.act .overlay-menu ul li:nth-child(3) { transition-delay: .24s } .mainMenu.act .overlay-menu ul li:nth-child(4) { transition-delay: .3s }
.mainMenu.act .overlay-menu ul li:nth-child(5) { transition-delay: .36s } .mainMenu.act .overlay-menu ul li:nth-child(n+6) { transition-delay: .42s }
.mainMenu .overlay-menu a, .mainMenu .overlay-menu a:hover { display: block; padding: 14px 0; font: 400 clamp(24px, 6.4vw, 40px)/1.1 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #fff; transition: padding .25s ease, opacity .25s }
.mainMenu .overlay-menu a:hover { padding-left: 14px; opacity: 1 }
.overlay-search { display: flex; align-items: center; margin-top: 32px; border-bottom: 1px solid #555 }
.overlay-search input { flex: 1; border: 0; background: transparent; padding: 14px 0; font: 400 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff }
.overlay-search input::placeholder { color: rgba(255,255,255,.45) }
.overlay-search button { border: 0; background: none; color: #fff; font: 400 20px var(--mono); padding: 8px 0 8px 16px; cursor: pointer }
.overlay-social { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px }
.overlay-social a { font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.overlay-social a:hover { color: #fff }

/* ---------- Hero (image only) ---------- */
.header-parallax { display: block; color: #fff; position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; min-height: 520px }
.home-content { position: relative; z-index: 1; background: rgba(0,0,0,.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px) }
.home-content .top { background: transparent }
.headercont { height: 100%; overflow: hidden; background: #000; opacity: calc(1 - var(--p, 0) * .95) }
.headercont .headercont-sub, .headercont .hero-img { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 118%; display: block; max-width: none; object-fit: cover; object-position: center 30%; background-attachment: scroll !important; background-size: cover; background-position: center 30%;
	transform: translate3d(0, calc(var(--p, 0) * 8%), 0) scale(calc(1.04 + var(--p, 0) * .1));
	will-change: transform; animation: heroIn 2.6s cubic-bezier(.2, .7, .2, 1) both }
.headercont::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,.7) 0, rgba(0,0,0,0) 40%), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 22%) }
.hero-line { position: absolute; z-index: 2; left: 50%; bottom: 0; width: 1px; height: 9vh; background: rgba(255,255,255,.2); overflow: hidden }
.hero-line::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; transform: translateY(-100%); animation: drip 2.4s cubic-bezier(.6, 0, .2, 1) 2s infinite }
@keyframes heroIn { from { opacity: 0; filter: brightness(.3) } to { opacity: 1; filter: none } }
@keyframes drip { 0% { transform: translateY(-100%) } 60%, 100% { transform: translateY(100%) } }
@media (prefers-reduced-motion: reduce) {
	.headercont .headercont-sub, .headercont .hero-img, .hero-line::after { animation: none !important }
	.headercont .headercont-sub, .headercont .hero-img { transform: none !important }
	.headercont { opacity: 1 !important }
}

/* ---------- Section titles ---------- */
.top { background: transparent }
#top.top { padding-top: clamp(56px, 7vw, 96px) !important }
.new, .section { display: block; float: none !important; width: 100%; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -.01em; text-transform: none; color: var(--head); background: none; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 20px; margin: 0 0 36px }
.sidebar-mobile .new, .latest .new { font-size: 28px; padding-bottom: 14px; margin-bottom: 20px !important }
.feat { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: .04em; text-transform: none; text-align: left; color: var(--muted); background: none; padding: 0 0 14px; margin: 0 0 24px; border-bottom: 1px solid var(--line) }
.featured center { display: block; text-align: left }

/* ---------- News cards ---------- */
.news .post { display: flex; flex-direction: column; margin-bottom: 48px; text-align: left; color: var(--text) }
.news .post .thumb { order: 1; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface) }
.news .post .thumb img { width: 100%; height: 100%; object-fit: cover; padding: 0; transition: transform 1s cubic-bezier(.2, .7, .2, 1) }
.news a:hover .thumb img { transform: scale(1.04); border: 0; padding: 0 }
.news .post .data { order: 2; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); padding: 16px 0 6px }
.news .post .title { order: 3; font-family: var(--title); font-weight: 400; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; color: var(--head) }
.news .post .exc { order: 4; font-family: var(--body); font-weight: 400; font-size: 14px; line-height: 1.6; color: var(--muted); padding: 12px 0 0 }
.news .post .exc p { margin: 0 }
.news .footer, .featured .footer, .risultati .footer { order: 5; text-align: left; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); padding-top: 14px }
.news a:hover .footer .leggi, .featured a:hover .footer .leggi, .risultati a:hover .footer .leggi { border-bottom: 1px solid #fff; padding-bottom: 2px; color: #fff }
.featured-border { border-left: 1px solid var(--line); padding: 0 0 15px 28px }
.featured .post { margin-bottom: 32px }
.featured .post .title { font-family: var(--title); font-weight: 400; font-size: 19px; line-height: 1.25; color: var(--head); padding-top: 0 }
.featured .data { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); padding: 6px 0 }
.featured .post .immagine-tonda, .featured .post:hover .immagine-tonda { width: 100%; margin: 10px 0 0; border: 0; border-radius: 0; filter: grayscale(1); transition: filter .6s }
.featured .post:hover .immagine-tonda { filter: none }
.featured .post .immagine-tonda:after { padding-bottom: 110% }

/* ---------- Buttons ---------- */
.button-yellow, a.button-yellow { display: block; width: fit-content; margin: 48px auto 64px; padding: 16px 40px; background: transparent; color: #fff; border: 1px solid #fff; font: 300 13px/1 var(--mono); letter-spacing: .08em; text-align: center; transition: background-color .25s, color .25s }
.button-yellow:hover, a.button-yellow:hover { background: #fff; color: #000; border: 1px solid #fff }

/* ---------- Galleria / Bacheca ---------- */
#galleria { position: relative; isolation: isolate; padding: clamp(64px, 8vw, 104px) 15px !important }
#galleria::before { content: ''; display: block; position: absolute; top: 0; height: 100%; left: 50%; width: 100vw; margin-left: -50vw; background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: -1 }
#galleria .galleria .post img { width: 100%; padding: 0; transition: opacity .4s }
.galleria a:hover img { border-top: 0; padding-top: 0; opacity: .7 }
.galleria .post .data, .galleria .data { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); padding: 10px 0 22px }
#bacheca { padding-top: clamp(64px, 8vw, 104px) !important; padding-bottom: 72px }
.quote .titolo, .format-single .titolo { font-family: var(--title); font-weight: 400; color: var(--head) }
.quote .titolo-mobile { font-family: var(--title); font-weight: 400; color: var(--head); border-bottom: 1px solid #fff }
.quote a:hover, .quote a:focus, .quote a:active { color: #fff }
.quote blockquote { color: var(--text) }
.format-single .testo { font-family: var(--body); color: var(--text) }
.format-single .data, .format-single .titolo, .format-single .testo { color: inherit }
.text { color: #fff; font-family: var(--mono); font-weight: 400 }
.itm-from { background: rgba(0,0,0,.75) }
.itm-from a { color: #fff }
.hover-bacheca *:after, .hover-bacheca *:before { color: #fff }
.galleria-post .title { border-bottom: 1px solid #fff; font-family: var(--title); font-weight: 400; color: var(--head) }
.galleria-post .thumb1 { background-color: var(--surface) }

/* ---------- Article ---------- */
.single-post .title, .newstitle { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 50px); line-height: 1.12; letter-spacing: -.01em; color: var(--head); padding: 14px 0 18px }
.single-post .data { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted); padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--line); display: flow-root }
.single-post .data #contenitore2 > div { width: auto !important }
.single-post .thumb { margin-bottom: 28px }
.single-post .post, .pagine { font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.75; color: var(--text); padding-top: 4px }
.single-post .post { max-width: 700px }
.single-post .post p { margin: 0 0 1.35em }
.single-post .post strong, .single-post .post b { color: #fff; font-weight: 700 }
.single-post .post a, .single-post .post a:hover, .single-post .post a:focus, .single-post .post a:active, .pagine a { display: inline; border-bottom: 1px solid rgba(255,255,255,.55); color: #fff; font-weight: 400; transition: background-color .2s, color .2s }
.single-post .post a:hover, .pagine a:hover { background: #fff; color: #000; border-bottom-color: #fff }
.single-post .post h2, .single-post .post h3, .pagine h4 { font-family: var(--title); font-weight: 400; font-size: 26px; color: #fff; line-height: 1.2; margin: 1.6em 0 .6em }
.single-post .post blockquote { font-family: var(--title); font-weight: 400; font-size: 22px; line-height: 1.4; color: #fff; padding: 8px 0 8px 24px; border-left: 1px solid #fff }
.single-post .post blockquote:before, .single-post .post blockquote:after { display: none }
.single-post .post img { max-width: 100%; height: auto }
.single-post .categoria, .admin, .Camila, .Alessandro, .Tommaso { border-bottom: 1px solid #555; font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted) !important }
.tags { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted) }
.tags a, .single-post .post .tags a { display: inline-block; border: 1px solid #333; padding: 5px 12px; margin: 0 6px 6px 0; color: #fff; font-family: var(--mono); font-weight: 400 }
.tags a:hover, .single-post .post .tags a:hover { background: #fff; color: #000; border-color: #fff }
.tagstitle { margin-right: 8px }
.simili { margin: 40px 0 }
.simili .titolone { font-family: var(--display); font-weight: 400; font-size: 28px; color: #fff; padding: 0 0 14px; margin-bottom: 20px; text-align: left; border-bottom: 1px solid var(--line) }
.simili .recents-img { border-radius: 0; border: 0; width: 100% }
.simili .recents-img:after { padding-bottom: 70% }
.simili .title-related { font-family: var(--title); font-weight: 400; font-size: 14px; line-height: 1.3; color: #fff; margin-top: 12px; text-align: left }
.simili a:hover .recents-img { opacity: .7 }
.latest .title, .recent-post .title { font-family: var(--title); font-weight: 400; font-size: 16px; line-height: 1.3; color: #fff }
.latest .date, .recent-post .date { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted) }
.recent-post .recents-img { border-radius: 0; border: 0 }
a:hover .recent-post .recents-img { opacity: .7 }

/* ---------- Lyrics / albums ---------- */
.testi .testo { font: 400 17px/1.8 var(--body); color: var(--text) }
.testi .testo-traduzione { font: 400 15px/1.8 var(--body); color: var(--muted) }
.testi .titolo { font: 400 clamp(28px, 4vw, 44px)/1.1 var(--display); text-transform: none; color: #fff; padding: 24px 0 }
a.albums .album-title, .header .album-title, .risultati .album-title, .risultati .titolo-brano, .single-testo .album-title, .single-testo .titolo-brano { color: #fff; font-family: var(--title); font-weight: 400; text-transform: none }
.header .album-title { font-size: clamp(28px, 4vw, 44px); font-family: var(--display) }
a.albums .album-title { font-size: 19px }
a.albums .album-artist, a.albums .anno-rilascio, .risultati .album-artist, .risultati .anno-rilascio, .single-testo .album-artist, .single-testo .anno-rilascio, .header .album-artist, .header .anno-rilascio { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--muted) }
.tracklist ol li { font-family: var(--title); font-weight: 400; text-transform: none; color: #fff; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4 }
.tracklist a:hover li { color: #fff; opacity: .45 }
.album-descrizione { font: 400 16px/1.7 var(--body); color: var(--muted) }
.risultati .titolo { font-family: var(--title); font-weight: 400; font-size: 24px; color: #fff }
.risultati .exc { font-family: var(--body); color: var(--muted) }

/* ---------- UI bits ---------- */
.custom-pagination .page-numbers { background: transparent; color: #fff; border-radius: 0; font-family: var(--mono); font-weight: 400; box-shadow: inset 0 0 0 1px #333 }
.custom-pagination .page-numbers:hover { background: #fff; color: #000 }
.custom-pagination .current, .custom-pagination .current:hover, .page-numbers.dots, .page-numbers.dots:hover { background: #222; color: #fff; box-shadow: none }
.filtri a { background: transparent; color: #fff; padding: 8px 14px; font-family: var(--mono); font-weight: 400; font-size: 12px; box-shadow: inset 0 0 0 1px #444 }
.filtri a:hover { background: #fff; color: #000 }
.contatti input, .contatti textarea { border: 0; border-bottom: 1px solid #555; font-family: var(--body); color: #fff }
.contatti button[type="submit"] { background: transparent; color: #fff; font: 300 13px var(--mono); padding: 16px 36px; border: 1px solid #fff; letter-spacing: .08em }
.contatti button[type="submit"]:hover { background: #fff; color: #000 }
a.overblack, a.overyellow { color: #fff }
a.overyellow:hover, a.overblack:hover { border-color: currentColor; color: #fff }

/* ---------- Footer ---------- */
.footer-bg { position: relative; z-index: 2; background: #000; border-top: 1px solid var(--line) }
.site-footer { position: relative; z-index: 2 }
.site-footer { margin-top: 0; font-family: var(--body); background: #000; padding-top: 56px; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: left }
.site-footer a, #colophon .textwidget .testi a, #colophon .textwidget .more { color: #fff; font-weight: 400 }
.site-footer .copyright a:hover, #colophon .textwidget .testi a:hover { border-bottom: 1px solid #fff }
#colophon .widget-title { color: #fff; font: 400 20px/1.2 var(--title); border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px; display: block }
#colophon .textwidget .testi { padding: 4px 0 }
#colophon .textwidget img { margin: 1%; opacity: .85 }
#colophon .textwidget img:hover { background: none; opacity: 1 }
.site-footer .site-info, .site-footer .copyright { text-align: center }
.site-footer .copyright { color: var(--muted); font-family: var(--mono); font-weight: 400; font-size: 12px; padding: 28px 0 8px; border-top: 1px solid var(--line); margin-top: 28px }

@media (max-width: 767px) {
	.featured-border { padding-left: 0; border-left: 0 }
	.single-post .post { font-size: 16px }
}

/* ==========================================================================
   Typography system (uppercase mono for titles and UI, Helvetica for reading)
   ========================================================================== */
.new, .section, .simili .titolone, .single-post .title, .newstitle, .testi .titolo, .header .album-title, #colophon .widget-title {
	font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em }
.new, .section { font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15; padding-bottom: 18px; margin-bottom: 32px }
.sidebar-mobile .new, .latest .new { font-size: 20px; padding-bottom: 12px }
.single-post .title, .newstitle { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.18; padding: 14px 0 20px }
.testi .titolo, .header .album-title { font-size: clamp(24px, 3.2vw, 38px); line-height: 1.15 }
.simili .titolone { font-size: 20px; padding-bottom: 12px }

.news .post .title, .featured .post .title, .latest .title, .recent-post .title, .simili .title-related, a.albums .album-title, .risultati .titolo, .risultati .album-title, .risultati .titolo-brano,
.single-testo .album-title, .single-testo .titolo-brano, .quote .titolo, .format-single .titolo, .galleria-post .title, .tracklist ol li {
	font-family: var(--title); font-weight: 400; text-transform: uppercase; letter-spacing: .04em }
.news .post .title { font-size: 16px; line-height: 1.4 }
.featured .post .title { font-size: 14px; line-height: 1.4 }
.latest .title, .recent-post .title { font-size: 13px; line-height: 1.45 }
.simili .title-related { font-size: 12px; line-height: 1.45 }
a.albums .album-title, .risultati .titolo { font-size: 15px; line-height: 1.35 }
.tracklist ol li { font-size: clamp(16px, 2vw, 22px); line-height: 1.5 }

.news .post .data, .featured .data, .galleria .data, .single-post .data, .latest .date, .recent-post .date, .feat, .tags, .tagstitle, .news .footer, .featured .footer, .risultati .footer,
.single-post .categoria, .Alessandro, .Camila, .Tommaso, .admin, a.albums .album-artist, a.albums .anno-rilascio, .risultati .album-artist, .risultati .anno-rilascio,
.single-testo .album-artist, .single-testo .anno-rilascio, .header .album-artist, .header .anno-rilascio {
	font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; text-transform: uppercase }
.tags a, .single-post .post .tags a { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase }
.button-yellow, a.button-yellow, .contatti button[type="submit"], .filtri a, .custom-pagination .page-numbers { font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase }
.button-yellow, a.button-yellow { padding: 17px 38px }
#colophon .widget-title { font-size: 14px; letter-spacing: .12em }
#colophon .textwidget .testi a, #colophon .textwidget .more { font: 400 11px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase }
.site-footer .copyright { font: 400 11px/1.8 var(--mono); letter-spacing: .12em; text-transform: uppercase }
.single-post .post h2, .single-post .post h3, .pagine h4 { font-family: var(--title); font-size: 20px; letter-spacing: .04em; text-transform: uppercase }
.single-post .post blockquote { font-family: var(--title); font-size: 18px; letter-spacing: .02em }



/* ==========================================================================
   v3: search panel, news cards, share chips, social buttons, consistency
   ========================================================================== */
:root { --ease: cubic-bezier(.2, .7, .2, 1); --gap: 32px }

/* ---------- Search (icon in the bar, panel drops below) ---------- */
.search-toggle { flex: none; margin-left: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; opacity: .9; transition: opacity .2s }
.search-toggle:hover { opacity: 1 }
.search-toggle svg { width: 22px; height: 22px }
.mobile.search-open { background: #000 }
.search-panel { position: absolute; top: 100%; left: 0; right: 0; background: #000; border-bottom: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s }
.search-open .search-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease }
.search-panel form { display: flex; align-items: center; max-width: 1170px; margin: 0 auto; padding: 22px clamp(16px, 3vw, 40px) 26px; gap: 16px }
.search-panel input[type="search"] { flex: 1; min-width: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #555; background: transparent; color: #fff; font: 400 clamp(16px, 2.6vw, 28px)/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; border-radius: 0; -webkit-appearance: none; appearance: none }
.search-panel input[type="search"]::placeholder { color: rgba(255,255,255,.35); font-style: normal }
.search-panel input[type="search"] { font-style: normal }
.search-panel input[type="search"]:focus { border-bottom-color: #fff }
.search-panel button { flex: none; width: 48px; height: 48px; border: 1px solid #333; background: transparent; color: #fff; font: 400 18px var(--mono); cursor: pointer; transition: background-color .25s, color .25s }
.search-panel button:hover { background: #fff; color: #000; border-color: #fff }

/* ---------- Hero image ---------- */
.header-parallax { cursor: pointer }
div.header-parallax { cursor: default }

/* ---------- News section ---------- */
#top.news-section { padding-left: 15px !important; padding-right: 15px !important }
.news-section .new { margin: 0 0 40px }
.news-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap) }
.card { display: block; position: relative; color: inherit; text-align: left }
.card__media { display: block; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10 }
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease) }
.card:hover .card__media img { transform: scale(1.05) }
.card__body { display: block; padding-top: 18px }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.card__cat { padding: 5px 8px; border: 1px solid #444; color: #fff }
.card__title { display: inline; margin-top: 0; font: 400 17px/1.4 var(--title); letter-spacing: .04em; text-transform: uppercase; color: #fff;
	transition: text-decoration-color .3s }
.card__body > .card__title { display: block; width: fit-content; margin-top: 14px }
.card__exc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 12px; font: 400 14px/1.6 var(--body); color: var(--muted) }
.card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff }
.card__more i { font-style: normal; transition: transform .3s var(--ease) }
.card:hover .card__more i { transform: translateX(6px) }

/* lead: image with the text laid over it */
.card--lead { grid-column: 1 / span 7 }
.card--lead .card__media { aspect-ratio: 4 / 3 }
.card--lead .card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px clamp(20px, 3vw, 36px) clamp(20px, 3vw, 32px); background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%) }
.card--lead .card__meta { color: rgba(255,255,255,.7) }
.card--lead .card__title { font-size: clamp(20px, 2.4vw, 30px); line-height: 1.25 }
.card--lead .card__exc { color: rgba(255,255,255,.75); max-width: 560px }

/* side: compact horizontal list */
.news-side { grid-column: 8 / -1; display: flex; flex-direction: column; justify-content: space-between }
.card--side { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line) }
.card--side:first-child { padding-top: 0 }
.card--side:last-child { border-bottom: 0; padding-bottom: 0 }
.card--side .card__media { aspect-ratio: 1 / 1 }
.card--side .card__body { padding-top: 0 }
.card--side .card__title { font-size: 14px; line-height: 1.45; margin-top: 10px }
.card--side .card__more { display: none }

/* featured row */
.featured-row { margin-top: clamp(56px, 7vw, 88px) }
.featured-row .feat { margin-bottom: 28px }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--gap) }
.card--tile .card__media { aspect-ratio: 4 / 3 }
.card--tile .card__title { font-size: 15px }

@media (max-width: 991px) {
	.card--lead, .news-side { grid-column: 1 / -1 }
	.news-side { margin-top: 0 }
	.card--side:first-child { padding-top: 20px }
	.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 600px) {
	.tiles { grid-template-columns: 1fr }
	.card--lead .card__media { aspect-ratio: 4 / 5 }
	.card--lead .card__exc { display: none }
	.card--side { grid-template-columns: 104px minmax(0, 1fr); gap: 16px }
}

/* ---------- Share row ---------- */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px }
.share-label { margin-right: 8px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.share-chip, .share-chip:visited { display: inline-block; padding: 10px 14px; border: 1px solid #333; background: transparent; color: #fff; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; border-radius: 0; transition: background-color .25s, color .25s, border-color .25s }
.share-chip:hover, .share-chip:focus { background: #fff; color: #000; border-color: #fff }
.condividi { margin: 36px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); text-align: left }
.single-post .data { margin-bottom: 14px }

/* ---------- Social buttons (footer + "Seguici su") ---------- */
.social-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 8px auto }
.social-row a, .social-row a:hover { display: block; line-height: 0; border: 0; background: none }
.follow .i, .follow .t, .follow .f, .follow .tg, .site-footer .i, .site-footer .t, .site-footer .f, .site-footer .tg {
	position: relative; display: block; width: 44px; height: 44px; margin: 0; border: 1px solid #333; border-radius: 0; background: transparent !important; box-shadow: none; filter: none; opacity: 1; transition: background-color .25s, border-color .25s }
.follow .i, .follow .t, .follow .f, .follow .tg { border-bottom: 1px solid #333 !important }
.follow .i:after, .follow .t:after, .follow .f:after, .follow .tg:after { display: none }
.follow .i:before, .follow .t:before, .follow .f:before, .follow .tg:before, .site-footer .i:before, .site-footer .t:before, .site-footer .f:before, .site-footer .tg:before {
	content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-color: #fff;
	-webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color .25s }
.follow .i:before, .site-footer .i:before { -webkit-mask-image: url(../images/i.svg); mask-image: url(../images/i.svg) }
.follow .t:before, .site-footer .t:before { -webkit-mask-image: url(../images/t.svg); mask-image: url(../images/t.svg) }
.follow .f:before, .site-footer .f:before { -webkit-mask-image: url(../images/f.svg); mask-image: url(../images/f.svg) }
.follow .tg:before, .site-footer .tg:before { -webkit-mask-image: url(../images/telegram.svg); mask-image: url(../images/telegram.svg) }
.social-row a:hover > div { background: #fff !important; border-color: #fff }
.social-row a:hover > div:before { background-color: #000 }

/* ---------- Consistency sweep ---------- */
a, button, input, .card, .button-yellow { -webkit-tap-highlight-color: transparent }
.button-yellow, .share-chip, .filtri a, .custom-pagination .page-numbers, .tags a, .card__cat { border-radius: 0 }
hr { border-top: 1px solid var(--line) }
#twitter-feed { background-color: var(--surface); color: var(--text); border-radius: 0 }
#twitter-feed h1, .twitter-text p a, .twitter-text a, h1 a, .twitter-text a:hover, h1 a:hover, .tweet-time { color: #fff }
#loading-container { background: #000 !important }
.prev-song, .next-song, .album-all, .random, .album-vai { filter: invert(1) }
.tracklist .cover-contorno .video { background-color: #fff }

/* ---------- Ads ---------- */
.ad-slot { display: block; clear: both; margin: 48px 0; text-align: center }
.ad-label { display: block; margin-bottom: 10px; font: 400 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #555 }
.ad-slot ins.adsbygoogle { min-height: 100px }
.ad-slot:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none }
.ad-slot--preview { padding: 28px 16px; border: 1px dashed #333 }
.ad-slot--preview .ad-label { margin: 0 }
.ad-slot--sidebar { margin: 32px 0 }
.single-post .post .ad-slot { margin: 40px 0 }

/* ==========================================================================
   Consistency: search field, search/close icon, one underline style, sidebar socials
   ========================================================================== */
.search-toggle .ico-close, .search-open .search-toggle .ico-search { display: none }
.search-open .search-toggle .ico-close { display: block }
.search-panel input[type="search"] { font: 400 clamp(18px, 2.2vw, 24px)/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; font-style: normal; caret-color: #fff }
.search-panel input[type="search"]::placeholder { color: rgba(255,255,255,.4); font-style: normal; letter-spacing: .08em; opacity: 1 }
.search-panel input[type="search"]::-webkit-search-cancel-button, .search-panel input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none }

.follow.social-row > span { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px }

/* Links: one underline style everywhere (text-decoration, never borders) */
a, a:hover, a:focus { text-decoration: none }
.single-post .post a, .single-post .post a:hover, .single-post .post a:focus, .single-post .post a:active, .pagine a, .pagine a:hover,
.twitter-text p a, .twitter-text a, .url, a.overblack, a.overyellow, a.overblack:hover, a.overyellow:hover {
	display: inline; border: 0 !important; background: none !important; color: #fff;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(255,255,255,.4); transition: text-decoration-color .2s }
.single-post .post a:hover, .pagine a:hover, .twitter-text a:hover, .url:hover, a.overblack:hover, a.overyellow:hover { color: #fff; text-decoration-color: #fff }
.single-post .categoria, .Alessandro, .admin, .Camila, .Tommaso { border: 0 !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: #444 }
.site-footer .copyright a, .site-footer .copyright a:hover, #colophon .textwidget .testi a, #colophon .textwidget .testi a:hover, #colophon .textwidget .more, #colophon .textwidget .more:hover {
	border: 0 !important; background: none }
.site-footer .copyright a:hover, #colophon .textwidget .testi a:hover, #colophon .textwidget .more:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em }
.bar-nav a, .bar-nav a:hover { border: 0; padding: 8px 0 }
.bar-nav a:hover, .bar-nav .current-menu-item > a, .bar-nav .current_page_item > a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px }
.card:hover .card__title, .card:focus .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; background: none }
.card__title { background: none !important }
.news a:hover .footer .leggi, .featured a:hover .footer .leggi, .risultati a:hover .footer .leggi { border: 0; padding: 0 }
.galleria-post .title, .quote .titolo-mobile { border: 0 }
.tracklist a:hover li { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em }


/* ==========================================================================
   v4: consistency fixes
   ========================================================================== */
:root { --hover-line: 1px }

/* ---- One hover underline for every text link: aligned per line, never a stray border ---- */
.card__title, .bcard__title, .bar-nav a, .single-post .post a, .pagine a, #colophon a, .site-footer a, .card__more, .tracklist a li, .risultati .titolo, a.albums .album-title, .chip-links a, .overlay-menu a span {
	text-decoration: underline; text-decoration-thickness: var(--hover-line); text-underline-offset: .4em; text-decoration-color: transparent; transition: text-decoration-color .25s ease, color .25s ease }
.card:hover .card__title, .bcard:hover .bcard__title, .bar-nav a:hover, .bar-nav .current-menu-item > a, .bar-nav .current_page_item > a, .card:hover .card__more, #colophon a:hover, .site-footer a:hover, .tracklist a:hover li, a:hover > .risultati .titolo, a.albums:hover .album-title { text-decoration-color: currentColor }
.card__title, .card--lead .card__title { background: none }
.card:hover .card__title { background-size: 0 }
.card__title { display: block; width: auto }
.single-post .post a, .single-post .post a:hover, .single-post .post a:focus, .single-post .post a:active, .pagine a, .pagine a:hover { border: 0; background: none; color: #fff; text-decoration-color: rgba(255,255,255,.45) }
.single-post .post a:hover, .pagine a:hover { text-decoration-color: #fff; background: none; color: #fff }
.bar-nav a, .bar-nav a:hover { border-bottom: 0 }
/* neutralise old hover borders from style.css */
.news a:hover img, .featured a:hover img, .galleria a:hover img, .simili a:hover .recents-img, a:hover .recent-post .recents-img, .featured .post:hover .immagine-tonda { border: 0 !important; padding-top: 0 }
.news a:hover .footer .leggi, .featured a:hover .footer .leggi, .risultati a:hover .footer .leggi, #colophon .textwidget .testi a:hover, #colophon .textwidget .more:hover, .site-footer .copyright a:hover, a.overyellow:hover, a.overblack:hover { border-bottom: 0 !important; padding-bottom: 0 }
#colophon .textwidget .more, #colophon .textwidget .testi a { border: 0 }

/* ---- Bar ---- */
.bar-nav a, .bar-nav a:hover { font-size: 13px; letter-spacing: .14em; padding: 10px 0 }
.bar-nav, .bar-nav ul { gap: clamp(18px, 2vw, 34px) }
.search-toggle .ico { width: 22px; height: 22px; display: block }
.search-toggle .ico-close { display: none }
.search-open .search-toggle .ico-search { display: none }
.search-open .search-toggle .ico-close { display: block }
.search-panel input[type="search"] { font: 400 clamp(14px, 1.8vw, 17px)/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; padding: 14px 0 }
.search-panel input[type="search"]::placeholder { color: #6a6a6a; letter-spacing: .16em; font: inherit }
.search-panel button, .overlay-search button { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1 }
.search-panel button { width: 48px; height: 48px }
.overlay-search button { width: 44px; height: 44px; padding: 0 }
.arrow { display: block; width: 16px; height: 16px; flex: none }

/* ---- Buttons / chips: deterministic centring ---- */
.button-yellow, a.button-yellow { display: flex; align-items: center; justify-content: center; width: fit-content; height: 50px; padding: 0 40px; margin: 48px auto 64px; font: 400 12px/1 var(--mono); letter-spacing: .16em; box-sizing: border-box }
.contatti button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 36px; line-height: 1 }
.filtri a, .chip-links a { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; line-height: 1 }
.card__cat, .bcard__fmt, .cat-chip, .tags a, .single-post .post .tags a, .single-post .categoria a {
	display: inline-flex; align-items: center; justify-content: center; min-height: 26px; padding: 0 10px; border: 1px solid #444; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none; box-sizing: border-box; transition: background-color .25s, color .25s, border-color .25s }
.cat-chip:hover, .tags a:hover, .single-post .post .tags a:hover { background: #fff; color: #000; border-color: #fff; text-decoration: none }
.card__more { display: inline-flex; align-items: center; gap: 10px }
.card__more i { display: inline-flex; font-style: normal }
.chip-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px }
.chip-links a { border: 1px solid #444; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-decoration: none }
.chip-links a:hover, .chip-links a.is-active { background: #fff; color: #000; border-color: #fff }

/* ---- Article meta + categories ---- */
.single-post .data { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px }
.single-post .categoria { display: inline-flex; flex-wrap: wrap; gap: 8px; border: 0 !important; padding: 0 }
.single-post .data-in { color: var(--muted) }
.single-post .categoria a, .single-post .categoria a:hover { border: 1px solid #444 }
.single-post .categoria a:hover { border-color: #fff }

/* ---- Share (icons) ---- */
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 4px 0 8px }
.share-icons { display: flex; flex-wrap: wrap; gap: 10px }
.share-btn, .share-btn:visited { position: relative; display: block; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #333 !important; border-radius: 0; background: transparent; color: #fff; line-height: 0; cursor: pointer; text-decoration: none; transition: background-color .25s, border-color .25s }
.share-btn .share-ico { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-color: #fff; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color .25s }
.share-btn:hover, .share-btn:focus { background: #fff; border-color: #fff !important }
.share-btn:hover .share-ico, .share-btn:focus .share-ico { background-color: #000 }
.share-btn--facebook .share-ico { -webkit-mask-image: url(../images/f.svg); mask-image: url(../images/f.svg) }
.share-btn--telegram .share-ico { -webkit-mask-image: url(../images/telegram.svg); mask-image: url(../images/telegram.svg) }
.share-btn--x .share-ico { -webkit-mask-image: url(../images/t.svg); mask-image: url(../images/t.svg) }
.share-btn--whatsapp .share-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.65-4.95A8.5 8.5 0 1 1 8 19.35z'/%3E%3Cpath d='M9 8.5c0 3.6 2.9 6.5 6.5 6.5l1.2-1.4-2-1.2-1 .8a4 4 0 0 1-2.2-2.2l.8-1-1.2-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.65-4.95A8.5 8.5 0 1 1 8 19.35z'/%3E%3Cpath d='M9 8.5c0 3.6 2.9 6.5 6.5 6.5l1.2-1.4-2-1.2-1 .8a4 4 0 0 1-2.2-2.2l.8-1-1.2-2z'/%3E%3C/svg%3E") }
.share-btn--copy .share-ico { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") }
.share-btn--copy.is-copied::after { content: 'Copiato'; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: 7px 10px; background: #fff; color: #000; font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap }
.condividi, #contenitore { display: block; float: none !important; width: 100% !important; max-width: none !important; margin: 40px 0 12px !important; padding-top: 24px; border-top: 1px solid var(--line); text-align: left }
.condividi .share-row { justify-content: flex-start }

/* ---- Social buttons: same component everywhere (footer, sidebar, mobile menu) ---- */
.social-row { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; width: auto !important; margin: 8px auto }
.follow.social-row, .sidebar-mobile .social-row, .overlay-social.social-row { justify-content: flex-start; margin-left: 0 }
.social-row > a, .social-row > a:hover { display: block !important; flex: 0 0 auto !important; float: none !important; width: auto !important; margin: 0 !important; padding: 0; line-height: 0; font-size: 0; border: 0; background: none; text-decoration: none }
.social-row .i, .social-row .t, .social-row .f, .social-row .tg {
	position: relative; display: block !important; width: 44px; height: 44px; margin: 0 !important; padding: 0; border: 1px solid #333 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none; filter: none; opacity: 1; transition: background-color .25s, border-color .25s }
.social-row .i:after, .social-row .t:after, .social-row .f:after, .social-row .tg:after { display: none !important }
.social-row .i:before, .social-row .t:before, .social-row .f:before, .social-row .tg:before {
	content: ''; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background-color: #fff;
	-webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: background-color .25s }
.social-row .i:before { -webkit-mask-image: url(../images/i.svg); mask-image: url(../images/i.svg) }
.social-row .f:before { -webkit-mask-image: url(../images/f.svg); mask-image: url(../images/f.svg) }
.social-row .tg:before { -webkit-mask-image: url(../images/telegram.svg); mask-image: url(../images/telegram.svg) }
.social-row .t:before { -webkit-mask-image: url(../images/t.svg); mask-image: url(../images/t.svg) }
.social-row a:hover > div { background: #fff !important; border-color: #fff !important }
.social-row a:hover > div:before { background-color: #000 }
.site-footer { overflow: visible; padding-bottom: 40px }
.site-footer .site-info { overflow: visible }
.mainMenu .overlay-social { margin-top: 28px }

/* ---- Pagination ---- */
.custom-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: 100%; margin: 56px 0 24px; padding: 0; text-align: center }
.custom-pagination .page-num { display: none }
.custom-pagination .page-numbers, .custom-pagination span.page-numbers, .custom-pagination a.page-numbers {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; min-width: 44px; height: 44px; margin: 0; padding: 0 14px; border-radius: 0;
	background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #333; font: 400 13px/1 var(--mono); letter-spacing: .08em; text-decoration: none; transition: background-color .25s, color .25s }
.custom-pagination a.page-numbers:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #fff }
.custom-pagination .page-numbers.current, .custom-pagination .page-numbers.current:hover { background: #fff; color: #000; box-shadow: inset 0 0 0 1px #fff; cursor: default }
.custom-pagination .page-numbers.dots, .custom-pagination .page-numbers.dots:hover { background: transparent; color: var(--muted); box-shadow: none; min-width: 24px; padding: 0 }
.arrow--left { transform: rotate(180deg) }

/* ---- Bacheca ---- */
.bacheca-section, .bacheca-page { padding: clamp(64px, 8vw, 104px) 15px 72px !important }
.bacheca-page { padding-top: clamp(40px, 5vw, 72px) !important }
.bacheca-section .button-yellow { margin-top: 56px }
.bacheca-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px var(--gap) }
.bacheca-masonry { columns: 3 280px; column-gap: var(--gap) }
.bacheca-masonry .bcard { display: inline-block; width: 100%; margin: 0 0 44px; break-inside: avoid }
.bcard { display: block; color: inherit; text-align: left }
.bcard__media { position: relative; display: block; overflow: hidden; background: var(--surface); border: 1px solid var(--line) }
.bcard__media img { display: block; width: 100%; height: auto; transition: transform 1s var(--ease) }
.bcard:hover .bcard__media img { transform: scale(1.04) }
.bacheca-grid--uniform .bcard__media { aspect-ratio: 4 / 5 }
.bacheca-grid--uniform .bcard__media img { height: 100%; object-fit: cover }
.bcard--video .bcard__media { aspect-ratio: 16 / 9 }
.bcard--video .bcard__media img { height: 100%; object-fit: cover }
.bcard--video .bacheca-grid--uniform .bcard__media, .bacheca-grid--uniform .bcard--video .bcard__media { aspect-ratio: 4 / 5 }
.bcard__play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border: 1px solid #fff; border-radius: 50%; background: rgba(0,0,0,.45); transition: background-color .25s, transform .3s var(--ease) }
.bcard__play:after { content: ''; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; transition: border-color .25s }
.bcard:hover .bcard__play { background: #fff; transform: scale(1.08) }
.bcard:hover .bcard__play:after { border-left-color: #000 }
.bcard--audio .bcard__media { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center }
.bacheca-grid--uniform .bcard--audio .bcard__media { aspect-ratio: 4 / 5 }
.bcard__wave { display: flex; align-items: center; justify-content: center; gap: 7px; height: 60px }
.bcard__wave i { display: block; width: 4px; height: 24px; background: #fff; transform-origin: center; animation: wave 1.4s ease-in-out infinite }
.bcard__wave i:nth-child(1) { height: 18px; animation-delay: -1.2s } .bcard__wave i:nth-child(2) { height: 38px; animation-delay: -1s }
.bcard__wave i:nth-child(3) { height: 28px; animation-delay: -.8s } .bcard__wave i:nth-child(4) { height: 54px; animation-delay: -.6s }
.bcard__wave i:nth-child(5) { height: 32px; animation-delay: -.4s } .bcard__wave i:nth-child(6) { height: 44px; animation-delay: -.2s } .bcard__wave i:nth-child(7) { height: 20px; animation-delay: 0s }
@keyframes wave { 0%, 100% { transform: scaleY(.45) } 50% { transform: scaleY(1) } }
@media (prefers-reduced-motion: reduce) { .bcard__wave i { animation: none } }
.bcard--quote .bcard__media, .bcard--link .bcard__media, .bcard--standard.bcard--quote .bcard__media { display: flex; align-items: center; min-height: 220px }
.bacheca-grid--uniform .bcard--quote .bcard__media, .bacheca-grid--uniform .bcard--link .bcard__media { aspect-ratio: 4 / 5 }
.bcard__quote { display: block; padding: 32px 26px; font: 400 18px/1.5 var(--body); color: #fff }
.bcard__quote:before { content: '\201C'; display: block; margin-bottom: 8px; font: 400 56px/.7 var(--display); color: #555 }
.bcard__body { display: block; padding-top: 16px }
.bcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.bcard__title { display: block; margin-top: 12px; font: 400 14px/1.5 var(--title); letter-spacing: .04em; text-transform: uppercase; color: #fff }
@media (max-width: 991px) { .bacheca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .bacheca-grid { grid-template-columns: 1fr } .bacheca-masonry { columns: 1 } .bacheca-grid--uniform .bcard__media { aspect-ratio: 4 / 3 } }

/* chips: always boxed, never underlined */
.cat-chip, .tags a, .single-post .post .tags a, .single-post .categoria a, .chip-links a, .bcard__fmt, .card__cat, .share-btn { text-decoration: none !important }
.cat-chip, .tags a, .single-post .post .tags a, .single-post .categoria a { border: 1px solid #444 !important; background: transparent !important; color: #fff !important }
.cat-chip:hover, .tags a:hover, .single-post .post .tags a:hover, .single-post .categoria a:hover { background: #fff !important; color: #000 !important; border-color: #fff !important }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.tags a, .single-post .post .tags a { margin: 0 }
.categoria, .single-post .categoria, .single-post .data, .single-post .data * { text-decoration: none !important }
.overlay-search input::placeholder, .overlay-search input { font-style: normal }

/* ---------- Listing pages: archives, categories, tags, search (v5) ---------- */
.listing__head { margin: 0 0 40px }
.listing__head .new { margin-bottom: 0 }
.listing__desc { max-width: 640px; margin-top: 20px; font: 400 15px/1.6 var(--body); color: var(--muted) }
.listing__desc p { margin: 0 0 .6em }
.listing__desc p:last-child { margin-bottom: 0 }
.listing__empty { margin: 0; font: 400 15px/1.6 var(--body); color: var(--muted) }

.listing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--gap) }
.listing-grid > .card, .listing-grid > .bcard { min-width: 0 }

/* Bacheca cards inside the mixed grid: same 4:3 crop as the news tiles */
.listing-grid .bcard__media { aspect-ratio: 4 / 3 }
.listing-grid .bcard__media img { height: 100%; object-fit: cover }
.listing-grid .bcard--testo .bcard__media { aspect-ratio: 1 / 1 }
.listing-grid .bcard--quote .bcard__media, .listing-grid .bcard--link .bcard__media, .listing-grid .bcard--audio .bcard__media { aspect-ratio: 4 / 3; min-height: 0 }
.listing-grid .bcard__quote { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; padding: 24px 22px; font-size: 15px; line-height: 1.5 }
.listing-grid .card--tile .card__title, .listing-grid .bcard__title { font-size: 14px; line-height: 1.5 }

.bcard__sub { display: block; margin-top: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted) }
.bcard--testo .bcard__media { display: flex; align-items: center; justify-content: center }

@media (max-width: 991px) { .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .listing-grid { grid-template-columns: 1fr; gap: 36px } .listing__head { margin-bottom: 28px } }

/* ---------- Chip text centring (v5.6) ----------
   Measured on screenshots with the the theme font woff2 family: text sat ~1px high with no padding.
   Top padding pushes it down to the middle of the border. Retune the .24em if the font changes again. */
.card__cat, .bcard__fmt, .cat-chip, .tags a, .single-post .post .tags a, .single-post .categoria a { padding: .24em 10px 0 }

/* ---------- Menu weight: the theme font Light (300). Lighter: 200 / 100. Heavier: 400 (Regular) / 500 (Medium). ---------- */
.mainMenu .overlay-menu a, .mainMenu .overlay-menu a:hover, .bar-nav a, .bar-nav a:hover { font-family: var(--mono); font-weight: 300 }

/* "Act I / II / III" always lowercase (js/act-lowercase.js wraps them); beats the uppercase titles */
.act-lc { text-transform: lowercase !important }

/* ---------- Hover underline: same offset at rest and on hover (v5.8) ----------
   Before, rest = .4em and hover = .22-.3em / 8px, so on mouse-out the line jumped instantly and only then faded.
   Now only the colour animates. */
.card__title, .card:hover .card__title, .card:focus .card__title,
.bcard__title, .bcard:hover .bcard__title,
.card__more, .card:hover .card__more,
.single-post .post a, .single-post .post a:hover, .single-post .post a:focus,
.pagine a, .pagine a:hover,
.url, .url:hover, a.overblack, a.overblack:hover, a.overyellow, a.overyellow:hover,
.twitter-text a, .twitter-text a:hover, .twitter-text p a,
#colophon a, #colophon a:hover, #colophon .textwidget .testi a, #colophon .textwidget .testi a:hover, #colophon .textwidget .more, #colophon .textwidget .more:hover,
.site-footer a, .site-footer a:hover, .site-footer .copyright a, .site-footer .copyright a:hover,
.tracklist a li, .tracklist a:hover li,
.risultati .titolo, a:hover > .risultati .titolo,
a.albums .album-title, a.albums:hover .album-title,
.chip-links a, .chip-links a:hover,
.overlay-menu a span, .single-post .categoria { text-underline-offset: .28em !important }
.bar-nav a, .bar-nav a:hover, .bar-nav .current-menu-item > a, .bar-nav .current_page_item > a { text-underline-offset: 8px !important }

/* ---------- Button text centring (v5.8): the font sits ~1px high in its line box, same fix as the tags ---------- */
.button-yellow, a.button-yellow, .contatti button[type="submit"], .filtri a, .chip-links a,
.custom-pagination .page-numbers, .custom-pagination span.page-numbers, .custom-pagination a.page-numbers { padding-top: .24em !important }
.share-chip, .share-chip:visited { padding-top: calc(10px + .12em); padding-bottom: calc(10px - .12em) }

/* ==========================================================================
   v6: Lyrics section (album index, album page, single lyric)
   Same tokens, cards, chips and hover rules as the rest of the site.
   ========================================================================== */

.chip-links a { gap: 8px }
.chip-links a .arrow { width: 14px; height: 14px; margin-top: -.24em }

/* style.css still has a bare "header { height: 50px }": it squashed these blocks and let the intro text run into what follows */
.listing__head, .album__head, .lyric__head { height: auto; background: none; box-shadow: none }

/* keyboard focus, same ring everywhere in this section */
.bcard--album:focus-visible, .track:focus-visible, .pager__item:focus-visible, .stream-chip:focus-visible,
.seg button:focus-visible, .size-ctl button:focus-visible, .lyric__album-title:focus-visible { outline: 1px solid #fff; outline-offset: 4px }

/* ---------- Album index ---------- */
.listing-grid .bcard--album .bcard__media { aspect-ratio: 1 / 1 }
.listing-grid .bcard--album .bcard__media img { width: 100%; height: 100%; object-fit: cover }
.bcard__open { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 44px 18px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0)); font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #fff;
	opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--ease) }
.bcard__open > span { padding-top: .24em }
.bcard--album:hover .bcard__open, .bcard--album:focus-visible .bcard__open { opacity: 1; transform: none }
/* Covers sit in the black-and-white page and take their colour back on hover (pointer devices only) */
@media (hover: hover) {
	.bcard--album .bcard__media img { filter: grayscale(1) contrast(1.06); transition: transform 1s var(--ease), filter .6s ease }
	.bcard--album:hover .bcard__media img, .bcard--album:focus-visible .bcard__media img { filter: none }
}
@media (hover: none) { .bcard__open { display: none } }

/* ---------- Album page ---------- */
.album { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(32px, 5vw, 72px); align-items: start }
.album__cover { position: sticky; top: calc(var(--bar) + 32px) }
.album__cover .bcard__media { aspect-ratio: 1 / 1 }
.album__cover .bcard__media img { width: 100%; height: 100%; object-fit: cover }
.album__title { margin: 0; font: 400 clamp(30px, 4.6vw, 60px)/1.04 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere }
.album__artist { margin: 18px 0 0; font: 400 15px/1.4 var(--body); color: var(--muted) }
.album__meta { margin-top: 24px }
.album__desc { max-width: 620px; margin-top: 28px; font: 400 16px/1.7 var(--body); color: var(--muted) }
.album__desc p { margin: 0 0 .8em }
.album__desc p:last-child { margin-bottom: 0 }

/* tracklist: a real sequence, so it is numbered */
.tracks { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line) }
.tracks li { margin: 0; padding: 0; border-bottom: 1px solid var(--line) }
.track { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 28px; align-items: center; gap: 0 16px; padding: 22px 0; color: #fff }
.track__n { font: 400 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted); transition: color .25s ease }
.track__t { min-width: 0 }
.track__title { display: block; font: 400 clamp(15px, 1.9vw, 20px)/1.35 var(--title); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere;
	text-decoration: underline; text-decoration-thickness: var(--hover-line); text-underline-offset: .28em; text-decoration-color: transparent; transition: text-decoration-color .25s ease }
.track__ft { display: block; margin-top: 8px; font: 400 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.track__go { display: flex; justify-content: flex-end; color: #fff; opacity: .45; transition: transform .3s var(--ease), opacity .25s ease }
.track:hover .track__title, .track:focus-visible .track__title { text-decoration-color: currentColor }
.track:hover .track__n { color: #fff }
.track:hover .track__go, .track:focus-visible .track__go { opacity: 1; transform: translateX(6px) }

/* ---------- Streaming buttons ---------- */
.streaming-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px }
.stream-chip, .stream-chip:visited { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 40px; padding: 0 16px; border: 1px solid #444; background: transparent;
	color: #fff; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; transition: background-color .25s, color .25s, border-color .25s }
.stream-chip > span { padding-top: .24em }
.stream-chip:hover, .stream-chip:focus-visible { background: #fff; color: #000; border-color: #fff }

/* ---------- Single lyric ---------- */
.lyric__head { margin: 0 0 clamp(32px, 4vw, 56px) }
.lyric__title { margin: 0; font: 400 clamp(32px, 5.6vw, 76px)/1.02 var(--display); letter-spacing: .02em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere }
.lyric__by { margin: 18px 0 0; font: 400 15px/1.4 var(--body); color: var(--muted) }

.lyric__layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px clamp(32px, 4vw, 56px); align-items: start }
.lyric__aside { position: sticky; top: calc(var(--bar) + 32px) }
.lyric__cover { display: block }
.lyric__cover .bcard__media { aspect-ratio: 1 / 1 }
.lyric__cover .bcard__media img { width: 100%; height: 100%; object-fit: cover }
.lyric__album { margin-top: 20px }
.lyric__album .bcard__meta:empty { display: none }
.lyric__album-title { display: block; width: fit-content; margin-top: 12px; font: 400 14px/1.45 var(--title); letter-spacing: .04em; text-transform: uppercase; color: #fff;
	text-decoration: underline; text-decoration-thickness: var(--hover-line); text-underline-offset: .28em; text-decoration-color: transparent; transition: text-decoration-color .25s ease }
.lyric__album-title:hover { text-decoration-color: currentColor }
.lyric__aside .streaming-links { margin-top: 20px }

/* reader controls (revealed by js/lyrics.js) */
.lyric__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 36px; padding-bottom: 20px; border-bottom: 1px solid var(--line) }
.lyric__bar[hidden] { display: none }
.seg { display: inline-flex; border: 1px solid #444 }
.seg button, .size-ctl button { box-sizing: border-box; height: 36px; padding: .24em 14px 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s }
.seg button + button { border-left: 1px solid #444 }
.seg button:hover, .seg button[aria-pressed="true"] { background: #fff; color: #000 }
.size-ctl { display: inline-flex; gap: 8px }
.size-ctl button { width: 36px; padding: .24em 0 0; border: 1px solid #444 }
.size-ctl button:hover:not(:disabled) { background: #fff; color: #000; border-color: #fff }
.size-ctl button:disabled { opacity: .3; cursor: default }

/* the lyrics: two columns, one rhythm */
.lyrics { --ly: 17px; --lg: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--lg) }
.lyrics--single, .lyrics:not([data-view="both"]) { grid-template-columns: minmax(0, 1fr); max-width: 680px }
.lyrics[data-view="orig"] .lyrics__col--trad, .lyrics[data-view="trad"] .lyrics__col--orig { display: none }
.lyrics__col { min-width: 0 }
.lyrics[data-view="both"] .lyrics__col--trad { padding-left: calc(var(--lg) / 2); margin-left: calc(var(--lg) / -2); border-left: 1px solid var(--line) }
.lyrics__label { margin: 0 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.lyrics__text { font: 400 var(--ly)/1.85 var(--body); color: #e9e9e9; overflow-wrap: anywhere }
.lyrics__col--trad .lyrics__text { color: var(--muted) }
.lyrics__text p { margin: 0 0 1.7em }
.lyrics__text p:last-child { margin-bottom: 0 }

.lyric__video { margin-top: 72px }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line) }
.video-frame iframe { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; border: 0 }
.lyric__main .ad-slot { margin: 56px 0 }

/* previous / next lyric */
.lyric-pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; border: 1px solid var(--line) }
.pager__item { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 24px clamp(18px, 2.4vw, 32px); color: #fff; transition: background-color .25s, color .25s }
.pager__item + .pager__item { border-left: 1px solid var(--line) }
.pager__item--next { align-items: flex-end; text-align: right }
.pager__dir { display: inline-flex; align-items: center; gap: 10px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color .25s }
.pager__dir .arrow { margin-top: -.24em }
.pager__title { font: 400 clamp(14px, 1.8vw, 18px)/1.35 var(--title); letter-spacing: .04em; text-transform: uppercase; overflow-wrap: anywhere }
a.pager__item:hover, a.pager__item:focus-visible { background: #fff; color: #000 }
a.pager__item:hover .pager__dir, a.pager__item:focus-visible .pager__dir { color: #000 }
.pager__item.is-empty { pointer-events: none }

/* comments, matched to the lyric page */
.lyric-page .comments-area { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line) }
.lyric-page .comments-title, .lyric-page .comment-reply-title { margin: 0 0 24px; font: 400 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted) }
.lyric-page .comment-list { list-style: none; margin: 0 0 40px; padding: 0 }
.lyric-page .comment-list .children { list-style: none; padding-left: 24px; border-left: 1px solid var(--line) }
.lyric-page .comment-list li { padding: 18px 0; border-bottom: 1px solid var(--line); font: 400 15px/1.65 var(--body); color: var(--text) }
.lyric-page .comment-form label { display: block; margin-bottom: 6px; font: 400 11px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.lyric-page .comment-form input[type="text"], .lyric-page .comment-form input[type="email"], .lyric-page .comment-form input[type="url"], .lyric-page .comment-form textarea {
	width: 100%; max-width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid #555; font: 400 16px/1.5 var(--body); color: #fff; background: transparent; box-shadow: none }
.lyric-page .comment-form input:focus, .lyric-page .comment-form textarea:focus { outline: 0; border-bottom-color: #fff }
.lyric-page .comment-form .submit { width: auto; min-width: 180px; height: 48px; padding: .24em 36px 0; border: 1px solid #fff; border-radius: 0; background: transparent; color: #fff; font: 400 12px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s }
.lyric-page .comment-form .submit:hover { background: #fff; color: #000 }

/* thin reading-progress line under the top bar (js/lyrics.js) */
.lyric-progress { position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #fff; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
	.album { grid-template-columns: minmax(0, 1fr); gap: 36px }
	.album__cover { position: static; max-width: 360px }
	/* the sidebar becomes a compact strip above the lyrics */
	.lyric__layout { grid-template-columns: minmax(0, 1fr) }
	.lyric__aside { position: static; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 24px; align-items: start }
	.lyric__album { margin-top: 0 }
	.lyric__aside .streaming-links { margin-top: 16px }
}
@media (max-width: 767px) {
	.lyrics { grid-template-columns: minmax(0, 1fr) }
	/* no-JS fallback: the two texts stack */
	.lyrics[data-view="both"] .lyrics__col--trad { margin: 56px 0 0; padding-left: 0; border-left: 0 }
	.seg button[data-view="both"] { display: none }
	.track { grid-template-columns: 36px minmax(0, 1fr) auto 22px; gap: 0 12px; padding: 18px 0 }
}
@media (max-width: 560px) {
	.lyric__aside { grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px }
	.lyric-pager { grid-template-columns: 1fr }
	.pager__item + .pager__item { border-left: 0; border-top: 1px solid var(--line) }
	.pager__item--next { align-items: flex-start; text-align: left }
	.pager__item.is-empty { display: none }
}
@media (prefers-reduced-motion: reduce) {
	.bcard__open, .track__go, .bcard--album .bcard__media img { transition: none }
}