/* ============================================================
   1159 — neobrutalism · dark
   ground = abyss, ink = near-black shadow, accents from the
   1159 palette. thick borders, hard offset shadows, chunky
   press states, and notched (pixel) corners on the big blocks.
   ============================================================ */
@import url("./palette.css");
@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@300..900&display=swap");

:root {
	/* surfaces, taken from the palette */
	--bg: var(--1159-abyss);
	--panel: var(--1159-nocturne);
	--raise: var(--1159-eclipse);
	--fg: var(--1159-halo);
	--fg-dim: var(--1159-drowse);
	--fg-faint: var(--1159-dusk);

	/* neobrutalist accents, all from 1159 */
	--pop: var(--1159-laelia);      /* orchid      */
	--pop-2: var(--1159-rose);      /* pink        */
	--pop-3: var(--1159-sunbeam);   /* amber       */
	--pop-4: var(--1159-seafoam);   /* teal        */
	--pop-5: var(--1159-wisp);      /* periwinkle  */

	/* structure */
	--ink: #0a0710;                 /* deepest shadow  */
	--line: var(--1159-fathom);
	--maxw: 62rem;
	--px: 4px;                      /* one "pixel"     */
	--bd: 3px solid var(--fg);
	--bd-dim: 2px solid var(--line);
	--shadow: 6px 6px 0 var(--ink);
	--shadow-sm: 4px 4px 0 var(--ink);
	--shadow-lg: 9px 9px 0 var(--ink);

	/* notched corner cut (used with clip-path) */
	--cut: 6px;
	--corner: polygon(
		0 var(--cut), var(--cut) var(--cut), var(--cut) 0,
		calc(100% - var(--cut)) 0, calc(100% - var(--cut)) var(--cut), 100% var(--cut),
		100% calc(100% - var(--cut)), calc(100% - var(--cut)) calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
		var(--cut) 100%, var(--cut) calc(100% - var(--cut)), 0 calc(100% - var(--cut))
	);

	/* type */
	--font-display: "Figtree", system-ui, sans-serif;
	--font-body: "Figtree", system-ui, sans-serif;
	--font-mono: "Figtree", system-ui, sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	color-scheme: dark;
	scroll-behavior: smooth;
}

body {
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* raster content stays blocky */
img,
svg,
.chip,
canvas {
	image-rendering: pixelated;
}

/* ---- the night sky, drawn as a pixel grid + pixel stars ---- */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(160, 159, 174, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(160, 159, 174, .05) 1px, transparent 1px);
	background-size: 26px 26px;
}

body::after {
	content: "";
	position: fixed;
	top: -8px;
	left: -8px;
	width: 4px;
	height: 4px;
	z-index: 0;
	pointer-events: none;
	opacity: .6;
	box-shadow:
		9vw 12vh 0 0 var(--1159-wisp),
		26vw 68vh 0 0 var(--1159-halo),
		48vw 18vh 0 0 var(--1159-laelia),
		72vw 74vh 0 0 var(--1159-wisp),
		88vw 26vh 0 0 var(--1159-sunbeam),
		16vw 86vh 0 0 var(--1159-halo),
		40vw 92vh 0 0 var(--1159-rose),
		64vw 6vh 0 0 var(--1159-halo),
		4vw 34vh 0 0 var(--1159-seafoam),
		82vw 52vh 0 0 var(--1159-halo),
		94vw 88vh 0 0 var(--1159-laelia);
}

main,
header,
footer {
	position: relative;
	z-index: 1;
}

::selection {
	background: var(--pop);
	color: var(--1159-abyss);
}

/* ---------------- type ---------------- */
h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--fg);
	text-transform: uppercase;
}

h1 {
	font-size: clamp(2rem, 5vw, 3.4rem);
}

h2 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin: 2.8em 0 .8em;
	color: var(--1159-sunbeam);
}

/* a dashed rule under every section heading */
h2::after {
	content: "";
	display: block;
	width: 5.5rem;
	height: 4px;
	margin-top: .6rem;
	background-image: repeating-linear-gradient(90deg, var(--pop) 0 8px, transparent 8px 13px);
}

h3 {
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	margin: 1.8em 0 .5em;
	color: var(--1159-seafoam);
}

p {
	margin-bottom: 1.1em;
	max-width: 62ch;
}

.lead {
	color: var(--fg-dim);
	font-size: 1rem;
}

