/* ---------------------------------------------------------------------------
 * Baseline for the Codeminer theme: reset, document typography, form
 * controls, tables, WordPress alignment/caption helpers, print.
 * Tokens (colours, fonts, scale) live in tokens.css and load before this.
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
	border-color: var(--color-ink-200);
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 24px;
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--font-weight-book);
	font-size: var(--text-base);
	line-height: 1.6;
	font-variation-settings: "SHRP" 0, "CRSV" 0;
	color: var(--color-ink-950);
	background: var(--color-ink-50);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* Geologica's sharpness axis cuts every terminal like a gem facet.
 * Headlines and buttons get the full cut; running text gets none. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	font-weight: var(--font-weight-heading);
	font-variation-settings: "SHRP" 100, "CRSV" 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: inherit;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: var(--text-4xl); line-height: 1.04; letter-spacing: -0.028em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.028em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
	color: var(--color-ruby-600);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.22em;
	text-decoration-color: color-mix(in oklch, currentColor 40%, transparent);
	transition: text-decoration-color 0.15s, color 0.15s;
}
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--color-lamp-500); color: var(--color-ink-950); }

:focus-visible {
	outline: 3px solid var(--color-ruby-600);
	outline-offset: 3px;
}
/* Lamp ring on the mine ground, where ruby would vanish. */
.on-mine :focus-visible { outline-color: var(--color-lamp-500); }

hr { box-sizing: content-box; height: 0; border: 0; border-top: 1px solid var(--color-ink-200); margin: 2rem 0; }

pre, code, kbd, samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}
pre { white-space: pre; overflow-x: auto; }

b, strong { font-weight: 600; }
small { font-size: var(--text-sm); }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }

img, svg, video { max-width: 100%; height: auto; border-style: none; vertical-align: middle; }
img { image-rendering: auto; }

details { display: block; }
summary { display: list-item; cursor: pointer; }
[hidden], template { display: none; }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin: 0; }

figure { margin: 0; }
blockquote { margin: 0; }

/* Skip link and screen-reader helpers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.skip-link:focus,
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	position: fixed;
	left: 16px;
	top: 16px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	background: var(--color-lamp-500);
	color: var(--color-ink-950);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	border-radius: 0 var(--cut-sm) 0 var(--cut-sm);
	corner-shape: bevel;
}

/* Form controls. */
label { display: inline-block; }
button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
	color: inherit;
}
input[type="date"], input[type="email"], input[type="number"], input[type="password"],
input[type="search"], input[type="tel"], input[type="text"], input[type="url"],
select, textarea {
	width: 100%;
	padding: 0.6rem 1rem;
	background: #fff;
	border: 1px solid var(--color-ink-300);
	border-radius: 0;
	color: var(--color-ink-950);
	appearance: none;
	-webkit-appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--color-ink-500); opacity: 1; }
