/* ==========================================================================
   Nova — maximalist creative-technology theme.
   Deep space: near-black indigo void, glass panels, three-colour neon glow
   (violet / cyan / magenta) instead of any single-accent restraint — this
   theme is deliberately the loud, dense, effects-forward entry in the
   portfolio. Rounded glass everywhere (a hard contrast to Quire's 0-radius
   paper), Orbitron/Sora/Fira Code type trio unused elsewhere in the line.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root {
	/* ── Void — near-black with a cold indigo cast, never true neutral gray. ── */
	--void:      oklch(13% 0.025 280);
	--void-deep: oklch(8%  0.02  280);
	--void-soft: oklch(19% 0.03  280);
	--surface:   oklch(22% 0.035 280 / .55);
	--surface-solid: oklch(16% 0.03 280);

	--ink:      oklch(96% 0.012 260);
	--ink-soft: oklch(78% 0.02  260);
	--ink-dim:  oklch(67% 0.025 260);
	--line:     oklch(75% 0.06  260 / .16);
	--line-strong: oklch(85% 0.05 260 / .3);

	/* ── Three-colour neon system — this theme's whole point is that it
	   doesn't ration itself to one accent. Violet is primary (CTAs, key
	   numerals), cyan is secondary (links, active states), magenta is a
	   rare tertiary used only inside gradients, never as a flat fill. ── */
	--violet:      oklch(62% 0.24 292);
	--violet-glow: oklch(62% 0.24 292 / .55);
	--cyan:        oklch(80% 0.16 200);
	--cyan-glow:   oklch(80% 0.16 200 / .5);
	--magenta:     oklch(68% 0.24 340);
	--magenta-glow: oklch(68% 0.24 340 / .5);

	--display: 'Orbitron', 'Eurostile', sans-serif;
	--body-f:  'Sora', -apple-system, 'Segoe UI', sans-serif;
	--mono:    'Fira Code', ui-monospace, 'SFMono-Regular', monospace;

	--radius: 20px;
	--radius-sm: 12px;
	--lw: 1px;
	--lw-2: 1.5px;
	--blur: 22px;
	--ease: cubic-bezier(.16,1,.3,1);
	--ease-spring: cubic-bezier(.34,1.56,.64,1);
	--container: 1440px;
	--gutter: clamp(20px, 4vw, 64px);
}

html, body { background: var(--void); color: var(--ink); }
body {
	margin: 0;
	font-family: var(--body-f);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--violet); color: var(--void-deep); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); position: relative; }

/* ── Type scale ── */
h1, h2, h3, h4, .display {
	font-family: var(--display);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.05;
	text-transform: uppercase;
	margin: 0;
	color: var(--ink);
}
.eyebrow {
	font-family: var(--mono);
	font-size: .8rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cyan);
	display: inline-flex;
	align-items: center;
	gap: .6em;
}
.eyebrow::before {
	content: '';
	width: .6em; height: .6em;
	border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 10px var(--cyan-glow);
	display: inline-block;
	animation: nv-pulse 1.8s ease-in-out infinite;
}
@keyframes nv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .eyebrow::before { animation: none; } }

.lede {
	font-size: clamp(1.05rem, 1.3vw, 1.3rem);
	color: var(--ink-soft);
	max-width: 54ch;
}
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ── Gradient text utility — violet-to-cyan, the theme's signature text
   treatment for the loudest headline moments. ── */
