/*
Theme Name: Side Hustle Labs
Theme URI: https://sidehustlelabs.blog
Author: Jose Suarez
Author URI: https://sidehustlelabs.blog/about/
Description: Custom theme for Side Hustle Labs. Hand written, no framework, no page builder. The wordmark is the only expressive element; everything around it is instrument-panel quiet. Ships a Tools post type whose status chip is honest by default, because a tool is never listed as for sale until its file exists.
Version: 1.2.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: side-hustle-labs
Tags: blog, e-commerce, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   SIDE HUSTLE LABS
   Brand code: SHL  ·  Owner: Jose Suarez  ·  South Florida

   Palette is canon, derived from the 2022 identity art:
   violet #7030FF, magenta #FF0050, mint #00FFA0.
   Mint means shipped / free / active only. It is never decoration.
   The violet-to-magenta gradient appears at most once per screen.
   Mono carries the interface chrome, sans carries the reading.
   ============================================================ */

/* ── Reset ───────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
}

html:focus-within {
	scroll-behavior: smooth;
}

img,
picture,
svg,
video {
	max-width: 100%;
	display: block;
	height: auto;
}

/* Author styles beat the UA sheet, so the rule above would otherwise keep a
   hidden svg visible. The menu toggle relies on this. */
[hidden] {
	display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

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

/* ── Tokens ──────────────────────────────────────────────── */

:root {
	--violet: #7030ff;
	--magenta: #ff0050;
	--grad: linear-gradient(100deg, #7030ff 0%, #ff0050 100%);

	--mint: #00ffa0;
	--mint-ink: #04120c;

	--paper: #f4f3f7;
	--paper-raised: #ffffff;
	--paper-sunk: #ecebf1;

	--ink: #16131e;
	--ink-muted: #56506a;
	/* Carries labels, dates, and the footer base, so it has to clear 4.5:1
	   against both --paper and --paper-sunk. Measured at 5.04 and 4.70. */
	--ink-faint: #6b6480;

	--rule: rgba(22, 19, 30, 0.14);
	--rule-strong: rgba(22, 19, 30, 0.28);

	--chip-dev-bg: rgba(112, 48, 255, 0.1);
	--chip-dev-ink: #5a20d6;
	--chip-planned-bg: rgba(22, 19, 30, 0.06);
	--chip-planned-ink: var(--ink-muted);

	--shadow: 0 1px 2px rgba(22, 19, 30, 0.04), 0 12px 32px rgba(22, 19, 30, 0.06);
	--bloom: 0.1;

	--font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--t-display: clamp(2.6rem, 1.5rem + 4.9vw, 5rem);
	--t-h1: clamp(1.95rem, 1.4rem + 2.4vw, 2.9rem);
	--t-h2: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem);
	--t-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
	--t-lead: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
	--t-body: 1rem;
	--t-sm: 0.875rem;
	--t-label: 0.6875rem;

	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 72px;
	--s-9: 112px;

	--r-sm: 3px;
	--r-md: 6px;
	--r-full: 999px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--dur: 160ms;

	--wrap: 1120px;
}

[data-theme="dark"] {
	--paper: #100e16;
	--paper-raised: #191622;
	--paper-sunk: #0a0810;

	--ink: #f2f0f7;
	--ink-muted: #a49db8;
	/* 4.97:1 on --paper, 5.16:1 on --paper-sunk. */
	--ink-faint: #857e9b;

	--rule: rgba(255, 255, 255, 0.12);
	--rule-strong: rgba(255, 255, 255, 0.26);

	--chip-dev-bg: rgba(150, 110, 255, 0.16);
	--chip-dev-ink: #c3a8ff;
	--chip-planned-bg: rgba(255, 255, 255, 0.06);
	--chip-planned-ink: var(--ink-muted);

	--shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.45);
	--bloom: 0.22;
}

/* ── Base ────────────────────────────────────────────────── */

body {
	min-height: 100dvh;
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--t-body);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
}

.site-main {
	flex: 1;
}

h1,
h2,
h3 {
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.028em;
	text-wrap: balance;
}

h1 {
	font-size: var(--t-h1);
}

h2 {
	font-size: var(--t-h2);
}

