/*
Theme Name: Spice-Girls.net Girl Power
Theme URI: https://spice-girls.net
Author: Spice-Girls.net
Description: A loud black-and-white fan news theme: diagonal stripes, graffiti lettering, five fairies and a Spice World globe. Built like the Jennifer-Lopez.net theme, with the same sidebar widgets (latest video streaming, fan vote, merchandise, official links, tour dates, lyrics, trending, social) and the same Albums, Videos, Lyrics and Tour Dates menus. Unofficial fan site theme.
Version: 1.7.6
Requires at least: 6.0
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: spice
Tags: news, blog, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments
*/

/* ---------- Tokens ---------- */
:root {
  --ink: #000;
  --paper: #fff;
  --red: #f00;              /* breaking-news dot, "just in" */
  --yellow: #ff0;           /* highlight (second footer globe) */
  --pink: #f0f;             /* focus ring (third footer globe) */
  --grey: #5f5f5f;          /* quiet text */
  --mist: #f5f5f5;          /* behind pictures while they load */
  --line: rgba(0, 0, 0, .16);

  /* Size of everything above the news and of the footer. 1 = as drawn in the design, .75 = three quarters. */
  --hf: .75;

  /* The line under each menu item, left to right; a sixth item starts again with the first colour. */
  --nav-1: #f00;            /* Home: red */
  --nav-2: #3fa9f5;         /* Spice Girls: blue */
  --nav-3: #ff0;            /* Gallery: yellow */
  --nav-4: #0f0;            /* Fanatic: green */
  --nav-5: #a24bff;         /* Domain: purple */

  /* Fonts. --font-display follows the choice under Customize > Spice fonts.
     "Spice" is your own font: it only has the capitals A-Z, so numbers and punctuation come from the next font in the list. */
  --font-display: "Spice", "Archivo", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --f-display: var(--font-display);
  --f-wide: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-cond: Impact, "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;   /* Impact; Anton is its twin for phones that have no Impact */
  --f-drop: "Press Start 2P", "Lucida Console", "Courier New", monospace;  /* the big first letter (pixel letters); chosen under Customize > Spice fonts */
  --drop-size: 2.8em; --drop-line: .9; --drop-gap: 0;                      /* its size, line height and the space behind it */
  --f-sign: "Handlee", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;  /* the signature under the welcome message (handwriting) */
  --f-body: Arial, "Helvetica Neue", Helvetica, sans-serif;

  --gutter: clamp(16px, 2.2vw, 28px);
  --wrap: 1340px;

  /* The two stripe bands: change the numbers to make stripes thicker or thinner. */
  --stripes-thick: repeating-linear-gradient(-45deg, var(--ink) 0 calc(11px * var(--hf)), var(--paper) calc(11px * var(--hf)) calc(27px * var(--hf)));
  --stripes-thin: repeating-linear-gradient(-45deg, var(--ink) 0 calc(10px * var(--hf)), var(--paper) calc(10px * var(--hf)) calc(18px * var(--hf)));

  /* The black L behind news and articles. */
  --bar-r: clamp(14px, 3vw, 38px);
  --bar-b: clamp(12px, 2.3vw, 29px);
}

/* ---------- Your font ---------- */
@font-face {
  font-family: "Spice";
  src: url("assets/fonts/spice.woff") format("woff");
  font-weight: 100 900; font-stretch: 50% 200%; font-style: normal; font-display: swap;
  unicode-range: U+0020, U+0041-005A;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 4px; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: var(--yellow); color: var(--ink); }
mark { background: var(--yellow); color: var(--ink); padding: 0 .12em; }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  clip: auto; width: auto; height: auto; z-index: 200; top: 8px; left: 8px;
  background: var(--yellow); color: var(--ink); padding: 10px 14px; font-weight: 700;
}
.spice-svg { display: block; width: 100%; height: auto; }

/* Headline type (menu, post titles, box titles): never fake a bolder weight. */
.spice-headline, .spice-nav a, .widget-title, .spice-subhead, .spice-sec-head__title, .spice-artist-group__title {
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-synthesis: none;
  text-transform: uppercase; word-spacing: .14em;
}
/* Wide black caps (scrolling line, small labels). */
.spice-marquee, .spice-kicker, .spice-box__kicker, .spice-ticker__label, .spice-legal, .meta-nav, .spice-stream__label {
  font-family: var(--f-wide); font-weight: 900; font-stretch: 125%; font-synthesis: none;
  text-transform: uppercase;
}

/* ---------- Bands ---------- */
.spice-bar { height: clamp(10px, calc(2.2vw * var(--hf)), calc(28px * var(--hf))); background: var(--ink); }
.spice-bar--thick { height: clamp(12px, calc(2.6vw * var(--hf)), calc(33px * var(--hf))); }
.spice-stripes { background: var(--stripes-thick); }
.spice-stripes--thin { height: clamp(14px, calc(3.4vw * var(--hf)), calc(44px * var(--hf))); background: var(--stripes-thin); }
.spice-stripes--thick { height: clamp(48px, calc(11.5vw * var(--hf)), calc(147px * var(--hf))); border-top: clamp(6px, calc(1.4vw * var(--hf)), calc(18px * var(--hf))) solid var(--ink); }
.spice-no-hero .spice-stripes--thick { height: clamp(36px, calc(6vw * var(--hf)), calc(80px * var(--hf))); }

/* ---------- Fairies: always flying ---------- */
.spice-fairies {
  --sway: clamp(8px, 3.3vw, 44px);   /* how far a fairy drifts left and right */
  --lift: clamp(4px, 1vw, 12px);      /* how far she rises and dips */
  max-width: var(--wrap); margin: 0 auto; padding: 2px calc(var(--gutter) + var(--sway));
  height: calc(clamp(62px, calc(12.4vw * var(--hf)), calc(160px * var(--hf))) + var(--lift));
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.spice-fairies > * { flex: 0 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; }
.spice-fairies img { display: block; height: calc(100% - var(--lift)); width: auto; }
/* Each fairy drifts sideways on its own clock while the picture inside rises, dips and tilts on another,
   so the path never quite repeats. The two times per fairy set the pace. */
.spice-fly {
  --t-sway: 7.3s; --t-bob: 2.9s;
  animation: spice-sway var(--t-sway) ease-in-out infinite alternate;
  will-change: transform;
}
.spice-fly img { height: calc(100% - 2 * var(--lift) - 6px); animation: spice-bob var(--t-bob) ease-in-out infinite alternate; will-change: transform; }
.spice-fly--posh   { --t-sway: 8.1s; --t-bob: 3.3s; }
.spice-fly--sporty { --t-sway: 5.3s; --t-bob: 2.3s; animation-delay: -2.2s; }
.spice-fly--sporty img { animation-delay: -.9s; }
.spice-fly--scary  { --t-sway: 6.7s; --t-bob: 2.7s; animation-delay: -4.1s; }
.spice-fly--scary img { animation-delay: -1.6s; }
.spice-fly--baby   { --t-sway: 9.1s; --t-bob: 3.7s; animation-delay: -1.3s; }
.spice-fly--baby img { animation-delay: -2.4s; }
.spice-fly--ginger { --t-sway: 6.1s; --t-bob: 2.5s; animation-delay: -3.3s; }
.spice-fly--ginger img { animation-delay: -.4s; }
.spice-fairies__world { transition: transform .3s ease; }
.spice-fairies__world img { animation: spice-globe 9s ease-in-out infinite alternate; }
.spice-fairies__world:hover { transform: rotate(-6deg) scale(1.04); }

/* ---------- Hero: the header picture, or a silent video with the picture as its still ---------- */
.spice-hero { padding: 0 clamp(0px, 3vw, 39px); background: var(--paper); }
.spice-hero__frame {
  position: relative; margin: 0 auto; background: var(--mist); overflow: hidden;
  width: min(100%, max(calc(100% * var(--hf)), 560px)); max-width: calc(1920px * var(--hf));
}
.spice-hero__media { display: block; width: 100%; height: auto; }
.spice-hero__video { aspect-ratio: 1920 / 907; object-fit: cover; }
/* Pause / play for the header video (the only thing on the page that can be paused). */
.spice-motion {
  position: absolute; z-index: 3; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 11px 7px; border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 400 12px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.spice-motion:hover { background: var(--ink); color: var(--paper); }
.spice-motion svg { width: 10px; height: 10px; flex: none; }
.spice-motion__play, .spice-still .spice-motion__pause { display: none; }
.spice-still .spice-motion__play { display: inline; }

/* The scrolling line under the picture: always moving */
.spice-marquee {
  overflow: hidden; background: var(--ink); color: var(--paper);
  margin-top: clamp(4px, calc(1vw * var(--hf)), calc(12px * var(--hf)));
  font-size: clamp(20px, calc(4.6vw * var(--hf)), calc(58px * var(--hf))); line-height: 1; letter-spacing: .01em;
  padding: .2em 0 .17em;
}
.spice-marquee__track { display: flex; width: max-content; animation: spice-scroll var(--spice-marquee, 40s) linear infinite; }
.spice-marquee__track span { white-space: pre; }

/* ---------- Welcome ---------- */
.spice-welcome-band {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(10px, calc(2vw * var(--hf)), calc(24px * var(--hf))) var(--gutter) clamp(14px, calc(3vw * var(--hf)), calc(40px * var(--hf)));
  display: grid; grid-template-columns: clamp(68px, calc(13vw * var(--hf)), calc(170px * var(--hf))) minmax(0, 1fr);
  gap: clamp(12px, calc(2.4vw * var(--hf)), calc(30px * var(--hf))); align-items: center;
}
.spice-welcome-band__globe { display: block; width: 100%; height: auto; }
.spice-welcome-band__text { font-size: clamp(15px, calc(1.65vw * var(--hf)), calc(21px * var(--hf))); line-height: 1.75; }
@media (max-width: 1100px) { .spice-welcome-band__text br { display: none; } }
.spice-welcome-band__text p { margin: 0; }

/* The big first letter: raised, sitting on the first line. */
.spice-dropcap > p:first-child::first-letter {
  font-family: var(--f-drop); font-weight: 400; font-size: var(--drop-size); line-height: var(--drop-line);
  margin-right: var(--drop-gap);
}

/* ---------- Header: the black menu bar ---------- */
.spice-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--ink); color: var(--paper);
}
.admin-bar .spice-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .spice-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .spice-header { top: 0; } }
.spice-header__inner {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(10px, calc(2vw * var(--hf)), calc(26px * var(--hf))) var(--gutter);
  display: flex; align-items: center; gap: clamp(14px, calc(2.6vw * var(--hf)), calc(34px * var(--hf)));
}
.spice-logo, .custom-logo-link { flex: none; display: block; line-height: 0; transition: transform .25s ease; }
.spice-logo:hover, .custom-logo-link:hover { transform: rotate(-8deg); }
.spice-logo img, .custom-logo-link img { display: block; height: clamp(36px, calc(5.2vw * var(--hf)), calc(66px * var(--hf))); width: auto; }