.grad-text {
	background: linear-gradient(100deg, var(--violet) 0%, var(--cyan) 60%, var(--magenta) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ── Skip link ── */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal;
}
.skip-link.screen-reader-text:focus {
	background: var(--void-deep); color: var(--cyan);
	clip: auto; clip-path: none; height: auto; width: auto;
	padding: 14px 20px; left: var(--gutter); top: 14px;
	z-index: 2100; font-family: var(--mono); font-size: .85rem;
	border: var(--lw) solid var(--cyan); border-radius: var(--radius-sm);
	box-shadow: 0 0 20px var(--cyan-glow);
}

/* ── Glass panel utility — the base "material" reused across cards,
   header, dialogs. Heavier blur + brighter inset highlight than any
   previous theme's glass, matching the "loud" mandate. ── */
.glass {
	background: var(--surface);
	border: var(--lw) solid var(--line-strong);
	border-radius: var(--radius);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 60px rgba(0,0,0,.5);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.glass { backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
}

/* ── Hero WebGL mount (assets/js/nova-nebula.js) — the gradient here is the
   permanent base layer AND the fallback for no-WebGL/no-JS: the canvas, once
   it mounts, sits on top of it rather than replacing it, so the aurora
   colours are already correct even during the first paint. ── */
.nv-nebula {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 55% at 30% 20%, oklch(45% 0.16 292 / .35), transparent 60%),
		radial-gradient(ellipse 60% 50% at 75% 65%, oklch(55% 0.14 200 / .28), transparent 60%),
		var(--void-deep);
	pointer-events: none;
}
.nv-nebula__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.nv-nebula--ready { background: var(--void-deep); }

/* ==========================================================================
   Buttons / form base
   ========================================================================== */

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

.btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: var(--mono);
	font-size: .82rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: transform .35s var(--ease-spring), box-shadow .35s var(--ease);
}
.btn--nova {
	background: linear-gradient(120deg, var(--violet), var(--cyan));
	color: var(--void-deep);
	font-weight: 700;
	box-shadow: 0 8px 30px var(--violet-glow);
}
.btn--nova:hover { box-shadow: 0 10px 40px var(--violet-glow), 0 0 30px var(--cyan-glow); }

/* ── Magnetic-button hook — nova-fx.js reads this class and adds a
   pointer-follow translate; the transform-based hover above still applies
   as the resting/active state when JS is unavailable or reduced-motion. ── */
.magnetic { will-change: transform; }

/* ==========================================================================
   Scroll progress HUD strip
   ========================================================================== */

.nv-progress {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 2200;
	background: var(--line);
}
.nv-progress::before {
	content: '';
	display: block;
	height: 100%;
	width: var(--nv-progress, 0%);
	background: linear-gradient(90deg, var(--violet), var(--cyan), var(--magenta));
	box-shadow: 0 0 12px var(--cyan-glow);
	transition: width .1s linear;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-head {
	position: sticky;
	top: 0;
	z-index: 1000;
	margin: 14px var(--gutter) 0;
	border-radius: 999px;
}
@media (min-width: 761px) { .site-head { margin-top: 18px; } }

.site-head__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 12px 10px 22px;
	max-width: none;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--display);
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.brand__mark { width: 32px; height: 32px; flex-shrink: 0; }

.nav-desktop { display: none; align-items: center; gap: 34px; }
@media (min-width: 981px) { .nav-desktop { display: flex; } }
.nav__list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0; padding: 0;
}
.nav__list a {
	font-family: var(--mono);
	font-size: .82rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-soft);
	position: relative;
	padding-bottom: 4px;
	transition: color .25s var(--ease);
}
.nav__list a::after {
	content: '';
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--violet), var(--cyan));
	transition: right .3s var(--ease);
}
.nav__list a:hover { color: var(--ink); }
.nav__list a:hover::after { right: 0; }

.burger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 50%;
	background: var(--surface-solid);
	border: var(--lw) solid var(--line);
	flex-shrink: 0;
}
.burger svg { width: 19px; height: 19px; }
@media (min-width: 981px) { .burger { display: none; } }

/* ── Mobile menu popover ── */
#nv-mobile-menu {
	position: fixed;
	inset: 20px;
	margin: auto;
	max-width: 420px;
	max-height: 480px;
	padding: 60px 36px;
	border: none;
}
/* The UA stylesheet's `[popover]{display:none}` only applies while closed;
   author styles win over it once matched, so `display` must be scoped to
   :popover-open — an unconditional `display:flex` here would render the
   menu (invisibly-ish, since nothing else hides it) even while closed. */
#nv-mobile-menu:popover-open {
	display: flex;
	align-items: center;
	justify-content: center;
}
#nv-mobile-menu::backdrop { background: oklch(8% 0.02 280 / .78); backdrop-filter: blur(6px); }
.mmenu__close {
	position: absolute;
	top: 18px; right: 18px;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--surface-solid);
	display: flex; align-items: center; justify-content: center;
}
.mmenu__close svg { width: 18px; height: 18px; }
.mmenu__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
}
.mmenu__list a {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: no-preference) {
	#nv-mobile-menu {
		opacity: 0;
		transform: scale(.92);
		transition: opacity .3s var(--ease), transform .3s var(--ease), overlay .3s allow-discrete, display .3s allow-discrete;
	}
	#nv-mobile-menu:popover-open { opacity: 1; transform: scale(1); }
	@starting-style { #nv-mobile-menu:popover-open { opacity: 0; transform: scale(.92); } }
}

