/* ==========================================================================
   Studio Pieters — design tokens
   ========================================================================== */
:root {
	--sp-bg: #ffffff;
	--sp-bg-warm: #f5f5f7;
	--sp-surface: #fbfbfd;
	--sp-border: #d2d2d7;

	--sp-text: #1d1d1f;
	--sp-text-muted: #707070; /* was #86868b: 3.33:1 on --sp-bg-warm, failed WCAG 1.4.3's 4.5:1 for normal text (used as real body copy: card excerpts, proof labels, footer links). #707070 = 4.55:1 on --sp-bg-warm, 4.95:1 on white. */
	--sp-inverse: #f5f5f7;
	--sp-inverse-muted: #a1a1a6;

	/* Apple's own system palette (used across apple.com marketing pages) */
	--sp-accent: #0066cc;
	--sp-accent-hover: #0051a2;
	--sp-on-accent: #ffffff;
	--sp-green: #187534; /* was #1d8a3e: 4.41:1 on white, just under WCAG 1.4.3's 4.5:1 (used as .sp-pill--ok text). #187534 = 5.78:1. */
	--sp-orange: #ad5b08; /* was #d9720a: 3.30:1 on white, failed WCAG 1.4.3 (used as .sp-pill--warn text, normal-size). #ad5b08 = 4.91:1. Still used at low opacity/color-mix for callout backgrounds and borders elsewhere, those aren't text so the darker value doesn't hurt them. */
	--sp-red: #d70015;

	--sp-dark-bg: #000000;
	--sp-dark-surface: #1d1d1f;
	--sp-hero-image: none;

	--sp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, system-ui, "Segoe UI", Roboto, sans-serif;
	--sp-font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

	--sp-container: 1180px;
	--sp-gutter: clamp(1.25rem, 4vw, 3rem);

	--sp-radius-sm: 8px;
	--sp-radius-md: 18px;
	--sp-radius-lg: 28px;

	--sp-nav-height: 52px;
	--sp-guide-nav-height: 46px;
	--sp-motion: 260ms cubic-bezier(0.2, 0, 0, 1);
	--sp-z-nav: 100;
	--sp-z-overlay: 200;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--sp-nav-height);
}

/* WCAG 2.3.3 (AAA, but cheap and worth doing regardless of target
   level): smooth-scroll on every quick-nav/anchor jump, hover-lift
   transitions on buttons/tiles, and the hero's parallax
   (background-attachment: fixed, see .sp-hero-wrap below) can all
   trigger real discomfort for vestibular-disorder users. Respect the
   OS-level request to turn that down. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.sp-hero-wrap { background-attachment: scroll; }
}

body {
	margin: 0;
	background-color: var(--sp-bg);
	color: var(--sp-text);
	font-family: var(--sp-font);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p { margin: 0; }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

input { font: inherit; }

/*
 * Defensive: any element styled with a `display` value on its class
 * (flex/block/grid/...) would otherwise override the browser's default
 * `[hidden] { display: none }` rule, since same-specificity author
 * rules beat the UA stylesheet — silently leaving a "hidden" overlay
 * fully laid out and clickable (invisible via opacity, but still
 * covering the page and swallowing every click). This is exactly what
 * happened with .sp-search-overlay before this rule existed.
 */
[hidden] { display: none !important; }

.sp-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sp-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-gutter);
	z-index: 1000;
	background: var(--sp-text);
	color: var(--sp-inverse);
	padding: 0.75rem 1.25rem;
	border-radius: var(--sp-radius-sm);
	transition: top var(--sp-motion);
}

.sp-skip-link:focus { top: 1rem; }

:focus-visible {
	outline: 2px solid var(--sp-accent);
	outline-offset: 2px;
}

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

.sp-section { padding-block: clamp(3rem, 8vw, 6rem); }

/* ==========================================================================
   Buttons / links
   ========================================================================== */
.sp-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0.75rem 1.5rem;
	border-radius: 980px;
	background-color: var(--sp-text);
	color: var(--sp-inverse);
	font-size: 0.9375rem;
	font-weight: 500;
	transition: background-color var(--sp-motion);
}

