/**
 * Spice Awards — components: header, banners, buttons, cards, accordions,
 * sponsor carousel, CTA band, footer.
 */

/* =====================================================================
 * Header / nav
 * ================================================================== */

.spice-header {
	padding-block: 1.75rem;
}

.spice-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* The logo sits in a fixed-height layout box and the image OVERFLOWS it
   downward, so scaling the lockup up never grows the header row or shifts the
   nav. --spice-logo-box is the row height; --spice-logo-h is the render size. */
.spice-header__logo {
	position: relative;
	flex: 0 0 auto;
	height: var(--spice-logo-box);
	z-index: 2;
}

.spice-header__logo a,
.spice-header__logo picture {
	display: block;
	height: 100%;
}

.spice-header__logo img,
.spice-header__logo .custom-logo {
	display: block;
	width: auto;
	height: var(--spice-logo-h);
	max-width: none;
}

@media (min-width: 992px) {
	.spice-header__logo img,
	.spice-header__logo .custom-logo {
		position: absolute;
		top: 0;
		left: 0;
	}
}

.spice-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, .4rem + 1.6vw, 2rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.spice-nav__link {
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-body);
	font-weight: 500;
	color: var(--spice-ink-soft);
	white-space: nowrap;
}

.spice-nav__link:hover { color: var(--spice-gold-dark); }

.spice-nav__item.is-current > .spice-nav__link {
	font-weight: 700;
	color: var(--spice-ink);
}

/* Inverse nav — used when the header sits inside the black hero banner. */
.spice-header--inverse .spice-nav__link { color: rgba(255,255,255,.78); }
.spice-header--inverse .spice-nav__link:hover { color: var(--spice-gold-light); }
.spice-header--inverse .spice-nav__item.is-current > .spice-nav__link {
	color: var(--spice-white);
	font-weight: 700;
}

/* Mobile toggle */
.spice-nav__toggle {
	display: none;
	background: none;
	border: 0;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--spice-ink);
	padding: .25rem .5rem;
}
.spice-header--inverse .spice-nav__toggle { color: var(--spice-white); }

/* ---- Mobile drawer -------------------------------------------------
   Rendered at body level by header.php, NOT inside the banner: .spice-banner
   sets isolation:isolate, which would trap the drawer in its stacking context
   and let the backdrop paint over it, swallowing every tap. */

.spice-mobile-nav {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(320px, 86vw);
	background: var(--spice-black);
	padding: 5rem 1.75rem 2rem;
	transform: translateX(100%);
	transition: transform .25s ease;
	z-index: 1080;
	overflow-y: auto;
	visibility: hidden;
}

.spice-mobile-nav.is-open { transform: translateX(0); visibility: visible; }

.spice-mobile-nav .spice-nav__list {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.spice-mobile-nav .spice-nav__link { color: rgba(255,255,255,.85); font-size: 1.125rem; }
.spice-mobile-nav .spice-nav__item.is-current > .spice-nav__link { color: var(--spice-gold-light); }

/* In the drawer the CTA is just another stacked link — the pill treatment and
   the gold belong to the desktop header only. Reset every part of it, including
   the hover/current background, so it matches its siblings exactly. */
.spice-mobile-nav .spice-nav__item.menu-cta > .spice-nav__link,
.spice-mobile-nav .spice-nav__item.menu-cta > .spice-nav__link:hover,
.spice-mobile-nav .spice-nav__item.menu-cta.is-current > .spice-nav__link {
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	font-weight: 500;
	color: rgba(255, 255, 255, .85);
}

/* …and it takes the same current-page treatment the other items get:
   gold-light at weight 700, not the reset weight above. */
.spice-mobile-nav .spice-nav__item.menu-cta.is-current > .spice-nav__link {
	color: var(--spice-gold-light);
	font-weight: 700;
}

.spice-nav__close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	background: none;
	border: 0;
	color: var(--spice-white);
	font-size: 1.75rem;
	line-height: 1;
}

.spice-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 1070;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}
.spice-nav-backdrop.is-open { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
	.spice-nav__toggle { display: block; }
	.spice-nav--inline { display: none; }
}

@media (min-width: 992px) {
	.spice-mobile-nav,
	.spice-nav-backdrop { display: none; }
}

/* =====================================================================
 * Banners
 * ================================================================== */

.spice-banner {
	position: relative;
	background: var(--spice-banner-bg);
	color: var(--spice-banner-ink);
	border-radius: var(--spice-radius-lg);
	overflow: hidden;
	isolation: isolate;
}

/* Top-to-bottom scrim over the artwork, clearing by just past halfway so the
   lower half shows at full colour. It exists mainly to hold the nav, which sits
   over the brightest part of the gold swirl. */
