/**
 * SPICA Audio — landing page styles.
 *
 * Design is driven by Astra's global settings via CSS variables:
 *   colors     -> --ast-global-color-0 ... -8
 *   container  -> --ast-normal-container-width
 *   typography -> global heading font/size (inherited) + --spica-hN-size
 *   buttons    -> Asta's .ast-button global button styles
 *
 * @package spica-child
 */

/* ============ Design tokens ============ */
:root {
	--spica-gold:      var(--ast-global-color-0, #d4af37);
	--spica-gold-light: var(--ast-global-color-1, #f3e5ab);
	--spica-gold-hover: var(--ast-global-color-8, #8c6d31);
	--spica-heading:   var(--ast-global-color-2, #ffffff);
	--spica-text:      var(--ast-global-color-3, #e2e8f0);
	--spica-bg:        var(--ast-global-color-4, #07080a);
	--spica-bg-section: var(--ast-global-color-5, #0e1117);
	--spica-bg-card:   var(--ast-global-color-6, #141822);
	--spica-subtle:    var(--ast-global-color-7, #222836);
	--spica-container: var(--ast-normal-container-width, 1200px);

	--spica-glass: rgba(14, 17, 23, 0.75);
	--spica-border: rgba(255, 255, 255, 0.07);
	--spica-gold-border: rgba(212, 175, 55, 0.3);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

body {
	background-color: var(--spica-bg);
	color: var(--spica-text);
	overflow-x: hidden;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--spica-bg); }
::-webkit-scrollbar-thumb { background: var(--spica-subtle); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--spica-gold); }

/* ============ Generic components ============ */
.spica-container {
	max-width: var(--spica-container);
	margin-inline: auto;
	padding-inline: 1.5rem;
}

.spica-section {
	padding-block: 5rem;
	position: relative;
}

.spica-section-head {
	text-align: center;
	max-width: 54rem;
	margin: 0 auto 3.5rem;
}

.spica-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--spica-gold);
	font-size: 0.72rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-weight: 600;
}

.spica-gold-text {
	background: linear-gradient(135deg, #fff 0%, var(--spica-gold-light) 40%, var(--spica-gold) 70%, var(--spica-gold-hover) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--spica-gold);
}

.spica-section-title {
	font-size: clamp(1.7rem, 1rem + 2vw, var(--spica-h2-size, 2.5rem));
	font-family: inherit;
	line-height: 1.15;
	margin: 0.4rem 0 0.75rem;
	color: var(--spica-heading);
	word-break: break-word;
}

.spica-section-title--sm {
	font-size: clamp(1.5rem, 1rem + 1.4vw, var(--spica-h2-size, 2.25rem));
}

.spica-section-desc {
	color: color-mix(in srgb, var(--spica-text) 75%, transparent);
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.7;
	max-width: 40rem;
	margin-inline: auto;
}

.spica-panel {
	background: var(--spica-bg-card);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid var(--spica-border);
	border-radius: 1.25rem;
}

.spica-gold-border-glow {
	border: 1px solid var(--spica-gold-border);
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.08);
}

.spica-pill {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spica-gold);
	background: color-mix(in srgb, var(--spica-gold) 12%, transparent);
	border: 1px solid var(--spica-gold-border);
}

.spica-chip {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 0.35rem;
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--spica-gold);
	background: var(--spica-bg);
	border: 1px solid var(--spica-gold-border);
	font-family: ui-monospace, monospace;
}

/* ============ Buttons ============ */
.spica-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-decoration: none;
	line-height: 1.2;
	border: 1px solid transparent;
}

/* Hard-toggle the global button surface so it follows Astra button globals. */
.spica-btn--primary,
.spica-btn--cta {
	background-color: var(--spica-gold);
	border-color: var(--spica-gold);
	color: var(--spica-bg);
}
.spica-btn--primary:hover,
.spica-btn--cta:hover {
	background-color: var(--spica-gold-hover);
	border-color: var(--spica-gold-hover);
	color: #fff;
	transform: translateY(-2px);
}

.spica-btn--outline {
	background: var(--spica-bg-card);
	border-color: var(--spica-subtle);
	color: var(--spica-text);
}
.spica-btn--outline:hover {
	border-color: var(--spica-gold);
	color: var(--spica-gold);
}

.spica-btn--gold-outline {
	background: transparent;
	border-color: color-mix(in srgb, var(--spica-gold) 45%, transparent);
	color: var(--spica-gold);
}
.spica-btn--gold-outline:hover {
	background-color: var(--spica-gold);
	border-color: var(--spica-gold);
	color: var(--spica-bg);
}

.ast-button.spica-btn--primary,
.ast-button.spica-btn--cta {
	background-color: var(--spica-gold);
	border-color: var(--spica-gold);
	color: var(--spica-bg);
}
.ast-button.spica-btn--primary:hover,
.ast-button.spica-btn--cta:hover {
	background-color: var(--spica-gold-hover);
	border-color: var(--spica-gold-hover);
	color: #fff;
}

/* ============ Astra header overrides ============ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.admin-bar .site-header {
	top: 32px;
}

.main-header-bar {
	border-bottom: 1px solid var(--spica-border);
}

/* Brand identity: constellation mark + styled title/tagline */
.spica-no-logo .site-branding .ast-site-identity {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}
.spica-no-logo .site-branding .ast-site-identity::before {
	content: "";
	flex: 0 0 2.25rem;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--spica-gold) no-repeat center / contain;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d4af37'%3E%3Ccircle cx='50' cy='20' r='3' fill='%23d4af37'/%3E%3Ccircle cx='20' cy='50' r='2.5' fill='%23d4af37'/%3E%3Ccircle cx='80' cy='50' r='2.5' fill='%23d4af37'/%3E%3Ccircle cx='35' cy='80' r='3' fill='%23d4af37'/%3E%3Ccircle cx='65' cy='80' r='2' fill='%23d4af37'/%3E%3Cpath d='M50 20 L20 50 L35 80 L65 80 L80 50 Z' stroke='%23d4af37' stroke-width='1.5' stroke-dasharray='3 3'/%3E%3Cpath d='M50 20 L35 80 M20 50 L80 50' stroke='%23d4af37' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23d4af37'%3E%3Ccircle cx='50' cy='20' r='3' fill='%23d4af37'/%3E%3Ccircle cx='20' cy='50' r='2.5' fill='%23d4af37'/%3E%3Ccircle cx='80' cy='50' r='2.5' fill='%23d4af37'/%3E%3Ccircle cx='35' cy='80' r='3' fill='%23d4af37'/%3E%3Ccircle cx='65' cy='80' r='2' fill='%23d4af37'/%3E%3Cpath d='M50 20 L20 50 L35 80 L65 80 L80 50 Z' stroke='%23d4af37' stroke-width='1.5' stroke-dasharray='3 3'/%3E%3Cpath d='M50 20 L35 80 M20 50 L80 50' stroke='%23d4af37' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.header-main-layout-container .site-title {
	font-family: 'Cinzel', serif;
	letter-spacing: 0.18em;
	color: var(--spica-heading);
	margin: 0;
}
.header-main-layout-container .site-title a { color: var(--spica-heading); }
.header-main-layout-container .site-title a:hover { color: var(--spica-gold); }

.site-branding .site-tagline {
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--spica-text) 60%, transparent);
}

/* Primary menu */
.ast-builder-menu-1 .menu-link,
.ast-builder-menu-1 .main-header-menu .menu-link {
	color: var(--spica-text);
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	text-transform: uppercase;
	transition: color 0.25s ease;
}
.ast-builder-menu-1 .menu-item:hover > .menu-link {
	color: var(--spica-gold);
}

/* ============ Hero ============ */
.spica-hero {
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: 5rem 6rem;
	overflow: hidden;
	background-color: var(--spica-bg);
}
.spica-hero:has([style*="--spica-hero-bg"]) {
	background-image: var(--spica-hero-bg, none);
	background-size: cover;
	background-position: center;
}
.spica-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 40%, transparent 0%, var(--spica-bg) 78%);
	pointer-events: none;
}