h3 {
	font-size: var(--t-h3);
	letter-spacing: -0.018em;
	line-height: 1.25;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
}

strong,
b {
	font-weight: 600;
	color: var(--ink);
}

:focus-visible {
	outline: 2px solid var(--violet);
	outline-offset: 3px;
	border-radius: var(--r-sm);
}

::selection {
	background: rgba(112, 48, 255, 0.22);
}

/* ── Layout ──────────────────────────────────────────────── */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--s-5);
}

@media (min-width: 900px) {
	.wrap {
		padding-inline: var(--s-7);
	}
}

.section {
	padding-block: var(--s-8);
}

.section--tight {
	padding-block: var(--s-7);
}

.skip-link {
	position: absolute;
	left: var(--s-4);
	top: -100px;
	z-index: 100;
	background: var(--paper-raised);
	color: var(--ink);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-md);
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	text-decoration: none;
	transition: top var(--dur) var(--ease);
}

.skip-link:focus {
	top: var(--s-4);
}

.screen-reader-text,
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
}

/* ── Mono chrome ─────────────────────────────────────────── */

.mono {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	letter-spacing: -0.01em;
}

.label {
	font-family: var(--font-mono);
	font-size: var(--t-label);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--ink-faint);
	font-weight: 500;
	margin: 0;
}

/* A hairline with its label sitting on it. Opens every section. */
.rule {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}

.rule::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--rule);
}

.rule > .label {
	flex: none;
}

.rule__end {
	flex: none;
	font-family: var(--font-mono);
	font-size: var(--t-label);
	letter-spacing: 0.1em;
	color: var(--ink-faint);
	text-transform: uppercase;
}

.rule:has(.rule__end)::after {
	order: -1;
}

/* ── Status chips ────────────────────────────────────────── */

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: 3px var(--s-2);
	border-radius: var(--r-sm);
	font-family: var(--font-mono);
	font-size: var(--t-label);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 500;
	white-space: nowrap;
	background: var(--chip-planned-bg);
	color: var(--chip-planned-ink);
}

.chip--shipped {
	background: var(--mint);
	color: var(--mint-ink);
}

.chip--in-dev {
	background: var(--chip-dev-bg);
	color: var(--chip-dev-ink);
}

/* ── Controls ────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--r-full);
	border: 1px solid transparent;
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		background var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.btn--primary {
	background: var(--grad);
	color: #fff;
}

.btn--primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(112, 48, 255, 0.32);
}

.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--rule-strong);
}

.btn--ghost:hover {
	background: var(--paper-raised);
	border-color: var(--ink-faint);
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--r-full);
	border: 1px solid transparent;
	background: transparent;
	color: var(--ink-muted);
	cursor: pointer;
	transition:
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.icon-btn:hover {
	color: var(--ink);
	border-color: var(--rule);
}

.icon-btn svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.link {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-strong);
	padding-bottom: 1px;
	transition: border-color var(--dur) var(--ease);
}

.link:hover {
	border-color: var(--violet);
}

/* The theme toggle swaps its icon off the data-theme attribute, which the
   inline head script sets before first paint. No flash, no JS state. */
.theme-toggle__dark {
	display: none;
}

[data-theme="dark"] .theme-toggle__dark {
	display: block;
}

[data-theme="dark"] span.theme-toggle__dark {
	display: inline;
}

[data-theme="dark"] .theme-toggle__light {
	display: none;
}

/* The menu button swaps its icon off aria-expanded, which the script already
   maintains. Note that `hidden` is not a reflected property on SVG elements,
   so setting it from JavaScript would silently do nothing. */
.site-header__menu[aria-expanded="false"] .shl-icon-close,
.site-header__menu[aria-expanded="true"] .shl-icon-menu {
	display: none;
}

/* ── Prose ───────────────────────────────────────────────── */

.prose {
	max-width: 66ch;
	/* Source citations carry bare URLs, and a long one has no break
	   opportunity, so it sets the minimum width of the whole page. Seen at
	   375px on the terms and cookie pages before this. */
	overflow-wrap: anywhere;
}

.prose p,
.prose li {
	color: var(--ink-muted);
	font-size: var(--t-lead);
	line-height: 1.7;
}

