/* ==========================================================================
   BASSLINE BAITS — Core stylesheet
   --------------------------------------------------------------------------
   Load order:  main.css  →  woocommerce.css (shop views only)
   Everything is namespaced `bb-` so it can never collide with a plugin.
   Palette is sampled directly from the brand logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Lime — the logo's "Bassline" wordmark + soft-plastic worm */
	--bb-lime-100: #eaf7d4;
	--bb-lime-300: #b7e356;
	--bb-lime-400: #9bd62f; /* primary action */
	--bb-lime-500: #7cb82f;
	--bb-lime-600: #5e9420;
	--bb-lime-700: #436d14;

	/* Navy — the logo's "BAITS" plate and outline */
	--bb-navy-900: #070d1b;
	--bb-navy-800: #0c1526; /* page background */
	--bb-navy-700: #101e36; /* raised surface */
	--bb-navy-600: #17294a; /* card surface */
	--bb-navy-500: #21375f; /* hairline borders */

	/* Water — the splash behind the bass */
	/*
	 * 400 and 500 are decorative only — white text on either fails WCAG AA
	 * (2.75:1 and 4.13:1). Anything carrying white copy uses 600 (6.46:1) or
	 * 700 (9.1:1). See .bb-btn--water / .bb-badge--water below.
	 */
	--bb-water-400: #4ba3e3;
	--bb-water-500: #2b7fd4;
	--bb-water-600: #1b5fa8;
	--bb-water-700: #14487f;

	/* Neutrals */
	--bb-white: #ffffff;
	--bb-mist: #e6edf5; /* primary text on dark */
	--bb-steel: #93a6c0; /* muted text on dark */
	--bb-ink: #0a1020; /* text on light */

	/* Status */
	--bb-sale: #ff5a1f;
	--bb-instock: var(--bb-lime-400);
	--bb-oos: #7c8aa0;

	/* Semantic aliases — templates use these, never raw ramp values */
	--bb-bg: var(--bb-navy-800);
	--bb-surface: var(--bb-navy-700);
	--bb-surface-raised: var(--bb-navy-600);
	--bb-border: var(--bb-navy-500);
	--bb-text: var(--bb-mist);
	--bb-text-muted: var(--bb-steel);
	--bb-accent: var(--bb-lime-400);
	--bb-accent-ink: var(--bb-navy-900); /* text ON lime */

	/* Type */
	--bb-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--bb-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluid scale — clamp() so there are no layout-shifting breakpoints */
	--bb-t-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--bb-t-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
	--bb-t-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--bb-t-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--bb-t-xl: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
	--bb-t-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
	--bb-t-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	--bb-t-4xl: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);

	/* Space — 4px base */
	--bb-s-1: 0.25rem;
	--bb-s-2: 0.5rem;
	--bb-s-3: 0.75rem;
	--bb-s-4: 1rem;
	--bb-s-5: 1.5rem;
	--bb-s-6: 2rem;
	--bb-s-7: 3rem;
	--bb-s-8: 4rem;
	--bb-s-9: 6rem;

	/* Structure */
	--bb-wrap: 1240px;
	--bb-wrap-narrow: 760px;
	--bb-radius: 4px;
	--bb-radius-lg: 8px;
	--bb-skew: -8deg; /* matches the logo's italic rake */

	/* Depth — hard offset shadows echo the logo's thick outline */
	--bb-shadow-hard: 4px 4px 0 var(--bb-navy-900);
	--bb-shadow-hard-lg: 7px 7px 0 var(--bb-navy-900);
	--bb-shadow-soft: 0 8px 24px -6px rgb(0 0 0 / 0.55);
	--bb-shadow-glow: 0 0 0 3px rgb(155 214 47 / 0.28);

	/*
	 * The Bassline Baits mark is STACKED (bass above the wordmark), roughly
	 * 1.38:1 W:H — not a wide horizontal lockup. Height-constrained logos of
	 * that shape go illegible fast: at 52px tall this one renders only ~72px
	 * wide and the wordmark inside it is ~18px. Hence the taller header.
	 * If the logo is ever replaced with a horizontal lockup, drop these back
	 * to 76px / 52px.
	 */
	--bb-header-h: 96px;
	--bb-logo-h: 74px;
	--bb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--bb-header-h) + 1rem);
	/* Second line of defence against sideways scroll from any off-canvas panel.
	   `clip` only — `overflow-x: hidden` here would turn the root into a scroll
	   container and break position:sticky on the header. Browsers without clip
	   support fall back to body's overflow-x, set below. */
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--bb-bg);
	color: var(--bb-text);
	font-family: var(--bb-font-body);
	font-size: var(--bb-t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--bb-s-4);
	font-family: var(--bb-font-display);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--bb-white);
	text-wrap: balance;
}

