/* Hallmark · macrostructure: Index-First · genre: editorial (dark register)
 * theme: custom · vibe: "absurd catalogue, broadsheet discipline"
 * paper oklch(19% 0.004 127) · accent oklch(85% 0.208 127) lime-chromatic
 * display Instrument Serif + body Newsreader + mono JetBrains Mono
 * axes: paper-band=dark · display-style=classical-serif · accent-hue=chromatic-other
 * nav: N9 edge-aligned · footer: Ft1 mast-headed · enrichment: none (typography only)
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */
/*
Theme Name: Concept Goblin
Theme URI: https://conceptgoblin.com
Description: Dark editorial child theme for GeneratePress. Index-First macrostructure.
Author: Concept Goblin
Template: generatepress
Version: 1.0.0
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--color-paper:        oklch(19% 0.004 127);
	--color-paper-2:      oklch(23% 0.006 127);
	--color-paper-3:      oklch(27% 0.008 127);

	--color-ink:          oklch(94% 0.006 110);
	--color-ink-2:        oklch(78% 0.008 110);
	--color-ink-3:        oklch(62% 0.010 110);

	--color-accent:       oklch(85% 0.208 127);
	--color-accent-dim:   oklch(70% 0.150 127);
	--color-accent-ink:   oklch(19% 0.004 127);

	--color-rule:         oklch(32% 0.008 127);
	--color-rule-strong:  oklch(45% 0.012 127);
	--color-focus:        oklch(85% 0.208 127);

	--font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
	--font-body:    "Newsreader", Georgia, serif;
	--font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--text-xs: 0.75rem;   --text-sm: 0.8125rem;  --text-base: 1.0625rem;
	--text-lg: 1.1875rem; --text-xl: 1.375rem;   --text-2xl: 1.75rem;
	--text-3xl: 2.25rem;  --text-4xl: 3rem;
	--text-display-s: clamp(2.5rem, 6vw, 4rem);
	--text-display:   clamp(3rem, 9vw, 6rem);

	--leading-tight: 1.04; --leading-snug: 1.25; --leading-body: 1.65;
	--measure: 68ch;

	--space-2xs: 0.25rem; --space-xs: 0.5rem;  --space-sm: 0.75rem;
	--space-md: 1rem;     --space-lg: 1.5rem;  --space-xl: 2rem;
	--space-2xl: 3rem;    --space-3xl: 4.5rem; --space-4xl: 7rem;

	--rule-hair: 1px; --rule-thick: 2px;
	--radius-sm: 2px; --radius-md: 4px;

	--dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 420ms;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in:  cubic-bezier(0.4, 0, 1, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
html, body { overflow-x: clip; }

body {
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* GeneratePress paints its own backgrounds on these wrappers. */
.site, #page, .site-content, #content, .site-main, #primary,
.inside-article, .separate-containers .inside-article,
.separate-containers .paging-navigation,
.separate-containers .comments-area,
.separate-containers .page-header {
	background-color: transparent;
	color: inherit;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .page-title {
	font-family: var(--font-display);
	font-style: normal;      /* roman only — italic headers are an AI tell */
	font-weight: 400;
	line-height: var(--leading-tight);
	letter-spacing: -0.015em;
	color: var(--color-ink);
	overflow-wrap: anywhere;
	min-width: 0;
}

p, li { max-width: var(--measure); }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--color-accent); }

:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
	/* never animated — the ring must appear instantly */
}

::selection { background: var(--color-accent); color: var(--color-accent-ink); }

hr, .separate-containers .site-main > *:not(:last-child) { border-color: var(--color-rule); }

/* ==========================================================================
   Nav — N9 edge-aligned
   ========================================================================== */
.site-header {
	background: var(--color-paper);
	border-bottom: var(--rule-hair) solid var(--color-rule);
}
.site-header .inside-header {
	padding-block: var(--space-lg);
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	flex-wrap: wrap;
}

.site-logo img, .custom-logo {
	width: 40px; height: 40px;
	display: block;
	border-radius: var(--radius-md);
}

.site-branding { display: flex; align-items: center; gap: var(--space-sm); }

.main-title, .site-title {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}
.main-title a, .site-title a { color: var(--color-ink); text-decoration: none; }
.main-title a:hover { color: var(--color-accent); }
.site-description { display: none; }

.main-navigation,
.main-navigation .inside-navigation,
.main-navigation ul ul {
	background: transparent;
}
.main-navigation { margin-left: auto; }