#constellation-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.spica-hero__inner { position: relative; z-index: 2; text-align: center; }

.spica-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--spica-gold-border);
	background: color-mix(in srgb, var(--spica-bg-section) 80%, transparent);
	color: var(--spica-gold);
	font-size: 0.68rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	backdrop-filter: blur(8px);
}

.spica-hero__title {
	display: block;
	font-size: clamp(2.4rem, 1.2rem + 4.6vw, var(--spica-h1-size, 4.5rem));
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 0 0 1.25rem;
	color: var(--spica-heading);
}

.spica-hero__desc {
	max-width: 40rem;
	margin: 0 auto 2rem;
	color: color-mix(in srgb, var(--spica-text) 78%, transparent);
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.7;
}

.spica-hero__model-toggle {
	display: inline-flex;
	gap: 0.35rem;
	padding: 0.4rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--spica-bg-section) 92%, transparent);
	border: 1px solid var(--spica-subtle);
	backdrop-filter: blur(12px);
	margin-bottom: 2.5rem;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.spica-hero__toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	padding: 0.7rem 1.4rem;
	border-radius: 999px;
	border: none;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: all 0.3s ease;
}
.spica-hero__toggle:hover { color: var(--spica-heading); }
.spica-hero__toggle.is-active {
	background: var(--spica-gold);
	color: var(--spica-bg);
	box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35);
}
.spica-hero__toggle-name {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}
.spica-hero__toggle-sub {
	font-size: 0.58rem;
	opacity: 0.75;
	font-weight: 400;
}

