/* =========================================================================
   Christopher Neuman — theme.css
   Terminal / command-line aesthetic on top of GeneratePress.
   Dark-first (phosphor green on near-black), with a light "paper terminal"
   variant. Monospace headings + UI, readable sans body, tasteful motion.
   Sections:
     1.  Design tokens (CSS variables) + light/dark
     2.  Base + typography
     3.  Layout helpers
     4.  Header + nav + theme toggle
     5.  Buttons (command style)
     6.  Cards / output blocks + bento grid
     7.  Hero (terminal window) + typing + cursor
     8.  Credibility strip
     9.  Timeline / principles
     10. Latest writing / blog cards
     11. Blog archive
     12. Single post
     13. Footer
     14. Animations (reveal, blink, scanlines) + accessibility
     15. Responsive
     16. Core block integration + utilities
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS  — dark is the default terminal; light is "paper terminal"
   ------------------------------------------------------------------------- */
:root,
[data-theme="dark"] {
	--bg:            #0A0E14;
	--surface:       #0F141C;
	--surface-soft:  #141B25;
	--text:          #C9D4E0;
	--text-bright:   #EAF1F8;
	--muted:         #6E7E91;
	--border:        #1B2531;
	--border-strong: #2A3845;
	--accent:        #3FB950;   /* phosphor green */
	--accent-bright: #56D364;
	--accent-strong: #2EA043;
	--accent-dim:    rgba(63, 185, 80, 0.12);
	--warn:          #E3B341;

	--shadow-card:   0 1px 0 rgba(255,255,255,0.02) inset, 0 18px 50px rgba(0,0,0,0.45);
	--shadow-soft:   0 10px 36px rgba(0,0,0,0.5);
	--glow:          0 0 0 1px var(--accent-strong), 0 0 22px var(--accent-dim);
	--radius:        10px;
	--radius-sm:     8px;
	--radius-lg:     12px;
	--radius-btn:    8px;
	--ring:          var(--accent);

	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--space-section: clamp(2.25rem, 4.5vw, 3.75rem);
	--content-narrow: 720px;
	--content-wide:   1120px;
}

[data-theme="light"] {
	--bg:            #F4F2EA;   /* warm paper */
	--surface:       #FBFAF4;
	--surface-soft:  #EEEBDF;
	--text:          #2A2E25;
	--text-bright:   #14170F;
	--muted:         #6A6B5E;
	--border:        #E0DCCB;
	--border-strong: #CFCAB4;
	--accent:        #1A7F37;
	--accent-bright: #1A7F37;
	--accent-strong: #136B2C;
	--accent-dim:    rgba(26, 127, 55, 0.12);
	--warn:          #9A6700;

	--shadow-card:   0 1px 2px rgba(20,23,15,0.04), 0 14px 40px rgba(20,23,15,0.06);
	--shadow-soft:   0 10px 30px rgba(20,23,15,0.09);
	--glow:          0 0 0 1px var(--accent-strong), 0 0 0 4px var(--accent-dim);
}

/* Before JS sets data-theme: honor OS preference (default dark terminal). */
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--bg:#F4F2EA;--surface:#FBFAF4;--surface-soft:#EEEBDF;--text:#2A2E25;--text-bright:#14170F;
		--muted:#6A6B5E;--border:#E0DCCB;--border-strong:#CFCAB4;--accent:#1A7F37;--accent-bright:#1A7F37;
		--accent-strong:#136B2C;--accent-dim:rgba(26,127,55,0.12);--warn:#9A6700;
		--shadow-card:0 1px 2px rgba(20,23,15,0.04),0 14px 40px rgba(20,23,15,0.06);
		--shadow-soft:0 10px 30px rgba(20,23,15,0.09);
	}
}

/* -------------------------------------------------------------------------
   2. BASE + TYPOGRAPHY
   ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-bright);
	font-family: var(--font-mono);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.18;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 4.8vw, 3.3rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); }

p { color: var(--text); text-wrap: pretty; }

a {
	color: var(--accent-bright);
	text-decoration: none;
	transition: color .2s ease;
}
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

.cn-muted { color: var(--muted); }

/* Command-prompt eyebrow: monospace, green prompt symbol, subtle. */
.cn-eyebrow {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--accent);
	margin-bottom: 1rem;
}
.cn-eyebrow::before {
	content: "$ ";
	color: var(--muted);
	white-space: pre;
}