.main-navigation .main-nav ul li a {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-2);
	padding-inline: var(--space-sm);
	padding-block: var(--space-xs);
	position: relative;
	text-decoration: none;
	/* single-line clickable text — never wraps to two lines */
	white-space: nowrap;
}
.main-navigation .main-nav ul li a::after {
	content: "";
	position: absolute;
	left: var(--space-sm); right: var(--space-sm); bottom: 2px;
	height: var(--rule-thick);
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-base) var(--ease-out);
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--color-ink);
	background: transparent;
}
.main-navigation .main-nav ul li a:hover::after,
.main-navigation .main-nav ul li.current-menu-item > a::after { transform: scaleX(1); }

.menu-toggle, .main-navigation .menu-toggle {
	background: transparent;
	color: var(--color-ink);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ==========================================================================
   Index-First — the archive IS the design
   ========================================================================== */
.blog .site-main, .archive .site-main, .home .site-main { padding-block-start: var(--space-2xl); }

.blog article, .archive article, .home article,
.blog .inside-article, .archive .inside-article {
	padding: 0;
	border: 0;
	box-shadow: none;
}

.blog .site-main > article,
.archive .site-main > article,
.home .site-main > article {
	border-block-end: var(--rule-hair) solid var(--color-rule);
	padding-block: var(--space-xl);
	transition: border-color var(--dur-base) var(--ease-out);
}
.blog .site-main > article:hover,
.archive .site-main > article:hover,
.home .site-main > article:hover { border-block-end-color: var(--color-accent); }

.blog .entry-title, .archive .entry-title, .home .entry-title {
	font-size: var(--text-3xl);
	margin: 0 0 var(--space-xs);
	max-width: 24ch;
}
.blog .entry-title a, .archive .entry-title a, .home .entry-title a {
	color: var(--color-ink);
	text-decoration: none;
	display: inline-block;
	transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.blog .entry-title a:hover, .archive .entry-title a:hover, .home .entry-title a:hover {
	color: var(--color-accent);
	transform: translateX(6px);
}

.entry-meta, .posted-on, .byline, .cat-links {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-ink-3);
}
.entry-meta a { color: var(--color-ink-3); text-decoration: none; }
.entry-meta a:hover { color: var(--color-accent); }

.entry-summary p, .blog .entry-content p {
	color: var(--color-ink-2);
	max-width: 60ch;
}

.read-more, .more-link {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	border-block-end: var(--rule-thick) solid var(--color-accent);
	padding-block-end: 2px;
}

/* ==========================================================================
   Single post / page
   ========================================================================== */
.single .entry-title, .page .entry-title, .page-header h1 {
	font-size: var(--text-display-s);
	max-width: 18ch;
	margin-block-end: var(--space-md);
}

.single .entry-header, .page .entry-header {
	padding-block: var(--space-3xl) var(--space-lg);
	border-block-end: var(--rule-hair) solid var(--color-rule);
	margin-block-end: var(--space-2xl);
}

.entry-content { font-size: var(--text-lg); }
.entry-content > * { max-width: var(--measure); }

.entry-content h2 {
	font-size: var(--text-3xl);
	margin-block: var(--space-2xl) var(--space-md);
	padding-block-start: var(--space-md);
	border-block-start: var(--rule-hair) solid var(--color-rule);
}
.entry-content h3 { font-size: var(--text-2xl); margin-block: var(--space-xl) var(--space-sm); }

.entry-content strong { color: var(--color-ink); font-weight: 600; }
.entry-content em { font-style: italic; }   /* body emphasis only */

.entry-content a {
	color: var(--color-ink);
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: 2px;
	transition: color var(--dur-fast) var(--ease-out);
}
.entry-content a:hover { color: var(--color-accent); }

.entry-content blockquote {
	border: 0;
	border-inline-start: var(--rule-thick) solid var(--color-accent);
	padding-inline-start: var(--space-lg);
	margin-inline: 0;
	font-size: var(--text-xl);
	color: var(--color-ink);
}

.entry-content ul, .entry-content ol { padding-inline-start: var(--space-lg); }
.entry-content li::marker { color: var(--color-accent); }

.entry-content img, .wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.entry-content code, .entry-content kbd {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-paper-2);
	padding: 0.1em 0.35em;
	border-radius: var(--radius-sm);
}