h1 { font-size: var(--bb-t-3xl); }
h2 { font-size: var(--bb-t-2xl); }
h3 { font-size: var(--bb-t-xl); }
h4 { font-size: var(--bb-t-lg); }
h5, h6 { font-size: var(--bb-t-base); letter-spacing: 0.06em; }

p { margin: 0 0 var(--bb-s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
	color: var(--bb-lime-300);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.18s var(--bb-ease);
}
a:hover { color: var(--bb-lime-400); }

/* Media never causes layout shift — CLS guardrail */
img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

ul, ol { margin: 0 0 var(--bb-s-4); padding-left: 1.25em; }
li { margin-bottom: var(--bb-s-2); }

blockquote {
	margin: var(--bb-s-6) 0;
	padding: var(--bb-s-4) var(--bb-s-5);
	border-left: 5px solid var(--bb-accent);
	background: var(--bb-surface);
	font-size: var(--bb-t-lg);
	font-style: italic;
}

code, pre, kbd {
	font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
	font-size: 0.9em;
}
code {
	padding: 0.15em 0.4em;
	background: var(--bb-navy-900);
	border-radius: var(--bb-radius);
	color: var(--bb-lime-300);
}
pre {
	overflow-x: auto;
	padding: var(--bb-s-4);
	background: var(--bb-navy-900);
	border-radius: var(--bb-radius);
	border: 1px solid var(--bb-border);
}
pre code { padding: 0; background: none; }

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--bb-s-5);
}
th, td {
	padding: var(--bb-s-3);
	border-bottom: 1px solid var(--bb-border);
	text-align: left;
}
th {
	font-family: var(--bb-font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bb-white);
}

hr {
	height: 3px;
	margin: var(--bb-s-7) 0;
	border: 0;
	background: linear-gradient(90deg, var(--bb-accent), transparent);
}

/* --------------------------------------------------------------------------
   3. ACCESSIBILITY
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: 3px solid var(--bb-lime-400);
	outline-offset: 2px;
	border-radius: 2px;
}

.bb-skip-link {
	position: absolute;
	top: -100px;
	left: var(--bb-s-4);
	z-index: 999;
	padding: var(--bb-s-3) var(--bb-s-5);
	background: var(--bb-lime-400);
	color: var(--bb-accent-ink);
	font-family: var(--bb-font-display);
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	transition: top 0.2s var(--bb-ease);
}
.bb-skip-link:focus { top: var(--bb-s-4); }

/* Visually hidden but readable by screen readers + Google */
.screen-reader-text,
.bb-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	clip: auto;
	white-space: normal;
}

@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;
	}
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.bb-wrap {
	width: min(100% - 2.5rem, var(--bb-wrap));
	margin-inline: auto;
}
.bb-wrap--narrow { width: min(100% - 2.5rem, var(--bb-wrap-narrow)); }

.bb-section { padding-block: var(--bb-s-8); }
.bb-section--tight { padding-block: var(--bb-s-7); }
.bb-section--flush { padding-block: 0; }

.bb-section--alt { background: var(--bb-surface); }

/* Angled section edge — the recurring "slant" motif from the logo */
.bb-section--raked {
	position: relative;
	background: var(--bb-surface);
}
.bb-section--raked::before,
.bb-section--raked::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 44px;
	background: inherit;
}
.bb-section--raked::before { top: -22px; clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.bb-section--raked::after { bottom: -22px; clip-path: polygon(0 0, 100% 0, 0 100%, 0 0); }

.bb-grid { display: grid; gap: var(--bb-s-5); }
.bb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bb-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.bb-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

.bb-stack > * + * { margin-top: var(--bb-s-4); }
.bb-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-s-3);
	align-items: center;
}

/* --------------------------------------------------------------------------
   5. TYPE HELPERS
   -------------------------------------------------------------------------- */