.spica-hero__showcase {
	padding: 2rem;
	max-width: 60rem;
	margin: 0 auto;
	transition: border-color 0.3s, box-shadow 0.3s;
}
.spica-hero__showcase:hover { border-color: rgba(212, 175, 55, 0.7); }

.spica-hero__showcase-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: center;
	text-align: left;
}

.spica-hero__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}
.spica-hero__visual-glow {
	position: absolute;
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--spica-gold) 25%, transparent), transparent 70%);
	filter: blur(40px);
}
.spica-hero__speaker {
	position: relative;
	z-index: 1;
	transition: transform 0.5s ease;
	cursor: pointer;
}
.spica-hero__speaker:hover { transform: scale(1.05); }
.spica-render-hero { width: 16rem; height: 16rem; filter: drop-shadow(0 20px 35px rgba(0,0,0,0.9)); }
.spica-render-flush { width: 18rem; height: auto; filter: drop-shadow(0 20px 35px rgba(0,0,0,0.9)); }
.spica-render-tower { width: 12rem; height: 17rem; filter: drop-shadow(0 20px 35px rgba(0,0,0,0.9)); }

.spica-hero__model-title { margin: 0.25rem 0 0.5rem; color: var(--spica-heading); }

.spica-hero__model-desc {
	color: color-mix(in srgb, var(--spica-text) 72%, transparent);
	font-size: 0.9rem;
	line-height: 1.65;
	font-weight: 300;
}

.spica-keygrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.7rem;
	margin-top: 1.25rem;
}
.spica-key {
	padding: 0.8rem;
	border-radius: 0.8rem;
	background: color-mix(in srgb, var(--spica-bg) 80%, transparent);
	border: 1px solid color-mix(in srgb, var(--spica-subtle) 70%, transparent);
}
.spica-key__label {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--spica-text) 55%, transparent);
	margin-bottom: 0.15rem;
}
.spica-key__value { font-weight: 600; font-size: 0.85rem; color: var(--spica-heading); }
.spica-key__value--gold { color: var(--spica-gold); }

.spica-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin-top: 1.5rem;
}

/* ============ Collection ============ */
.spica-collection {
	background: var(--spica-bg-section);
	border-block: 1px solid var(--spica-border);
}

.spica-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
	max-width: 80rem;
	margin: 0 auto;
}

.spica-card {
	display: flex;
	flex-direction: column;
	background: var(--spica-bg-card);
	backdrop-filter: blur(16px);
	border: 1px solid var(--spica-subtle);
	border-radius: 1.4rem;
	padding: 2rem;
	transition: border-color 0.3s ease, transform 0.3s ease;
}
.spica-card:hover { border-color: color-mix(in srgb, var(--spica-gold) 45%, transparent); transform: translateY(-4px); }

.spica-card__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}
.spica-card__model {
	font-family: ui-monospace, monospace;
	font-size: 0.72rem;
	color: color-mix(in srgb, var(--spica-text) 55%, transparent);
	letter-spacing: 0.05em;
}