.spice-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		/* Nav band, in PIXELS not percentages. The hero is 680px and interior
		   banners 440px, so percentage stops gave the nav noticeably less cover
		   on the shorter banner — it measured 4.35:1 there against 5.4:1 on the
		   hero. An absolute band protects the nav identically at any height. */
		linear-gradient(
			180deg,
			rgba(0, 0, 0, .50) 0,
			rgba(0, 0, 0, .34) 110px,
			rgba(0, 0, 0, 0)   210px
		),
		/* soft pool in the bottom-left corner, under the headline and buttons */
		radial-gradient(72% 88% at 6% 104%, rgba(0, 0, 0, .40) 0%, rgba(0, 0, 0, .16) 45%, transparent 70%),
		/* overall shape: clears by just past halfway, lower half full colour */
		linear-gradient(
			180deg,
			rgba(0, 0, 0, .34) 0%,
			rgba(0, 0, 0, .24) 20%,
			rgba(0, 0, 0, .10) 38%,
			rgba(0, 0, 0, 0)   54%
		);
	z-index: -1;
}

.spice-banner__inner {
	padding: 0;
	display: flex;
	flex-direction: column;
}

/* Both banner variants run almost edge to edge — only --spice-hero-inset of
   white space around them — while their CONTENT stays on the same container
   grid as the rest of the page, so headings line up down the whole layout. */
.spice-banner-wrap {
	padding: var(--spice-hero-inset) var(--spice-hero-inset) 0;
}

.spice-banner-grid {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	max-width: var(--spice-container);
	margin-inline: auto;
	padding-inline: var(--spice-gutter);
}

@media (min-width: 992px) {
	.spice-banner--page { --spice-logo-h: 102px; }
}

/* Interior page banner — same treatment as the hero, appreciably shorter.
   The nav sits at the top, the breadcrumb directly beneath it, and the title
   is pushed to the bottom of the panel. */
.spice-banner--page .spice-banner__inner {
	min-height: 440px;
}

.spice-banner--page .spice-banner-grid {
	padding-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.spice-banner--page .spice-breadcrumb {
	margin-top: calc(var(--spice-logo-h) - var(--spice-logo-box) + .75rem);
}

.spice-banner--page .spice-banner-grid > :last-child {
	margin-top: auto;
	padding-top: clamp(2rem, 1.25rem + 3vw, 3.5rem);
}

.spice-banner--page .spice-banner__title {
	font-family: var(--spice-font-heading);
	font-weight: 400;
	font-size: var(--spice-fs-banner);
	color: var(--spice-white);
	margin: 0;
}

.spice-banner__strapline {
	color: rgba(255,255,255,.82);
	margin: .625rem 0 0;
	max-width: 62ch;
}

/* Home hero banner — the site header lives inside this one. */
.spice-banner--hero .spice-banner__inner {
	min-height: 680px;
}

.spice-banner .spice-header {
	padding-inline: 0;
}

.spice-banner--hero .spice-banner__body {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2.75rem, 1.75rem + 3.5vw, 4.5rem);
	padding-inline: 0;
	margin-top: auto;
}

@media (max-width: 575.98px) {
	.spice-banner-wrap { padding: 1rem 1rem 0; }
}

/* Eyebrow — the event tagline, sitting above the hero heading. */
.spice-banner__eyebrow {
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--spice-gold-light);
	margin: 0 0 1rem;
}

.spice-banner__heading {
	font-family: var(--spice-font-heading);
	color: var(--spice-white);
	font-size: var(--spice-fs-banner);
	line-height: 1.1;
	margin: 0 0 .875rem;
	max-width: 20ch;
}

.spice-banner__heading strong { font-weight: 700; display: block; }
.spice-banner__heading span   { font-weight: 400; display: block; }

.spice-banner__meta {
	color: rgba(255,255,255,.8);
	max-width: 46ch;
	margin-bottom: 1.75rem;
}

.spice-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

/* Breadcrumb */
.spice-breadcrumb {
	font-size: var(--spice-fs-small);
	color: rgba(255,255,255,.7);
	display: flex;
	align-items: center;
	gap: .45rem;
	flex-wrap: wrap;
}

/* A real chevron rather than a ">" — the comparison glyph is heavier than the
   text and sits high on the line. Sized down since the icon reads larger. */
.spice-breadcrumb__sep {
	font-size: .68em;
	line-height: 1;
	opacity: .6;
}
.spice-breadcrumb a { color: rgba(255,255,255,.7); }
.spice-breadcrumb a:hover { color: var(--spice-gold-light); }
.spice-breadcrumb [aria-current] { color: var(--spice-white); font-weight: 600; }

