/* synthwave — neon-on-black, scanlines, glow. Tweak the tokens, the whole
   mood shifts. This is the look knob; voice.md is the words knob. */

:root {
	--bg:        #0d0211;
	--bg-2:      #1a0b2e;
	--fg:        #f4eafc;
	--muted:     #9a7bb8;
	--neon-pink: #ff2e97;
	--neon-cyan: #2de2e6;
	--neon-purp: #b967ff;
	--neon-amber:#ffd319;
	--hazard-yellow: #ffd60a;
	--hazard-dark:   #120322;
	--glow:      0 0 6px currentColor, 0 0 18px currentColor;
	--mono:      ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	min-height: 100vh;
	background:
		radial-gradient(ellipse at 50% -20%, var(--bg-2) 0%, var(--bg) 60%),
		var(--bg);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 16px;
	line-height: 1.7;
	overflow-x: hidden;
}

/* CRT flicker bars layered over everything */
.scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0,
		rgba(0, 0, 0, 0) 2px,
		rgba(0, 0, 0, 0.18) 3px
	);
	mix-blend-mode: multiply;
}

/* perspective neon grid fading toward the horizon */
.grid {
	position: fixed;
	inset: 37% 0 0 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		linear-gradient(var(--neon-purp) 1px, transparent 1px),
		linear-gradient(90deg, var(--neon-purp) 1px, transparent 1px);
	background-size: 40px 40px;
	transform: perspective(40vh) rotateX(60deg);
	transform-origin: top center;
	opacity: 0.16;
	mask-image: linear-gradient(to bottom, #000 0%, transparent 90%);
}

.crt {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: 8vh 24px 12vh;
}

/* hero: a full-bleed band that breaks out of the text column. Its text-align
   (set per style) places the banner left / center / right within the band. */
.hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-bottom: 1.5rem;
	padding-inline: 2vw;
	box-sizing: border-box;
	overflow: hidden;
}