/* Spec tables — the "At a glance" block that carries the joke */
.entry-content table, .wp-block-table table {
	width: 100%;
	max-width: var(--measure);
	border-collapse: collapse;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	margin-block: var(--space-xl);
}
.entry-content th, .entry-content td, .wp-block-table td, .wp-block-table th {
	border: 0;
	border-block-end: var(--rule-hair) solid var(--color-rule);
	padding: var(--space-sm) var(--space-md);
	text-align: left;
	vertical-align: top;
}
.entry-content th, .wp-block-table th {
	color: var(--color-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--text-xs);
	font-weight: 500;
	border-block-end-color: var(--color-rule-strong);
}
.entry-content tbody tr:hover { background: var(--color-paper-2); }

/* Wide content scrolls inside itself — the page body never scrolls sideways */
.wp-block-table { overflow-x: auto; }

/* ==========================================================================
   Empty state — "Nothing Found" should read as intentional
   ========================================================================== */
.no-results .entry-header, .no-results .page-header { border: 0; }
.no-results .entry-title, .no-results .page-title {
	font-size: var(--text-display-s);
	color: var(--color-ink);
}
.no-results .entry-content::before {
	content: "Fitting, really.";
	display: block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-block-end: var(--space-md);
}

/* ==========================================================================
   Pagination + comments
   ========================================================================== */
.paging-navigation .nav-links a, .comment-reply-link, .page-numbers {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-2);
	text-decoration: none;
	border: var(--rule-hair) solid var(--color-rule);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--radius-sm);
	display: inline-block;
	transition: border-color var(--dur-base) var(--ease-out),
	            color var(--dur-fast) var(--ease-out);
}
.paging-navigation .nav-links a:hover, .page-numbers:hover,
.page-numbers.current {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.comments-area { border-block-start: var(--rule-hair) solid var(--color-rule); margin-block-start: var(--space-3xl); padding-block-start: var(--space-xl); }
.comments-title, .comment-reply-title { font-size: var(--text-2xl); }
.comment-body { border-block-end: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-lg); }
.comment-author .fn { font-family: var(--font-mono); font-size: var(--text-sm); }

input[type="text"], input[type="email"], input[type="url"], textarea {
	background: var(--color-paper-2);
	border: var(--rule-hair) solid var(--color-rule);
	color: var(--color-ink);
	border-radius: var(--radius-sm);
	padding: var(--space-sm) var(--space-md);
	font-family: var(--font-body);
	max-width: 100%;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
	border-color: var(--color-accent);
}

button, .button, input[type="submit"], .wp-block-button__link {
	background: var(--color-accent);
	color: var(--color-accent-ink);
	border: 0;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: var(--space-sm) var(--space-lg);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out),
	            transform var(--dur-fast) var(--ease-out);
	white-space: nowrap;
}
button:hover, .button:hover, input[type="submit"]:hover, .wp-block-button__link:hover {
	background: var(--color-accent-dim);
	color: var(--color-accent-ink);
}
button:active, input[type="submit"]:active { transform: translateY(1px); }
button:disabled, input[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* ==========================================================================
   Footer — Ft1 mast-headed
   ========================================================================== */
.site-footer, .site-info {
	background: var(--color-paper);
	border-block-start: var(--rule-hair) solid var(--color-rule);
	color: var(--color-ink-3);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
}
/* GeneratePress centres the credit row; the colophon is a full-width band. */
.site-footer .inside-site-info,
.site-info .inside-site-info {
	padding-block: var(--space-xl);
	text-align: left;
	display: block;
}
.site-info .copyright-bar { width: 100%; }
.site-info a { color: var(--color-ink-2); text-decoration: none; }
.site-info a:hover { color: var(--color-accent); }

.cg-colophon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md) var(--space-xl);
	align-items: baseline;
	justify-content: space-between;
}
.cg-colophon__mast {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-ink);
}
.cg-colophon__note { color: var(--color-ink-3); max-width: 46ch; letter-spacing: 0.06em; }
.cg-colophon__note strong { color: var(--color-accent); font-weight: 400; }

/* ==========================================================================
   Motion — one orchestrated entrance, collapses under reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.single .entry-header, .page .entry-header {
		animation: cg-rise var(--dur-slow) var(--ease-out) both;
	}
}
@keyframes cg-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Responsive — verified 320 / 375 / 414 / 768
   ========================================================================== */
@media (max-width: 768px) {
	.site-header .inside-header { padding-block: var(--space-md); }
	.main-navigation { margin-left: 0; width: 100%; }
	.blog .entry-title, .archive .entry-title, .home .entry-title { font-size: var(--text-2xl); }
	.single .entry-header, .page .entry-header { padding-block: var(--space-xl) var(--space-md); }
	.entry-content { font-size: var(--text-base); }
	.cg-colophon { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 420px) {
	.blog .entry-title a:hover, .archive .entry-title a:hover { transform: none; }
}