.sp-button:hover { background-color: #000000; }

.sp-button--light {
	background-color: var(--sp-inverse);
	color: var(--sp-dark-bg);
}

.sp-button--light:hover { background-color: #ffffff; }

.sp-link-chevron {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	color: var(--sp-accent);
	font-size: 0.9375rem;
	font-weight: 500;
}

.sp-link-chevron:hover { text-decoration: underline; }

/* ==========================================================================
   Nav
   ========================================================================== */
.sp-nav {
	position: sticky;
	top: 0;
	z-index: var(--sp-z-nav);
	height: var(--sp-nav-height);
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/*
 * The WP admin toolbar is fixed at the very top with a huge z-index
 * (always on top). Our sticky bars don't know about it by default, so
 * once scrolled they end up stuck UNDER the toolbar's real screen
 * position — visually overlapping it, which also makes their top
 * portion unclickable (the toolbar intercepts the click instead).
 * WordPress adds the `admin-bar` body class whenever it's shown, so we
 * just offset our sticky `top` values by its height (32px, 46px under
 * 783px per WP's own admin-bar breakpoint).
 */
body.admin-bar .sp-nav { top: 32px; }
body.admin-bar .sp-guide__quicknav { top: calc(32px + var(--sp-nav-height)); }

@media screen and (max-width: 782px) {
	body.admin-bar .sp-nav { top: 46px; }
	body.admin-bar .sp-guide__quicknav { top: calc(46px + var(--sp-nav-height)); }
}

body.admin-bar .sp-guide__section {
	scroll-margin-top: calc(32px + var(--sp-nav-height) + var(--sp-guide-nav-height) + 1.5rem);
}

@media screen and (max-width: 782px) {
	body.admin-bar .sp-guide__section {
		scroll-margin-top: calc(46px + var(--sp-nav-height) + var(--sp-guide-nav-height) + 1.5rem);
	}
}

.sp-nav__inner {
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.sp-nav__logo {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.sp-nav__logo-image {
	height: 18px;
	width: auto;
}

.sp-nav__list {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-nav__list a {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--sp-text);
	opacity: 0.85;
}

.sp-nav__list a:hover { opacity: 1; }

.sp-nav__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sp-nav__icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--sp-text);
}

.sp-icon { width: 18px; height: 18px; }

.sp-nav__icon-button--avatar { width: 28px; height: 28px; }

.sp-nav__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.sp-nav__menu-toggle { display: none; }

.sp-nav__bars,
.sp-nav__bars::before,
.sp-nav__bars::after {
	content: "";
	display: block;
	width: 18px;
	height: 1.5px;
	background-color: currentColor;
	position: relative;
}

.sp-nav__bars::before { position: absolute; top: -6px; }
.sp-nav__bars::after { position: absolute; top: 6px; }

@media (max-width: 833px) {
	.sp-nav__menu { display: none; }
	.sp-nav__menu-toggle { display: inline-flex; }
}

/* ==========================================================================
   Mobile menu
   ========================================================================== */
.sp-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--sp-z-overlay);
	background-color: var(--sp-bg);
	padding: var(--sp-gutter);
	overflow-y: auto;
}

.sp-mobile-menu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.sp-mobile-menu__brand { display: inline-flex; }

.sp-mobile-menu__brand-image { height: 22px; width: auto; }

.sp-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sp-mobile-menu__list a { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }

/* ==========================================================================
   Search overlay
   ========================================================================== */
.sp-search-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--sp-z-overlay);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: var(--sp-gutter);
	padding-top: clamp(4rem, 14vh, 8rem);
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity var(--sp-motion);
}

.sp-search-overlay.is-open { opacity: 1; }

.sp-search-overlay__inner {
	width: min(640px, 100%);
	background-color: #1c1c1e;
	border-radius: var(--sp-radius-md);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	transform: translateY(-8px) scale(0.98);
	transition: transform var(--sp-motion);
}

.sp-search-overlay.is-open .sp-search-overlay__inner { transform: none; }

.sp-search-overlay__field {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem;
	color: #98989d;
}

.sp-search-overlay__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 1.25rem;
	color: #f5f5f7;
}

.sp-search-overlay__input::placeholder { color: #98989d; }

.sp-search-overlay__close {
	font-size: 0.8125rem;
	color: #98989d;
}

.sp-search-overlay__close:hover { color: #f5f5f7; }

/* ==========================================================================
   Hero
   ========================================================================== */
.sp-hero {
	padding-block: clamp(4rem, 14vw, 9rem) clamp(3rem, 8vw, 6rem);
	text-align: center;
}

/* Hero photo runs behind the hero text and the three tiles, down to the
   border-top of the proof strip. */
.sp-hero-wrap {
	position: relative;
	isolation: isolate;
	background: var(--sp-dark-bg) var(--sp-hero-image) center / auto 125% no-repeat;
}

/* Parallax: the hero photo stays put while the page scrolls over it.
   Guarded to non-touch pointers only, background-attachment: fixed is
   unreliable/janky on mobile Safari and most touch browsers just ignore
   or mishandle it, so mobile keeps the normal scrolling background. */
@media (hover: hover) and (pointer: fine) {
	.sp-hero-wrap { background-attachment: fixed; }
}

.sp-hero-wrap .sp-hero { color: var(--sp-inverse); }

/* Flat gray tint over the hero photo for text legibility, darkness
   adjustable via Appearance > Customize > Homepage: Hero > Overlay
   darkness (--sp-hero-overlay, 0-1, set inline per page in front-page.php).
   No radial "spotlight" behind the title, that was a separate darker
   haze stacked on top and has been removed, this is the one overlay. */
.sp-hero-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, var(--sp-hero-overlay, 0.55));
}

