/* ─────────────────────────────────────────────────────────────
   Design tokens
   ───────────────────────────────────────────────────────────── */
:root {
	/* Palette – deep ink on warm parchment */
	--ink: #1a1a2e;
	--ink-muted: #4a4a6a;
	--parchment: #faf8f4;
	--surface: #ffffff;
	--surface-2: #f4f2ee;

	/* Accent colours (one warm, one cool) */
	--accent-warm: #c0392b;
	--accent-cool: #2563eb;
	--accent-green: #166534;
	--accent-gold: #92400e;

	/* Heading band colours – muted, harmonious */
	--h1-bg: #dde5ff;
	--h2-bg: #d1fae5;
	--h3-bg: #ede9fe;
	--h4-bg: #dcfce7;
	--h5-bg: #ecfccb;

	/* Semantic colours */
	--border: #d1cfc8;
	--border-strong: #9ca3af;
	--code-bg: #f8f7f4;
	--req-bg: #f0fdf4;
	--req-border: #16a34a;
	--remark-bg: #eff6ff;
	--remark-border: #bfdbfe;
	--bottom-bg: #fefce8;

	/* Typography */
	--font-serif: 'EB Garamond', 'Georgia', 'Times New Roman', serif;
	--font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
	--font-sans: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

	/* Spacing scale */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--radius-xl: 22px;

	/* Transitions */
	--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─────────────────────────────────────────────────────────────
   Google Fonts import
   ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────────────────────────────────────────────────────────
   Reset & base
   ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-serif);
	font-size: 1rem;
	/* ~16 px; scale with rem everywhere */
	line-height: 1.75;
	color: var(--ink);
	background-color: var(--parchment);
	margin: 0 auto;
	max-width: 900px;
	padding: 2rem 2.5rem;
}

/* ─────────────────────────────────────────────────────────────
   Links
   ───────────────────────────────────────────────────────────── */
a:link,
a:visited {
	color: var(--accent-cool);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--accent-cool) 40%, transparent);
	text-underline-offset: 3px;
	transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

a:hover,
a:focus {
	color: color-mix(in srgb, var(--accent-cool) 70%, var(--ink));
	text-decoration-color: var(--accent-cool);
	outline: none;
}

/* ─────────────────────────────────────────────────────────────
   Horizontal rule
   ───────────────────────────────────────────────────────────── */
hr {
	clear: both;
	border: none;
	border-top: 1px solid var(--border);
	margin: 2rem 0;
}

/* ─────────────────────────────────────────────────────────────
   Layout containers
   ───────────────────────────────────────────────────────────── */
div.top {
	width: 80%;
}

div.bottom {
	width: 60%;
	background-color: var(--bottom-bg);
	border: 1px solid color-mix(in srgb, var(--border) 80%, #ca8a04 20%);
	border-radius: var(--radius-lg);
	margin-top: 3em;
	margin-left: 0.5em;
	padding: 1.25rem 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

div.body {
	font-size: 1rem;
}

div.wrapdesc {
	width: 90%;
	margin: 0 auto;
}

div.imagedesc {
	width: 85%;
	margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────
   Special inline elements
   ───────────────────────────────────────────────────────────── */

/* #i — emphasis / warning colour */
#i {
	color: var(--accent-warm);
}

/* tt — monospace reference */
tt {
	font-family: var(--font-mono);
	font-size: 0.875em;
	color: var(--accent-green);
	background-color: color-mix(in srgb, var(--accent-green) 7%, transparent);
	padding: 0.1em 0.3em;
	border-radius: var(--radius-sm);
}

/* em — bold callout */
em {
	font-family: var(--font-sans);
	font-size: 1em;
	font-weight: 600;
	font-style: normal;
	color: var(--accent-cool);
	border: 1.5px solid color-mix(in srgb, var(--accent-cool) 30%, transparent);
	border-radius: var(--radius-sm);
	padding: 0.05em 0.35em;
	background-color: color-mix(in srgb, var(--accent-cool) 5%, transparent);
}

/* bc — bold code-like term */
bc {
	font-family: var(--font-mono);
	font-size: 0.875em;
	font-weight: 600;
	color: var(--accent-gold);
	background-color: #fef9c3;
	padding: 0.1em 0.35em;
	border-radius: var(--radius-sm);
}

/* ks — keyword (blue) */
ks {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--accent-cool);
	font-size: 0.875em;
}

/* kc — keyword (green) */
kc {
	font-family: var(--font-mono);
	font-weight: 600;
	color: var(--accent-green);
	font-size: 0.875em;
}

/* ─────────────────────────────────────────────────────────────
   Code block
   ───────────────────────────────────────────────────────────── */
pre {
	font-family: var(--font-mono);
	font-size: 0.825em;
	line-height: 1.6;
	background-color: var(--code-bg);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent-cool);
	border-radius: var(--radius-md);
	padding: 1rem 1.25rem;
	overflow-x: auto;
	tab-size: 2;
}

