@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/plus-jakarta-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --pico-font-family-base: 'Plus Jakarta Sans', sans-serif;
  --pico-font-weight-headings: 700; 
}

body {
  font-family: var(--pico-font-family-base);
  word-spacing: 0.05em;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

body > nav, 
body > main, 
body > footer {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

body > main {
    margin-bottom: 0;
}

strong, b {
  font-weight: 600;
}

main > section:last-of-type > ul {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

main > section:last-of-type > ul > li {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: baseline;
	gap: 1.5rem;
	margin-bottom: 0.75rem;
}

main > section:last-of-type > ul > li time {
	font-family: var(--pico-font-family-monospace);
	color: var(--pico-muted-color);
	font-size: 0.9rem;
	white-space: nowrap;
}

main > section:last-of-type > ul > li a {
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease;
}

main > section:last-of-type > ul > li a:hover {
	text-decoration: underline;
	color: var(--pico-primary-hover);
}

main > section:last-of-type > nav {
	margin-top: 1rem;
	margin-bottom: 0;
}

main > section > header time {
    font-family: var(--pico-font-family-monospace);
    color: var(--pico-muted-color);
    font-size: 0.9rem;
}

nav a.brand {
	text-decoration: none;
	color: inherit;
}

section {
	margin-bottom: 0;
}

hr {
	margin: 1.5rem 0;
}

footer {
    padding-top: 0;
    margin-top: 0;
    text-align: left;
}

footer p {
	margin-bottom: 0;
}

footer small {
	line-height: 1.2;
	display: block;
}

footer small > div:first-of-type span {
    display: inline-block;
}

footer small > div:first-of-type span:first-child::after {
    content: "|";
    margin: 0 0.5rem;
    color: var(--pico-muted-color);
}

@media (max-width: 600px) {
	footer {
		text-align: center;
	}

	footer small > div:first-of-type span {
        display: block;
        margin-bottom: 0.15rem;
    }
    
	footer small > div:first-of-type span:first-child::after {
        content: none;
    }    

    main > section:last-of-type > ul > li {
		grid-template-columns: 1fr;
		gap: 0.25rem;
		margin-bottom: 1.25rem;
	}

	main > section:last-of-type > ul > li time {
		font-size: 0.8rem;
	}
}