/* -------------------------------------------------------------------------
   3. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.cn-section { padding-block: var(--space-section); }
.cn-container { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
.cn-narrow { max-width: var(--content-narrow); margin-inline: auto; }
.cn-stack > * + * { margin-top: 1.25rem; }
.cn-section > .wp-block-heading { margin-bottom: 1.5rem; }

/* GeneratePress structural containers paint their own (white) background and
   card shadow over our dark canvas. Neutralize them so the theme bg shows
   through everywhere. !important guards against GP's Customizer color CSS. */
.inside-article,
.one-container .inside-article,
.separate-containers .inside-article {
	background-color: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
}
.site-content, #content, .content-area, .site-main,
.entry-content, .page-content { background-color: transparent; }

/* Each page already supplies its own H1 in content, so hide GeneratePress's
   duplicate page title (the stray "Home", "About", etc. above the content). */
.page .entry-header .entry-title { display: none; }

/* -------------------------------------------------------------------------
   4. HEADER + NAV + TOGGLE
   ------------------------------------------------------------------------- */
.site-header {
	background-color: color-mix(in srgb, var(--bg) 78%, transparent);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--border);
	transition: background-color .3s ease, border-color .3s ease;
}

.main-title,
.site-logo + .site-branding .main-title { font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em; }
.main-title a { color: var(--text-bright); }
/* A blinking prompt caret before the site name */
.main-title a::before { content: "~$ "; color: var(--accent); }

.main-navigation .main-nav ul li a {
	font-family: var(--font-mono);
	font-size: 0.92rem;
	color: var(--muted);
	font-weight: 500;
	transition: color .2s ease;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--accent); }
.main-navigation, .main-navigation ul { background-color: transparent; }

.cn-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; margin-left: 0.75rem;
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	background: var(--surface); color: var(--text); cursor: pointer;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.cn-theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.cn-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Explicit size so the inline SVG can't collapse to 0 width inside the
   flex button (some GP/global svg rules zero the presentational width attr). */
.cn-theme-toggle svg.cn-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.cn-icon { display: none; }
[data-theme="dark"] .cn-icon-sun  { display: block; }
[data-theme="light"] .cn-icon-moon { display: block; }
:root:not([data-theme]) .cn-icon-sun { display: block; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme]) .cn-icon-sun  { display: none; }
	:root:not([data-theme]) .cn-icon-moon { display: block; }
}

.main-navigation .menu-toggle { color: var(--text); font-family: var(--font-mono); }
@media (max-width: 768px) {
	.main-navigation .main-nav > ul { background: var(--surface); border-top: 1px solid var(--border); }
	.main-navigation .main-nav ul li a { padding-block: 0.9rem; }
	.cn-theme-toggle { margin: 0.5rem 0 0.5rem 1rem; }
}

/* -------------------------------------------------------------------------
   5. BUTTONS  — command style, monospace, bracketed
   ------------------------------------------------------------------------- */
/* Scoped to anchors only (a.* for plain links, the __link for WP buttons) so
   the styling never lands on the WordPress .wp-block-button WRAPPER div —
   that double-applied the border and stacked the brackets. */
a.button-primary,
a.cn-btn-primary,
.wp-block-button.button-primary > .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--font-mono); font-weight: 700; font-size: 0.92rem; line-height: 1;
	background: var(--accent); color: #06120A;
	border: 1px solid var(--accent); border-radius: var(--radius-btn);
	padding: 12px 20px;
	transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
a.button-primary:hover,
a.cn-btn-primary:hover,
.wp-block-button.button-primary > .wp-block-button__link:hover {
	color: #06120A; background: var(--accent-bright);
	transform: translateY(-2px); box-shadow: var(--shadow-soft); text-decoration: none;
}

a.button-secondary,
a.cn-btn-secondary,
.wp-block-button.button-secondary > .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--font-mono); font-weight: 500; font-size: 0.92rem; line-height: 1;
	background: transparent; color: var(--text-bright);
	border: 1px solid var(--border-strong); border-radius: var(--radius-btn);
	padding: 12px 20px;
	transition: border-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
a.button-secondary::before,
.wp-block-button.button-secondary > .wp-block-button__link::before { content: "["; color: var(--muted); transition: color .2s ease; }
a.button-secondary::after,
.wp-block-button.button-secondary > .wp-block-button__link::after { content: "]"; color: var(--muted); transition: color .2s ease; }
a.button-secondary:hover,
a.cn-btn-secondary:hover,
.wp-block-button.button-secondary > .wp-block-button__link:hover {
	color: var(--accent); border-color: var(--accent);
	transform: translateY(-2px); text-decoration: none; box-shadow: var(--glow);
}
a.button-secondary:hover::before,
a.button-secondary:hover::after,
.wp-block-button.button-secondary > .wp-block-button__link:hover::before,
.wp-block-button.button-secondary > .wp-block-button__link:hover::after { color: var(--accent); }