/* ==========================================================================
   Contact dialog
   ========================================================================== */

dialog#nv-contact {
	width: min(480px, calc(100vw - 40px));
	padding: 36px;
	border: none;
	color: var(--ink);
}
dialog#nv-contact::backdrop { background: oklch(8% 0.02 280 / .78); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
	dialog#nv-contact {
		opacity: 0;
		transform: translateY(16px) scale(.96);
		transition: opacity .35s var(--ease), transform .35s var(--ease), overlay .35s allow-discrete, display .35s allow-discrete;
	}
	dialog#nv-contact[open] { opacity: 1; transform: translateY(0) scale(1); }
	@starting-style { dialog#nv-contact[open] { opacity: 0; transform: translateY(16px) scale(.96); } }
}
.dlg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.dlg__head h3 { font-size: 1.3rem; }
.dlg__close {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--surface-solid);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.dlg__close svg { width: 16px; height: 16px; }
.dlg__body { display: flex; flex-direction: column; gap: 14px; }
.dlg__body input, .dlg__body textarea {
	width: 100%;
	padding: 13px 16px;
	background: var(--void-deep);
	border: var(--lw) solid var(--line);
	border-radius: var(--radius-sm);
	resize: vertical;
}
.dlg__body input::placeholder, .dlg__body textarea::placeholder { color: var(--ink-dim); }
.dlg__body input:focus, .dlg__body textarea:focus { border-color: var(--cyan); }
.dlg__status { font-size: .85rem; min-height: 1.2em; color: var(--cyan); }
.dlg__body.is-error .dlg__status { color: var(--magenta); }
.dlg__body button[type="submit"] { align-self: flex-start; }
.dlg__body.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot { margin-top: 120px; padding: 80px 0 32px; border-top: var(--lw) solid var(--line); }
.foot-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 56px;
}
.foot-grid--no-social { grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .foot-grid, .foot-grid--no-social { grid-template-columns: 1fr 1fr; } }
.foot-brand { font-family: var(--display); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; }
.foot-grid h4 {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-dim);
	margin-bottom: 16px;
	font-weight: 500;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a:hover { color: var(--cyan); }
.foot-bottom {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 24px;
	border-top: var(--lw) solid var(--line);
	font-family: var(--mono);
	font-size: .78rem;
	color: var(--ink-dim);
}

/* ==========================================================================
   Marquee ticker
   ========================================================================== */

.marquee {
	overflow: hidden;
	border-block: var(--lw) solid var(--line);
	background: var(--void-deep);
	padding-block: 14px;
}
.marquee__track {
	display: flex;
	width: max-content;
	gap: 48px;
	animation: nv-marquee 26s linear infinite;
}
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee__item {
	font-family: var(--mono);
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-dim);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 48px;
}
.marquee__item::after { content: '◆'; color: var(--violet); font-size: .6rem; }
@keyframes nv-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-block: 120px 80px;
}
.hero__inner { position: relative; z-index: 2; max-width: 900px; }
.hero__title {
	font-size: clamp(2.6rem, 6.4vw, 5.4rem);
	margin-block: 22px 26px;
}
.hero__sub { margin-bottom: 40px; }
.hero__cta { display: flex; gap: 18px; flex-wrap: wrap; }
.btn--ghost {
	background: var(--surface);
	border: var(--lw) solid var(--line-strong);
	color: var(--ink);
}
.btn--ghost:hover { border-color: var(--cyan); box-shadow: 0 0 24px var(--cyan-glow); }

.hero__scroll-cue {
	position: absolute;
	bottom: 36px; left: 50%;
	transform: translateX(-50%);
	width: 26px; height: 42px;
	border: var(--lw-2) solid var(--line-strong);
	border-radius: 20px;
	z-index: 2;
}
.hero__scroll-cue span {
	position: absolute;
	top: 8px; left: 50%;
	width: 4px; height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--cyan);
	box-shadow: 0 0 8px var(--cyan-glow);
	animation: nv-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes nv-scroll-cue { 0% { transform: translateY(0); opacity: 1; } 70% { opacity: 0; } 100% { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-cue span { animation: none; } }

/* ==========================================================================
   Section shell
   ========================================================================== */

.section { padding-block: 100px; }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); margin-bottom: 16px; }

/* ==========================================================================
   Services — tilt cards
   ========================================================================== */