.spice-nav { flex: 1; min-width: 0; --nav-size: clamp(12.5px, calc(2.24vw * var(--hf)), calc(28.6px * var(--hf))); }
.spice-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.spice-nav li { display: flex; align-items: center; --nav-line: var(--nav-1); }
.spice-nav li:nth-child(5n+2) { --nav-line: var(--nav-2); }
.spice-nav li:nth-child(5n+3) { --nav-line: var(--nav-3); }
.spice-nav li:nth-child(5n+4) { --nav-line: var(--nav-4); }
.spice-nav li:nth-child(5n+5) { --nav-line: var(--nav-5); }
.spice-nav li + li::before {
  content: ""; width: 2px; height: 1.4em; background: currentColor; margin: 0 clamp(8px, calc(1.5vw * var(--hf)), calc(20px * var(--hf)));
  font-size: var(--nav-size);
}
.spice-nav a {
  display: block; padding: .42em 0 .5em; text-decoration: none; white-space: nowrap;
  font-size: var(--nav-size); line-height: 1; letter-spacing: .02em;
  border-bottom: max(3px, calc(6px * var(--hf))) solid transparent;
  transition: border-color .2s ease;
}
/* The coloured line: on the page you are on, and while pointing at an item. */
.spice-nav a:hover,
.spice-nav .current-menu-item > a,
.spice-nav .current_page_item > a,
.spice-nav .current-menu-ancestor > a,
.spice-nav .current-page-ancestor > a,
.spice-nav .current-cat > a { border-bottom-color: var(--nav-line); }
.spice-nav .sub-menu { display: none; }

.spice-header__actions { display: flex; gap: 12px; align-items: center; flex: none; }
.spice-iconbtn {
  display: grid; place-items: center; width: max(36px, calc(48px * var(--hf))); height: max(36px, calc(48px * var(--hf)));
  background: transparent; border: 2px solid currentColor; cursor: pointer; color: inherit;
  transition: background .2s ease, color .2s ease;
}
.spice-iconbtn:hover, .spice-iconbtn[aria-expanded="true"] { background: var(--paper); color: var(--ink); }
.spice-iconbtn svg { width: 16px; height: 16px; }

.spice-search { border-top: 1px solid rgba(255, 255, 255, .5); }
.spice-search form { max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gutter); display: flex; gap: 12px; }
.search-form { display: flex; gap: 12px; max-width: 560px; }
.search-form label { flex: 1; min-width: 0; display: block; }
.search-form .search-field {
  width: 100%; background: transparent; color: inherit; border: 0; border-bottom: 3px solid currentColor; border-radius: 0;
  padding: 9px 2px; font: 700 19px var(--f-body);
}
.search-form .search-field::placeholder { color: inherit; opacity: .6; }
.search-form .search-field:focus { outline: none; border-bottom-color: var(--pink); }
.spice-btn, .search-submit, .comment-form .submit {
  display: inline-block; cursor: pointer; text-decoration: none; text-align: center;
  padding: 9px 16px 8px; border: 2px solid currentColor; border-radius: 0; background: transparent; color: inherit;
  font: 400 14px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.spice-btn:hover, .search-submit:hover, .comment-form .submit:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.spice-header .search-submit:hover, .spice-box--dark .spice-btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

@media (max-width: 900px) {
  .spice-header__inner { flex-wrap: wrap; gap: 8px 16px; }
  .spice-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); --nav-size: 14px; }
  .spice-nav::-webkit-scrollbar { display: none; }
  .spice-nav ul { flex-wrap: nowrap; }
  .spice-nav li + li::before { margin: 0 11px; }
  .spice-header__actions { margin-left: auto; }
}

/* ---------- Ticker: breaking news, always moving ---------- */
.spice-ticker {
  display: flex; align-items: stretch; overflow: hidden;
  background: var(--ink); color: var(--paper);
  border-top: 1px solid var(--paper); border-bottom: 1px solid var(--paper);
  box-shadow: 0 3px 0 var(--ink);
}
.spice-ticker__label {
  flex: none; display: flex; align-items: center; gap: clamp(8px, calc(1.6vw * var(--hf)), calc(22px * var(--hf)));
  padding: clamp(9px, calc(1.8vw * var(--hf)), calc(26px * var(--hf))) 0 clamp(9px, calc(1.8vw * var(--hf)), calc(26px * var(--hf))) var(--gutter);
  font-size: clamp(12px, calc(1.65vw * var(--hf)), calc(21px * var(--hf))); line-height: 1; letter-spacing: .02em; white-space: nowrap;
}
.spice-ticker__label::before {
  content: ""; width: .82em; height: .82em; border-radius: 50%; background: var(--red);
  animation: spice-blink 1.6s steps(1, end) infinite;
}
.spice-ticker__label::after { content: ""; width: 2px; height: 1.05em; background: currentColor; margin-left: -.35em; }
.spice-ticker__viewport { overflow: hidden; flex: 1; min-width: 0; display: flex; align-items: center; }
.spice-ticker__track { display: flex; width: max-content; padding-left: 18px; }
.spice-ticker__track.is-looping { animation: spice-scroll 70s linear infinite; }
/* It only waits while someone tabs through the headlines with the keyboard. */
.spice-ticker:focus-within .spice-ticker__track { animation-play-state: paused; }
.spice-ticker__track a {
  display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
  font: 700 clamp(12px, calc(1.3vw * var(--hf)), calc(16px * var(--hf)))/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
}
.spice-ticker__track a:hover { text-decoration: underline; }
.spice-ticker__track a::after { content: "\2605"; margin: 0 22px; font-size: .9em; }

/* ---------- Layout ---------- */
.spice-main {
  --main-pad-b: clamp(48px, 6vw, 80px);
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(22px, 3vw, 36px) var(--gutter) var(--main-pad-b);
  display: grid; grid-template-columns: minmax(0, 1fr) 325px; grid-template-rows: auto 1fr; column-gap: clamp(32px, 6.5vw, 96px); row-gap: 0; align-items: start;
}
.spice-content { min-width: 0; grid-column: 1; grid-row: 1; }
.spice-main > .spice-pagenav { grid-column: 1; grid-row: 2; }
.spice-main > .spice-sidebar { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 1000px) {
  .spice-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .spice-main > .spice-content, .spice-main > .spice-pagenav, .spice-main > .spice-sidebar { grid-column: 1; grid-row: auto; }
  .spice-main > .spice-sidebar { margin-top: 56px; }
}