/* Section eyebrow — small raked label above headings */
.bb-eyebrow {
	display: inline-block;
	margin-bottom: var(--bb-s-3);
	padding: 0.3em 0.85em;
	transform: skewX(var(--bb-skew));
	background: var(--bb-accent);
	color: var(--bb-accent-ink);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-sm);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}
.bb-eyebrow > * { display: inline-block; transform: skewX(calc(var(--bb-skew) * -1)); }

/* Italic raked display text, mirroring the wordmark */
.bb-display {
	font-family: var(--bb-font-display);
	font-weight: 900;
	font-style: italic;
	font-size: var(--bb-t-4xl);
	line-height: 0.92;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--bb-white);
	text-shadow: var(--bb-shadow-hard);
}
.bb-display em {
	font-style: italic;
	color: var(--bb-accent);
}

/* Hollow outline variant for large decorative numerals/words */
.bb-display--hollow {
	color: transparent;
	-webkit-text-stroke: 2px var(--bb-lime-500);
	text-shadow: none;
}

.bb-lede {
	max-width: 62ch;
	font-size: var(--bb-t-lg);
	color: var(--bb-text-muted);
}

.bb-section-head {
	margin-bottom: var(--bb-s-6);
	max-width: 70ch;
}
.bb-section-head--center {
	margin-inline: auto;
	text-align: center;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.bb-btn {
	--_bg: var(--bb-accent);
	--_fg: var(--bb-accent-ink);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bb-s-2);
	padding: 0.85em 1.9em;
	border: 2px solid var(--bb-navy-900);
	background: var(--_bg);
	color: var(--_fg);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-base);
	font-weight: 800;
	letter-spacing: 0.1em;
	line-height: 1.15;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transform: skewX(var(--bb-skew));
	box-shadow: var(--bb-shadow-hard);
	transition: transform 0.16s var(--bb-ease), box-shadow 0.16s var(--bb-ease),
		background-color 0.16s var(--bb-ease);
}
.bb-btn > span { display: inline-block; transform: skewX(calc(var(--bb-skew) * -1)); }

.bb-btn:hover,
.bb-btn:focus-visible {
	background: var(--bb-lime-300);
	color: var(--bb-accent-ink);
	transform: skewX(var(--bb-skew)) translate(-2px, -2px);
	box-shadow: var(--bb-shadow-hard-lg);
}
.bb-btn:active {
	transform: skewX(var(--bb-skew)) translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--bb-navy-900);
}

.bb-btn--ghost {
	--_bg: transparent;
	--_fg: var(--bb-white);
	border-color: var(--bb-lime-400);
	box-shadow: none;
}
.bb-btn--ghost:hover,
.bb-btn--ghost:focus-visible {
	--_bg: var(--bb-lime-400);
	--_fg: var(--bb-accent-ink);
	box-shadow: var(--bb-shadow-hard);
}

/* Hover DARKENS. Lightening to water-400 dropped white text to 2.75:1, i.e.
   the control became hardest to read exactly when focused or hovered. */
.bb-btn--water { --_bg: var(--bb-water-600); --_fg: var(--bb-white); }
.bb-btn--water:hover, .bb-btn--water:focus-visible { background: var(--bb-water-700); color: var(--bb-white); }

.bb-btn--sm { padding: 0.6em 1.3em; font-size: var(--bb-t-sm); }
.bb-btn--lg { padding: 1em 2.4em; font-size: var(--bb-t-lg); }
.bb-btn--block { display: flex; width: 100%; }

.bb-btn[disabled],
.bb-btn.is-disabled {
	opacity: 0.5;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   7. BADGES / PILLS
   -------------------------------------------------------------------------- */
.bb-badge {
	display: inline-block;
	padding: 0.3em 0.75em;
	background: var(--bb-navy-900);
	border: 1px solid var(--bb-border);
	color: var(--bb-text-muted);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.5;
	border-radius: 100px;
	transition: border-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease);
}
a.bb-badge:hover { border-color: var(--bb-lime-400); color: var(--bb-lime-300); }

.bb-badge--accent { background: var(--bb-lime-400); border-color: var(--bb-lime-400); color: var(--bb-accent-ink); }
/* Dark ink on orange = 6.22:1; white on it was 3.12:1. These carry real copy
   ("Only 3 left in this batch", "Made to order"), not decoration. */