.sp-hero-wrap .sp-hero__eyebrow { color: var(--sp-inverse-muted); }
.sp-hero-wrap .sp-hero__lead { color: #d2d2d7; }
.sp-hero-wrap .sp-hero .sp-link-chevron { color: #4da6ff; }

.sp-hero__inner {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-hero__eyebrow {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-text-muted);
	margin-bottom: 0.75rem;
}

.sp-hero__title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.sp-hero__lead {
	margin-top: 1.25rem;
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	color: var(--sp-text-muted);
	line-height: 1.5;
}

.sp-hero__actions {
	margin-top: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

/* ==========================================================================
   Feature tiles
   ========================================================================== */
.sp-tiles { padding-block: 0 clamp(3rem, 8vw, 5rem); }

.sp-tiles__grid {
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.sp-tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 2.5rem 2rem;
	background: linear-gradient(180deg, var(--sp-bg-warm), #eeeef0);
	border-radius: var(--sp-radius-lg);
	min-height: 320px;
	overflow: hidden;
	transition: transform var(--sp-motion);
}

.sp-tile:hover { transform: translateY(-4px); }

.sp-tile__media {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--sp-radius-lg) - 8px);
	overflow: hidden;
	background: #fff;
	margin-bottom: 0.5rem;
}

.sp-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 1rem;
	box-sizing: border-box;
	display: block;
}

.sp-tile__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-text-muted);
}

.sp-tile__title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 0.25rem;
}