/* The four round buttons under the content: back, home, forward, refresh. */
.spice-pagenav { display: flex; justify-content: flex-end; gap: clamp(14px, 2.2vw, 26px); margin-top: 18px; }
@media (min-width: 1001px) { .spice-pagenav { margin-bottom: calc(16px - var(--main-pad-b)); } }   /* close to the footer stripes when the content is the longest column */
.spice-pagenav__btn {
  --pn-bg: var(--ink); --pn-fg: var(--paper);
  flex: none; display: grid; place-items: center; width: clamp(46px, 5.2vw, 58px); height: clamp(46px, 5.2vw, 58px); padding: 0;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--pn-bg); color: var(--pn-fg); cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.spice-pagenav__btn[hidden] { display: none; }
.spice-pagenav__btn svg { display: block; width: 52%; height: 52%; }
.spice-pagenav__btn--home svg { width: 64%; height: 64%; }
.spice-pagenav__disc { fill: var(--pn-fg); }
.spice-pagenav__cut { fill: var(--pn-bg); }
.spice-pagenav__btn:hover, .spice-pagenav__btn:focus-visible { --pn-bg: var(--paper); --pn-fg: var(--ink); transform: scale(1.06); }
.spice-pagenav__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }


/* ---------- Shared type ---------- */
.spice-kicker {
  display: inline-block; width: fit-content; margin: 0;
  background: var(--ink); color: var(--paper); text-decoration: none;
  padding: 5px 9px 4px; font-size: 11.5px; line-height: 1; letter-spacing: .1em;
}
a.spice-kicker:hover { background: var(--yellow); color: var(--ink); }

.spice-headline { margin: 0; line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: anywhere; }
.spice-headline a { text-decoration: none; }
.spice-headline a:hover { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .14em; }
.spice-subhead { margin: 0 0 16px; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; padding-bottom: 12px; border-bottom: 5px solid var(--ink); }

.spice-meta { display: flex; flex-wrap: wrap; align-items: center; margin: 0; font-size: 15px; line-height: 1.4; }
.spice-meta > * + *::before { content: "|"; margin: 0 .45em; }
.spice-meta a { text-decoration: none; }
.spice-meta a:hover { text-decoration: underline; }
.spice-meta .spice-live {
  display: inline-flex; align-items: center; gap: 7px; color: var(--red);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 13px;
}
.spice-meta .spice-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); animation: spice-blink 1.6s steps(1, end) infinite; }

/* Heading above a list: graffiti, title, double rule with the little globe */
.spice-sec-head { margin: 0 0 clamp(34px, 5.5vw, 76px); display: grid; gap: 14px; justify-items: start; }
.spice-sec-head__graffiti { width: min(425px, 82%); margin-left: -6px; }
.spice-sec-head__title { margin: 0; font-family: var(--f-wide); font-stretch: 125%; font-size: clamp(24px, 3.2vw, 40px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.spice-sec-head__title--art { width: min(352px, 70%); }
.spice-sec-head__title mark { letter-spacing: -.02em; }
.spice-sec-head__rule { width: 100%; display: flex; align-items: center; gap: clamp(10px, 2vw, 18px); margin-top: 12px; height: 51px; }
.spice-sec-head__rule span:first-child { flex: 2.6; height: 5px; background: var(--ink); }
.spice-sec-head__rule span:last-child { flex: 1; height: 3px; background: var(--ink); position: relative; }
.spice-sec-head__rule img { position: absolute; left: 50%; top: 50%; width: 56px; height: auto; transform: translate(-50%, -50%); }
.spice-archive-desc { margin: -30px 0 40px; color: var(--grey); max-width: 60ch; }
.spice-empty { display: grid; gap: 16px; justify-items: start; }
.spice-empty p { margin: 0; }

/* ---------- Pictures ---------- */
.ph { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; background: var(--mist); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .5s ease; }
/* No featured image: halftone dots with the globe, like the cover art. */
.ph--art {
  background:
    url("assets/img/globe.svg") center / auto 58% no-repeat,
    radial-gradient(circle at center, var(--ink) 0 2.6px, transparent 3.2px) 0 0 / 13px 13px var(--paper);
}
a:hover > .ph img, .spice-video__poster:hover img { transform: scale(1.03); }

/* ---------- The black L: news items and articles ---------- */
.spice-panel { position: relative; padding: 0 calc(var(--bar-r) + clamp(10px, 2vw, 22px)) calc(var(--bar-b) + clamp(18px, 3vw, 44px)) 0; }
.spice-panel::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: clamp(18px, 5.4%, 45px); right: 0; bottom: 0; top: min(38%, 300px);
  border-right: var(--bar-r) solid var(--ink); border-bottom: var(--bar-b) solid var(--ink);
}
.spice-panel__inner { position: relative; z-index: 1; }

/* ---------- Latest news ---------- */
.spice-news { display: grid; gap: clamp(26px, 3.4vw, 44px); }
.spice-news-item + .spice-news-item { padding-top: clamp(26px, 3.4vw, 44px); }
.spice-news-item + .spice-news-item::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, transparent 6px 29px);
}
.spice-news-item__head { display: grid; gap: 12px; margin-bottom: 14px; }
.spice-news-item .spice-headline { font-size: clamp(22px, 2.85vw, 37px); }
.spice-news-item__head, .spice-news-item__body { padding-left: clamp(0px, 1vw, 10px); }
.spice-news-item__frame { display: block; border: 1px solid var(--ink); }
.spice-news-item__body { margin-top: clamp(10px, 1.6vw, 20px); font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.85; max-width: 64ch; }
.spice-news-item__body p { margin: 0 0 .5em; }
.spice-news-item__body p:last-child { margin-bottom: 0; }
.spice-more-link {
  display: block; width: fit-content; margin: clamp(26px, 4.5vw, 62px) auto 0; padding: 4px 2px;
  font-size: clamp(17px, 1.5vw, 20px); text-decoration: none; border-bottom: 3px solid transparent;
  transition: border-color .2s ease;
}
.spice-more-link:hover { border-bottom-color: var(--ink); }

.navigation.pagination { margin-top: clamp(30px, 4vw, 50px); }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.nav-links .page-numbers {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 10px;
  text-decoration: none; border: 2px solid var(--ink);
  font: 900 17px/1 var(--f-display); font-synthesis: none;
  transition: background .2s ease, color .2s ease;
}
.nav-links .page-numbers.current, .nav-links a.page-numbers:hover { background: var(--ink); color: var(--paper); }
.nav-links .page-numbers.dots { border-color: transparent; }

/* ---------- Sidebar boxes ---------- */
.spice-sidebar { display: grid; gap: 40px; min-width: 0; padding-top: 22px; }
@media (max-width: 1000px) {
  .spice-sidebar { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 46px 30px; align-items: start; }
  .spice-sidebar .spice-box__fairy { right: -12px; }
}
.widget { position: relative; min-width: 0; }

/* The box: black frame, a triangle in two corners, small line + big title, ring on a dashed line. */
.spice-box {
  --box-ink: var(--ink); --box-paper: var(--paper);
  position: relative; padding: 44px 18px 20px; text-align: center;
  color: var(--box-ink); border: 3px solid var(--ink);
  background:
    linear-gradient(135deg, var(--box-ink) 50%, transparent 50.5%) 15px 15px / 46px 46px no-repeat,
    linear-gradient(315deg, var(--box-ink) 50%, transparent 50.5%) calc(100% - 15px) calc(100% - 15px) / 46px 46px no-repeat,
    var(--box-paper);
}
.spice-box--dark { --box-ink: var(--paper); --box-paper: var(--ink); }
.spice-box__fairy {
  position: absolute; z-index: 3; top: -42px; right: -22px; height: 142px; width: auto; pointer-events: none;
  animation: spice-float 5.5s ease-in-out infinite;
}
.spice-box__head { display: grid; gap: 4px; justify-items: center; }
.spice-box__kicker { margin: 0 50px; font-size: 13px; line-height: 1.1; letter-spacing: .06em; }
.spice-box .widget-title { margin: 0; max-width: 100%; font-size: 24px; line-height: 1; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; }
.spice-box.has-fairy .widget-title { padding-right: 14px; }
.spice-box__cover { text-decoration: none; }
.spice-box__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.spice-box:has(.spice-box__cover):hover .widget-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* Long dashes with the ring in the middle. */
.spice-box__divider { display: flex; align-items: center; margin: 12px 4px 18px; }
.spice-box__divider::before, .spice-box__divider::after { content: ""; flex: 1; height: 3px; background: repeating-linear-gradient(90deg, currentColor 0 15px, transparent 15px 24px); }
.spice-box__divider::after { background: repeating-linear-gradient(270deg, currentColor 0 15px, transparent 15px 24px); }
.spice-box__divider img { display: block; width: 50px; height: auto; margin: 0 -2px; }
/* The room at the bottom is for the corner triangle; a closing button sits next to it. */
.spice-box__body { position: relative; z-index: 2; display: grid; gap: 14px; text-align: left; padding: 0 8px 50px; min-width: 0; font-size: 17px; line-height: 1.3; }
.spice-box__body > * { min-width: 0; }
.spice-box__body a { position: relative; z-index: 2; }
.spice-box__actions { margin: 6px 0 -36px; text-align: center; }
.spice-box .spice-btn { padding: 9px 18px 8px; font-size: 13.5px; letter-spacing: .08em; }
.spice-widget--merch .spice-btn { padding: 15px 34px 14px; }
.spice-box__foot { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -36px 56px 0 8px; padding-top: 12px; border-top: 2px dashed currentColor; font: 400 13px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }

/* Inside the text boxes (lyrics, merchandise, links, tour): picture, bold line, text. */
.spice-card__img { display: block; width: 100%; height: auto; }
.spice-card__heading { margin: 2px 0 -2px; text-align: center; font: 700 16.5px/1.2 var(--f-body); letter-spacing: -.02em; text-wrap: balance; }
.spice-card__text p { margin: 0 0 .6em; }
.spice-card__text p:last-child { margin-bottom: 0; }
.spice-card__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.spice-card__links a { text-decoration: none; }
.spice-card__links a:hover { text-decoration: underline; }
/* Official links: "Name | www", centred in the box; only the word www is the link. */
.spice-widget--links .spice-card__links { text-align: center; justify-items: center; }
.spice-widget--links .spice-card__www { font: 900 .78em/1 var(--f-wide); font-stretch: 125%; letter-spacing: -.02em; text-decoration: none; }
.spice-widget--links .spice-card__www:hover,
.spice-widget--links .spice-card__www:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Widgets that are not Spice boxes (search, categories…) get the same frame. */
.spice-sidebar > .widget:not([class*="spice-widget--"]) { border: 3px solid var(--ink); padding: 22px 20px; }
.spice-sidebar > .widget:not([class*="spice-widget--"]) .widget-title { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px dashed var(--ink); font-size: 19px; line-height: 1.05; text-align: center; }
.spice-sidebar > .widget:not([class*="spice-widget--"]) ul { margin: 0; padding-left: 20px; }

/* Now streaming */
.spice-tag {
  position: absolute; z-index: 3; top: 30px; right: 4px; margin: 0; pointer-events: none;
  display: grid; justify-items: center; transform: rotate(34deg); line-height: .86;
}
.spice-tag--art { display: block; width: 102px; top: 38px; right: 5px; }
.spice-tag--art svg { display: block; width: 100%; height: auto; }
.spice-widget--streaming .spice-box { padding-top: 62px; }
.spice-widget--streaming .spice-box__head { padding-right: 34px; }
.spice-widget--streaming .spice-box__body, .spice-widget--poll .spice-box__body { padding-bottom: 34px; }
.spice-tag b { font: 900 21px/.9 var(--f-display); font-synthesis: none; text-transform: uppercase; letter-spacing: .02em; }
.spice-tag i { font: 900 10.5px/1 var(--f-wide); font-stretch: 125%; font-style: normal; text-transform: uppercase; letter-spacing: .34em; margin-right: -.34em; }
.spice-tv { position: relative; background: var(--paper); color: var(--ink); padding: 8px 34px; }
.spice-tv--art { padding: 0; }
.spice-tv--art img { display: block; width: 100%; height: auto; }
.spice-tv__side {
  position: absolute; top: 8px; bottom: 8px; width: 34px; overflow: hidden;
  display: flex; align-items: center; justify-content: flex-start; gap: 5px;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; text-transform: uppercase;
}
.spice-tv__side--left { left: 0; font: 900 19px/1 var(--f-display); font-synthesis: none; letter-spacing: .02em; }
.spice-tv__side--left small { font: 900 8px/1 var(--f-wide); letter-spacing: .1em; align-self: flex-start; }
.spice-tv__side--right { right: 0; font: 400 20px/1 var(--f-cond); letter-spacing: .02em; }
.spice-tv.is-playing { padding: 8px; }
.spice-tv.is-playing .spice-tv__side { display: none; }

/* Video: click-to-play */
.spice-video { min-width: 0; }
.spice-video__poster { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; background: var(--mist); }
.spice-video__poster.ph, .spice-vidgrid__frame.ph { aspect-ratio: 16 / 9; }
.spice-video__poster.ph img, .spice-vidgrid__frame.ph img { object-position: center; }
.spice-video__play {
  position: absolute; z-index: 4; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%);
  background: var(--ink); border: 2px solid var(--paper); display: grid; place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.spice-video__play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--paper); }