.bb-badge--sale { background: var(--bb-sale); border-color: var(--bb-sale); color: var(--bb-accent-ink); }
.bb-badge--water { background: var(--bb-water-600); border-color: var(--bb-water-600); color: var(--bb-white); }

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.bb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--bb-surface-raised);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius-lg);
	overflow: hidden;
	transition: transform 0.2s var(--bb-ease), border-color 0.2s var(--bb-ease),
		box-shadow 0.2s var(--bb-ease);
}
.bb-card:hover {
	transform: translateY(-4px);
	border-color: var(--bb-lime-500);
	box-shadow: var(--bb-shadow-soft);
}

.bb-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bb-navy-900);
}
.bb-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--bb-ease);
}
.bb-card:hover .bb-card__media img { transform: scale(1.05); }

.bb-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--bb-s-2);
	padding: var(--bb-s-5);
}
.bb-card__title {
	margin: 0;
	font-size: var(--bb-t-lg);
	line-height: 1.15;
}
.bb-card__title a { color: inherit; text-decoration: none; }
.bb-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.bb-card__meta {
	font-size: var(--bb-t-sm);
	color: var(--bb-text-muted);
}
.bb-card__excerpt { font-size: var(--bb-t-sm); color: var(--bb-text-muted); }
.bb-card__foot { margin-top: auto; padding-top: var(--bb-s-3); }

/* Corner flag for "NEW" / "SALE" over card media */
.bb-card__flag {
	position: absolute;
	top: var(--bb-s-3);
	left: var(--bb-s-3);
	z-index: 2;
	transform: skewX(var(--bb-skew));
	padding: 0.25em 0.7em;
	background: var(--bb-sale);
	/* 6.22:1. White here measured 3.12:1 and this text is 12-13px, so the
	   large-text exemption does not apply. */
	color: var(--bb-accent-ink);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-xs);
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   9. SITE HEADER
   -------------------------------------------------------------------------- */
.bb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--bb-navy-900) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bb-border);
}

.bb-header__bar {
	display: flex;
	align-items: center;
	gap: var(--bb-s-5);
	min-height: var(--bb-header-h);
}

.bb-brand {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding-block: var(--bb-s-2);
}
.bb-brand img {
	width: auto;
	height: var(--bb-logo-h);
	max-height: var(--bb-logo-h);
	object-fit: contain;
}
.bb-brand__text {
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-xl);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--bb-white);
	line-height: 1;
}
.bb-brand__text em { color: var(--bb-accent); font-style: italic; }

/* Primary nav */
.bb-nav { margin-left: auto; }
.bb-nav ul {
	display: flex;
	align-items: center;
	gap: var(--bb-s-5);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-nav li { margin: 0; position: relative; }
.bb-nav a {
	display: block;
	padding: var(--bb-s-2) 0;
	color: var(--bb-mist);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-base);
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	text-decoration: none;
}
.bb-nav a::after {
	content: "";
	display: block;
	height: 3px;
	width: 0;
	margin-top: 3px;
	background: var(--bb-accent);
	transform: skewX(var(--bb-skew));
	transition: width 0.2s var(--bb-ease);
}
.bb-nav a:hover::after,
.bb-nav a:focus-visible::after,
.bb-nav .current-menu-item > a::after,
.bb-nav .current_page_item > a::after,
.bb-nav .current-menu-ancestor > a::after {
	width: 100%;
}
.bb-nav .current-menu-item > a,
.bb-nav .current_page_item > a { color: var(--bb-white); }

/* Dropdowns */
.bb-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	display: block;
	flex-direction: column;
	gap: 0;
	min-width: 230px;
	padding: var(--bb-s-2);
	background: var(--bb-navy-700);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	box-shadow: var(--bb-shadow-soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.18s var(--bb-ease), transform 0.18s var(--bb-ease),
		visibility 0.18s;
}
.bb-nav li:hover > .sub-menu,
.bb-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.bb-nav .sub-menu a { padding: var(--bb-s-2) var(--bb-s-3); font-size: var(--bb-t-sm); }
.bb-nav .sub-menu a::after { display: none; }
.bb-nav .sub-menu a:hover { background: var(--bb-navy-600); color: var(--bb-lime-300); }