.sp-tile__text {
	color: var(--sp-text-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	margin-top: 0.25rem;
	flex: 1;
}

.sp-tile .sp-link-chevron { margin-top: 1rem; }

/* Liquid Glass: only the three tiles sitting over the hero photo
   (.sp-tiles inside .sp-hero-wrap, homepage only). template-guides-index.php
   and template-projects-index.php reuse the exact same .sp-tiles/.sp-tile
   classes for their card grids on a plain white section, scoping this to
   .sp-hero-wrap keeps it from leaking there and turning their text
   invisible (white-on-white). */
.sp-hero-wrap .sp-tiles .sp-tile {
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 32px rgba(0, 0, 0, 0.18);
}

.sp-hero-wrap .sp-tiles .sp-tile__media { background: rgba(255, 255, 255, 0.06); }
.sp-hero-wrap .sp-tiles .sp-tile__eyebrow { color: rgba(255, 255, 255, 0.72); }
.sp-hero-wrap .sp-tiles .sp-tile__title { color: var(--sp-inverse); }
.sp-hero-wrap .sp-tiles .sp-tile__text { color: rgba(255, 255, 255, 0.8); }
.sp-hero-wrap .sp-tiles .sp-tile .sp-link-chevron { color: #4da6ff; }

@media (max-width: 833px) {
	.sp-tiles__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Proof / stats — a slim trust strip, not a headline section
   ========================================================================== */
.sp-proof { padding-block: clamp(0.875rem, 2vw, 1.25rem); border-top: 1px solid var(--sp-border); border-bottom: 1px solid var(--sp-border); }

.sp-proof__inner {
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.35rem 2rem;
	text-align: center;
}

.sp-proof__stat { display: flex; align-items: baseline; gap: 0.375rem; }

.sp-proof__number {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sp-proof__label { color: var(--sp-text-muted); font-size: 0.8125rem; }

/* ==========================================================================
   Showcase — real guides + projects in an Apple "toppers" style mosaic
   ========================================================================== */
.sp-showcase { padding-block: clamp(3rem, 7vw, 5rem); }

.sp-showcase__inner {
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-showcase__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--sp-text-muted);
	text-align: center;
}

.sp-showcase__title {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: center;
	margin-top: 0.5rem;
}

.sp-showcase__filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.75rem;
}

.sp-pill {
	appearance: none;
	border: 1px solid var(--sp-border);
	background: var(--sp-bg);
	color: var(--sp-text);
	font-size: 0.875rem;
	font-weight: 500;
	font-family: inherit;
	padding: 0.5rem 1.125rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--sp-motion), color var(--sp-motion), border-color var(--sp-motion);
}

.sp-pill:hover { border-color: var(--sp-text-muted); }

.sp-pill.is-active {
	background: var(--sp-text);
	color: var(--sp-inverse);
	border-color: var(--sp-text);
}

/* A real module grid, apple.com "toppers" style: every row is at
   least sp-showcase-row-h tall (a small tile's own comfortable
   height), so a tile spanning 2 rows (grid-row: span 2) always lines
   up exactly with its neighbors, 2 full rows plus the gap between
   them, not however tall its neighbors' content happens to be. Every
   tile then stretches to fill its row(s) exactly, so nothing is ever
   shorter or taller than the shared grid line. Two columns on small
   screens, four from tablet up, dense packing so the small tiles flow
   into the gaps around the two bigger cards regardless of where those
   land in the item order. */
.sp-showcase__grid {
	--sp-showcase-row-h: 17.5rem;
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: dense;
	grid-auto-rows: minmax(var(--sp-showcase-row-h), auto);
	gap: 1rem;
	align-items: stretch;
}

@media (min-width: 700px) {
	.sp-showcase__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Small tiles keep the same eyebrow/title/text/chevron as every other
   card, just smaller, with the text clamped so a longer description
   never pushes a card taller than its row. */
.sp-tile--compact {
	min-height: auto;
	padding: 1.25rem;
}

.sp-tile--compact .sp-tile__title { font-size: 1rem; }

.sp-tile--compact .sp-tile__text {
	font-size: 0.8125rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* The two bigger cards (one flagship guide, one project), both 2x2, a
   fuller photo instead of the diagram-style contain/padding, more room
   for the text before it clamps. */
.sp-tile--large .sp-tile__media img {
	object-fit: cover;
	padding: 0;
}

/* flex: 0 0 auto, not the inherited .sp-tile__text { flex: 1; }: with
   both the photo and the text set to flex-grow, they competed for the
   same leftover space in the card's fixed (stretched) height, split
   in proportion to each one's own hypothetical size first. A tall
   (portrait-ish) photo's own intrinsic aspect ratio could claim most
   of that space on its own before any splitting even happened,
   leaving the text as little as one third of a single line, cut off
   mid-word with no ellipsis (the clamp needs room for a full line to
   render one at all). Fixing the text to its own natural, up-to-3-line
   content height first, then letting only the photo (still flex: 1 1
   auto below) grow into whatever the text and everything else didn't
   need, means the text is never at the mercy of that specific photo's
   proportions. */
.sp-tile--large .sp-tile__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	flex: 0 0 auto;
}

@media (min-width: 700px) {
	.sp-tile--large {
		grid-column: span 2;
		grid-row: span 2;
	}

	.sp-tile--large .sp-tile__media { flex: 1 1 auto; aspect-ratio: auto; }
	.sp-tile--large .sp-tile__title { font-size: 1.375rem; }
	.sp-tile--large .sp-tile__text { font-size: 0.9375rem; max-width: 32em; }
}

/* The closing card: 2 columns wide, exactly 1 row tall, the same
   module height as every small tile, apple.com's own last-row
   treatment. Stacking image-above-text top to bottom (the small/large
   layout) doesn't fit a single row's height at double width, there
   isn't room below a full-width photo for eyebrow/title/text/link
   too, so this one switches its children to a small internal grid
   instead: photo on the left, the text stack on the right. Markup is
   unchanged (still flat eyebrow/title/text/chevron siblings), only
   their grid placement differs. The photo keeps the same width and
   the same white background/contain (not cropped) treatment as every
   small tile, but not the same fixed 4/3 box, height: 100% (which
   resolves against this card's own real content height, not a
   hardcoded value) lets it size to the photo's own real aspect ratio
   instead, taller than a small tile's 4/3 box since this card has the
   width to spare and no second line of cards below it to align with.
   Because this height comes from real content sizing (not a fixed
   rem value), CSS Grid's own auto-row-sizing grows this whole row,
   small tile neighbors included, to fit it, no fixed number can
   silently stop matching the photo and either clip again or overflow
   the card. */
@media (min-width: 700px) {
	.sp-tile--wide {
		grid-column: span 2;
		display: grid;
		grid-template-columns: 16rem 1fr;
		grid-template-rows: auto auto 1fr auto;
		column-gap: 1.5rem;
		row-gap: 0.25rem;
	}

	.sp-tile--wide .sp-tile__media {
		grid-column: 1;
		grid-row: 1 / -1;
		align-self: stretch;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		margin-bottom: 0;
	}

	.sp-tile--wide .sp-tile__eyebrow { grid-column: 2; grid-row: 1; }
	.sp-tile--wide .sp-tile__title { grid-column: 2; grid-row: 2; font-size: 1.375rem; }

	.sp-tile--wide .sp-tile__text {
		grid-column: 2;
		grid-row: 3;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		font-size: 0.9375rem;
	}

	.sp-tile--wide .sp-link-chevron { grid-column: 2; grid-row: 4; margin-top: 0; }
}

.sp-showcase__more {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

/* ==========================================================================
   Dark CTA section
   ========================================================================== */
.sp-cta--dark {
	background-color: var(--sp-dark-bg);
	color: var(--sp-inverse);
	padding-block: clamp(4rem, 10vw, 7rem);
	text-align: center;
}

.sp-cta__inner {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-cta__eyebrow {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-inverse-muted);
	margin-bottom: 0.75rem;
}

.sp-cta__title {
	font-size: clamp(2rem, 4vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.sp-cta__text {
	margin-top: 1rem;
	color: var(--sp-inverse-muted);
	font-size: 1.0625rem;
	line-height: 1.6;
}

.sp-cta__inner .sp-button { margin-top: 1.75rem; }

/* ==========================================================================
   Generic grid / card (archives, index fallback)
   ========================================================================== */
.sp-grid {
	display: grid;
	gap: 1.5rem;
}

.sp-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
	.sp-grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.sp-grid--3 { grid-template-columns: 1fr; }
}

.sp-card { display: flex; flex-direction: column; gap: 0.75rem; }

.sp-card__media {
	display: block;
	border-radius: var(--sp-radius-md);
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.sp-card__image { width: 100%; height: 100%; object-fit: cover; }

.sp-card__title { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }

.sp-card__excerpt { color: var(--sp-text-muted); font-size: 0.9375rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.sp-footer {
	background-color: var(--sp-bg-warm);
	border-top: 1px solid var(--sp-border);
	padding-block: clamp(2rem, 5vw, 3rem);
}

.sp-footer__inner {
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-footer__list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

.sp-footer__list a { font-size: 0.8125rem; color: var(--sp-text-muted); }

.sp-footer__list a:hover { color: var(--sp-text); }

.sp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sp-border);
	color: var(--sp-text-muted);
	font-size: 0.75rem;
}

.sp-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sp-footer__legal a { color: var(--sp-text-muted); }
.sp-footer__legal a:hover { color: var(--sp-text); }
.sp-footer__legal a::before { content: "·"; margin-right: 0.5rem; color: var(--sp-border); }

/* ==========================================================================
   Guide pages (espboards.dev-style reference layout, Apple.com skin)
   ========================================================================== */
.sp-guide__hero {
	padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3rem);
	text-align: center;
	background: linear-gradient(180deg, var(--sp-bg-warm), var(--sp-bg));
}

.sp-guide__hero-inner {
	max-width: 720px;
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-guide__hero-media {
	max-width: 620px;
	margin: clamp(2rem, 5vw, 3rem) auto 0;
	padding-inline: var(--sp-gutter);
}

.sp-guide__hero-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sp-radius-lg);
}

.sp-guide__eyebrow {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--sp-accent);
	margin-bottom: 0.5rem;
}

.sp-guide__title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.sp-guide__lead {
	margin-top: 1rem;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	color: var(--sp-text-muted);
	line-height: 1.55;
}

.sp-badge-row {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
}

.sp-protocol-badges {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
}

.sp-protocol-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sp-protocol-badge__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #a1a1a6;
}

.sp-protocol-badge__logo {
	height: 24px;
	width: auto;
	flex-shrink: 0;
	display: block;
}

.sp-protocol-badge__logo--wide { height: 20px; }
.sp-protocol-badge__logo--wider { height: 18px; }

.sp-protocol-badges__note {
	margin-top: 0.6rem;
	font-size: 0.8125rem;
	color: var(--sp-text-muted);
}

.sp-badge {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sp-text);
	background-color: var(--sp-bg);
	border: 1px solid var(--sp-border);
	border-radius: 980px;
	padding: 0.4rem 0.9rem;
}