.banner {
	/* Scale the font so the widest line (--cols chars) fits ~90vw and never
	   scrolls: a monospace char is ~0.6em, so cols * 0.6 * fontsize = ~90vw
	   when fontsize = 150vw/cols. Capped so short headings sit at a natural
	   size with slack to be positioned; .wide drops the cap to fill the band. */
	--fit: calc(150vw / var(--cols, 28));
	display: inline-block;
	max-width: 100%;
	margin: 0;
	font-size: min(4.5rem, var(--fit));
	font-family: var(--mono);
	line-height: 1.05;
	white-space: pre;
	text-align: left;
	background: linear-gradient(var(--ga, 180deg), var(--g1, var(--neon-cyan)), var(--g2, var(--neon-pink)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 8px rgba(255, 46, 151, 0.35));
}

.banner.wide { font-size: var(--fit); }

/* /styles gallery: each style contained in a card, sized to the text column */
.gallery {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	margin-top: 2rem;
}

.style-card {
	padding: 1rem 1.25rem;
	border: 1px solid rgba(185, 103, 255, 0.18);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.style-meta {
	margin-bottom: 0.6rem;
	color: var(--muted);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.style-meta .idx { color: var(--neon-cyan); font-weight: 700; }

.gallery .banner {
	display: block;
	font-size: min(1.6rem, calc(680px / var(--cols, 28) / 0.6));
	filter: none;
}

nav {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0.75rem 0 1.5rem;
	border-bottom: 1px solid rgba(185, 103, 255, 0.25);
	margin-bottom: 2rem;
}

nav a {
	color: var(--neon-cyan);
	text-decoration: none;
	text-transform: lowercase;
	letter-spacing: 0.04em;
}

nav .sep {
	color: var(--muted);
	user-select: none;
}

/* unix-shell nav: pwd breadcrumb + ls of the current directory */
.nav-unix { gap: 0.4rem 1.5rem; }

.crumbs,
.ls {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem;
}

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

.crumbs .here,
.ls .here {
	color: var(--neon-pink);
	text-shadow: 0 0 8px rgba(255, 46, 151, 0.4);
}

.bracket,
.pipe {
	color: var(--muted);
	user-select: none;
}

nav a:hover { color: var(--neon-pink); text-shadow: var(--glow); }

article { color: var(--fg); position: relative; }

article h1, article h2, article h3 {
	color: var(--neon-purp);
	text-shadow: 0 0 8px rgba(185, 103, 255, 0.5);
	font-weight: 700;
	line-height: 1.2;
	margin-top: 2.2rem;
}

article a {
	color: var(--neon-pink);
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
}

article a:hover { text-shadow: var(--glow); }

article code {
	font-family: var(--mono);
	background: rgba(45, 226, 230, 0.10);
	color: var(--neon-cyan);
	padding: 0.1em 0.35em;
	border-radius: 3px;
}

article pre {
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid rgba(45, 226, 230, 0.25);
	border-radius: 6px;
	padding: 1rem 1.25rem;
	overflow-x: auto;
}

article pre code { background: none; color: var(--fg); }

article blockquote {
	margin: 1.5rem 0;
	padding-left: 1rem;
	border-left: 3px solid var(--neon-amber);
	color: var(--muted);
	font-style: italic;
}

.home-block { margin-top: 3rem; }

.home-block h2 a {
	color: var(--neon-purp);
	text-decoration: none;
	text-shadow: 0 0 8px rgba(185, 103, 255, 0.5);
}

.home-block h2 a:hover { color: var(--neon-pink); }

.listing {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 0;
}

.listing li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(185, 103, 255, 0.14);
}

.listing a {
	color: var(--neon-cyan);
	text-decoration: none;
}

.listing a:hover { color: var(--neon-pink); text-shadow: var(--glow); }

.listing time {
	color: var(--muted);
	font-size: 0.8rem;
	white-space: nowrap;
}

.listing-empty { color: var(--muted); }

article hr {
	height: 8px;
	border: none;
	margin: 2.5rem 0;
	opacity: 0.85;
	background-image: repeating-linear-gradient(
		45deg,
		var(--hazard-yellow) 0 3px,
		transparent 3px 16px
	);
}

/* stickers — cassette-futurism margin elements. On wide screens they sit in
   the empty gutters beside the column, tilted, with hazard-tape across the top
   like they're taped on. Below 1200px there's no gutter, so they collapse into
   a stacked row at the end of the article. */
.sticker {
	position: absolute;
	top: var(--at, 20%);
	width: var(--w, 210px);
	padding: 0.7rem 0.8rem;
	transform: rotate(var(--rot, 0deg));
	background: rgba(10, 2, 20, 0.88);
	border: 1px solid rgba(255, 214, 10, 0.4);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
	font-family: var(--mono);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--fg);
}

.sticker.size-sm { --w: 160px; font-size: 0.72rem; }
.sticker.size-md { --w: 210px; }
.sticker.size-lg { --w: 300px; font-size: 0.82rem; }

.sticker.side-right { left: 100%; margin-left: var(--gap, 3.5rem); }
.sticker.side-left  { right: 100%; margin-right: var(--gap, 3.5rem); }

.sticker p { margin: 0; }

.s-label {
	display: block;
	color: var(--hazard-yellow);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}

.s-snip {
	margin: 0;
	white-space: pre-wrap;
	font-size: 0.72rem;
	color: var(--neon-cyan);
}

.sticker-image { padding: 0.4rem; }

.sticker-image figure { margin: 0; }

.sticker-image img {
	display: block;
	width: 100%;
	filter: grayscale(0.5) contrast(1.1) saturate(1.2) brightness(0.95);
}

.sticker-image figcaption {
	margin-top: 0.45rem;
	font-size: 0.7rem;
	color: var(--muted);
}

.sticker-a { text-decoration: none; color: inherit; display: block; }

/* a linked image is a logo/icon, not a photo — keep it crisp (its own colors)
   with a neon glow instead of the photo duotone, and react on hover. */
.sticker.linked.sticker-image img {
	filter: drop-shadow(0 0 8px rgba(45, 226, 230, 0.45));
	transition: filter 0.15s ease;
}

.sticker.linked.sticker-image:hover img {
	filter: drop-shadow(0 0 14px rgba(255, 46, 151, 0.6));
}

.sticker.linked.sticker-image:hover figcaption { color: var(--neon-pink); }

/* Stickers stay pinned in the gutters while there's room. When the gutter is
   too narrow for a given size, that sticker drops out of the gutter and flows
   inline as a full-width card at the end of the article (sorted into reading
   order) — never crossing the text or causing a horizontal scroll. Wider sizes
   need more room, so they collapse earlier. */
@media (max-width: 1180px) { .sticker.size-sm { position: static; width: auto; margin: 1.5rem 0 0; transform: none; } }
@media (max-width: 1280px) { .sticker.size-md { position: static; width: auto; margin: 1.5rem 0 0; transform: none; } }
@media (max-width: 1460px) { .sticker.size-lg { position: static; width: auto; margin: 1.5rem 0 0; transform: none; } }

/* give the inline stack a little breathing room from the body text */
@media (max-width: 1460px) {
	.stickers { margin-top: 2rem; }
}

footer {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-top: 4rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(185, 103, 255, 0.25);
	color: var(--muted);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: no-preference) {
	.hero .banner { animation: flicker 4s infinite steps(60); }
	@keyframes flicker {
		0%, 96%, 100% { opacity: 1; }
		97% { opacity: 0.82; }
		98% { opacity: 1; }
		99% { opacity: 0.88; }
	}
}