.spica-card__art {
	height: 14rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0.5rem 0 1rem;
	border-radius: 1rem;
	background: linear-gradient(180deg, color-mix(in srgb, var(--spica-bg-card) 40%, #000 0%) , var(--spica-bg));
	overflow: hidden;
	position: relative;
}
.spica-card__art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.spica-card__art--speaker svg { width: 11rem; height: 11rem; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); }
.spica-card__art--tower svg { width: 9rem; height: 13rem; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); }
.spica-card__art--flush svg { width: 11.5rem; height: auto; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.8)); }
.spica-card__art svg { transition: transform 0.5s ease; }
.spica-card:hover .spica-card__art svg { transform: scale(1.05); }

.spica-card__title { color: var(--spica-heading); margin: 0 0 0.4rem; }
.spica-card__desc {
	color: color-mix(in srgb, var(--spica-text) 70%, transparent);
	font-size: 0.85rem;
	line-height: 1.65;
	font-weight: 300;
	margin-bottom: 1.25rem;
}

.spica-card__specs {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.9rem 0 0;
	border-top: 1px solid color-mix(in srgb, var(--spica-subtle) 80%, transparent);
	display: grid;
	gap: 0.25rem;
}
.spica-card__specs li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.78rem;
	padding: 0.35rem 0;
}
.spica-card__spec-label { color: color-mix(in srgb, var(--spica-text) 60%, transparent); }
.spica-card__spec-value { font-weight: 600; color: var(--spica-heading); text-align: right; }

.spica-card .spica-btn { width: 100%; margin-top: auto; }

/* ============ Specs ============ */
.spica-specs__header {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--spica-subtle);
	margin-bottom: 2.5rem;
}
.spica-specs__header .spica-section-title { margin: 0.4rem 0 0; }

.spica-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; }
.spica-tabs__tab {
	padding: 0.65rem 1.1rem;
	border-radius: 0.7rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--spica-bg-card);
	border: 1px solid var(--spica-subtle);
	color: color-mix(in srgb, var(--spica-text) 65%, transparent);
	cursor: pointer;
	transition: all 0.25s ease;
}
.spica-tabs__tab:hover { color: var(--spica-heading); }
.spica-tabs__tab.is-active {
	background: var(--spica-gold);
	border-color: var(--spica-gold);
	color: var(--spica-bg);
}

.spica-specs__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 1.75rem;
	align-items: start;
}

.spica-specs__table-card,
.spica-specs__graph-card { padding: 1.75rem; }

.spica-specs__table-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--spica-heading);
	margin: 0 0 1.25rem;
}
.spica-specs__table-title i { color: var(--spica-gold); font-size: 0.9rem; }

.spica-specs__table { display: grid; gap: 0.15rem; }
.spica-specs__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid color-mix(in srgb, var(--spica-subtle) 60%, transparent);
	border-radius: 0.5rem;
}
.spica-specs__row.is-alt { background: color-mix(in srgb, var(--spica-bg) 40%, transparent); }
.spica-specs__row-name { color: color-mix(in srgb, var(--spica-text) 68%, transparent); font-size: 0.84rem; }
.spica-specs__row-value {
	color: var(--spica-heading);
	font-weight: 600;
	font-family: ui-monospace, monospace;
	font-size: 0.84rem;
	text-align: right;
}

.spica-specs__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--spica-subtle);
	font-size: 0.72rem;
	color: color-mix(in srgb, var(--spica-text) 55%, transparent);
}
.spica-specs__download {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--spica-gold);
	font: inherit;
	text-decoration: none;
}
.spica-specs__download:hover { text-decoration: underline; }
.spica-specs__download.is-disabled {
	color: color-mix(in srgb, var(--spica-text) 45%, transparent);
	cursor: default;
	pointer-events: none;
}

.spica-specs__graph-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.9rem;
}
.spica-specs__graph-title { color: var(--spica-heading); margin: 0; }

.spica-specs__canvas {
	height: 16rem;
	background: color-mix(in srgb, var(--spica-bg) 90%, transparent);
	border: 1px solid color-mix(in srgb, var(--spica-subtle) 80%, transparent);
	border-radius: 1rem;
	padding: 0.35rem;
	margin-bottom: 1rem;
}
.spica-specs__canvas canvas { width: 100%; height: 100%; display: block; }