.prose > * + * {
	margin-top: var(--s-5);
}

.prose h2 {
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
	font-size: var(--t-h2);
}

.prose h3 {
	margin-top: var(--s-6);
}

.prose ol {
	padding-left: 0;
	list-style: none;
	counter-reset: step;
	display: grid;
	gap: var(--s-4);
}

.prose ol > li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: baseline;
}

.prose ol > li::before {
	content: counter(step, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	color: var(--violet);
}

.prose ul {
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: var(--s-3);
}

.prose ul > li {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: baseline;
}

.prose ul > li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: var(--r-full);
	background: var(--violet);
	transform: translateY(-2px);
}

.prose a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--violet);
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

.prose a:hover {
	color: var(--violet);
}

.prose em {
	color: var(--ink-faint);
	font-size: var(--t-sm);
	font-style: normal;
	font-family: var(--font-mono);
	line-height: 1.6;
	display: inline-block;
}

.prose blockquote {
	border-left: 2px solid var(--violet);
	padding-left: var(--s-5);
	margin-left: 0;
}

.prose code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--paper-sunk);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
	padding: 1px 5px;
}

.prose pre {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	background: var(--paper-sunk);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	padding: var(--s-5);
	overflow-x: auto;
}

.prose pre code {
	background: none;
	border: 0;
	padding: 0;
}

.prose img,
.prose figure {
	border-radius: var(--r-md);
}

.prose figcaption {
	font-family: var(--font-mono);
	font-size: var(--t-label);
	color: var(--ink-faint);
	margin-top: var(--s-2);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-sm);
}

.prose th,
.prose td {
	text-align: left;
	padding: var(--s-3);
	border-bottom: 1px solid var(--rule);
}

/* A wide table scrolls inside its own box. The cookie inventory is five
   columns, and at 375px it would otherwise push the whole page sideways. */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-scroll table {
	min-width: 34rem;
}

/* WordPress alignment and caption classes */
.alignwide {
	max-width: min(100%, calc(var(--wrap) - var(--s-7) * 2));
}

.alignfull {
	max-width: none;
}

.aligncenter {
	margin-inline: auto;
}

.alignleft {
	float: left;
	margin: 0 var(--s-5) var(--s-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--s-4) var(--s-5);
}

.wp-caption-text {
	font-family: var(--font-mono);
	font-size: var(--t-label);
	color: var(--ink-faint);
}

.grad-text {
	background: var(--grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── Header ──────────────────────────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--rule);
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-5);
	min-height: 60px;
}

/* The lockup: LABS sits on the script's baseline at the right, the way the
   stamp sets it. The art is tightly cropped and its baseline falls at 96.6%
   of the image height, so flex baseline alignment does this on its own: an
   image's baseline is its bottom edge, which lands within about a pixel of
   the script's. No nudging, and it holds at every size. */
.site-header__mark {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	flex: none;
	text-decoration: none;
	color: var(--ink);
}

.site-header__mark img {
	height: 30px;
	width: auto;
}

/* LABS is set in the sans, not the mono.
   The stamp it copies uses a proportional geometric face: measured against the
   artwork the L is 0.40 of cap height while the A is 0.80. A monospace makes
   all four letters identical, which is why the mono version read wrong. The
   exact 2022 face is not on disk, so this uses the brand's own display face,
   which is proportional and already bundled. */
.site-header__labs {
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	/* Tracking adds a trailing gap after the last letter; pull it back so the
	   lockup's right edge is optically flush. */
	margin-right: -0.3em;
}

.site-header__nav {
	display: none;
	align-items: center;
	gap: var(--s-6);
	margin-left: auto;
}