/* =====================================================================
 * Buttons
 * ================================================================== */

.spice-btn {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-small);
	font-weight: 600;
	line-height: 1;
	padding: .875rem 1.375rem;
	border-radius: var(--spice-radius-sm);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.spice-btn--gold {
	background: var(--spice-gold);
	color: var(--spice-ink);
	border-color: var(--spice-gold);
}
.spice-btn--gold:hover { background: var(--spice-gold-light); color: var(--spice-ink); }

.spice-btn--outline-gold {
	background: transparent;
	color: var(--spice-white);
	border-color: var(--spice-gold);
}
.spice-btn--outline-gold:hover { background: var(--spice-gold); color: var(--spice-ink); }

.spice-btn--dark {
	background: var(--spice-ink);
	color: var(--spice-white);
	border-color: var(--spice-ink);
}
.spice-btn--dark:hover { background: var(--spice-black); color: var(--spice-white); }

.spice-btn--outline-dark {
	background: var(--spice-white);
	color: var(--spice-ink);
	border-color: var(--spice-ink);
}
.spice-btn--outline-dark:hover { background: var(--spice-ink); color: var(--spice-white); }

/* =====================================================================
 * Cards
 * ================================================================== */

.spice-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 210px;
	padding: 1.5rem;
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius);
	background: linear-gradient(160deg, var(--spice-cream) 0%, var(--spice-cream-deep) 100%);
	color: inherit;
	transition: box-shadow .18s ease, transform .18s ease;
}

a.spice-card:hover {
	box-shadow: var(--spice-shadow-card);
	transform: translateY(-2px);
}

.spice-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: auto;
}

.spice-card__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--spice-gold);
	color: var(--spice-white);
	font-size: 1.125rem;
	flex: 0 0 auto;
}

.spice-card__action {
	font-size: var(--spice-fs-small);
	font-weight: 700;
	color: var(--spice-ink);
	white-space: nowrap;
}

.spice-card__title {
	font-size: var(--spice-fs-h3);
	margin: 1.75rem 0 .5rem;
}

.spice-card__text {
	font-size: var(--spice-fs-small);
	color: var(--spice-body);
	margin: 0;
}

/* Ceremony / gallery tiles */
.spice-tile {
	position: relative;
	display: block;
	border-radius: var(--spice-radius);
	overflow: hidden;
	min-height: 220px;
	background: var(--spice-black);
	color: var(--spice-white);
}

.spice-tile img,
.spice-tile .spice-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	aspect-ratio: auto;
}

.spice-tile__body {
	position: relative;
	z-index: 2;
	height: 100%;
	min-height: inherit;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	padding: 1.5rem;
	background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.1) 100%);
}

.spice-tile__title {
	font-family: var(--spice-font-heading);
	font-weight: 400;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	text-transform: uppercase;
	color: var(--spice-white);
	margin: 0 0 .5rem;
}

.spice-tile__link {
	font-size: var(--spice-fs-small);
	color: rgba(255,255,255,.9);
}

.spice-tile--tall { min-height: 440px; }

/* =====================================================================
 * Accordion (How It Works, award results)
 * ================================================================== */

.spice-accordion { display: grid; gap: .75rem; }

.spice-accordion__item {
	border: 1px solid var(--spice-line);
	border-radius: var(--spice-radius);
	background: linear-gradient(160deg, var(--spice-cream) 0%, var(--spice-cream-deep) 100%);
	overflow: hidden;
}

.spice-accordion__item.is-open { background: var(--spice-white); }

.spice-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1rem 1.25rem;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--spice-font-heading);
	font-weight: 700;
	font-size: var(--spice-fs-h4);
	color: var(--spice-ink);
	cursor: pointer;
}

.spice-accordion__icon {
	flex: 0 0 auto;
	font-size: 1.125rem;
	color: var(--spice-ink);
	transition: transform .2s ease;
}

.spice-accordion__item.is-open .spice-accordion__icon { transform: rotate(180deg); }

.spice-accordion__panel { display: none; }
.spice-accordion__item.is-open .spice-accordion__panel { display: block; }

.spice-accordion__body {
	padding: 0 1.25rem 1.25rem;
	color: var(--spice-body);
}

/* Results panel: category art tile beside the results table. */
.spice-results {
	display: grid;
	grid-template-columns: 270px 1fr;
	align-items: stretch;
}

.spice-results__art {
	position: relative;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 1.5rem;
	color: var(--spice-white);
	background: var(--spice-results-art-bg);
	min-height: 260px;
	max-height: calc( var(--spice-results-row-h) * (var(--spice-results-rows) + 1) );
}