.spica-specs__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	text-align: center;
}
.spica-specs__stat {
	padding: 0.7rem;
	border-radius: 0.7rem;
	background: var(--spica-bg);
	border: 1px solid var(--spica-subtle);
}
.spica-specs__stat-label { display: block; font-size: 0.62rem; color: color-mix(in srgb, var(--spica-text) 55%, transparent); }
.spica-specs__stat-value {
	display: block;
	font-family: ui-monospace, monospace;
	font-weight: 700;
	color: var(--spica-heading);
}
.spica-specs__stat-value.is-gold { color: var(--spica-gold); }

/* ============ Colours ============ */
.spica-colors__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 2.5rem;
	align-items: center;
}

.spica-colors__preview {
	position: relative;
	overflow: hidden;
	padding: 3rem 2rem;
	text-align: center;
}
.spica-colors__preview-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 40%, transparent, color-mix(in srgb, var(--spica-bg) 60%, transparent) 100%);
	pointer-events: none;
}
.spica-colors__preview-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-height: 20rem; justify-content: center; }
.spica-colors__speaker { transition: transform 0.5s ease; }
.spica-colors__speaker:hover { transform: scale(1.08); }
.spica-render-palette { width: 14rem; height: 14rem; filter: drop-shadow(0 20px 35px rgba(0,0,0,0.8)); }

.spica-colors__label { margin-top: 1.5rem; }
.spica-colors__label-kicker {
	display: block;
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--spica-text) 60%, transparent);
	font-family: ui-monospace, monospace;
}
.spica-colors__label-name { color: var(--spica-gold); margin: 0.25rem 0 0; }

.spica-colors__list { display: grid; gap: 0.9rem; }
.spica-palette {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	text-align: left;
	padding: 1rem 1.1rem;
	border-radius: 1rem;
	background: var(--spica-bg-card);
	border: 1px solid var(--spica-subtle);
	cursor: pointer;
	font: inherit;
	transition: all 0.3s ease;
}
.spica-palette:hover { border-color: var(--spica-gold); }
.spica-palette.is-active { border-color: var(--spica-gold); box-shadow: 0 0 0 1px var(--spica-gold); }

.spica-palette__swatches { display: flex; }
.spica-swatch {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--spica-text) 25%, transparent);
}
.spica-swatch + .spica-swatch { margin-left: -0.5rem; }

.spica-palette__text { flex: 1; display: flex; flex-direction: column; }
.spica-palette__name { font-weight: 700; color: var(--spica-heading); transition: color 0.3s ease; }
.spica-palette__note { font-size: 0.72rem; color: color-mix(in srgb, var(--spica-text) 60%, transparent); }
.spica-palette.is-active .spica-palette__name,
.spica-palette:hover .spica-palette__name { color: var(--spica-gold); }
.spica-palette__arrow { color: var(--spica-gold); font-size: 0.8rem; }

/* ============ CTA ============ */
.spica-cta {
	background: linear-gradient(180deg, var(--spica-bg-section), var(--spica-bg));
	border-top: 1px solid var(--spica-border);
}
.spica-cta__container { max-width: 52rem; }
.spica-cta__panel { text-align: center; padding: 3.5rem 2rem; }
.spica-cta__desc {
	color: color-mix(in srgb, var(--spica-text) 78%, transparent);
	font-weight: 300;
	line-height: 1.7;
	max-width: 36rem;
	margin: 0 auto 2.25rem;
}
.spica-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.spica-btn--cta {
	padding: 1rem 2rem;
	font-size: 0.78rem;
	box-shadow: 0 15px 30px rgba(212, 175, 55, 0.2);
}
.spica-btn--cta-secondary { background: var(--spica-bg); border-color: var(--spica-subtle); color: var(--spica-heading); }
.spica-btn--cta-secondary:hover { border-color: var(--spica-gold); color: var(--spica-gold); }