.site-header__nav ul {
	display: flex;
	align-items: center;
	gap: var(--s-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav a {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	color: var(--ink-muted);
	text-decoration: none;
	padding-block: var(--s-2);
	border-bottom: 1px solid transparent;
	display: inline-block;
	transition:
		color var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}

.site-header__nav a:hover {
	color: var(--ink);
}

.site-header__nav .current-menu-item > a,
.site-header__nav .current_page_item > a,
.site-header__nav .current-menu-ancestor > a,
.site-header__nav .current-shl-item > a {
	color: var(--ink);
	border-bottom-color: var(--violet);
}

.site-header__tools {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	flex: none;
}

.site-drawer {
	display: none;
	border-top: 1px solid var(--rule);
	background: var(--paper-raised);
}

.site-drawer[data-open="true"] {
	display: block;
}

.site-drawer ul {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding-block: var(--s-2) var(--s-4);
}

.site-drawer a {
	font-family: var(--font-mono);
	font-size: var(--t-lead);
	color: var(--ink-muted);
	text-decoration: none;
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--rule);
	display: block;
}

.site-drawer .current-menu-item > a,
.site-drawer .current_page_item > a,
.site-drawer .current-shl-item > a {
	color: var(--ink);
}

@media (min-width: 760px) {
	.site-header__bar {
		min-height: 68px;
	}

	.site-header__mark img {
		height: 36px;
	}

	.site-header__labs {
		font-size: 0.8125rem;
		letter-spacing: 0.32em;
		margin-right: -0.32em;
	}

	.site-header__nav {
		display: flex;
	}

	.site-header__menu {
		display: none;
	}

	.site-drawer,
	.site-drawer[data-open="true"] {
		display: none;
	}
}

/* ── Hero ────────────────────────────────────────────────── */

.hero {
	position: relative;
	padding-block: var(--s-8) var(--s-7);
	overflow: hidden;
}

/* The one atmospheric moment on the site. */
.hero::before {
	content: "";
	position: absolute;
	top: -180px;
	left: 50%;
	width: min(900px, 130%);
	height: 460px;
	transform: translateX(-50%);
	background:
		radial-gradient(50% 50% at 30% 50%, rgba(112, 48, 255, calc(var(--bloom) * 1.4)) 0%, transparent 70%),
		radial-gradient(50% 50% at 70% 45%, rgba(255, 0, 80, var(--bloom)) 0%, transparent 70%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 0;
}

.hero > .wrap {
	position: relative;
	z-index: 1;
}

.hero__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
}

.hero__eyebrow span:not(:last-child)::after {
	content: " /";
	color: var(--rule-strong);
}

.hero__title {
	font-size: var(--t-display);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.98;
	max-width: 15ch;
	margin-bottom: var(--s-5);
}

.hero__lede {
	font-size: var(--t-lead);
	color: var(--ink-muted);
	max-width: 52ch;
	line-height: 1.65;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-4);
	margin-top: var(--s-6);
}

/* ── The bench ───────────────────────────────────────────── */

.bench {
	border-top: 1px solid var(--rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bench > li {
	border-bottom: 1px solid var(--rule);
}

.bench__row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"name arrow"
		"kind status";
	align-items: center;
	gap: var(--s-2) var(--s-4);
	padding: var(--s-5) var(--s-2);
	text-decoration: none;
	transition: background var(--dur) var(--ease);
}

.bench__row:hover {
	background: var(--paper-raised);
}

.bench__name {
	grid-area: name;
	font-size: var(--t-h3);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.bench__kind {
	grid-area: kind;
	color: var(--ink-faint);
}

.bench__row .chip {
	grid-area: status;
	justify-self: start;
}

.bench__arrow {
	grid-area: arrow;
	color: var(--ink-faint);
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--dur) var(--ease);
}

.bench__row:hover .bench__arrow {
	transform: translate(2px, -2px);
	color: var(--ink);
}

.bench__note {
	margin-top: var(--s-5);
	max-width: 54ch;
	color: var(--ink-muted);
	font-size: var(--t-sm);
}

@media (min-width: 760px) {
	.bench__row {
		grid-template-columns: minmax(0, 1fr) 12rem 10rem auto;
		grid-template-areas: "name kind status arrow";
		gap: var(--s-5);
		padding-block: var(--s-5);
	}
}

/* ── Entry lists ─────────────────────────────────────────── */

.entries {
	border-top: 1px solid var(--rule);
	list-style: none;
	margin: 0;
	padding: 0;
}

.entries > li {
	border-bottom: 1px solid var(--rule);
}

.entry {
	display: block;
	padding: var(--s-5) var(--s-2);
	text-decoration: none;
	transition: background var(--dur) var(--ease);
}

.entry:hover {
	background: var(--paper-raised);
}

.entry__meta {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-3);
}