.spice-results__art-year {
	font-size: var(--spice-fs-small);
	color: rgba(255,255,255,.75);
	margin-bottom: .35rem;
}

.spice-results__art-title {
	font-family: var(--spice-font-heading);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--spice-white);
	margin: 0;
}

/* Cap the open panel so a category with 25 finalists does not stretch the
   art tile down the page — the table scrolls inside a fixed window instead. */
.spice-results__table-wrap {
	overflow: auto;
	max-height: calc( var(--spice-results-row-h) * (var(--spice-results-rows) + 1) );
	overscroll-behavior: contain;
}

/* Keep the column headings in view while the rows scroll under them. */
.spice-results__table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--spice-white);
}

.spice-results__table {
	width: 100%;
	/* separate, not collapse: border-radius on a <td> is ignored under
	   border-collapse, which is why the winner strip had square ends. */
	border-collapse: separate;
	border-spacing: 0;
	min-width: 480px;
}

.spice-results__table th {
	font-family: var(--spice-font-heading);
	font-size: var(--spice-fs-small);
	font-weight: 700;
	color: var(--spice-ink);
	text-align: left;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--spice-line);
}

.spice-results__table td {
	padding: 1rem 1.25rem;
	font-size: var(--spice-fs-small);
	color: var(--spice-ink-soft);
	border-bottom: 1px solid var(--spice-line);
	vertical-align: middle;
}

.spice-results__table tr:last-child td { border-bottom: 0; }

.spice-results__row--winner td {
	/* Vertical, not horizontal: a 90deg gradient restarts inside every cell and
	   the strip reads as three banded blocks. Top-to-bottom repeats identically
	   per cell, so the row looks like one continuous band. */
	background: linear-gradient(180deg, #C0281C 0%, #8E1A12 100%);
	color: var(--spice-white);
	font-weight: 700;
}

.spice-results__row--winner td:last-child { text-align: right; }

.spice-results__star { color: var(--spice-gold-light); font-size: 1.125rem; }

@media (max-width: 767.98px) {
	.spice-results { grid-template-columns: 1fr; }
	.spice-results__art { min-height: 180px; }
}

/* =====================================================================
 * Sponsors carousel
 * ================================================================== */

.spice-sponsors { position: relative; }

.spice-sponsors__track {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-inline: 3.5rem;
}
.spice-sponsors__track::-webkit-scrollbar { display: none; }

.spice-sponsors__item {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	height: 110px;
	min-width: 120px;
}

.spice-sponsors__item img {
	max-height: 96px;
	width: auto;
	object-fit: contain;
}

.spice-sponsors__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--spice-radius-sm);
	background: var(--spice-gold-light);
	color: var(--spice-ink);
	cursor: pointer;
	z-index: 2;
}
.spice-sponsors__nav:hover { background: var(--spice-gold); }
.spice-sponsors__nav--prev { left: 0; }
.spice-sponsors__nav--next { right: 0; }

/* =====================================================================
 * CTA band
 * ================================================================== */

.spice-cta {
	position: relative;
	border-radius: var(--spice-radius-lg);
	background: var(--spice-cta-bg);
	color: var(--spice-cta-ink);
	overflow: hidden;
	isolation: isolate;
}

/* A very slight bottom-to-top darkening over the gold artwork — settles the
   band and keeps the white copy legible without muddying the gold. */
.spice-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .10) 42%, transparent 78%);
	z-index: -1;
}

.spice-cta__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	min-height: 320px;
	padding: clamp(1.75rem, 1rem + 2.6vw, 3rem);
}

.spice-cta__heading {
	font-family: var(--spice-font-heading);
	font-weight: 700;
	font-size: var(--spice-fs-h2);
	color: var(--spice-white);
	margin: 0 0 .625rem;
}

.spice-cta__text {
	color: rgba(255,255,255,.82);
	max-width: 52ch;
	margin: 0;
}

.spice-cta .spice-btn--dark {
	background: var(--spice-ink);
	color: var(--spice-white);
	border-color: var(--spice-ink);
}
.spice-cta .spice-btn--dark:hover { background: var(--spice-black); border-color: var(--spice-black); }

/* =====================================================================
 * Footer
 * ================================================================== */

.spice-footer {
	background: var(--spice-black);
	color: rgba(255,255,255,.72);
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
	margin-top: clamp(1.25rem, .75rem + 1.5vw, 2.25rem);
}

.spice-footer__logo {
	height: 120px;
	width: auto;
	margin-bottom: 1.25rem;
}