/* Header utility icons (search / account / cart) */
.bb-header__tools {
	display: flex;
	align-items: center;
	gap: var(--bb-s-3);
	flex-shrink: 0;
}
.bb-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: transparent;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	color: var(--bb-mist);
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease),
		background-color 0.16s var(--bb-ease);
}
.bb-icon-btn:hover,
.bb-icon-btn:focus-visible {
	border-color: var(--bb-lime-400);
	color: var(--bb-lime-300);
	background: var(--bb-navy-700);
}
.bb-icon-btn svg { width: 21px; height: 21px; }

.bb-cart-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	background: var(--bb-accent);
	color: var(--bb-accent-ink);
	border-radius: 100px;
	font-family: var(--bb-font-display);
	font-size: 0.7rem;
	font-weight: 800;
	line-height: 1;
}
.bb-cart-count:empty,
.bb-cart-count[data-count="0"] { display: none; }

/* Mobile toggle */
.bb-nav-toggle { display: none; }

/* Announcement bar */
.bb-announce {
	background: linear-gradient(90deg, var(--bb-lime-600), var(--bb-lime-400));
	color: var(--bb-accent-ink);
	text-align: center;
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: var(--bb-s-2) var(--bb-s-4);
}
.bb-announce a { color: inherit; }

/* --------------------------------------------------------------------------
   10. MOBILE NAV
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

	/* A 96px header eats too much of a phone screen — scale the lockup down. */
	:root {
		--bb-header-h: 74px;
		--bb-logo-h: 56px;
	}

	/*
	 * Drop the blur on mobile. This is load-bearing, not cosmetic.
	 *
	 * backdrop-filter (like transform and filter) makes an element a containing
	 * block for its position:fixed descendants. With it applied, .bb-nav below
	 * stops being fixed to the VIEWPORT and becomes fixed to the HEADER — so its
	 * closed-state translateX(100%) parks it one full viewport to the right of
	 * the document instead of harmlessly off-screen, doubling the page's scroll
	 * width and pushing every section's right edge out of view. body's
	 * overflow-x does not save us: the nav is painted in the header's containing
	 * block, and the resulting overflow is on the document scroller.
	 *
	 * Removing it here restores true viewport-fixed positioning, and a
	 * viewport-fixed element contributes no scrollable overflow at all.
	 */
	.bb-header { backdrop-filter: none; }

	.bb-nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		margin-left: auto;
		background: transparent;
		border: 1px solid var(--bb-border);
		border-radius: var(--bb-radius);
		color: var(--bb-mist);
		cursor: pointer;
	}
	.bb-nav-toggle svg { width: 24px; height: 24px; }
	.bb-nav-toggle .bb-icon-close { display: none; }
	.bb-nav-toggle[aria-expanded="true"] .bb-icon-close { display: block; }
	.bb-nav-toggle[aria-expanded="true"] .bb-icon-menu { display: none; }

	.bb-nav {
		position: fixed;
		inset: var(--bb-header-h) 0 0 0;
		z-index: 90;
		margin-left: 0;
		padding: var(--bb-s-5) var(--bb-s-5) var(--bb-s-8);
		background: var(--bb-navy-800);
		overflow-y: auto;
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s var(--bb-ease), visibility 0.25s;
	}
	.bb-nav.is-open { transform: translateX(0); visibility: visible; }

	.bb-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.bb-nav li { border-bottom: 1px solid var(--bb-border); }
	.bb-nav a { padding: var(--bb-s-4) 0; font-size: var(--bb-t-lg); }
	.bb-nav a::after { display: none; }

	.bb-nav .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 0 var(--bb-s-3) var(--bb-s-4);
		min-width: 0;
	}
	.bb-nav .sub-menu li { border: 0; }

	body.bb-nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */
.bb-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: min(78vh, 720px);
	padding-block: var(--bb-s-9);
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 78% 12%, rgb(43 127 212 / 0.34) 0%, transparent 58%),
		radial-gradient(90% 80% at 12% 92%, rgb(94 148 32 / 0.28) 0%, transparent 60%),
		var(--bb-navy-900);
}

/* Subtle water-caustic streaks */
.bb-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		115deg,
		transparent 0 42px,
		rgb(75 163 227 / 0.05) 42px 44px
	);
	pointer-events: none;
}

.bb-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--bb-s-7);
	align-items: center;
}
@media (max-width: 900px) {
	.bb-hero__inner { grid-template-columns: 1fr; }
	.bb-hero { min-height: 0; padding-block: var(--bb-s-8); text-align: left; }
}