/* Keep the WP button wrapper itself a plain, style-free container. */
.wp-block-button.button-primary,
.wp-block-button.button-secondary { background: transparent; border: 0; padding: 0; }

.cn-hero .wp-block-buttons, .cn-cta-center .wp-block-buttons { gap: 0.75rem; }
.cn-cta-center .wp-block-buttons { justify-content: center; }

/* -------------------------------------------------------------------------
   6. CARDS / OUTPUT BLOCKS + BENTO
   ------------------------------------------------------------------------- */
.card, .cn-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover, .cn-card:hover {
	transform: translateY(-3px);
	border-color: var(--accent);
	box-shadow: var(--glow);
}
.cn-card h3 {
	margin: 0 0 0.55rem;
	font-size: 1.12rem;
	color: var(--text-bright);
}
.cn-card h3::before { content: "> "; color: var(--accent); }
.cn-card p { color: var(--muted); margin: 0; }

.cn-bento { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.cn-bento .cn-card--wide { grid-column: span 2; }
/* GeneratePress (classic theme) wraps group children in an inner-container;
   collapse that wrapper so the cards themselves become the grid items. */
.cn-bento > .wp-block-group__inner-container { display: contents; }
@media (max-width: 900px) { .cn-bento { grid-template-columns: repeat(2, 1fr); } .cn-bento .cn-card--wide { grid-column: span 2; } }
@media (max-width: 560px) { .cn-bento { grid-template-columns: 1fr; } .cn-bento .cn-card--wide { grid-column: auto; } }

/* -------------------------------------------------------------------------
   7. HERO  — a terminal window with a titlebar, prompt + typed command
   ------------------------------------------------------------------------- */
.cn-hero {
	position: relative;
	margin-top: clamp(1.5rem, 4vw, 2.5rem);
	padding: clamp(3rem, 7vw, 4.5rem) clamp(1.5rem, 4vw, 2.75rem);
	padding-top: clamp(4rem, 8vw, 5.5rem);
	background: var(--surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
/* titlebar */
.cn-hero::before {
	content: "";
	position: absolute; top: 0; left: 0; right: 0; height: 42px;
	background: var(--surface-soft);
	border-bottom: 1px solid var(--border);
}
/* traffic-light dots + filename label */
.cn-hero::after {
	content: "christopherneuman — bash — 80×24";
	position: absolute; top: 0; left: 0; right: 0; height: 42px;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted);
	background:
		radial-gradient(circle 5px at 18px 21px, #ED6A5E 100%, transparent 0),
		radial-gradient(circle 5px at 36px 21px, #F4BF50 100%, transparent 0),
		radial-gradient(circle 5px at 54px 21px, #61C454 100%, transparent 0);
	pointer-events: none;
}
.cn-hero > * { position: relative; z-index: 1; }

/* The animated command line above the headline */
.cn-termline {
	font-family: var(--font-mono);
	font-size: clamp(0.85rem, 1.6vw, 1rem);
	color: var(--text);
	margin-bottom: 1.4rem;
	white-space: nowrap;
	overflow: hidden;
}
.cn-termline .cn-prompt { color: var(--accent); }
.cn-termline .cn-path   { color: var(--muted); }
.cn-hero h1 { max-width: 24ch; color: var(--text-bright); }
.cn-hero .cn-sub {
	font-family: var(--font-sans);
	color: var(--muted);
	font-size: clamp(1.05rem, 1.7vw, 1.2rem);
	line-height: 1.65;
	max-width: 60ch;
	margin-top: 1.25rem;
}
.cn-hero .cn-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Blinking block cursor */
.cn-cursor {
	display: inline-block;
	width: 0.6em; height: 1.05em;
	margin-left: 2px;
	background: var(--accent);
	vertical-align: -0.18em;
	animation: cn-blink 1.05s steps(1) infinite;
}

/* -------------------------------------------------------------------------
   8. CREDIBILITY STRIP  — a status line
   ------------------------------------------------------------------------- */
.cn-credibility {
	font-family: var(--font-mono);
	color: var(--muted);
	font-size: 0.85rem;
	border-block: 1px solid var(--border);
	padding-block: 1rem;
}
.cn-credibility span { white-space: nowrap; color: var(--text); }

/* -------------------------------------------------------------------------
   9. TIMELINE / PRINCIPLES
   ------------------------------------------------------------------------- */
.cn-timeline { position: relative; }
.cn-timeline-item {
	position: relative;
	padding-left: 1.85rem;
	padding-bottom: 2rem;
	border-left: 1px solid var(--border-strong);
}
.cn-timeline-item:last-child { padding-bottom: 0; }
.cn-timeline-item::before {
	content: "▌";
	position: absolute; left: -6px; top: 0.1rem;
	color: var(--accent);
	font-size: 0.9rem;
	line-height: 1;
}
.cn-timeline-item .cn-year {
	font-family: var(--font-mono);
	font-size: 0.8rem; font-weight: 500;
	color: var(--accent);
}
.cn-timeline-item .cn-year::before { content: "# "; color: var(--muted); }
.cn-timeline-item h3 { margin: 0.3rem 0 0.45rem; font-size: 1.1rem; }
.cn-timeline-item p { color: var(--muted); margin: 0.3rem 0 0; }

/* -------------------------------------------------------------------------
   10. LATEST WRITING (post cards)
   ------------------------------------------------------------------------- */
.cn-posts-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cn-posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cn-posts-grid { grid-template-columns: 1fr; } }
.cn-post-card { display: flex; flex-direction: column; }
.cn-post-card .cn-cat,
.cn-post-card h3 a { font-family: var(--font-mono); }
.cn-post-card .cn-cat { color: var(--accent); text-transform: lowercase; letter-spacing: 0; font-size: 0.74rem; }
.cn-post-card h3 { font-size: 1.12rem; margin: 0.35rem 0 0.5rem; }
.cn-post-card h3 a { color: var(--text-bright); }
.cn-post-card h3 a:hover { color: var(--accent); }
.cn-post-card p { color: var(--muted); font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   11. BLOG ARCHIVE
   ------------------------------------------------------------------------- */
.blog .site-content, .archive .site-content { background: var(--bg); }
.cn-archive-intro { max-width: var(--content-narrow); margin: 0 auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
.cn-archive-intro p { color: var(--muted); font-size: 1.1rem; }
.cn-cat-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 2.5rem; }
.cn-cat-filter a {
	font-family: var(--font-mono); font-size: 0.82rem;
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 6px 12px; color: var(--muted);
	transition: border-color .2s ease, color .2s ease;
}
.cn-cat-filter a:hover, .cn-cat-filter a.is-active { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* -------------------------------------------------------------------------
   12. SINGLE POST
   ------------------------------------------------------------------------- */
.single-post .site-content { background: var(--bg); }
.single-post .entry-content, .single-post .entry-header, .cn-post-body { max-width: var(--content-narrow); margin-inline: auto; }
.single-post .entry-title { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.single-post .entry-content { font-size: 1.1rem; line-height: 1.8; }
.single-post .entry-content > * + * { margin-top: 1.4rem; }
.single-post .entry-content h2 { margin-top: 2.6rem; }
.single-post .entry-content h3 { margin-top: 2rem; }
.single-post .entry-content a { text-decoration: underline; text-underline-offset: 3px; }
.single-post .entry-content blockquote {
	border-left: 3px solid var(--accent);
	padding-left: 1.25rem; color: var(--muted); font-style: normal;
}
.single-post .entry-content pre,
.single-post .entry-content code {
	font-family: var(--font-mono);
	background: var(--surface-soft);
	border-radius: var(--radius-sm);
}
.single-post .entry-content code { padding: 2px 6px; color: var(--accent-bright); }
.single-post .entry-content pre { padding: 1rem 1.25rem; border: 1px solid var(--border); overflow-x: auto; }
.single-post .entry-content img { border-radius: var(--radius-sm); border: 1px solid var(--border); }

.cn-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 9999; transition: width .1s linear; box-shadow: 0 0 8px var(--accent); }
.cn-related { max-width: var(--content-wide); margin: var(--space-section) auto 0; padding-top: 3rem; border-top: 1px solid var(--border); }

/* -------------------------------------------------------------------------
   13. FOOTER
   ------------------------------------------------------------------------- */
.site-footer, .site-info { background: var(--bg); color: var(--muted); border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 0.85rem; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.cn-footer-brand { color: var(--text-bright); font-weight: 700; }
.cn-footer-tag { color: var(--muted); font-size: 0.85rem; }

/* -------------------------------------------------------------------------
   14. ANIMATIONS + ACCESSIBILITY
   ------------------------------------------------------------------------- */
@keyframes cn-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

@keyframes cn-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* Scroll reveal: only arm the hidden start-state when JS is present (html.cn-js),
   so no-JS visitors always see content. JS toggles .is-visible per element. */
.cn-js .cn-reveal { opacity: 0; transform: translateY(16px); }
.cn-js .cn-reveal.is-visible {
	opacity: 1; transform: none;
	transition: opacity .6s ease, transform .6s ease;
}
/* Stagger children of a revealed grid/list. Covers both block-theme markup
   (cards are direct children) and GeneratePress markup (cards live one level
   down inside .wp-block-group__inner-container). */
.cn-js .cn-reveal.is-visible > *,
.cn-js .cn-reveal.is-visible > .wp-block-group__inner-container > * { animation: cn-fade-up .6s both; }
.cn-js .cn-reveal.is-visible > *:nth-child(2),
.cn-js .cn-reveal.is-visible > .wp-block-group__inner-container > *:nth-child(2) { animation-delay: .06s; }
.cn-js .cn-reveal.is-visible > *:nth-child(3),
.cn-js .cn-reveal.is-visible > .wp-block-group__inner-container > *:nth-child(3) { animation-delay: .12s; }
.cn-js .cn-reveal.is-visible > *:nth-child(4),
.cn-js .cn-reveal.is-visible > .wp-block-group__inner-container > *:nth-child(4) { animation-delay: .18s; }
.cn-js .cn-reveal.is-visible > *:nth-child(5),
.cn-js .cn-reveal.is-visible > .wp-block-group__inner-container > *:nth-child(5) { animation-delay: .24s; }
.cn-js .cn-reveal.is-visible > *:nth-child(6),
.cn-js .cn-reveal.is-visible > .wp-block-group__inner-container > *:nth-child(6) { animation-delay: .30s; }

/* Subtle scanlines over the hero terminal (decorative, behind content). */
.cn-hero { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,0.025) 3px, rgba(0,0,0,0.025) 4px); }
[data-theme="light"] .cn-hero { background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(0,0,0,0.015) 3px, rgba(0,0,0,0.015) 4px); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
	.cn-cursor { animation: none; opacity: 1; }
	.cn-js .cn-reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   15. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.cn-credibility { font-size: 0.78rem; line-height: 2; }
	.cn-termline { white-space: normal; }
	.cn-hero::after { font-size: 0; }   /* hide filename label on small screens; keep dots */
}

/* -------------------------------------------------------------------------
   16. CORE BLOCK INTEGRATION + UTILITIES
   ------------------------------------------------------------------------- */
.cn-posts-grid { gap: 1rem !important; }
/* Breathing room between a grid/list and the action button that follows it
   (e.g. the "All writing →" button under the latest-writing query loop). */
.wp-block-query + .wp-block-buttons,
.cn-bento + .wp-block-buttons,
.cn-timeline + .wp-block-buttons,
.cn-two-col + .wp-block-buttons { margin-top: 2.25rem; }
.cn-posts-grid .wp-block-post {
	display: flex; flex-direction: column;
	background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); box-shadow: var(--shadow-card);
	padding: clamp(1.4rem, 3vw, 1.9rem); margin: 0;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.cn-posts-grid .wp-block-post:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: var(--glow); }
.cn-posts-grid .wp-block-post-title { font-family: var(--font-mono); font-size: 1.12rem; margin: 0.35rem 0 0.5rem; }
.cn-posts-grid .wp-block-post-title a { color: var(--text-bright); }
.cn-posts-grid .wp-block-post-title a:hover { color: var(--accent); }
.cn-posts-grid .wp-block-post-excerpt { color: var(--muted); font-size: 0.95rem; }
.cn-posts-grid .wp-block-post-date { font-family: var(--font-mono); color: var(--muted); font-size: 0.78rem; margin-top: auto; }
.cn-posts-grid .cn-cat,
.cn-posts-grid .wp-block-post-terms { font-family: var(--font-mono); color: var(--accent); text-transform: lowercase; font-size: 0.74rem; }

/* Tool tag pills (Skills page) — terminal chips */
.cn-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.cn-tags span, .cn-tag {
	font-family: var(--font-mono); font-size: 0.82rem;
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	padding: 5px 11px; color: var(--text); background: var(--surface);
	transition: border-color .2s ease, color .2s ease;
}
.cn-tags span::before { content: "·"; color: var(--accent); margin-right: 6px; }
.cn-tags span:hover, .cn-tag:hover { border-color: var(--accent); color: var(--accent); }

.cn-two-col { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.cn-two-col > .wp-block-group__inner-container { display: contents; }
@media (max-width: 640px) { .cn-two-col { grid-template-columns: 1fr; } }

.cn-lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--muted); line-height: 1.6; }