.tilt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 980px) { .tilt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tilt-grid { grid-template-columns: 1fr; } }
.tilt-card {
	padding: 32px 28px;
	transform-style: preserve-3d;
	transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.tilt-card:hover { border-color: var(--line-strong); }
.tag-no {
	display: inline-block;
	font-family: var(--mono);
	font-size: .75rem;
	color: var(--cyan);
	margin-bottom: 18px;
}
.tilt-card h3 { font-size: 1.15rem; margin-bottom: 10px; text-transform: none; letter-spacing: 0; }
.tilt-card p { color: var(--ink-soft); font-size: .95rem; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 44px 36px;
	text-align: center;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat__num { font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.stat__label { font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }

/* ==========================================================================
   Work grid
   ========================================================================== */

.work-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .work-grid { grid-template-columns: 1fr; } }
.work-card { display: block; overflow: hidden; transition: transform .4s var(--ease), border-color .3s var(--ease); }
.work-card:hover { border-color: var(--line-strong); }
.work-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-card:hover .work-card__media img { transform: scale(1.06); }
.work-card__body { padding: 20px 22px 24px; }
.work-card__title { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; margin-bottom: 8px; }
.work-card__meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); text-transform: uppercase; }

/* ==========================================================================
   Manifesto / statement band
   ========================================================================== */

.statement { padding-block: 140px; border-block: var(--lw) solid var(--line); }
.statement__text { font-size: clamp(2.2rem, 5vw, 4rem); }

/* ==========================================================================
   Process steps
   ========================================================================== */

.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }
.step { padding: 28px 24px; }
.step__no { font-family: var(--display); font-size: 2rem; font-weight: 800; margin-bottom: 14px; }
.step__title { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; margin-bottom: 8px; }
.step__desc { color: var(--ink-soft); font-size: .92rem; }

/* ==========================================================================
   Quotes
   ========================================================================== */

.quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 980px) { .quotes { grid-template-columns: 1fr; } }
.quote-card { padding: 30px 26px; }
.quote-card p { font-size: 1rem; color: var(--ink); margin-bottom: 18px; }
.quote-card__who { font-family: var(--mono); font-size: .8rem; color: var(--ink-dim); }

/* ==========================================================================
   Journal grid
   ========================================================================== */

.journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 980px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card { display: block; padding: 28px 26px; }
.journal-card time { font-family: var(--mono); font-size: .78rem; color: var(--cyan); }
.journal-card h3 { font-size: 1.1rem; text-transform: none; letter-spacing: 0; margin-block: 10px 10px; font-weight: 700; }
.journal-card p { color: var(--ink-soft); font-size: .92rem; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
	text-align: center;
	background: var(--void-deep);
	border-top: var(--lw) solid var(--line);
}
.cta-band h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 36px; }
.cta-band .btn { margin-inline: auto; }

/* ==========================================================================
   Reveal-on-scroll base state — nova-fx.js toggles .is-in via
   IntersectionObserver. Matches the [data-reveal] convention used across
   this theme line (Klaxon/Quire).
   ========================================================================== */

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: translateY(0); }
/* Motion (motion.dev) drives this via WAAPI when loaded — its own
   easing/stagger is the effect, so the CSS transition is switched off to
   avoid animating the same properties twice. */
html.nv-motion-on [data-reveal] { transition: none; }
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Warp burst overlay (nova-fx.js) — one-shot canvas appended to <body>,
   removed on its own after the animation completes.
   ========================================================================== */

.nv-warp-canvas {
	position: fixed;
	inset: 0;
	z-index: 2500;
	pointer-events: none;
	mix-blend-mode: screen;
}

/* ==========================================================================
   Inner-page shell — page-hero / prose / single / pagination / comments
   ========================================================================== */

.page-hero { padding-block: clamp(48px, 8vw, 96px) clamp(36px, 6vw, 64px); }
.page-hero h1 { font-size: clamp(2.4rem, 6.6vw, 4.6rem); max-width: 22ch; margin-top: 18px; }
.page-hero .lede { margin-top: 20px; }