.bb-hero__title { margin-bottom: var(--bb-s-4); }
.bb-hero__lede {
	max-width: 52ch;
	margin-bottom: var(--bb-s-6);
	font-size: var(--bb-t-lg);
	color: var(--bb-mist);
}
.bb-hero__actions { display: flex; flex-wrap: wrap; gap: var(--bb-s-4); }

.bb-hero__media { position: relative; }

/*
 * No border, no radius, no card. The hero art is a cut-out subject on a
 * transparent background, so boxing it made it read as a placeholder tile
 * pasted onto the gradient. A drop-shadow filter follows the subject's actual
 * silhouette and gives it depth without inventing an edge.
 *
 * If a rectangular photo is ever used here instead, add
 * `.bb-hero__media--framed` with the old border/radius/shadow treatment.
 */
.bb-hero__media img {
	width: 100%;
	filter: drop-shadow(0 26px 34px rgb(0 0 0 / 0.5));
}

.bb-hero__media--framed img {
	border-radius: var(--bb-radius-lg);
	border: 2px solid var(--bb-navy-900);
	box-shadow: var(--bb-shadow-hard-lg);
	filter: none;
}

/* Trust strip under hero */
.bb-trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bb-s-5) var(--bb-s-7);
	padding-block: var(--bb-s-5);
	background: var(--bb-navy-900);
	border-block: 1px solid var(--bb-border);
}
.bb-trust__item {
	display: flex;
	align-items: center;
	gap: var(--bb-s-2);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bb-mist);
}
.bb-trust__item svg { width: 22px; height: 22px; color: var(--bb-accent); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   12. TAXONOMY / CATEGORY TILES
   -------------------------------------------------------------------------- */
.bb-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	padding: var(--bb-s-5);
	border-radius: var(--bb-radius-lg);
	border: 1px solid var(--bb-border);
	background: var(--bb-surface-raised);
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.2s var(--bb-ease), border-color 0.2s var(--bb-ease);
}
.bb-tile:hover { transform: translateY(-4px); border-color: var(--bb-lime-500); }
/*
 * Opacity was 0.5 back when these tiles were expected to hold busy photographs
 * that needed knocking down so the label stayed legible. The real artwork is
 * clean subject-on-gradient illustration, and dimming it to half just made the
 * fish muddy. Near-full opacity plus a bottom-weighted scrim keeps the label
 * readable while letting the artwork actually be seen.
 */
.bb-tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.92;
	transition: opacity 0.25s var(--bb-ease), transform 0.4s var(--bb-ease);
}
.bb-tile:hover img { opacity: 1; transform: scale(1.06); }
.bb-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Scrim concentrated at the bottom, where the label sits, so the fish's
	   body stays bright instead of being veiled edge to edge. */
	background: linear-gradient(
		to top,
		var(--bb-navy-900) 0%,
		color-mix(in srgb, var(--bb-navy-900) 72%, transparent) 30%,
		transparent 62%
	);
}
.bb-tile__label {
	position: relative;
	z-index: 2;
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-xl);
	font-style: italic;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--bb-white);
	line-height: 1.05;
	text-shadow: 2px 2px 0 var(--bb-navy-900);
}
.bb-tile__count {
	display: block;
	font-size: var(--bb-t-xs);
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--bb-lime-300);
}

/* --------------------------------------------------------------------------
   13. BREADCRUMBS
   -------------------------------------------------------------------------- */
.bb-breadcrumbs {
	padding-block: var(--bb-s-4);
	font-size: var(--bb-t-sm);
	color: var(--bb-text-muted);
}
/* Links carry a persistent underline, not just a hover colour. Colour alone was
   the only thing separating a linked crumb from the current-page crumb, which
   fails WCAG 1.4.1 and is invisible to touch and keyboard users. */