.sp-guide__quicknav {
	position: sticky;
	top: var(--sp-nav-height);
	z-index: 90;
	height: var(--sp-guide-nav-height);
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--sp-border);
}

.sp-guide__quicknav-list {
	max-width: var(--sp-container);
	height: 100%;
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2rem);
	overflow-x: auto;
}

.sp-guide__quicknav-list a {
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--sp-text-muted);
	padding-block: 0.25rem;
	border-bottom: 1.5px solid transparent;
	transition: color var(--sp-motion), border-color var(--sp-motion);
}

.sp-guide__quicknav-list a:hover { color: var(--sp-text); }

.sp-guide__quicknav-list a.is-active {
	color: var(--sp-text);
	font-weight: 600;
	border-bottom-color: var(--sp-accent);
}

.sp-guide__body {
	max-width: var(--sp-container);
	margin-inline: auto;
	padding-inline: var(--sp-gutter);
}

.sp-guide__section {
	padding-block: clamp(2.5rem, 6vw, 4rem);
	border-bottom: 1px solid var(--sp-border);
	max-width: 800px;
	margin-inline: auto;
	scroll-margin-top: calc(var(--sp-nav-height) + var(--sp-guide-nav-height) + 1.5rem);
}

.sp-guide__section:last-child { border-bottom: none; }

.sp-guide__section h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-bottom: 0.75rem;
}

.sp-guide__section p {
	color: var(--sp-text-muted);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.sp-guide__section .sp-feature-row,
.sp-guide__section .sp-spec-table-wrap,
.sp-guide__section .sp-guide__notes-grid,
.sp-guide__section .sp-callout {
	max-width: none;
}

.sp-feature-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.sp-feature-row__item { display: flex; flex-direction: column; gap: 0.35rem; }

.sp-feature-row__icon {
	width: 22px;
	height: 22px;
	color: #a1a1a6;
	margin-bottom: 0.15rem;
}

.sp-feature-row__title { font-weight: 600; font-size: 1rem; }

.sp-feature-row__text { color: var(--sp-text-muted); font-size: 0.9375rem; line-height: 1.5; }

@media (max-width: 833px) {
	.sp-feature-row { grid-template-columns: 1fr; }
}

.sp-guide__specs-grid {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	gap: 1.5rem;
}

.sp-guide__specs-group {
	display: flex;
	flex-direction: column;
}

.sp-guide__specs-group .sp-spec-table-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.sp-guide__specs-group .sp-spec-table-wrap table {
	flex: 1;
}

.sp-guide__specs-heading {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-text-muted);
	margin-bottom: 0.5rem;
}