.prose { max-width: 72ch; font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.prose > * + * { margin-top: 1.3em; }
.prose h2 { font-size: 1.7rem; margin-top: 2em; text-transform: none; letter-spacing: 0; }
.prose h3 { font-size: 1.3rem; margin-top: 1.8em; text-transform: none; letter-spacing: 0; }
.prose a { text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose strong { font-weight: 700; }
.prose blockquote { border-left: 2px solid var(--violet); padding-left: 20px; font-style: italic; color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose img { border-radius: var(--radius); }
.prose code { font-family: var(--mono); background: var(--void-deep); color: var(--cyan); padding: .15em .4em; border-radius: 4px; }

.single__media { margin-block: 32px; border-radius: var(--radius); overflow: hidden; }
.single__tags { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; }
.single__tags a { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; padding: 5px 12px; border: var(--lw) solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.single__tags a:hover { border-color: var(--cyan); color: var(--cyan); }
.page-links { font-family: var(--mono); font-size: .85rem; color: var(--ink-dim); }

.pager, .navigation.pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pager .page-numbers, .navigation.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding-inline: 10px;
	border: var(--lw) solid var(--line);
	border-radius: var(--radius-sm);
	font-family: var(--mono); font-weight: 700; font-size: .85rem;
	background: var(--surface-solid);
	color: var(--ink-soft);
}
.pager .page-numbers.current, .navigation.pagination .page-numbers.current { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 16px var(--cyan-glow); }

.comments { margin-top: 24px; }
.comments__title { font-size: 1.5rem; margin-bottom: 24px; }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.comment-list .children { list-style: none; margin-top: 20px; padding-left: 28px; border-left: var(--lw) solid var(--line); }
.comment-list article { padding: 18px; background: var(--surface-solid); border: var(--lw) solid var(--line); border-radius: var(--radius); }
.comment-form p { margin-top: 14px; }
.comment-form input, .comment-form textarea {
	width: 100%; border: var(--lw) solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; background: var(--void-deep); color: var(--ink); font-family: var(--body-f);
}
.comment-form label { font-family: var(--mono); font-size: .78rem; text-transform: uppercase; display: block; margin-bottom: 6px; color: var(--ink-dim); }

.search-form { display: flex; border-radius: 999px; overflow: hidden; }
.search-form__input { flex: 1; border: none; padding: 14px 16px; background: transparent; color: var(--ink); font-family: var(--mono); }
.search-form__input:focus { outline: none; }
.search-form__input::placeholder { color: var(--ink-dim); }
.search-form__submit { border: none; border-left: var(--lw) solid var(--line); background: transparent; color: var(--cyan); padding: 0 20px; font-weight: 700; }

@media (prefers-contrast: more) {
	:root { --ink-soft: var(--ink); --line: var(--line-strong); }
}

/* ==========================================================================
   WP core content classes (captions, alignment, sticky, author, galleries)
   — needed wherever `the_content()` renders classic-editor/media-library
   markup, even though this theme's own demo content doesn't use them.
   ========================================================================== */

.prose .wp-caption { max-width: 100%; margin-bottom: 1.3em; }
.prose .wp-caption img { border-radius: var(--radius-sm); }
.prose .wp-caption-text { font-family: var(--mono); font-size: .82rem; color: var(--ink-dim); text-align: center; margin-top: .5em; }
.prose .gallery-caption { font-family: var(--mono); font-size: .78rem; color: var(--ink-dim); text-align: center; }
.prose .alignleft { float: left; margin: 0 24px 12px 0; }
.prose .alignright { float: right; margin: 0 0 12px 24px; }
.prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.prose .bypostauthor { border-left: 2px solid var(--violet); padding-left: 14px; }
.work-card.sticky, .journal-card.sticky { border-color: var(--violet); }
.work-card.sticky .work-card__title::after, .journal-card.sticky h3::after { content: ' ★'; color: var(--violet); }

/* --- Section dropdown (nav) — theme-agnostic, added --- */
li:has(> .sub-menu){ position: relative; }
.sub-menu{ position:absolute; top:100%; left:0; min-width:210px; margin:12px 0 0; padding:8px; list-style:none; background:rgba(18,18,24,.97); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.14); border-radius:12px; box-shadow:0 26px 60px -26px rgba(0,0,0,.75); display:none; z-index:500; }
li:hover > .sub-menu, li:focus-within > .sub-menu{ display:block; }
.sub-menu li{ margin:0; padding:0; list-style:none; }
.sub-menu a{ display:block; padding:.55em .85em; border-radius:7px; color:#f2f2f5 !important; white-space:nowrap; font-size:.9rem; text-transform:none !important; letter-spacing:normal !important; opacity:1 !important; }
.sub-menu a::before, .sub-menu a::after{ display:none !important; content:none !important; }
.sub-menu a:hover{ background:rgba(255,255,255,.13); color:#fff !important; }