/* dfd.alftech.space — the front door to the courses.
   A reader arrives asking "is there anything here worth my evening", so the
   page leads with what exists and what is broken, and the numbers sit in a
   table rather than in prose. Same palette as the rest of the sites:
   near-black, paper, one amber accent. No fonts are fetched, no script runs. */
:root {
	--ink: #111111;
	--paper: #FAF8F4;
	--amber: #FFCF51;
	--muted: #6E6A63;
	--line: #E3DFD6;
	--card: #FFFFFF;
	--shot: #F1EEE7;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink: #F2EFE9; --paper: #131211; --amber: #FFCF51;
		--muted: #9C978D; --line: #2C2A26; --card: #1B1A17; --shot: #201F1B;
	}
}
* { box-sizing: border-box; }
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 0 22px 80px; }

.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 22px 0; flex-wrap: wrap; }
.top .who { font-weight: 700; letter-spacing: -0.02em; }
.top .note { font-size: 13.5px; color: var(--muted); }

header { padding: 26px 0 8px; }
h1 {
	font-size: clamp(31px, 5.2vw, 50px); line-height: 1.05; margin: 0 0 20px;
	letter-spacing: -0.035em; font-weight: 700; max-width: 18ch;
}
h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--amber) 62%); padding: 0 2px; }
/* On paper the amber band sits behind dark text and reads fine. On a dark
   background the text is light, so the band is pulled down to an underline
   instead of running through the letters. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) h1 em {
		background: linear-gradient(transparent 86%, var(--amber) 86%);
	}
}
header p { max-width: 64ch; margin: 0 0 14px; }
header p.lead { font-size: 19px; }
header p:not(.lead) { color: var(--muted); font-size: 16px; }
.access {
	border-left: 3px solid var(--amber); padding: 2px 0 2px 14px;
	margin-top: 20px !important;
}

h2 {
	font-size: 13px; text-transform: uppercase; letter-spacing: 0.11em;
	color: var(--muted); font-weight: 600; margin: 54px 0 20px;
	padding-bottom: 9px; border-bottom: 2px solid var(--ink);
}

article.course {
	background: var(--card); border: 1px solid var(--line); border-radius: 10px;
	padding: 22px 24px 24px; margin-bottom: 26px;
}
article.course > p { margin: 0 0 18px; color: var(--muted); font-size: 16px; max-width: 66ch; }
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
h3 { font-size: 23px; font-weight: 650; letter-spacing: -0.025em; margin: 0; }
.pill {
	font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--muted); border: 1px solid var(--line); border-radius: 999px;
	padding: 4px 11px; white-space: nowrap;
}
h4 {
	font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.09em;
	color: var(--muted); font-weight: 600; margin: 24px 0 10px;
}

/* The counts are the point of the page, so they get a table and not a
   sentence — a reader can compare them without parsing prose. */
dl.counts { margin: 0; border-top: 1px solid var(--line); }
dl.counts > div {
	display: grid; grid-template-columns: 220px 1fr; gap: 6px 16px;
	padding: 8px 0; border-bottom: 1px solid var(--line);
}
dl.counts dt { color: var(--muted); font-size: 15px; }
dl.counts dd { margin: 0; font-size: 15px; font-variant-numeric: tabular-nums; }

ul.defects { margin: 0; padding-left: 20px; }
ul.defects li { margin-bottom: 11px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
ul.defects strong { color: var(--ink); font-weight: 600; }
ul.defects li::marker { color: var(--amber); }

pre {
	background: var(--shot); border: 1px solid var(--line); border-radius: 8px;
	padding: 14px 16px; overflow-x: auto; margin: 0 0 12px;
}
pre code { font-size: 13px; line-height: 1.5; }
code {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13.5px;
}
p code { background: var(--shot); padding: 1px 5px; border-radius: 4px; }

p.foot { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }
p.repo { font-size: 14.5px; color: var(--muted); margin: 0; word-break: break-word; }
a { color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 3px; }

.wrap > p { color: var(--muted); font-size: 16px; max-width: 66ch; margin: 0 0 14px; }

footer { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
footer p { margin: 0 0 8px; max-width: 66ch; }
footer .small { font-size: 13.5px; }

@media (max-width: 560px) {
	.wrap { padding: 0 16px 60px; }
	article.course { padding: 18px 16px 20px; }
	dl.counts > div { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
	dl.counts dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
	pre code { font-size: 12px; }
}