.entry__date {
	font-family: var(--font-mono);
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	color: var(--ink-faint);
}

.entry__title {
	font-size: var(--t-h3);
	font-weight: 500;
	margin-bottom: var(--s-2);
	max-width: 34ch;
}

.entry:hover .entry__title {
	text-decoration: underline;
	text-decoration-color: var(--violet);
	text-underline-offset: 4px;
}

.entry__summary {
	color: var(--ink-muted);
	font-size: var(--t-sm);
	max-width: 62ch;
}

@media (min-width: 760px) {
	.entry {
		display: grid;
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: var(--s-6);
		align-items: baseline;
	}

	.entry__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--s-2);
		margin-bottom: 0;
	}
}

/* ── Page heads ──────────────────────────────────────────── */

.page-head {
	padding-block: var(--s-8) var(--s-6);
}

.page-head__title {
	font-size: var(--t-h1);
	max-width: 18ch;
	margin-bottom: var(--s-4);
}

.page-head__lede {
	color: var(--ink-muted);
	font-size: var(--t-lead);
	max-width: 56ch;
}

/* ── Tool detail ─────────────────────────────────────────── */

.spec {
	display: grid;
	gap: 0;
	border-top: 1px solid var(--rule);
	margin: var(--s-6) 0 0;
}

.spec__row {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: var(--s-4);
	padding-block: var(--s-4);
	border-bottom: 1px solid var(--rule);
	align-items: baseline;
}

.spec__row dt {
	margin: 0;
}

.spec__row dd {
	margin: 0;
}

.spec__value {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	color: var(--ink);
}

.remaining {
	display: grid;
	gap: var(--s-3);
	counter-reset: item;
	list-style: none;
	padding: 0;
	margin: 0;
}

.remaining li {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	align-items: baseline;
	color: var(--ink-muted);
	counter-increment: item;
}

.remaining li::before {
	content: counter(item, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--t-label);
	letter-spacing: 0.08em;
	color: var(--ink-faint);
}

.notice {
	border: 1px solid var(--rule);
	border-left: 2px solid var(--violet);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	background: var(--paper-raised);
	padding: var(--s-5);
	margin-top: var(--s-6);
}

.notice p {
	color: var(--ink-muted);
	font-size: var(--t-sm);
	max-width: 60ch;
}

.notice p + p {
	margin-top: var(--s-3);
}

/* ── Article ─────────────────────────────────────────────── */

.article-head {
	padding-block: var(--s-8) var(--s-6);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--s-7);
}

.article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-5);
}

.article-head h1 {
	max-width: 22ch;
	margin-bottom: var(--s-5);
}

.article-head__summary {
	font-size: var(--t-lead);
	color: var(--ink-muted);
	max-width: 58ch;
}

.article-foot {
	margin-top: var(--s-8);
	padding-top: var(--s-5);
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	justify-content: space-between;
}

.article-thumb {
	border-radius: var(--r-md);
	margin-bottom: var(--s-6);
}

/* ── Recommendation band ─────────────────────────────────── */

.recommend {
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	background: var(--paper-raised);
	padding: var(--s-6);
	display: grid;
	gap: var(--s-5);
}

.recommend h2 {
	font-size: var(--t-h3);
	margin-bottom: var(--s-3);
}

.recommend p {
	color: var(--ink-muted);
	font-size: var(--t-sm);
	max-width: 58ch;
}

.recommend__disclosure {
	font-family: var(--font-mono);
	font-size: var(--t-label);
	letter-spacing: 0.04em;
	color: var(--ink-faint);
	margin-top: var(--s-4);
}

@media (min-width: 760px) {
	.recommend {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		padding: var(--s-7);
	}
}

/* ── Pagination ──────────────────────────────────────────── */

.pagination {
	margin-top: var(--s-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3);
}

.pagination .page-numbers {
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	color: var(--ink-muted);
	text-decoration: none;
	padding: var(--s-2) var(--s-3);
	border: 1px solid var(--rule);
	border-radius: var(--r-sm);
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	color: var(--ink);
	border-color: var(--rule-strong);
}

/* ── Search form ─────────────────────────────────────────── */

