/* 13K brand tokens — mirrored from 13k.co.za/CLAUDE.md */
:root {
	--k-accent: #c8f060;
	--k-ink: #0d0d0d;
	--k-light: #f5f4f0;
	--k-grey: #6b6b6b;
	--k-line: #dedcd6;
	--k-radius: 4px;
	--k-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--k-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--k-light);
	color: var(--k-ink);
	font-family: var(--k-font);
	line-height: 1.5;
	font-size: 16px;
}

.wrap {
	max-width: 40rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

header.site {
	background: var(--k-ink);
	padding: 1.25rem;
}

header.site a {
	display: flex;
	align-items: center;
	gap: .625rem;
	max-width: 40rem;
	margin: 0 auto;
	text-decoration: none;
	color: var(--k-light);
}

header.site img { height: 1.125rem; width: auto; display: block; }

header.site span {
	font-family: var(--k-mono);
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--k-grey);
}

.code {
	font-family: var(--k-mono);
	font-size: .8125rem;
	letter-spacing: .08em;
	color: var(--k-grey);
}

h1 {
	font-size: 1.75rem;
	line-height: 1.2;
	margin: .5rem 0 1.5rem;
	font-weight: 600;
}

.card {
	background: #fff;
	border: 1px solid var(--k-line);
	border-radius: var(--k-radius);
	padding: 1.25rem;
}

dl { margin: 0; display: grid; grid-template-columns: 9rem 1fr; gap: .75rem 1rem; }

dt {
	font-family: var(--k-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--k-grey);
	padding-top: .1875rem;
}

dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 30rem) {
	dl { grid-template-columns: 1fr; gap: .25rem; }
	dd { margin-bottom: .75rem; }
}

.note { color: var(--k-grey); font-size: .875rem; margin-top: 1.5rem; }

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

.list li { border-bottom: 1px solid var(--k-line); }

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

.list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: .875rem 0;
	text-decoration: none;
	color: var(--k-ink);
}

.list a:hover { color: var(--k-grey); }

.pill {
	display: inline-block;
	background: var(--k-accent);
	color: var(--k-ink);
	font-family: var(--k-mono);
	font-size: .6875rem;
	letter-spacing: .1em;
	padding: .1875rem .5rem;
	border-radius: 999px;
}

footer.site {
	max-width: 40rem;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 3rem;
	color: var(--k-grey);
	font-size: .8125rem;
}