/* Mobile drops the lockup from the header, so the footer carries the brand. */
@media (max-width: 991.98px) {
	.spice-footer__logo { height: 150px; }
}

.spice-footer__small {
	font-size: var(--spice-fs-small);
	color: rgba(255,255,255,.6);
	max-width: 36ch;
}

.spice-footer__title {
	font-family: var(--spice-font-heading);
	font-size: var(--spice-fs-small);
	font-weight: 700;
	color: var(--spice-white);
	margin-bottom: 1rem;
}

.spice-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .625rem;
}

.spice-footer__list a {
	font-size: var(--spice-fs-small);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
}
.spice-footer__list a:hover { color: var(--spice-gold-light); }

.spice-footer__contact { text-align: right; }
.spice-footer__contact a { color: var(--spice-white); font-weight: 700; }
.spice-footer__contact a:hover { color: var(--spice-gold-light); }
.spice-footer__label { font-size: var(--spice-fs-small); color: rgba(255,255,255,.6); }

@media (max-width: 767.98px) {
	.spice-footer__contact { text-align: left; }
}

/* Footer heading doubles as the Categories link — keep it white, not ink. */
.spice-footer__title a { color: var(--spice-white); }
.spice-footer__title a:hover { color: var(--spice-gold-light); }

/* =====================================================================
 * Nav CTA — the "Contact Us" item is promoted to an outlined gold pill.
 * Driven by the `menu-cta` class on the menu item, so which item gets the
 * treatment stays editable in Appearance → Menus.
 * ================================================================== */

.spice-nav__item.menu-cta > .spice-nav__link {
	border: 1px solid var(--spice-gold);
	border-radius: var(--spice-radius-sm);
	padding: .625rem 1.125rem;
	font-weight: 600;
	color: var(--spice-gold-dark);
	transition: background-color .15s ease, color .15s ease;
}

.spice-nav__item.menu-cta > .spice-nav__link:hover,
.spice-nav__item.menu-cta.is-current > .spice-nav__link {
	background: var(--spice-gold);
	color: var(--spice-ink);
}

/* On the black hero the outline reads against dark, so the label goes white. */
.spice-header--inverse .spice-nav__item.menu-cta > .spice-nav__link {
	color: var(--spice-white);
}

.spice-header--inverse .spice-nav__item.menu-cta > .spice-nav__link:hover,
.spice-header--inverse .spice-nav__item.menu-cta.is-current > .spice-nav__link {
	background: var(--spice-gold);
	color: var(--spice-ink);
}



/* The full lockup is used at every width. It carries fine print, so it needs
   more height than a plain wordmark would — the box stays short so the menu
   toggle keeps its position while the logo overflows below it. */
@media (max-width: 991.98px) {
	:root { --spice-logo-h: 96px; --spice-logo-box: 52px; }
}

@media (max-width: 400px) {
	:root { --spice-logo-h: 82px; --spice-logo-box: 46px; }
}

/* The winner rosette above the category-winner name, as per the design. */
.spice-results__badge {
	display: block;
	width: auto;
	height: clamp(80px, 4vw + 56px, 118px);
	margin: 0 auto .875rem;
}

/* With the badge in place the tile needs a little more room than the plain
   finalists variant. */
.spice-results__art--winner { padding-block: 1.75rem; }

.spice-year-block__panel .spice-results__art { border-bottom-left-radius: var(--spice-radius); }

/* Once the viewport is wide enough to clear the container, the carousel arrows
   move into the margin instead of sitting on top of the logos.
   1340px is where (viewport - container)/2 + gutter exceeds the arrow width
   plus its gap; below that they stay overlaid, which is fine on mobile. */
@media (min-width: 1340px) {
	.spice-sponsors__track { padding-inline: 0; }
	.spice-sponsors__nav--prev { left: -58px; }
	.spice-sponsors__nav--next { right: -58px; }
}

/* The red strip floats inside the row with white space around it AND rounded
   ends. White borders create the gap; background-clip stops the red at the
   padding box; the radius is set larger than the border so the inner (red)
   corner still reads as a curve. */
.spice-results__row--winner td {
	border-top: 6px solid var(--spice-white);
	border-bottom: 6px solid var(--spice-white);
	background-clip: padding-box;
}

.spice-results__row--winner td:first-child {
	border-left: 12px solid var(--spice-white);
	border-radius: 16px 0 0 16px;
}

.spice-results__row--winner td:last-child {
	border-right: 12px solid var(--spice-white);
	border-radius: 0 16px 16px 0;
}

/* Winner text stays white wherever the row appears. */
.spice-results__row--winner td,
.spice-results__row--winner td a { color: var(--spice-white); }