/* ─────────────────────────────────────────────────────────────
   Headings
   ───────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5 {
	font-family: var(--font-sans);
	line-height: 1.3;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

h1 {
	font-size: 1.55em;
	font-weight: 600;
	background-color: var(--h1-bg);
	color: var(--ink);
	padding: 0.55em 1em;
	border-radius: var(--radius-md);
	letter-spacing: -0.01em;
}

h2 {
	font-size: 1.05em;
	font-weight: 600;
	background-color: var(--h2-bg);
	color: #14532d;
	border: 1px solid #bbf7d0;
	border-radius: var(--radius-lg);
	padding: 0.35em 0.9em;
	display: inline-block;
}

h3 {
	font-size: 1em;
	font-weight: 600;
	background-color: var(--h3-bg);
	color: #4c1d95;
	border-radius: var(--radius-sm);
	padding: 0.3em 0.75em;
}

h4 {
	font-size: 1em;
	font-weight: 600;
	background-color: var(--h4-bg);
	color: #166534;
	width: 95%;
	border-radius: var(--radius-md);
	padding: 0.3em 0.75em;
}

h5 {
	font-size: 1em;
	font-weight: 500;
	background-color: var(--h5-bg);
	color: #365314;
	border-radius: var(--radius-sm);
	padding: 0.25em 0.65em;
}

/* ─────────────────────────────────────────────────────────────
   Callout boxes
   ───────────────────────────────────────────────────────────── */
div.req {
	background-color: var(--req-bg);
	font-size: 1rem;
	max-width: 700px;
	border: 2px solid var(--req-border);
	border-radius: var(--radius-lg);
	padding: 1.1rem 1.4rem;
	margin: 1.25rem 0.5rem;
	box-shadow: 0 2px 10px rgba(22, 163, 74, 0.08);
}

div.remark {
	background-color: var(--remark-bg);
	border: 1.5px solid var(--remark-border);
	border-radius: var(--radius-xl);
	padding: 1.1rem 1.4rem;
	margin: 1.25rem 0.5rem;
	box-shadow: 0 2px 10px rgba(37, 99, 235, 0.07);
}

/* ─────────────────────────────────────────────────────────────
   Tables
   ───────────────────────────────────────────────────────────── */
table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.9em;
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--border-strong);
	margin: 1rem 0;
}

th {
	background-color: var(--h1-bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-weight: 600;
	padding: 0.55em 1em;
	text-align: left;
	border: 1px solid var(--border-strong);
}

td {
	padding: 0.45em 1em;
	border: 1px solid var(--border);
}

tr:nth-child(even) td {
	background-color: var(--surface-2);
}

/* ─────────────────────────────────────────────────────────────
   Lists
   ───────────────────────────────────────────────────────────── */
ol,
ul {
	margin: 0.5rem 0;
	padding-left: 1.6rem;
}

li {
	padding-bottom: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────
   Images
   ───────────────────────────────────────────────────────────── */
img {
	border: 1.5px solid var(--remark-border);
	border-radius: var(--radius-md);
	max-width: 100%;
	height: auto;
	display: block;
}