/* inline colour accents */
.u-halo { color: var(--1159-halo); }
.u-wisp { color: var(--1159-wisp); }
.u-rose { color: var(--1159-rose); }
.u-seafoam { color: var(--1159-seafoam); }
.u-sunbeam { color: var(--1159-sunbeam); }
.u-laelia { color: var(--1159-laelia); }
.u-morrow { color: var(--1159-morrow); }
.u-aether { color: var(--1159-aether); }
.u-moss { color: var(--1159-moss); }

a {
	color: var(--1159-wisp);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .1s steps(2), border-color .1s steps(2);
}

a:hover {
	color: var(--1159-sunbeam);
	border-bottom-color: var(--1159-sunbeam);
}

a:focus-visible,
.btn:focus-visible {
	outline: 3px solid var(--pop-3);
	outline-offset: 3px;
}

code,
kbd {
	font-family: var(--font-mono);
	font-size: .95em;
	color: var(--1159-sunbeam);
	background: var(--raise);
	border: 2px solid var(--line);
	padding: .02em .35em;
	white-space: nowrap;
}

/* ---------------- nav ---------------- */
.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	max-width: var(--maxw);
	margin: 1rem auto;
	padding: .9rem 1.2rem;
	background: var(--panel);
	border: var(--bd);
	box-shadow: var(--shadow);
}

.brand {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--fg);
}

.brand i {
	font-style: normal;
	color: var(--pop);
	text-shadow: 2px 2px 0 var(--ink);
}

.nav nav {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.nav nav a {
	padding: .5rem .8rem;
	border: var(--bd-dim);
	background: var(--raise);
	color: var(--fg-dim);
	font-weight: 600;
	font-size: .85rem;
	text-transform: uppercase;
	box-shadow: var(--shadow-sm);
	transition: transform .08s steps(2), box-shadow .08s steps(2), background .08s, color .08s;
}

.nav nav a:hover {
	background: var(--pop-5);
	border-color: var(--pop-5);
	color: var(--1159-abyss);
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--ink);
}

.nav nav a:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--ink);
}

/* ---------------- hero ---------------- */
.hero {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 4rem 1.2rem 2rem;
}

.minute {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 5vw, 2.6rem);
	color: var(--fg);
	background: var(--raise);
	border: var(--bd);
	padding: 1rem 1.4rem;
	clip-path: var(--corner);
	filter: drop-shadow(6px 6px 0 var(--ink));
}

.minute .colon {
	animation: blink 1s steps(1) infinite;
}

@keyframes blink {
	50% { opacity: 0; }
}

.hero h1 {
	margin: 1.6rem 0 1rem;
}

.hero h1 .u-rose {
	color: var(--pop-2);
	text-shadow: 3px 3px 0 var(--ink);
}

.cta {
	margin-top: 1.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: .9rem;
}

/* ---------------- buttons ---------------- */
.btn {
	display: inline-block;
	padding: .75rem 1.3rem;
	border: var(--bd);
	background: var(--raise);
	color: var(--fg);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: .9rem;
	text-transform: uppercase;
	box-shadow: var(--shadow);
	transition: transform .08s steps(2), box-shadow .08s steps(2), background .08s, color .08s, border-color .08s;
}

.btn:hover {
	background: var(--pop-5);
	border-color: var(--pop-5);
	color: var(--1159-abyss);
	transform: translate(-2px, -2px);
	box-shadow: var(--shadow-lg);
}

.btn:active {
	transform: translate(3px, 3px);
	box-shadow: 2px 2px 0 var(--ink);
}

.btn-primary {
	background: var(--pop);
	border-color: var(--pop);
	color: var(--1159-abyss);
}

.btn-primary:hover {
	background: var(--pop-2);
	border-color: var(--pop-2);
	color: var(--1159-abyss);
}

/* ---------------- layout ---------------- */
.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 1.2rem 4rem;
}

/* ---------------- swatch cards ---------------- */
.scoop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 1rem;
	margin: 0 0 3.5rem;
}

.scoop {
	background: var(--raise);
	border: var(--bd);
	cursor: copy;
	clip-path: var(--corner);
	filter: drop-shadow(4px 4px 0 var(--ink));
	transition: transform .08s steps(2), filter .08s steps(2);
}

.scoop:hover {
	transform: translate(-2px, -2px);
	filter: drop-shadow(7px 7px 0 var(--pop-5));
}

.scoop:active {
	transform: translate(2px, 2px);
	filter: drop-shadow(2px 2px 0 var(--ink));
}

.scoop .chip {
	height: 3.6rem;
	background: var(--c);
	border-bottom: 3px solid var(--ink);
}