.bb-breadcrumbs a {
	color: var(--bb-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.bb-breadcrumbs a:hover { color: var(--bb-lime-300); }
.bb-breadcrumbs [aria-current="page"] { color: var(--bb-text-muted); text-decoration: none; }
.bb-breadcrumbs .separator { margin-inline: 0.5em; opacity: 0.5; }

/* --------------------------------------------------------------------------
   14. PAGE HEADER
   -------------------------------------------------------------------------- */
.bb-page-head {
	padding-block: var(--bb-s-7);
	background:
		radial-gradient(100% 140% at 15% 0%, rgb(43 127 212 / 0.2) 0%, transparent 60%),
		var(--bb-navy-900);
	border-bottom: 1px solid var(--bb-border);
}
.bb-page-head__title { margin-bottom: var(--bb-s-3); }
.bb-page-head__desc { max-width: 68ch; color: var(--bb-text-muted); }

/* --------------------------------------------------------------------------
   15. ENTRY / ARTICLE CONTENT
   -------------------------------------------------------------------------- */
.bb-entry { padding-block: var(--bb-s-8); }

.bb-entry__content > * + * { margin-top: var(--bb-s-5); }
.bb-entry__content h2 { margin-top: var(--bb-s-7); }
.bb-entry__content h3 { margin-top: var(--bb-s-6); }
.bb-entry__content > *:first-child { margin-top: 0; }

.bb-entry__content img,
.bb-entry__content figure { border-radius: var(--bb-radius); }
.bb-entry__content figcaption {
	margin-top: var(--bb-s-2);
	font-size: var(--bb-t-sm);
	color: var(--bb-text-muted);
	text-align: center;
}

.bb-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-s-2) var(--bb-s-4);
	margin-bottom: var(--bb-s-5);
	font-size: var(--bb-t-sm);
	color: var(--bb-text-muted);
}

.bb-entry__thumb {
	margin-bottom: var(--bb-s-6);
	border-radius: var(--bb-radius-lg);
	overflow: hidden;
	border: 1px solid var(--bb-border);
}

/* Block editor alignment support */
.alignwide { width: min(100%, 1100px); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignleft { float: left; margin: 0 var(--bb-s-5) var(--bb-s-4) 0; }
.alignright { float: right; margin: 0 0 var(--bb-s-4) var(--bb-s-5); }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }

/* --------------------------------------------------------------------------
   16. PAGINATION
   -------------------------------------------------------------------------- */
.bb-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bb-s-2);
	margin-top: var(--bb-s-7);
}
.bb-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 46px;
	height: 46px;
	padding-inline: var(--bb-s-3);
	background: var(--bb-surface);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	color: var(--bb-mist);
	font-family: var(--bb-font-display);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.16s var(--bb-ease), border-color 0.16s var(--bb-ease);
}
.bb-pagination .page-numbers:hover { border-color: var(--bb-lime-400); color: var(--bb-lime-300); }
.bb-pagination .page-numbers.current {
	background: var(--bb-accent);
	border-color: var(--bb-accent);
	color: var(--bb-accent-ink);
}
.bb-pagination .dots { background: transparent; border-color: transparent; }

/* --------------------------------------------------------------------------
   17. FORMS
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.75em 1em;
	background: var(--bb-navy-900);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	color: var(--bb-white);
	transition: border-color 0.16s var(--bb-ease), box-shadow 0.16s var(--bb-ease);
}
input::placeholder,
textarea::placeholder { color: var(--bb-steel); opacity: 1; }

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--bb-lime-400);
	box-shadow: var(--bb-shadow-glow);
}

label {
	display: block;
	margin-bottom: var(--bb-s-2);
	font-family: var(--bb-font-display);
	font-size: var(--bb-t-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-white);
}

textarea { min-height: 150px; resize: vertical; }

/* Search form */
.bb-searchform { display: flex; gap: var(--bb-s-2); }
.bb-searchform input[type="search"] { flex: 1; }

/* --------------------------------------------------------------------------
   18. NEWSLETTER / CTA BAND
   -------------------------------------------------------------------------- */
.bb-cta-band {
	position: relative;
	padding-block: var(--bb-s-8);
	overflow: hidden;
	background:
		radial-gradient(80% 120% at 85% 20%, rgb(43 127 212 / 0.3) 0%, transparent 60%),
		linear-gradient(135deg, var(--bb-navy-700), var(--bb-navy-900));
	border-block: 1px solid var(--bb-border);
	text-align: center;
}
.bb-cta-band__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; }
.bb-cta-band form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-s-3);
	justify-content: center;
	margin-top: var(--bb-s-5);
}
.bb-cta-band input[type="email"] { flex: 1 1 260px; max-width: 380px; }

