/**
 * Spice Awards — base layer: resets, typography, layout primitives.
 */

body {
	font-family: var(--spice-font-body);
	font-size: var(--spice-fs-body);
	line-height: var(--spice-lh-body);
	color: var(--spice-body);
	background: var(--spice-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
	font-family: var(--spice-font-heading);
	color: var(--spice-ink);
	line-height: var(--spice-lh-tight);
	font-weight: 700;
}

h1 { font-size: var(--spice-fs-h1); }
h2 { font-size: var(--spice-fs-h2); }
h3 { font-size: var(--spice-fs-h3); }
h4 { font-size: var(--spice-fs-h4); }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; transition: color .15s ease; }

img { max-width: 100%; height: auto; }

:focus-visible {
	outline: 3px solid var(--spice-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Layout ---------------------------------------------------------- */

.spice-container {
	width: 100%;
	max-width: var(--spice-container);
	margin-inline: auto;
	padding-inline: var(--spice-gutter);
}

.spice-section {
	padding-block: var(--spice-space-section);
}

.spice-section--tight {
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 1080;
	background: var(--spice-black);
	color: var(--spice-white);
	padding: .75rem 1.25rem;
	border-radius: var(--spice-radius-sm);
}

/* --- Section headings ------------------------------------------------ */

.spice-heading-centred {
	text-align: center;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.spice-heading-centred h2,
.spice-heading-centred .h2 {
	margin-bottom: .75rem;
}

/* The short red rule beneath centred headings. */
.spice-rule::after {
	content: "";
	display: block;
	width: 62px;
	height: 3px;
	border-radius: 2px;
	background: var(--spice-red);
	margin: 1rem auto 0;
}

.spice-heading-left {
	margin-bottom: 2rem;
}

.spice-heading-left h2 {
	margin-bottom: .25rem;
}

.spice-heading-left p {
	color: var(--spice-body);
	font-size: var(--spice-fs-body);
}

/* --- Placeholder image ----------------------------------------------- */

.spice-placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: var(--spice-radius);
	background:
		radial-gradient(120% 120% at 20% 10%, rgba(200,155,60,.16), transparent 60%),
		linear-gradient(140deg, #1a1a1a 0%, #000 100%);
	display: grid;
	place-items: center;
	color: rgba(200, 155, 60, .55);
	font-size: 2rem;
}

/* Editorial pages open straight into copy, so they need much less breathing
   room under the banner than a page leading with a centred section heading. */
.spice-section--flush-top {
	padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* The CTA band always follows a padded section, so the two paddings were
   stacking into a double gap — 106px on pages ending in a full .spice-section.
   Collapse the band's own top padding and trim the section above it, so the
   space is paid once and is the same on every page. */
.spice-section--cta {
	padding-top: 0;
}

.spice-section:has(+ .spice-section--cta),
.spice-section--tight:has(+ .spice-section--cta) {
	padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}