.sp-guide__specs-group .sp-spec-table td:first-child {
	color: var(--sp-text-muted);
}

.sp-guide__specs-group .sp-spec-table td:last-child {
	font-weight: 500;
	white-space: normal;
}

.sp-guide__source-note {
	margin-top: 1rem;
	font-size: 0.8125rem;
	color: var(--sp-text-muted);
}

.sp-guide__source-note a { color: var(--sp-accent); }

.sp-code-tabs {
	margin-top: 1.5rem;
	background-color: #1c1c1e;
	border-radius: var(--sp-radius-md);
	overflow: hidden;
}

.sp-code-tabs__nav {
	display: flex;
	border-bottom: 1px solid #2c2c2e;
	overflow-x: auto;
}

.sp-code-tabs__button {
	padding: 0.7rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #98989d;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color var(--sp-motion), border-color var(--sp-motion);
}

.sp-code-tabs__button:hover { color: #f5f5f7; }

.sp-code-tabs__button.is-active {
	color: #f5f5f7;
	border-bottom-color: var(--sp-accent);
}

.sp-code-block__pre {
	margin: 0;
	padding: 1rem;
	overflow-x: auto;
	font-family: var(--sp-font-mono);
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #f5f5f7;
}

@media (max-width: 833px) {
	.sp-guide__specs-grid { grid-template-columns: 1fr; }
}

.sp-guide__diagram {
	margin: 1.5rem 0 0;
	padding: 2rem;
	background-color: var(--sp-bg-warm);
	border-radius: var(--sp-radius-lg);
}

.sp-guide__diagram img { width: 100%; height: auto; }

.sp-spec-table-wrap {
	margin-top: 1.5rem;
	overflow-x: auto;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-md);
}

.sp-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.sp-spec-table th,
.sp-spec-table td {
	text-align: left;
	padding: 0.75rem 1rem;
	white-space: nowrap;
}

.sp-spec-table thead th {
	background-color: var(--sp-bg-warm);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sp-text-muted);
	border-bottom: 1px solid var(--sp-border);
}

.sp-spec-table tbody tr:not(:last-child) td {
	border-bottom: 1px solid var(--sp-border);
}

.sp-pill {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.15rem 0.6rem;
	border-radius: 980px;
}

.sp-pill--ok { background-color: color-mix(in srgb, var(--sp-green) 14%, transparent); color: var(--sp-green); }
.sp-pill--warn { background-color: color-mix(in srgb, var(--sp-orange) 14%, transparent); color: var(--sp-orange); }
.sp-pill--info { background-color: color-mix(in srgb, var(--sp-accent) 12%, transparent); color: var(--sp-accent-hover); }