/* --------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.bb-footer {
	background: var(--bb-navy-900);
	border-top: 3px solid var(--bb-lime-500);
	padding-top: var(--bb-s-8);
	font-size: var(--bb-t-sm);
}
.bb-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--bb-s-6);
	padding-bottom: var(--bb-s-7);
}
/* The footer has room to breathe, so the stacked mark gets to be legible here. */
.bb-footer__brand img { height: 118px; width: auto; margin-bottom: var(--bb-s-4); }
.bb-footer__tagline { max-width: 40ch; color: var(--bb-text-muted); }

.bb-footer h2,
.bb-footer h3 {
	font-size: var(--bb-t-base);
	letter-spacing: 0.12em;
	margin-bottom: var(--bb-s-4);
	color: var(--bb-white);
}
.bb-footer ul { list-style: none; margin: 0; padding: 0; }
.bb-footer li { margin-bottom: var(--bb-s-3); }
.bb-footer a { color: var(--bb-text-muted); text-decoration: none; }
.bb-footer a:hover { color: var(--bb-lime-300); text-decoration: underline; }

.bb-social { display: flex; gap: var(--bb-s-3); margin-top: var(--bb-s-4); }
.bb-social a {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius);
	color: var(--bb-mist);
	transition: border-color 0.16s var(--bb-ease), color 0.16s var(--bb-ease);
}
.bb-social a:hover { border-color: var(--bb-lime-400); color: var(--bb-lime-300); }
.bb-social svg { width: 20px; height: 20px; }

.bb-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-s-3) var(--bb-s-5);
	justify-content: space-between;
	align-items: center;
	padding-block: var(--bb-s-4);
	border-top: 1px solid var(--bb-border);
	color: var(--bb-text-muted);
	font-size: var(--bb-t-xs);
}
.bb-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--bb-s-4); }
.bb-footer__bottom li { margin: 0; }

/* --------------------------------------------------------------------------
   20. UTILITIES
   -------------------------------------------------------------------------- */
.bb-text-center { text-align: center; }
.bb-mt-0 { margin-top: 0; }
.bb-mb-0 { margin-bottom: 0; }
.bb-mt-6 { margin-top: var(--bb-s-6); }
.bb-mt-7 { margin-top: var(--bb-s-7); }
.bb-muted { color: var(--bb-text-muted); }
.bb-accent-text { color: var(--bb-accent); }
.bb-flow > * + * { margin-top: var(--bb-s-4); }

/* Only paint what is in view — cheap CWV win on long archives */
.bb-cv-auto {
	content-visibility: auto;
	contain-intrinsic-size: auto 420px;
}

/* Print */
@media print {
	.bb-header,
	.bb-footer,
	.bb-cta-band,
	.bb-nav-toggle { display: none !important; }
	body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   21. ADDITIONS
   Classes emitted by PHP that had no rules until now.
   -------------------------------------------------------------------------- */

/*
 * Widgets. inc/setup.php registers both sidebars with this exact wrapper and
 * title markup, so anything the owner drops into the blog or shop band lands
 * here. Styled to match .bb-card so a sidebar reads as part of the system.
 */
.bb-widget {
	padding: var(--bb-s-5);
	background: var(--bb-surface-raised);
	border: 1px solid var(--bb-border);
	border-radius: var(--bb-radius-lg);
}
.bb-widget + .bb-widget { margin-top: var(--bb-s-5); }

.bb-widget__title {
	margin-bottom: var(--bb-s-4);
	padding-bottom: var(--bb-s-3);
	border-bottom: 2px solid var(--bb-accent);
	font-size: var(--bb-t-lg);
	letter-spacing: 0.06em;
}

.bb-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.bb-widget li + li {
	margin-top: var(--bb-s-2);
	padding-top: var(--bb-s-2);
	border-top: 1px solid var(--bb-border);
}
.bb-widget a { color: var(--bb-text); text-decoration: none; }
.bb-widget a:hover { color: var(--bb-lime-300); text-decoration: underline; }

/*
 * Mirrors the right-chevron into a left-chevron. bassline_pagination() asks for
 * this on its "previous page" icon; without it both arrows point the same way
 * and only the screen-reader label tells them apart.
 */
.bb-flip { transform: scaleX(-1); }

/*
 * <main> is given tabindex="-1" so the skip link can move focus into it. That
 * makes it focusable, and browsers would otherwise paint a focus ring around
 * the entire page region when it receives focus programmatically.
 */
.bb-main:focus { outline: none; }