.search-form {
	display: flex;
	gap: var(--s-3);
	max-width: 32rem;
}

.search-form input[type="search"] {
	flex: 1;
	background: var(--paper-raised);
	border: 1px solid var(--rule);
	border-radius: var(--r-md);
	padding: var(--s-3) var(--s-4);
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	color: var(--ink);
}

.search-form input[type="search"]:focus {
	border-color: var(--violet);
}

/* ── Footer ──────────────────────────────────────────────── */

.site-footer {
	margin-top: var(--s-9);
	border-top: 1px solid var(--rule);
	background: var(--paper-sunk);
}

.site-footer__top {
	display: grid;
	gap: var(--s-7);
	padding-block: var(--s-7);
}

.site-footer__brand {
	display: block;
}

/* Backlash Script Alt is the face the logo was drawn in, so the footer closes
   the page the way a letter closes: signed. Set in ink rather than the
   gradient, which stays exclusive to the header lockup. */
/* Backlash sets narrow, roughly 46% of the sans at the same pixel size, so a
   size that reads correctly for Space Grotesk renders the signature as a
   caption. These numbers are about double the body scale for that reason. */
.site-footer__signature {
	display: flex;
	align-items: baseline;
	gap: 0.18em;
	font-size: clamp(3.5rem, 2.8rem + 2.8vw, 4.75rem);
	line-height: 1;
	color: var(--ink);
	margin-bottom: var(--s-3);
}

/* Only "Side Hustle" is script. LABS is type, exactly as the header lockup and
   the stamp set it. Signing the whole string in the script put "Labs" in a face
   the brand never draws it in. */
.site-footer__script {
	font-family: "Backlash Script Alt", var(--font-sans);
}

.site-footer__labs {
	font-family: var(--font-sans);
	font-size: 0.2em;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	margin-right: -0.3em;
}

.site-footer__tagline {
	color: var(--ink-muted);
	font-size: var(--t-sm);
	max-width: 28ch;
}

.site-footer__cols {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.site-footer__list {
	list-style: none;
	padding: 0;
	margin-top: var(--s-4);
	display: grid;
	gap: var(--s-3);
}

.site-footer__list a {
	color: var(--ink-muted);
	text-decoration: none;
	font-size: var(--t-sm);
	transition: color var(--dur) var(--ease);
}

.site-footer__list a:hover {
	color: var(--ink);
}

.site-footer__base {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	justify-content: space-between;
	padding-block: var(--s-5);
	border-top: 1px solid var(--rule);
}

.site-footer__base p {
	font-size: var(--t-label);
	letter-spacing: 0.04em;
	color: var(--ink-faint);
	font-family: var(--font-mono);
	margin: 0;
}

.site-footer__disclosure {
	max-width: 46ch;
}

@media (min-width: 900px) {
	.site-footer__top {
		grid-template-columns: 20rem minmax(0, 1fr);
		gap: var(--s-8);
		padding-block: var(--s-8);
	}

	.site-footer__tagline {
		max-width: 24ch;
	}
}

/* ── Empty states and 404 ────────────────────────────────── */

.notfound {
	padding-block: var(--s-9);
	display: grid;
	gap: var(--s-5);
	justify-items: start;
}

.notfound__code {
	font-family: var(--font-mono);
	font-size: var(--t-display);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0;
}

.empty {
	border: 1px dashed var(--rule-strong);
	border-radius: var(--r-md);
	padding: var(--s-7);
	text-align: left;
}

.empty p {
	color: var(--ink-muted);
	max-width: 52ch;
}

/* ── WooCommerce, minimal so an active store does not look broken ── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border: 1px solid var(--rule);
	border-left: 2px solid var(--violet);
	background: var(--paper-raised);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	padding: var(--s-4) var(--s-5);
	list-style: none;
	font-size: var(--t-sm);
}

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--s-5);
	list-style: none;
	padding: 0;
}

.woocommerce ul.products li.product a {
	text-decoration: none;
}

.woocommerce .price {
	font-family: var(--font-mono);
	color: var(--ink);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--grad);
	color: #fff;
	border-radius: var(--r-full);
	padding: var(--s-3) var(--s-5);
	font-family: var(--font-mono);
	font-size: var(--t-sm);
	border: 0;
}