[type="search"]::-webkit-search-decoration,
[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
[type="button"], [type="submit"], button { -webkit-appearance: button; cursor: pointer; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; resize: vertical; }

/* Buttons: the cut pill from the identity. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0.7rem 1.5rem;
	white-space: nowrap;
	font-family: var(--font-sans);
	font-weight: var(--font-weight-button);
	font-variation-settings: "SHRP" 100, "CRSV" 0;
	font-size: var(--text-base);
	line-height: 1;
	letter-spacing: -0.01em;
	text-decoration: none;
	border: 0;
	border-radius: 0 12px 0 12px;
	corner-shape: bevel;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, translate 0.15s;
}
.btn:hover { text-decoration: none; }
.btn:active { translate: 0 1px; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1.1rem; font-size: var(--text-sm); }
.btn--ruby { background: var(--color-ruby-500); color: #fff; }
.btn--ruby:hover { background: var(--color-ruby-600); color: #fff; }
.btn--lamp { background: var(--color-lamp-500); color: var(--color-ink-950); }
.btn--lamp:hover { background: var(--color-lamp-300); color: var(--color-ink-950); }
.btn--ink { background: var(--color-ink-950); color: var(--color-ink-50); }
.btn--ink:hover { background: var(--color-ink-800); color: var(--color-ink-50); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: color-mix(in oklch, currentColor 12%, transparent); color: inherit; }

/* The cut: two opposite corners bevelled at the angle of the logo's peaks.
 * Panels and images use a clip-path polygon (works everywhere, and unlike
 * overflow:hidden + corner-shape it never stops Chromium painting a large
 * image). Buttons and chips, which are small, use border-radius + corner-shape. */
.cut {
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.cut--sm { --cut: var(--cut-sm); }
.cut--lg { --cut: var(--cut-lg); }

/* Grounds. Each sets its own text colour. */
.ground-mine {
	color: var(--color-ink-50);
	background-color: var(--color-ink-950);
	background-image:
		radial-gradient(120% 90% at 50% 0%, transparent 45%, color-mix(in oklch, var(--color-ink-950) 80%, black) 100%),
		url("../cave.svg");
	background-size: auto, 960px 960px;
}
.ground-mine a { color: inherit; }
.ground-mine a:hover { color: var(--color-lamp-500); }
.ground-lamp { color: var(--color-ink-950); background: var(--color-lamp-500); }
.ground-garnet { color: #fff; background: var(--color-ruby-700); }
.ground-slate { background: var(--color-ink-100); }

/* Ridge: the section boundary is the logo's twin-peak silhouette, drawn in
 * the colour of the ground that follows and aligned with the content column. */
.ridge {
	display: block;
	width: 100%;
	max-width: var(--container);
	margin: -1px auto 0;
	padding: 0 var(--gutter);
	pointer-events: none;
	color: var(--color-ink-50);
}
.ridge svg { display: block; width: 100%; height: clamp(28px, 4vw, 56px); }

/* Gem channels: colour here is information (which topic), never decoration. */
.gem-ruby     { --gem-light: var(--color-ruby-200);       --gem-mid: var(--color-ruby-500);     --gem-deep: var(--color-ruby-700); }
.gem-lamp     { --gem-light: var(--color-lamp-300);       --gem-mid: var(--color-lamp-500);     --gem-deep: var(--color-lamp-700); }
.gem-emerald  { --gem-light: var(--color-emerald-light);  --gem-mid: var(--color-emerald-mid);  --gem-deep: var(--color-emerald-deep); }
.gem-sapphire { --gem-light: var(--color-sapphire-light); --gem-mid: var(--color-sapphire-mid); --gem-deep: var(--color-sapphire-deep); }
.gem-amethyst { --gem-light: var(--color-amethyst-light); --gem-mid: var(--color-amethyst-mid); --gem-deep: var(--color-amethyst-deep); }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.65rem;
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	font-variation-settings: "SHRP" 100, "CRSV" 0;
	line-height: 1.5;
	color: var(--color-ink-950);
	background: var(--gem-light, var(--color-ink-200));
	border-radius: 0 7px 0 7px;
	corner-shape: bevel;
	text-decoration: none;
	white-space: nowrap;
}
.chip::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	rotate: 45deg;
	background: var(--gem-deep, var(--color-ink-700));
	flex: 0 0 auto;
}
.chip:hover,
.ground-mine .chip,
.ground-mine .chip:hover { color: var(--color-ink-950); }
.chip:hover { text-decoration: underline; }
.chip--lg { padding: 0.35rem 0.85rem; font-size: var(--text-sm); }

/* Gem mark: the rotated square used as a bullet. */
.gem-mark {
	display: inline-block;
	width: 0.7rem;
	height: 0.7rem;
	rotate: 45deg;
	background: var(--gem-mid, var(--color-ink-500));
	flex: 0 0 auto;
}

/* Post cover fallback: a cut-gem facet pattern in the post's topic colour,
 * used wherever a post has no featured image. */
.cover {
	display: block;
	aspect-ratio: 16 / 10;
	background:
		conic-gradient(from 20deg at 62% 58%, var(--gem-light) 0 52deg, var(--gem-mid) 0 118deg, var(--gem-deep) 0 190deg,
			var(--gem-mid) 0 248deg, var(--gem-light) 0 300deg, var(--gem-deep) 0 360deg);
}
.cover--b {
	background:
		conic-gradient(from 200deg at 30% 40%, var(--gem-deep) 0 70deg, var(--gem-mid) 0 150deg, var(--gem-light) 0 205deg,
			var(--gem-mid) 0 290deg, var(--gem-deep) 0 360deg);
}

/* Tables (markdown-rendered post content and anywhere else). */
table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 1.5em;
	font-size: 0.95em;
}
th, td {
	padding: 0.6em 0.9em;
	border-bottom: 1px solid var(--color-ink-200);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}
th { font-family: var(--font-sans); font-weight: var(--font-weight-medium); border-bottom-color: var(--color-ink-950); }

/* Block-editor alignment and caption helpers. */
.alignleft   { float: left;  margin: 0.3em 1.5em 1em 0; }
.alignright  { float: right; margin: 0.3em 0 1em 1.5em; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.alignwide   { max-width: 100%; }
.alignfull   { max-width: 100%; }
.wp-caption { max-width: 100%; margin: 0 0 1.5em; }
.wp-caption img { display: block; }
.wp-caption-text,
figcaption,
.gallery-caption {
	margin: 0.6em 0 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-ink-600);
}
.wp-block-embed iframe { max-width: 100%; }
.wp-block-embed__wrapper { position: relative; }
.wp-has-aspect-ratio .wp-block-embed__wrapper::before { content: ""; display: block; padding-top: 56.25%; }
.wp-has-aspect-ratio .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticky { display: block; position: relative; }
.bypostauthor { font-size: inherit; }

/* Content column widths. */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.site-main {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
	*, *::before, *::after { background: transparent !important; box-shadow: none !important; color: #000 !important; text-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; }
	pre { white-space: pre-wrap !important; }
	blockquote, pre { border: 1px solid #ccc; break-inside: avoid; }
	thead { display: table-header-group; }
	img, tr { break-inside: avoid; }
	h2, h3, p { orphans: 3; widows: 3; }
	h2, h3 { break-after: avoid; }
	.cm-header, .cm-footer, .cm-sidebar, .cm-share, .cm-cta, .cm-post-nav, .cm-related, .cm-toc-mobile { display: none !important; }
}