.sp-guide__notes-grid {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

.sp-guide__note {
	padding: 1.25rem;
	background-color: var(--sp-bg-warm);
	border-radius: var(--sp-radius-md);
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.sp-guide__note-title { font-size: 0.8125rem; font-weight: 600; color: var(--sp-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.sp-guide__note-text { font-size: 0.9375rem; font-family: var(--sp-font-mono); }

@media (max-width: 700px) {
	.sp-guide__notes-grid { grid-template-columns: 1fr 1fr; }
}

.sp-callout {
	margin-top: 1.5rem;
	padding: 1.5rem;
	border-radius: var(--sp-radius-md);
	border: 1px solid var(--sp-border);
}

.sp-callout--warning {
	background-color: color-mix(in srgb, var(--sp-orange) 8%, var(--sp-bg));
	border-color: color-mix(in srgb, var(--sp-orange) 30%, transparent);
}

.sp-callout__title { font-weight: 600; margin-bottom: 0.5rem; }

.sp-callout ul { margin: 0; padding-left: 1.25rem; color: var(--sp-text-muted); font-size: 0.9375rem; line-height: 1.6; }

/* ==========================================================================
   Project pages (JSON-driven long-form content, see inc/projects.php)
   ========================================================================== */
.sp-project__meta {
	margin-top: 1rem;
	font-size: 0.875rem;
	color: var(--sp-text-muted);
}

.sp-project__section h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.sp-project__section h4 {
	margin-top: 1.5rem;
	margin-bottom: 0.4rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

.sp-project__section p,
.sp-project__section ul,
.sp-project__section ol { color: #424245; }

.sp-project__section strong { color: var(--sp-text); font-weight: 600; }

.sp-project__section a:not(.sp-button) { color: var(--sp-accent); }
.sp-project__section a:not(.sp-button):hover { text-decoration: underline; }

.sp-project__section ul,
.sp-project__section ol {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	line-height: 1.6;
}

.sp-project__section li + li { margin-top: 0.35rem; }

.sp-project__section :not(pre) > code {
	padding: 0.1rem 0.4rem;
	border-radius: 6px;
	background-color: var(--sp-bg-warm);
	color: var(--sp-text);
	font-family: var(--sp-font-mono);
	font-size: 0.875em;
}

.sp-project__figure {
	margin: 1.5rem 0;
	padding: 1.5rem;
	background-color: var(--sp-bg-warm);
	border-radius: var(--sp-radius-lg);
}

.sp-project__figure img {
	width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: var(--sp-radius-sm);
}

.sp-project__section .sp-code-tabs { margin-block: 1.5rem; }

.sp-project__source { margin-block: 1.5rem; }

.sp-project__source details {
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-md);
	overflow: hidden;
}

.sp-project__source summary {
	padding: 0.9rem 1.25rem;
	font-size: 0.9375rem;
	font-weight: 500;
	cursor: pointer;
}

.sp-project__source details[open] summary { border-bottom: 1px solid var(--sp-border); }

.sp-project__source .sp-code-tabs { margin: 0; border-radius: 0; }

.sp-project__source-link { margin: 0; padding: 0.9rem 1.25rem; font-size: 0.875rem; }

.sp-project__actions { margin-top: 1.25rem; }

.sp-project__video {
	position: relative;
	margin-block: 1.5rem;
	aspect-ratio: 16 / 9;
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	background-color: var(--sp-dark-bg);
}

.sp-project__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   Article actions: chip rating + "add to favorites" tray button, near
   the top of every guide and project page. Stars/heart didn't fit an
   electronics site, an IC chip and a save-to-tray icon do.
   ========================================================================== */
.sp-guide__section.sp-article-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding-block: 1.5rem;
}

.sp-rating-widget { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }
.sp-rating-widget__chips { display: flex; gap: 0.25rem; }

.sp-rating-widget__chip {
	appearance: none;
	background: none;
	border: none;
	padding: 0.25rem;
	color: var(--sp-border);
	cursor: pointer;
	transition: color var(--sp-motion), transform var(--sp-motion);
}

.sp-rating-widget__chip .sp-icon-chip { width: 22px; height: 22px; display: block; }
.sp-rating-widget__chip.is-filled { color: var(--sp-accent); }
.sp-rating-widget__chip.is-filled .sp-icon-chip__body { fill: var(--sp-accent); fill-opacity: 0.15; }
.sp-icon-chip__body { transition: fill var(--sp-motion), fill-opacity var(--sp-motion); }

.sp-rating-widget.is-voted .sp-rating-widget__chip { cursor: default; }
.sp-rating-widget:not(.is-voted) .sp-rating-widget__chip:hover { transform: scale(1.12); }

.sp-rating-widget__summary { font-size: 0.875rem; color: var(--sp-text-muted); }
.sp-rating-widget__thanks { font-size: 0.8125rem; color: var(--sp-accent); }

.sp-favorite-btn {
	appearance: none;
	background: none;
	border: 1px solid var(--sp-border);
	border-radius: 999px;
	padding: 0.5rem 1.125rem 0.5rem 0.875rem;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sp-text);
	font-size: 0.875rem;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	transition: color var(--sp-motion), border-color var(--sp-motion), background-color var(--sp-motion);
}

.sp-favorite-btn .sp-icon-tray { width: 19px; height: 19px; flex-shrink: 0; color: var(--sp-text-muted); transition: color var(--sp-motion); }
.sp-favorite-btn:hover { border-color: var(--sp-text-muted); }
.sp-favorite-btn.is-favorite { color: var(--sp-accent); border-color: var(--sp-accent); background: color-mix(in srgb, var(--sp-accent) 8%, transparent); }
.sp-favorite-btn.is-favorite .sp-icon-tray { color: var(--sp-accent); }
.sp-favorite-btn.is-loading { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   Account pages: log in, register, edit profile, favorites/ratings lists
   ========================================================================== */
.sp-account-page__narrow { max-width: 640px; margin-inline: auto; }

.sp-account-notice {
	border-radius: var(--sp-radius-sm);
	padding: 0.875rem 1.125rem;
	margin-bottom: 1.5rem;
	font-size: 0.875rem;
}

.sp-account-notice--success { background: #e8f8ee; color: #157347; }
.sp-account-notice--error { background: #fdecea; color: #c22; }

.sp-account-card--wide { max-width: var(--sp-container); margin-inline: auto; }

.sp-account-card {
	background: var(--sp-bg-warm);
	border-radius: var(--sp-radius-md);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	margin-bottom: 1.5rem;
}

.sp-account-card h2 { font-size: 1.1875rem; font-weight: 600; margin-bottom: 1.125rem; }

.sp-account-profile-head { display: flex; align-items: center; gap: 1.125rem; margin-bottom: 1.5rem; }
.sp-account-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--sp-bg); }
.sp-account-profile-head__name { font-weight: 600; font-size: 1.0625rem; margin: 0; }
.sp-account-profile-head__email { color: var(--sp-text-muted); font-size: 0.875rem; margin: 0.125rem 0 0; }
.sp-account-profile-head__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.sp-account-form__field { margin-bottom: 1rem; }
.sp-account-form__field label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.375rem; }

.sp-account-form__field input[type="text"],
.sp-account-form__field input[type="email"],
.sp-account-form__field input[type="password"],
.sp-account-form__field input[type="file"],
.sp-account-form__field textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font: inherit;
	background: var(--sp-bg);
	box-sizing: border-box;
	resize: vertical;
}

.sp-account-form__field input:focus,
.sp-account-form__field textarea:focus { outline: 2px solid var(--sp-accent); outline-offset: 1px; }

/* ==========================================================================
   404 page
   ========================================================================== */
.sp-404 { text-align: center; padding-block: clamp(4rem, 10vw, 8rem); }
.sp-404__code { font-size: clamp(4rem, 15vw, 9rem); font-weight: 700; color: var(--sp-bg-warm); line-height: 1; }
.sp-404 h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 600; letter-spacing: -0.01em; margin-top: 0.5rem; }
.sp-404 p { color: var(--sp-text-muted); font-size: 1.0625rem; margin-top: 0.75rem; }
.sp-404__search { max-width: 420px; margin: 2rem auto; }

.sp-404__search .search-form {
	display: flex;
	gap: 0.5rem;
}

.sp-404__search .search-field {
	flex: 1;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-sm);
	font: inherit;
	background: var(--sp-bg);
}