.spice-video__poster:hover .spice-video__play, .spice-vidgrid__frame:hover .spice-video__play { background: var(--red); transform: translate(-50%, -50%) scale(1.08); }
.spice-video__frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--ink); }
.spice-video--vertical .spice-video__frame { aspect-ratio: 9 / 16; max-height: 580px; margin: 0 auto; }
.spice-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.spice-video__title { margin: 6px 0 0; text-align: center; font: 400 clamp(22px, 2.2vw, 27px)/1.06 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; overflow-wrap: anywhere; }
.spice-video__note { margin: 0; font-size: 13px; line-height: 1.4; text-align: center; }
.spice-stream { display: grid; gap: 9px; justify-items: center; }
.spice-stream__rule { width: 62%; height: 1px; background: currentColor; position: relative; margin: 14px 0 12px; }
.spice-stream__rule img { position: absolute; left: 50%; top: 50%; width: 38px; height: auto; transform: translate(-50%, -50%); }
.spice-stream__label { font-family: var(--f-cond); font-weight: 400; font-stretch: normal; font-size: 13px; line-height: 1; letter-spacing: .2em; }
.spice-stream__links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.spice-stream__links a, .spice-stream__links span {
  display: inline-block; padding: 9px 14px 8px; border: 2px solid var(--box-ink, var(--ink)); text-decoration: none;
  background: var(--box-ink, var(--ink)); color: var(--box-paper, var(--paper));
  font: 400 13px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.spice-stream__links a:hover { background: transparent; color: var(--box-ink, var(--ink)); }

/* Fan vote */
.spice-poll { display: grid; gap: 12px; margin: 0; }
.spice-poll__q { margin: 0; text-align: center; font: 700 15px/1.25 var(--f-body); text-transform: uppercase; text-wrap: balance; }
.spice-poll__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.spice-poll__opt {
  position: relative; overflow: hidden; isolation: isolate; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 9px; cursor: pointer; text-align: left;
  background: var(--paper); border: 2px solid var(--ink);
  transition: box-shadow .15s ease, transform .15s ease;
}
.spice-poll__opt:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.spice-poll__bar { position: absolute; inset: 0; z-index: 0; transform-origin: left; transform: scaleX(0); background: var(--ink); transition: transform .5s ease; }
.spice-poll__label, .spice-poll__pct { position: relative; z-index: 1; color: #fff; mix-blend-mode: difference; }
.spice-poll__label { flex: 1; font: 700 14px/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .03em; }
.spice-poll__pct { font: 400 16px/1 var(--f-cond); letter-spacing: .04em; opacity: 0; transition: opacity .3s ease .2s; }
.spice-poll.is-voted .spice-poll__opt { cursor: default; box-shadow: none; transform: none; }
.spice-poll.is-voted .spice-poll__bar { transform: scaleX(var(--pct, 0)); }
.spice-poll.is-voted .spice-poll__pct { opacity: 1; }
.spice-poll__opt.is-choice .spice-poll__label::after { content: " \2605"; }
.spice-poll__total { margin: 0; text-align: center; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }

/* Tour dates */
.spice-tour__name { margin: 0; text-align: center; font: 700 16px/1.25 var(--f-body); }
.spice-tour { list-style: none; margin: 0; padding: 6px 4px 0; display: grid; gap: 20px; }
.spice-tour li { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.spice-tour time { display: grid; place-content: center; justify-items: center; gap: 3px; width: 46px; height: 46px; line-height: 1; background: var(--ink); color: var(--paper); }
.spice-tour time b { font: 400 12.5px/1 var(--f-cond); letter-spacing: .06em; }
.spice-tour time span { font: 900 16px/1 var(--f-wide); font-stretch: 125%; font-synthesis: none; }
.spice-tour__place { min-width: 0; }
/* All dates of a tour, on its tour page: several columns, the year in the date square. */
.spice-tour--dates { padding: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px 30px; }
.spice-tour--dates li { grid-template-columns: 52px minmax(0, 1fr) auto; }
.spice-tour--dates time { width: 52px; height: 58px; gap: 2px; }
.spice-tour--dates time i { font: 400 11.5px/1 var(--f-cond); font-style: normal; letter-spacing: .08em; opacity: .85; }
.spice-tour__place strong { display: block; font: 700 15px/1.15 var(--f-body); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.spice-tour__place span { display: block; margin-top: 2px; color: var(--grey); font-size: 13px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spice-tix {
  font: 400 12.5px/1 var(--f-cond); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  padding: 8px 7px 7px; border: 2px solid var(--ink); white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
a.spice-tix:hover { background: var(--ink); color: var(--paper); }
.spice-tix--low { border-color: var(--red); color: #c00000; }
a.spice-tix--low:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.spice-tix--out { border-color: #cfcfcf; color: #555; text-decoration: line-through; }

/* Trending now */
.spice-trending { margin: 0; padding: 0; list-style: none; counter-reset: trend; display: grid; }
.spice-trending li + li { border-top: 2px dashed var(--ink); }
.spice-trending a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; padding: 11px 0; text-decoration: none; counter-increment: trend; }
.spice-trending li:first-child a { padding-top: 0; }
.spice-trending a::before { content: counter(trend); font: 900 24px/1 var(--f-display); font-synthesis: none; text-align: center; }
.spice-trending strong { display: block; font: 700 14.5px/1.3 var(--f-body); text-transform: uppercase; }
.spice-trending a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }

/* Spice Girls on social */
.spice-sh { display: grid; gap: 12px; min-width: 0; }
.spice-sh__head { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.spice-sh__avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 400 15px/1 var(--f-cond); letter-spacing: .04em; }
.spice-sh__who { display: grid; gap: 2px; min-width: 0; }
.spice-sh__who strong { font: 700 15.5px/1.2 var(--f-body); }
.spice-sh__who span { color: var(--grey); font-size: 12.5px; }
.spice-sh__head:hover strong { text-decoration: underline; }
.spice-sh__glyph { margin-left: auto; flex: none; }
.spice-sh__media { width: 100%; }
.spice-sh__media--tall { aspect-ratio: 9 / 16; max-height: 520px; }
.spice-sh--instagram .spice-sh__media { aspect-ratio: 4 / 5; }
.spice-sh__caption { margin: 0; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.spice-sh__tag { font-weight: 700; }
.spice-sh__stats { margin: 0; color: var(--grey); font-size: 12.5px; }
.spice-sh__embed { overflow: hidden; }
.spice-sh__embed blockquote { margin: 0 auto !important; min-width: 0 !important; max-width: 100% !important; }
.spice-sh__embed iframe { max-width: 100%; }
.spice-sh__embed--fb iframe { display: block; width: 100%; min-height: 480px; border: 0; }
.spice-sh__icons { display: inline-flex; gap: 12px; align-items: center; }
.spice-sh__icons a { display: grid; place-items: center; transition: transform .2s ease; }
.spice-sh__icons a:hover { transform: translateY(-3px) rotate(-8deg); }

/* Welcome message */
.spice-reel { display: grid; gap: 8px; }
.spice-reel__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.spice-reel__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer; background: var(--mist); border: 2px solid var(--ink); opacity: .5; transition: opacity .2s ease; }
.spice-reel__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spice-reel__thumb:hover, .spice-reel__thumb:focus-visible { opacity: .85; }
.spice-reel__thumb.is-active { opacity: 1; box-shadow: 3px 3px 0 var(--ink); }
.spice-welcome__msg { font-size: 15px; line-height: 1.6; }
.spice-welcome__msg p { margin: 0 0 10px; }
.spice-welcome__msg p:last-child { margin-bottom: 0; }
.spice-welcome__sig { margin: 0; text-align: right; font: 400 22px/1.2 var(--f-sign); padding-right: 46px; }

/* ---------- Albums, videos, lyrics ---------- */
.spice-disco, .spice-vidgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 34px 26px; }
.spice-disco__item .spice-headline, .spice-vidgrid__item .spice-headline { margin: 12px 0 6px; font-size: 17px; line-height: 1.15; }
.spice-disco__cover, .spice-vidgrid__frame { display: block; border: 2px solid var(--ink); transition: box-shadow .15s ease, transform .15s ease; }
.spice-disco__cover:hover, .spice-vidgrid__frame:hover { box-shadow: 7px 7px 0 var(--ink); transform: translate(-3px, -3px); }
.spice-disco__cover .ph, .spice-album__cover .ph { aspect-ratio: 1; }
.spice-disco__cover .ph img, .spice-album__cover .ph img { object-position: center; }
.spice-disco__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--grey); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.spice-vidgrid__item[hidden] { display: none; }

.spice-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 30px; padding-bottom: 18px; border-bottom: 2px dashed var(--ink); }
.spice-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spice-filter button {
  background: var(--paper); padding: 8px 12px 7px; border: 2px solid var(--ink); cursor: pointer;
  font: 400 13px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.spice-filter button:hover, .spice-filter button.is-active { background: var(--ink); color: var(--paper); }

.spice-album__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 34px; align-items: start; }
@media (max-width: 760px) { .spice-album__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.spice-album__aside { display: grid; gap: 18px; }
.spice-album__cover { margin: 0; border: 2px solid var(--ink); }
.spice-album__main { display: grid; gap: 34px; min-width: 0; }
.spice-album__section > .entry-content { margin: 0; }
.spice-videopage .spice-album__section { margin-top: 40px; }
.spice-stream--plain { justify-items: start; }
.spice-stream--plain .spice-stream__links { justify-content: flex-start; }
/* Tracklist: number, title + length, the disc of a single, the Lyrics button. */
.spice-tracks { list-style: none; counter-reset: spice-track; margin: 0; padding: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; column-gap: 12px; }
.spice-tracks li { counter-increment: spice-track; grid-column: 1 / -1; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px 58px; column-gap: 12px; row-gap: 10px; align-items: center; min-height: 54px; padding: 8px 0; border-bottom: 2px dashed var(--ink); }
@supports (grid-template-columns: subgrid) { .spice-tracks li { grid-template-columns: subgrid; } }
.spice-tracks li::before { content: counter(spice-track, decimal-leading-zero); grid-column: 1; font: 400 17px/1 var(--f-cond); letter-spacing: .06em; }
.spice-tracks__name { grid-column: 2; font: 700 16px/1.25 var(--f-body); text-transform: uppercase; overflow-wrap: anywhere; }
.spice-tracks__name a { text-decoration: none; }
.spice-tracks__name a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.spice-tracks__time { margin-left: .3em; white-space: nowrap; }
.spice-tracks__note { margin-left: .5em; color: var(--grey); font-size: 13px; font-weight: 400; text-transform: none; }
.spice-tracks__single { grid-column: 3; display: block; width: 30px; height: 30px; line-height: 0; transition: transform .15s ease, color .15s ease; }
.spice-tracks__single .spice-ico { width: 30px; height: 30px; }
.spice-tracks__single:hover { color: #d40000; transform: rotate(40deg) scale(1.1); }
.spice-tracks__lyrics { grid-column: 4; justify-self: end; }
.spice-tracks--plain li { min-height: 46px; }
.spice-tracks__audio { grid-column: 2 / -1; width: 100%; max-width: 420px; height: 34px; }

/* Icons, and the headings that carry one ("Singles", "Music videos"). */
.spice-ico { display: inline-block; flex: none; vertical-align: middle; }
.spice-iconhead { display: flex; align-items: center; gap: .38em; margin: 0 0 26px; padding-bottom: 16px; border-bottom: 2px dashed var(--ink); font: 400 clamp(30px, 3.6vw, 40px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: .005em; }
.spice-iconhead .spice-ico { width: 1.02em; height: 1.02em; }
.spice-album__wide { margin-top: clamp(40px, 5vw, 58px); }
.spice-album__wide, .spice-album__section, #lyrics { scroll-margin-top: 112px; }   /* jump links land below the menu bar, which stays on screen */
.spice-album__wide > .spice-video { margin-bottom: 30px; }

/* Singles: the cover in a thick black frame, the title underneath. */
.spice-singles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 26px; }
@media (min-width: 620px) { .spice-singles { grid-template-columns: repeat(auto-fill, minmax(170px, 200px)); } }
.spice-singles a { display: block; text-decoration: none; }
.spice-singles__cover { display: block; aspect-ratio: 1; border: 16px solid var(--ink); background: var(--paper); line-height: 0; transition: box-shadow .15s ease, transform .15s ease; }
.spice-singles__cover img, .spice-singles__cover .ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.spice-singles a:hover .spice-singles__cover { box-shadow: 7px 7px 0 var(--red); transform: translate(-3px, -3px); }
.spice-singles__title { display: block; margin-top: 14px; text-align: center; font: 400 17px/1.15 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.spice-singles a:hover .spice-singles__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* The single page: credits, chart positions, the folded lyric. */
.spice-album__cover--single { border-width: 16px; }
.spice-album__grid--solo { grid-template-columns: minmax(0, 260px); }
@media (min-width: 620px) { .spice-album__grid--solo .spice-album__aside { grid-template-columns: 260px minmax(0, 1fr); gap: 34px; align-items: start; } .spice-album__grid--solo { grid-template-columns: minmax(0, 1fr); } }
.spice-album__grid--one { grid-template-columns: minmax(0, 1fr); }
.spice-album__grid--one .spice-album__aside { max-width: 560px; }
.spice-album__aside .spice-subhead { margin: 0; font-size: 19px; }
.spice-album__aside .spice-subhead + .spice-facts > div:first-child { border-top: 0; }
.spice-facts { margin: 0; display: grid; }
.spice-facts > div { padding: 11px 0; border-bottom: 2px dashed var(--ink); }
.spice-facts > div:first-child { border-top: 2px dashed var(--ink); }
.spice-facts dt { margin: 0 0 4px; font: 400 12.5px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
.spice-facts dd { margin: 0; font-size: 15.5px; line-height: 1.4; overflow-wrap: anywhere; }
.spice-charts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 26px; }
.spice-charts li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; padding: 10px 0; border-bottom: 2px dashed var(--ink); }
.spice-charts__peak { min-width: 46px; height: 46px; padding: 2px 8px 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 400 24px/1 var(--f-cond); }
.spice-charts__name { font: 700 15px/1.25 var(--f-body); text-transform: uppercase; }
.spice-charts__name span { display: block; margin-top: 3px; color: var(--grey); font-size: 13px; font-weight: 400; text-transform: none; }
.spice-readmore { margin: 22px 0 0; }
.spice-album__main > .spice-readmore { margin-top: -8px; }

/* ---------- Tours ---------- */
.spice-tourhead { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: clamp(28px, 3.6vw, 44px); }
.spice-tourhead__image { margin: 0 0 10px; max-width: 100%; border: 2px solid var(--ink); line-height: 0; }
.spice-tourhead__image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; }
.spice-tourhead__title { margin: 0; font: 400 clamp(38px, 6.2vw, 74px)/.98 var(--f-cond); text-transform: uppercase; letter-spacing: .005em; overflow-wrap: anywhere; }
.spice-tourhead .spice-meta { justify-content: center; }
.spice-tourgrid .spice-vidgrid__frame.ph--art { background-size: cover; }

.spice-countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 26px 12px; }
.spice-countries li { display: grid; justify-items: center; align-content: start; text-align: center; }
.spice-countries img { display: block; width: 100%; max-width: 92px; height: auto; }   /* the size of the globes */
.spice-countries__name { margin-top: 6px; max-width: 100%; font: 400 15px/1.15 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: break-word; }
.spice-countries__note { margin-top: 4px; color: var(--grey); font-size: 13px; line-height: 1.3; }

.spice-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.spice-gallery a { display: block; aspect-ratio: 1; overflow: hidden; border: 2px solid var(--ink); background: #eee; line-height: 0; }
.spice-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.spice-gallery a:hover img, .spice-gallery a:focus-visible img { transform: scale(1.06); }

/* A picture opened large. */
.spice-zoom { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; padding: 64px 64px 22px; background: rgba(0, 0, 0, .93); }
.spice-zoom[hidden] { display: none; }
.spice-zoom__img { display: block; max-width: 100%; max-height: 100%; border: 3px solid var(--paper); background: #111; }
.spice-zoom__cap { margin: 12px 0 0; min-height: 1.3em; color: var(--paper); font-size: 14px; line-height: 1.3; text-align: center; }
.spice-zoom button { position: absolute; width: 44px; height: 44px; padding: 0; border: 2px solid var(--paper); background: var(--ink); color: var(--paper); font: 400 24px/1 var(--f-body); cursor: pointer; }
.spice-zoom button:hover, .spice-zoom button:focus-visible { background: var(--paper); color: var(--ink); }
.spice-zoom__close { top: 10px; right: 10px; }
.spice-zoom__prev { left: 10px; top: 50%; margin-top: -22px; }
.spice-zoom__next { right: 10px; top: 50%; margin-top: -22px; }
.spice-zoom button[hidden] { display: none; }
@media (max-width: 600px) { .spice-zoom { padding: 64px 10px 18px; } .spice-zoom__prev, .spice-zoom__next { top: auto; bottom: 10px; margin: 0; } .spice-zoom__cap { padding: 0 54px; min-height: 44px; } }
html.spice-zoomed { overflow: hidden; }

/* ---------- Artist page: picture + biography, then the releases ---------- */
.spice-artist-intro { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
@media (max-width: 760px) { .spice-artist-intro { grid-template-columns: minmax(0, 1fr); } .spice-artist-intro .spice-album__aside { max-width: 320px; } }
.spice-artist-photo { line-height: 0; background: var(--paper); }
.spice-artist-photo img { display: block; width: 100%; height: auto; }
.spice-artist-photo--alone { max-width: 320px; }
.spice-artist-bio > :first-child { margin-top: 0; }
.spice-artist-bio > :last-child { margin-bottom: 0; }
.spice-era { margin-top: clamp(44px, 5.4vw, 64px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 2px dashed var(--ink); }
.spice-sec-head + .spice-era { margin-top: 0; padding-top: 0; border-top: 0; }
.spice-era__title { margin: 0; font: 400 clamp(36px, 5vw, 58px)/1 var(--f-cond); text-transform: uppercase; letter-spacing: .005em; }
.spice-era__title a { text-decoration: none; }
.spice-era__title a:hover { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 5px; }
.spice-era__part { margin-top: clamp(30px, 3.8vw, 44px); }
.spice-era > .spice-era__part:first-child { margin-top: 0; }
.spice-era__part .spice-iconhead, .spice-era h3.spice-iconhead { font-size: clamp(26px, 3vw, 34px); }
.spice-era .spice-disco { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 620px) { .spice-era .spice-disco { grid-template-columns: repeat(auto-fill, minmax(170px, 200px)); } }
.spice-era .spice-artist-part { margin-bottom: 0; }

.spice-belongs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 24px; font: 400 13px/1.3 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
.spice-belongs a { margin-left: .35em; color: var(--ink); font: 700 15.5px/1.3 var(--f-body); letter-spacing: 0; text-transform: none; }
.spice-single-mark { display: inline-block; vertical-align: -.1em; margin-left: .15em; line-height: 0; }
.spice-single-mark .spice-ico { width: 1.1em; height: 1.1em; }
.spice-album__quote { margin: 0; padding: 22px 24px; background: var(--ink); color: var(--paper); }
.spice-album__quote blockquote { margin: 0; font: 400 clamp(20px, 2.2vw, 26px)/1.25 var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
.spice-album__quote blockquote p { margin: 0 0 10px; }
.spice-album__quote figcaption { margin-top: 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }

/* Albums and songs, grouped by artist */
[data-cats][hidden] { display: none; }
.spice-artist-group { margin-bottom: clamp(34px, 4vw, 52px); }
.spice-artist-group:last-child { margin-bottom: 0; }
.spice-artist-group__title { margin: 0 0 22px; padding: 12px 14px 10px; background: var(--ink); color: var(--paper); font-size: clamp(18px, 2.1vw, 25px); line-height: 1; }
.spice-artist-group__title a { text-decoration: none; }
.spice-artist-group__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.spice-artist-part { margin-bottom: clamp(36px, 4.4vw, 56px); }
.spice-artist-part .spice-tour { max-width: 540px; padding-left: 0; }
.spice-lyric-album { display: grid; grid-template-columns: clamp(70px, 11vw, 116px) minmax(0, 1fr); gap: 14px 22px; align-items: start; padding: 20px 0; }
.spice-lyric-album + .spice-lyric-album { background: repeating-linear-gradient(90deg, var(--ink) 0 15px, transparent 15px 24px) top left / 100% 3px no-repeat; }
.spice-artist-group__title + .spice-lyric-album { padding-top: 0; }
.spice-lyric-album__cover a, .spice-lyric-album__cover .ph { display: block; border: 2px solid var(--ink); aspect-ratio: 1; line-height: 0; }
.spice-lyric-album__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.spice-lyric-album__title { margin: 0 0 8px; font: 700 18px/1.2 var(--f-body); text-transform: uppercase; }
.spice-lyric-album__title a { text-decoration: none; }
.spice-lyric-album__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.spice-lyric-album__title span { margin-left: 6px; color: var(--grey); font-size: 13px; font-weight: 400; letter-spacing: .05em; }
.spice-lyric-list { margin: 0; padding: 0 0 0 1.9em; columns: 2 210px; column-gap: 34px; font-size: 16.5px; line-height: 1.55; }
.spice-lyric-list li { break-inside: avoid; }
.spice-lyric-list li::marker { font-family: var(--f-cond); font-size: .9em; }
.spice-lyric-list a { text-decoration: none; }
.spice-lyric-list a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.spice-lyric-list .is-current { font-weight: 700; }
.spice-lyricpage__more { margin-top: 40px; }
.spice-lyricpage__cover { margin: 0 0 26px; max-width: 260px; border: 2px solid var(--ink); line-height: 0; }
.entry-content.spice-lyrics { font-size: 18px; line-height: 1.8; }

/* ---------- Single / page ---------- */
.spice-article__head { display: grid; gap: 14px; justify-items: start; margin-bottom: clamp(16px, 2.2vw, 26px); }
.spice-article__head .spice-headline { font-size: clamp(26px, 3.7vw, 48px); }
.spice-article__image { margin: 0 0 clamp(16px, 2.4vw, 28px); border: 1px solid var(--ink); line-height: 0; background: var(--mist); }
.spice-article__image img { display: block; width: 100%; height: auto; }
.spice-article .spice-video { margin-bottom: 24px; border: 2px solid var(--ink); }
.entry-content { font-size: clamp(17px, 1.5vw, 19.5px); line-height: 1.8; max-width: 70ch; overflow-wrap: break-word; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content > * { margin-top: 0; margin-bottom: 1.1em; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--f-display); font-weight: 900; font-synthesis: none; text-transform: uppercase;
  line-height: 1.1; margin-top: 1.6em; margin-bottom: .55em; text-wrap: balance;
}
.entry-content h2 { font-size: clamp(21px, 2.3vw, 28px); }
.entry-content h3 { font-size: clamp(18px, 1.9vw, 22px); }
.entry-content h4 { font-size: 17px; }
.entry-content blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 12px solid var(--ink);
  font: 400 clamp(21px, 2.3vw, 27px)/1.22 var(--f-cond); text-transform: uppercase; letter-spacing: .01em;
}
.entry-content blockquote p { margin: 0 0 .5em; }
.entry-content blockquote cite { font: 400 14px var(--f-body); letter-spacing: .04em; }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption, .wp-caption-text, .wp-element-caption { color: var(--grey); font-size: 13.5px; line-height: 1.4; margin-top: 8px; }
.entry-content iframe { max-width: 100%; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: .9em; }
.entry-content th, .entry-content td { border: 2px solid var(--ink); padding: 8px 10px; text-align: left; }
.entry-content th { background: var(--ink); color: var(--paper); text-transform: uppercase; }
.entry-content hr { border: 0; height: 8px; background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, transparent 6px 29px); }
.alignleft { float: left; margin: .4em 1.4em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.4em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gallery-item { margin: 0; }
.gallery-item img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
.sticky .spice-headline::before { content: "\2605  "; }
.page-links { margin-top: 1.4em; font-weight: 700; }

.spice-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.spice-tags a { padding: 7px 11px 6px; border: 2px solid var(--ink); font: 400 13px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .14em; text-decoration: none; transition: background .2s ease, color .2s ease; }
.spice-tags a:hover { background: var(--ink); color: var(--paper); }
.post-navigation { margin-top: 34px; }
.post-navigation .nav-links { justify-content: space-between; align-items: flex-start; gap: 20px; border-top: 5px solid var(--ink); padding-top: 18px; flex-wrap: nowrap; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.post-navigation a { display: grid; gap: 6px; max-width: 30ch; text-decoration: none; font: 700 15.5px/1.3 var(--f-body); text-transform: uppercase; }
.post-navigation a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.post-navigation .meta-nav { font-size: 11.5px; letter-spacing: .1em; color: var(--grey); }

/* comments */
.comments-area { display: grid; gap: 20px; max-width: 70ch; margin-top: 44px; }
.comments-area .spice-subhead { margin-bottom: 0; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.comment-list .children { list-style: none; padding-left: 20px; border-left: 5px solid var(--ink); margin: 0; }
.comment-body { padding: 16px 0; border-bottom: 2px dashed var(--ink); }
.comment-author { font-weight: 700; text-transform: uppercase; }
.comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 10px; }
.comment-metadata { font-size: 12.5px; color: var(--grey); margin-top: 4px; }
.comment-metadata a { text-decoration: none; }
.comment-content p { margin: .6em 0; }
.reply a { font: 400 13px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
.comment-reply-title { margin: 0 0 6px; font: 900 clamp(19px, 2vw, 23px)/1.1 var(--f-display); font-synthesis: none; text-transform: uppercase; }
.comment-form { display: grid; gap: 12px; }
.comment-form p { margin: 0; }
.comment-form label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.comment-form .comment-form-cookies-consent label { display: inline; text-transform: none; font-weight: 400; letter-spacing: 0; }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea {
  width: 100%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 0; padding: 11px 12px; font: inherit;
}
.comment-form input:focus, .comment-form textarea:focus { outline: 3px solid var(--pink); outline-offset: 2px; }
.comment-form .submit { background: var(--ink); color: var(--paper); border-color: var(--ink); font-size: 15px; padding: 12px 20px 11px; }
.comment-form .submit:hover { background: var(--paper); color: var(--ink); }

/* ---------- Footer ---------- */
.spice-footer { background: var(--ink); color: var(--paper); }
.spice-footer__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(22px, calc(3.4vw * var(--hf)), calc(40px * var(--hf))) var(--gutter) clamp(18px, calc(2.6vw * var(--hf)), calc(30px * var(--hf)));
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr) minmax(0, 1.42fr); gap: clamp(20px, calc(3vw * var(--hf)), calc(40px * var(--hf))); align-items: end;
}
.spice-footer a { text-decoration: none; }
.spice-footer a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.spice-footer__brand { align-self: start; display: grid; gap: calc(16px * var(--hf)); justify-items: start; }
.spice-footer__globes { display: flex; gap: clamp(8px, calc(1.8vw * var(--hf)), calc(22px * var(--hf))); }
.spice-footer__globes img { display: block; width: clamp(52px, calc(8vw * var(--hf)), calc(104px * var(--hf))); height: auto; transition: transform .3s ease; }
.spice-footer__globes img:hover { transform: rotate(-8deg) scale(1.06); }
.spice-footer__wordmark { display: block; width: min(calc(340px * var(--hf)), 100%); }
.spice-footer__tagline { margin: calc(-8px * var(--hf)) 0 0; padding-left: clamp(0px, calc(3.6vw * var(--hf)), calc(48px * var(--hf))); font-size: max(12.5px, calc(15px * var(--hf))); line-height: 1.4; }
.spice-footer__col { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(10px, calc(1.8vw * var(--hf)), calc(22px * var(--hf))); align-items: end; }
.spice-footer__label { margin: 0; line-height: 0; }
.spice-footer__label svg { width: auto; height: clamp(108px, calc(14.6vw * var(--hf)), calc(190px * var(--hf))); }
.spice-footer__col + .spice-footer__col .spice-footer__label svg { height: clamp(140px, calc(20vw * var(--hf)), calc(262px * var(--hf))); }
.spice-archive { list-style: none; margin: 0; padding: 0 0 clamp(14px, calc(5vw * var(--hf)), calc(70px * var(--hf))); display: grid; gap: 1px; font-size: clamp(14px, calc(1.55vw * var(--hf)), calc(20px * var(--hf))); line-height: 1.45; }
.spice-footer__about { display: grid; gap: calc(14px * var(--hf)); }
.spice-disclaimer { font-size: max(12.5px, calc(14.5px * var(--hf))); line-height: 1.5; }
.spice-disclaimer p { margin: 0 0 8px; }
.spice-disclaimer p:last-child { margin-bottom: 0; }
.spice-disclaimer a { text-decoration: underline; }
.spice-footer__five { display: flex; gap: clamp(5px, calc(1vw * var(--hf)), calc(12px * var(--hf))); }
.spice-footer__five img { display: block; flex: 1 1 0; min-width: 0; width: 20%; max-width: calc(62px * var(--hf)); height: auto; }
@media (max-width: 900px) {
  .spice-footer__inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 30px; }
  .spice-archive { padding-bottom: 0; }
}
.spice-legal { background: var(--paper); color: var(--ink); }
.spice-legal p {
  max-width: var(--wrap); margin: 0 auto; padding: clamp(10px, calc(1.6vw * var(--hf)), calc(20px * var(--hf))) clamp(8px, 1vw, 12px);
  display: flex; flex-wrap: wrap; align-items: center; gap: .32em;
  font-size: clamp(13px, calc(2.25vw * var(--hf)), calc(28px * var(--hf))); line-height: 1; letter-spacing: -.02em;
}
.spice-legal .spice-svg { width: auto; height: .74em; flex: none; }

/* ---------- Keyframes ---------- */
@keyframes spice-scroll { to { transform: translateX(-50%); } }
@keyframes spice-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }
@keyframes spice-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(1.6deg); } }
@keyframes spice-sway { from { transform: translateX(calc(var(--sway) * -1)); } to { transform: translateX(var(--sway)); } }
@keyframes spice-bob { from { transform: translateY(calc(var(--lift) * -1)) rotate(-8deg); } to { transform: translateY(var(--lift)) rotate(7deg); } }
@keyframes spice-globe { from { transform: rotate(-3deg) scale(.97); } to { transform: rotate(3deg) scale(1.02); } }

/* Motion: the scrolling line, the breaking news, the fairies and the blinking dots always move.
   Only the header video can be paused, with the button on it; the choice is remembered per browser. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .spice-sidebar .spice-box__fairy { height: 116px; top: -32px; right: -10px; }
  .spice-footer__col + .spice-footer__col { align-items: start; }
  .post-navigation .nav-links { flex-wrap: wrap; }
}



/* ---------- Music timeline (ported and adapted from the Jennifer-Lopez.net theme) ---------- */
.spice-tl-intro { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(28px, 4vw, 58px) var(--gutter) 30px; }
.spice-tl-intro__title { margin: 0; font: 900 clamp(42px, 6.4vw, 92px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; text-wrap: balance; }
.spice-tl-intro__text { max-width: 58ch; font-size: 18px; line-height: 1.6; }
.spice-tl-intro__text p { margin: 0 0 .6em; }
.spice-tl-intro__text p:last-child { margin-bottom: 0; }
.spice-tl { container-type: inline-size; }
.spice-tl-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 var(--gutter) 28px; }
.spice-tl-filter { min-height: 44px; padding: 0 16px; cursor: pointer; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); font: 700 12px/1 var(--f-wide); letter-spacing: .12em; text-transform: uppercase; }
.spice-tl-filter:hover { background: var(--yellow); }
.spice-tl-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.spice-tl-bar { position: sticky; top: 0; z-index: 20; background: var(--ink); color: var(--paper); border-bottom: 1px solid #333; }
.spice-tl-bar ul { list-style: none; margin: 0; padding: 14px var(--gutter) 10px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(14px, 2.4vw, 38px); overflow-x: auto; scrollbar-width: none; }
.spice-tl-bar ul::-webkit-scrollbar { display: none; }
.spice-tl-bar li { flex: none; }
.spice-tl-year { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #aaa; text-decoration: none; }
.spice-tl-year b { font: 900 22px/1 var(--f-display); }
.spice-tl-year span { font: 500 10px/1 var(--f-wide); letter-spacing: .1em; text-transform: uppercase; }
.spice-tl-year::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.spice-tl-year:hover, .spice-tl-year.is-on { color: var(--yellow); }
.spice-tl-era { position: relative; padding: clamp(34px, 5vw, 64px) 0; scroll-margin-top: 80px; }
.spice-tl-era--a { background: var(--paper); }
.spice-tl-era--b { background: var(--mist); }
.spice-tl-era-title { margin: 0 0 32px; padding: 0 var(--gutter); text-align: center; font: 900 clamp(36px, 5vw, 66px)/1 var(--f-display); }
.spice-tl-rows { position: relative; list-style: none; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.spice-tl-rows::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--ink); }
.spice-tl-row { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 120px minmax(0,1fr); grid-template-areas: "left mid right"; align-items: center; min-height: 130px; }
.spice-tl-row[hidden], .spice-tl-era[hidden] { display: none; }
.spice-tl-mid { grid-area: mid; position: relative; height: 26px; display: flex; align-items: center; justify-content: center; transform: translateY(-14px); }
.spice-tl-mid::before { content: ""; position: absolute; top: 50%; width: 60px; height: 3px; margin-top: -1px; background: var(--ink); }
.spice-tl-row--left .spice-tl-mid::before { right: 50%; }
.spice-tl-row--right .spice-tl-mid::before { left: 50%; }
.spice-tl-date { grid-area: mid; justify-self: center; align-self: center; position: relative; z-index: 2; transform: translateY(17px); background: var(--paper); border: 2px solid var(--ink); padding: 5px 8px 4px; font: 700 11px/1 var(--f-wide); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.spice-tl-row--left .spice-tl-card { grid-area: left; justify-self: end; }
.spice-tl-row--right .spice-tl-card { grid-area: right; justify-self: start; }
.spice-tl-dot { position: relative; z-index: 2; display: block; box-sizing: border-box; width: 15px; height: 15px; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); }
.spice-tl-dot--single { background: var(--red); }
.spice-tl-dot--video { background: var(--yellow); }
.spice-tl-row--right .spice-tl-dot { width: 24px; height: 24px; border: 5px solid var(--yellow); background: var(--ink); }
.spice-tl-card { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 440px; box-sizing: border-box; padding: 13px; text-decoration: none; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.spice-tl-card--album { max-width: 500px; padding: 15px; background: var(--ink); color: var(--paper); box-shadow: 6px 6px 0 var(--yellow); }
.spice-tl-card:hover, .spice-tl-card:focus-visible { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--red); color: inherit; }
.spice-tl-card--album:hover, .spice-tl-card--album:focus-visible { color: var(--paper); }
.spice-tl-card:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.spice-tl-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.spice-tl-title { font: 900 19px/1.12 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; }
.spice-tl-title--album { font-size: clamp(22px, 2.4vw, 32px); line-height: 1; }
.spice-tl-sub { font-size: 13px; line-height: 1.35; opacity: .75; }
.spice-tl-more { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--f-wide); letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.spice-tl-arrow { font-size: 18px; }
.spice-tl-cover { flex: none; position: relative; overflow: hidden; display: grid; place-items: center; width: 76px; height: 76px; box-sizing: border-box; border: 3px solid var(--ink); background: var(--mist); }
.spice-tl-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spice-tl-cover__initials { font: 900 24px/1 var(--f-display); }
.spice-tl-cover--album { width: 118px; height: 118px; border: 2px solid var(--yellow); background: #222; padding: 8px; text-align: center; }
.spice-tl-cover__name { font: 900 17px/1.05 var(--f-display); color: var(--yellow); overflow-wrap: anywhere; }
.spice-tl-cover--video { width: 112px; height: 63px; border: 0; background: #222; }
.spice-tl-play { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--yellow); }
.spice-tl-play::before { content: ""; position: absolute; left: 12px; top: 9px; border-style: solid; border-width: 7px 0 7px 10px; border-color: transparent transparent transparent var(--ink); }
.spice-tl-chip { display: inline-flex; align-items: center; width: fit-content; padding: 5px 8px 4px; border: 2px solid currentColor; font: 700 10px/1 var(--f-wide); letter-spacing: .12em; text-transform: uppercase; }
.spice-tl-chip--single { background: var(--red); color: var(--ink); border-color: var(--ink); }
.spice-tl-chip--video { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.spice-tl-chip--album { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.spice-tl-end { display: grid; justify-items: center; gap: 14px; margin: 0; padding: 10px var(--gutter) 40px; font: 900 24px/1 var(--f-display); text-transform: uppercase; text-align: center; }
.spice-tl-end span { width: 25px; height: 25px; box-sizing: border-box; border-radius: 50%; border: 5px solid var(--yellow); box-shadow: 0 -55px 0 -12px var(--red); }
.spice-tl-empty { text-align: center; padding: 30px var(--gutter); }
@container (max-width: 760px) {
  .spice-tl-rows { padding: 0 16px; }
  .spice-tl-rows::before { left: 27px; }
  .spice-tl-row { grid-template-columns: 48px minmax(0,1fr); grid-template-areas: "mid date" "mid card"; align-items: start; row-gap: 8px; min-height: 0; padding: 20px 0 8px; }
  .spice-tl-row--left .spice-tl-card, .spice-tl-row--right .spice-tl-card { grid-area: card; justify-self: stretch; max-width: none; }
  .spice-tl-mid { grid-row: 1 / span 2; align-self: start; height: auto; padding-top: 6px; transform: none; }
  .spice-tl-mid::before { display: none; }
  .spice-tl-date { grid-area: date; justify-self: start; transform: none; }
  .spice-tl-card { gap: 10px; padding: 10px; }
  .spice-tl-cover--album { width: min(100px, 28vw); height: min(100px, 28vw); }
  .spice-tl-title { font-size: 16px; }
  .spice-tl-title--album { font-size: 21px; }
  .spice-tl-bar ul { justify-content: flex-start; }
}