.scoop .meta {
	padding: .6rem .75rem .75rem;
}

.scoop .meta b {
	display: block;
	font-weight: 700;
	font-size: .85rem;
	text-transform: uppercase;
	color: var(--fg);
}

.scoop .meta span {
	font-family: var(--font-mono);
	font-size: .95rem;
	color: var(--fg-faint);
}

/* ---------------- ports ---------------- */
.port-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1rem;
	margin-bottom: 2rem;
}

.port {
	background: var(--raise);
	border: var(--bd);
	padding: 1.1rem 1.3rem;
	clip-path: var(--corner);
	filter: drop-shadow(4px 4px 0 var(--ink));
	transition: transform .08s steps(2), filter .08s steps(2);
}

.port:hover {
	transform: translate(-2px, -2px);
	filter: drop-shadow(7px 7px 0 var(--pop-2));
}

.port h3 {
	margin: 0 0 .7rem;
}

.port ul {
	list-style: none;
}

.port li {
	padding: .3rem 0;
	color: var(--fg-dim);
	font-size: .8rem;
	text-transform: uppercase;
	border-bottom: 2px dashed var(--line);
}

.port li:last-child {
	border-bottom: 0;
}

/* ---------------- table ---------------- */
.audit {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 34rem;
}

th,
td {
	padding: .7rem .8rem;
	text-align: left;
	border: var(--bd-dim);
	font-size: .8rem;
}

th {
	background: var(--panel);
	color: var(--1159-sunbeam);
	font-weight: 700;
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

td.mono,
th.mono {
	font-family: var(--font-mono);
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

tbody tr:hover {
	background: rgba(134, 162, 253, .07);
}

td.swatch {
	width: 2.8rem;
	cursor: copy;
	border: 3px solid var(--ink);
}

td.name {
	color: var(--fg);
	font-weight: 700;
	text-transform: uppercase;
}

/* ---------------- prose ---------------- */
.prose {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 1.2rem 4rem;
}

.prose h1 {
	margin-bottom: .8rem;
}

.prose ul,
.prose ol {
	margin: 0 0 1.1em 1.3em;
	max-width: 62ch;
}

.prose li {
	margin-bottom: .4em;
}

.prose blockquote {
	border: var(--bd);
	border-left: 8px solid var(--pop);
	background: var(--raise);
	padding: 1rem 1.3rem;
	margin: 1.4rem 0;
	color: var(--fg-dim);
	box-shadow: var(--shadow-sm);
}

.prose blockquote p {
	margin: 0;
}

.code {
	display: block;
	background: var(--ink);
	border: var(--bd);
	box-shadow: var(--shadow-sm);
	padding: .9rem 1rem;
	margin: 1.2rem 0;
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: .95rem;
	line-height: 1.5;
	color: var(--1159-moss);
}

.role-list {
	list-style: none;
	margin-left: 0;
}

.role-list li {
	display: flex;
	align-items: center;
	padding: .4rem 0;
	border-bottom: 2px dashed var(--line);
}

.role-list b {
	font-weight: 700;
	text-transform: uppercase;
	color: var(--fg);
}

.dot {
	display: inline-block;
	width: .85em;
	height: .85em;
	margin-right: .6em;
	border: 2px solid var(--ink);
	box-shadow: 2px 2px 0 var(--ink);
}

/* ---------------- footer ---------------- */
footer {
	border-top: var(--bd);
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 1.4rem 1.2rem 3rem;
	color: var(--fg-faint);
	font-size: .72rem;
	text-transform: uppercase;
}

footer a {
	color: var(--fg-dim);
}

footer .copyright {
	margin: .4rem 0 0;
	font-size: .66rem;
}

/* ---------------- toast ---------------- */
.toast {
	position: fixed;
	left: 50%;
	bottom: 1.6rem;
	transform: translate(-50%, 8px);
	background: var(--fg);
	color: var(--1159-abyss);
	border: 3px solid var(--ink);
	box-shadow: var(--shadow-sm);
	padding: .55rem 1rem;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: .82rem;
	text-transform: uppercase;
	z-index: 99;
	pointer-events: none;
	opacity: 0;
	transition: transform .12s steps(3), opacity .12s steps(3);
}

.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ---------------- responsive ---------------- */
@media (max-width: 640px) {
	.nav {
		flex-direction: column;
		align-items: flex-start;
	}

	.nav nav {
		margin-top: .6rem;
	}

	.hero {
		padding-top: 2.5rem;
	}

	.scoop-grid {
		grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}