.sp-404__search .search-field:focus { outline: 2px solid var(--sp-accent); outline-offset: 1px; }

.sp-404__search .search-submit {
	appearance: none;
	border: none;
	border-radius: var(--sp-radius-sm);
	padding: 0.625rem 1.25rem;
	background: var(--sp-text);
	color: var(--sp-inverse);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
}

/* Prose body for the Privacy Policy / Disclaimer pages. */
.sp-legal-content h2 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.75rem; }
.sp-legal-content h2:first-child { margin-top: 0; }
.sp-legal-content p { color: var(--sp-text-muted); line-height: 1.6; margin-bottom: 1rem; }
.sp-legal-content table.sp-spec-table { margin: 1rem 0; width: 100%; }

.sp-account-form__checkbox { margin-bottom: 1.125rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.sp-account-form__honeypot { position: absolute; left: -9999px; }

.sp-account-page__switch { text-align: center; color: var(--sp-text-muted); font-size: 0.875rem; margin-top: 1.25rem; }
.sp-account-page__switch a { color: var(--sp-accent); }

.sp-pagination { margin-top: 1.5rem; }

.sp-pagination__links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.875rem;
}

.sp-pagination__links .page-numbers {
	display: inline-flex;
	padding: 0.4rem 0.75rem;
	border-radius: var(--sp-radius-sm);
	color: var(--sp-text-muted);
}

.sp-pagination__links .page-numbers.current { background: var(--sp-text); color: var(--sp-inverse); }

.sp-project__warning > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Ad slots (Google AdSense, Appearance > Customize > Advertising)
   ========================================================================== */
.sp-ad-slot {
	max-width: var(--sp-container);
	margin: clamp(2rem, 5vw, 3.5rem) auto;
	padding-inline: var(--sp-gutter);
	text-align: center;
}

.sp-ad-slot__label {
	display: block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--sp-text-muted);
	margin-bottom: 0.625rem;
}

.sp-ad-slot__unit {
	display: flex;
	justify-content: center;
	overflow: hidden;
	background: var(--sp-bg-warm);
	border-radius: var(--sp-radius-md);
	padding: 1.75rem 1.625rem;
}

.sp-ad-slot__unit .adsbygoogle { width: 100%; }

/* In-feed: sits as a grid item inside .sp-tiles__grid/.sp-showcase__grid,
   no extra outer spacing of its own, the grid's own gap already spaces it. */
.sp-ad-slot--infeed {
	max-width: none;
	margin: 0;
	padding-inline: 0;
}

.sp-ad-slot--infeed .sp-ad-slot__unit {
	background: transparent;
	padding: 0;
	border-radius: var(--sp-radius-md);
	overflow: hidden;
}

.sp-ad-slot__unit--placeholder {
	min-height: 5.625rem;
	align-items: center;
	border: 1px dashed var(--sp-border);
	color: var(--sp-text-muted);
	font-size: 0.8125rem;
	text-align: center;
}

.sp-ad-slot--infeed .sp-ad-slot__unit--placeholder {
	background: var(--sp-bg-warm);
	padding: 1.25rem;
	border-radius: var(--sp-radius-md);
}