/* ============ Footer ============ */
.spica-footer {
	background: var(--spica-bg);
	border-top: 1px solid var(--spica-subtle);
	padding-block: 3rem 2rem;
	position: relative;
	z-index: 1;
}
.spica-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
	gap: 2rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--spica-subtle);
}
.spica-footer__brand {
	font-family: 'Cinzel', serif;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: var(--spica-heading);
	margin-bottom: 0.75rem;
}
.spica-footer__tagline,
.spica-footer__note {
	color: color-mix(in srgb, var(--spica-text) 55%, transparent);
	font-size: 0.75rem;
	line-height: 1.7;
}
.spica-footer__heading {
	color: var(--spica-heading);
	font-family: 'Cinzel', serif;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.spica-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.spica-footer__list a {
	color: color-mix(in srgb, var(--spica-text) 70%, transparent);
	font-size: 0.78rem;
	text-decoration: none;
	transition: color 0.25s ease;
}
.spica-footer__list a:hover { color: var(--spica-gold); }
.spica-footer__badge {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.3rem 0.6rem;
	border-radius: 0.3rem;
	background: var(--spica-bg-card);
	border: 1px solid var(--spica-subtle);
	color: var(--spica-gold);
	font-family: ui-monospace, monospace;
	font-size: 0.62rem;
}
.spica-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 1.5rem;
	color: color-mix(in srgb, var(--spica-text) 45%, transparent);
	font-size: 0.7rem;
}
.spica-footer__bottom p { margin: 0; }

/* ============ Photos replacing artwork ============ */
.spica-render-photo {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 1rem;
	box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6);
}
.spica-hero__speaker .spica-render-photo { width: 16rem; }
.spica-render-photo--palette { width: 14rem; height: 14rem; }

/* ============ Gallery ============ */
.spica-gallery {
	background: var(--spica-bg-section);
	border-block: 1px solid var(--spica-border);
}
.spica-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 64rem;
	margin: 0 auto;
}
.spica-gallery__item {
	margin: 0;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid var(--spica-subtle);
	background: var(--spica-bg-card);
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
}
.spica-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.spica-gallery__item:hover img { transform: scale(1.06); }

/* ============ Lightbox ============ */
.spica-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.spica-lightbox.is-open { visibility: visible; opacity: 1; }

/* Locks body scroll while the lightbox is open. */
body.spica-modal-open { overflow: hidden; }

.spica-lightbox__img { max-width: 90vw; max-height: 86vh; }
.spica-lightbox__img img {
	max-width: 100%;
	max-height: 86vh;
	object-fit: contain;
	border-radius: 0.75rem;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
}
.spica-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	color: var(--spica-heading);
	font-size: 1.6rem;
	cursor: pointer;
	z-index: 2;
}
.spica-lightbox__close:hover { color: var(--spica-gold); }

/* ============ Header logo ============ */
.spica-has-logo .site-branding .site-logo-img .custom-logo {
	max-height: 48px;
	width: auto;
	height: auto;
}

/* Logo + site name + tagline on one line. */
.spica-has-logo .site-branding.ast-site-identity {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}
.spica-has-logo .site-branding .ast-site-title-wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	margin: 0;
}
.ast-site-title-wrap {
	display: flex;
	flex-direction: column;
}
.spica-has-logo .site-branding .ast-site-title-wrap .site-title,
.spica-has-logo .site-branding .ast-site-title-wrap .site-description {
	display: inline-block;
	margin: 0;
}
.spica-has-logo .site-branding .ast-site-title-wrap .site-description {
	color: color-mix(in srgb, var(--spica-text) 65%, transparent);
	font-size: 0.85rem;
}

/* ============ Responsive ============ */
@media (max-width: 1024px) {
	.spica-hero__showcase-grid { grid-template-columns: 1fr; text-align: center; }
	.spica-hero__visual { min-height: 220px; }
	.spica-keygrid, .spica-hero__ctas { max-width: 28rem; margin-inline: auto; }
	.spica-specs__grid, .spica-colors__grid { grid-template-columns: 1fr; }
	.spica-gallery__grid { grid-template-columns: repeat(2, 1fr); }
	.spica-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
	.spica-section { padding-block: 3.5rem; }
	.spica-section-head { margin-bottom: 2.25rem; }
	.spica-cards { grid-template-columns: 1fr; }
	.spica-hero__model-toggle { flex-wrap: nowrap; max-width: 100%; }
	.spica-hero__toggle { padding: 0.6rem 1rem; }
	.spica-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
	.spica-footer__grid { grid-template-columns: 1fr; }
	.spica-hero__showcase { padding: 1.25rem; }
	.spica-render-hero { width: 13rem; height: 13rem; }
	.spica-render-flush { width: 14rem; }
	.spica-render-palette { width: 11rem; height: 11rem; }
	.spica-keygrid { grid-template-columns: 1fr; }
	.spica-gallery__grid { grid-template-columns: 1fr; }
	.spica-hero__model-toggle { flex-wrap: wrap; justify-content: center; border-radius: 1.4rem; }
}