/* ~ 2023-04-29 ~
NEXT:
- Style top nav on sub-pages
- Fix colophon page
*/
@font-face {
	font-family: 'Akkurat Mono';
	src:
	url('/fonts/AkkuratMono-Regular.woff') format('woff'),
	url('/fonts/AkkuratMono-Regular.ttf') format('truetype'),
	url('/fonts/AkkuratMono-Regular.svg#AkkuratMonoRegular') format('svg');
}

:root {
	--fallback:   #FF3600;
	--link:       lch(60% 132 54 / 1); /*color(display-p3 1 0.26 0);*/
	--lite:       lch(60% 132 54 / 0.28);
	--liter:      lch(60% 132 54 / 0.22);
	--hover:      var(--link);
	--background: #fffcfa;
	--text:       #140800;
	--light:      #D8D6D5;
	--color:      #CC3000;
	--bright:     #DDFF00;
}
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
button,hr,input {
	overflow:visible
}
progress,sub,sup {
	vertical-align:baseline
}
[type=checkbox],[type=radio],legend {
	box-sizing:border-box;
	padding:0
}
html {
	margin: 0;
	padding: 0;
	line-height:1.15;
	-webkit-text-size-adjust:100%
}
body {
	margin: 0;
	padding: 0;
}
h1 {
	font-size:2em;
	margin:.67em 0
}
hr {
	box-sizing:content-box;
	height:0
}
code,kbd,pre,samp {
	font-family:'Akkurat Mono',monospace;
	font-size:1em
}
a {
	background-color:transparent
}
abbr[title] {
	border-bottom:none;
	text-decoration:underline;
	text-decoration:underline dotted
}
b,strong {
	font-weight:bolder
}
small {
	font-size:80%
}
.type-lg {
	font-size: 1.3333333333em;
}
sub,sup {
	font-size:75%;
	line-height:0;
	position:relative
}
sub {
	bottom:-.25em
}
sup {
	top:-.5em
}
img {
	border-style:none
}
button,input,optgroup,select,textarea {
	font-family:inherit;
	font-size:100%;
	line-height:1.15;
	margin:0
}
button,select {
	text-transform:none
}
[type=button],[type=reset],[type=submit],button {
	-webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
	border-style:none;
	padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
	outline:ButtonText dotted 1px
}
fieldset {
	padding:.35em .75em .625em
}
legend {
	color:inherit;
	display:table;
	max-width:100%;
	/* white-space:normal */
}
textarea {
	overflow:auto
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height:auto
}
[type=search] {
	-webkit-appearance:textfield;
	outline-offset:-2px
}
[type=search]::-webkit-search-decoration {
	-webkit-appearance:none
}
::-webkit-file-upload-button {
	-webkit-appearance:button;
	font:inherit
}
details {
	display:block
}
summary {
	display:list-item
}
[hidden],template {
	display:none
}
/* CONTENTS: 1. BASE STYLES 2. HEADER 3. BODY 4. FOOTER 5. BREAKPOINTS */

/* ~~~~~ 1. BASE STYLES ~~~~~ */

*,:after,:before {
	box-sizing:border-box!important
}
html,body {
	color: var(--text);
	font-size:100%;
}
html,html a {
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	text-shadow:1px 1px 1px rgba(0,0,0,.004)
}
body {
	background: var(--background);
	font-family:'Akkurat Mono', monospace;
	font-weight:500;
	line-height:1.3rem;
	margin: 8px;
}
ul {
	list-style-type: none;
	margin: 1em 0;
	padding: 0;
}
ul li {
	margin-block: 24px;
	padding: 0;
	font-size: 1.125rem;
}
ul li ul {
	margin: 0;
}
ul li ul li {
	margin-inline-end: 16px;
	line-height: 2;
	display: inline;
}


/* ~~~~~ LINKS ~~~~~ */

a:link,
a:visited {
	color:var(--fallback);
	color:var(--link);
	transition: all .3s ease-in-out;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25rem;
}
	a.button {
		padding: 3px 6px 1px 6px;
		margin: -3px -6px -1px -6px;
		border-radius: 4px;
		text-decoration:none
	}
	span.button {
		padding: 3px 6px 1px 6px;
		margin: -3px -6px -1px -6px;
		border-radius: 4px;
		text-decoration:none
	}
a:hover,
a:active {
	background:var(--hover);
	color:var(--text);
}

/* ~~~~~ TYPOGRAPHY ~~~~~ */

h1,h2,h3 {
	line-height: 1;
	margin: 0 0;
	padding: 0;
	color: var(--text);
}
h1 a { margin:0 !important; padding:0 !important; }
h1 a:hover,
h1 a:active {
	background:0 0;
}
	.content h1 {
		margin: 1em 0 1.5em 0;
		text-align: center;
	}
	.content > h1 > span {
		display: flex;
		align-items: center;
		justify-content: center;
		text-transform: uppercase;
		flex-wrap: wrap;
	}
	.dash {
		margin: -4px 6px 0 6px;
		width: 36px;
		height: 3px;
		background: var(--text);
		border-radius: 4px;
		display: inline-block;
	}

p {
	font-size: 1.125rem;
	line-height: 1;
	margin: 0;
}
	.prose p {
			margin-block-end: 1.3333333333em;
			line-height: 1.5;
		}
code {
	background:#fff5ef;
	display:block;
	font-size:.975rem;
	line-height:1.6;
	margin:8px 0 16px;
	word-break:break-all
}
code.inline {
	display:inline-block
}
p.small {
	font-size:1em
}
.spacer--0 {
	margin:0
}
h1 {
	font-size: clamp(1.875rem, 1.25rem + 2vw, 2.5rem) /* min 30, max 40 */
}
h2 {
	font-size: clamp(1.375rem, 1.125rem + 0.8vw, 1.625rem); /* min 22, max 26 */
}
h3 {
	font-size: clamp(1.125rem, 0.875rem + 0.8vw, 1.375rem); /* min 18, max 22 */
}
	.prose h1, .prose h2, .prose h3 {
		margin-block-start: 0;
		margin-block-end: 24px;
		line-height: 1.2;
	}
.hexFFFCFA {
	background: var(--background);
	display: block;
	padding: 4px
}
.hexFFF5EF {
	background: #FFF5EF;
	display: block;
	padding: 4px
}
.hexA6B4C2 {
	background:#A6B4C2;
	display: block;
	padding: 4px;
}
.hex4F5F6E {
	background:#4F5F6E;
	color: var(--background);
	display:block;
	padding:4px
}
.hexFA8335 {
	background:var(--fallback);
	background:var(--link);
	color: var(--background);
	display:block;
	padding:4px
}
.hex140800 {
	background: var(--text);
	color: var(--background);
	display:block;
	padding:4px
}

/* ~~~~~ 2. HEADER × NAVIGATION ~~~~~ */

header {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	margin-bottom: 1.5em;
	text-align: center;
}
	header .logo { text-align: center; }
	.logo a:link, .logo a:hover, .logo a:active, .logo a:visited { margin:0; padding:0; background: none; }

.logo-svg {
	fill: #4F5F6E;
	margin: .5em auto 1em auto;
	text-align: center;
	width: 64%;
}
	a:active .logo-svg,a:hover .logo-svg {
		fill: var(--lifallbacknk)
		fill: var(--link)
	}
nav {
	line-height: 2;
	text-align: center;
}
.menu a, .menu span.button {
	color: var(--fallback);
	color: var(--link);
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
}
	.menu span.button {
		color: var(--text);
		border: 2px solid var(--text);
		font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
		border-radius: 4px;
		margin-inline-end: 16px;
		padding: 5px 10px 3px 10px;
		white-space: nowrap;
	}
	.menu a.button {
		border: 2px solid var(--fallback);
		border: 2px solid var(--link);
		border-radius: 4px;
		margin: 0;
		padding: 5px 10px 3px 10px;
		white-space: nowrap;
	}
	article .menu { margin: 0; }
	article .menu a,
	article .menu span.button {
		font-size: 1.125em;
		line-height: 2;
	}
.menu a:hover {
	color: var(--text);
}
.menu .small a {
	font-size: 1rem;
}
.menu ul, .menu ul li {
	display: inline;
}
.menu li ul {
	margin-block: 8px;
	display: flex;
	flex-wrap: wrap;
	row-gap: 8px;
	column-gap: 16px;
}
.menu li ul li {
	margin: 0;
	line-height: 1.5;
}
.menu li ul a {
	line-height: 1.5;
}
.menu .dash {
	margin: 0 3px 6px 3px !important;
}
li:has(ul) {
	display: block !important;
}
.h-6 {
	height: 12px;
}
.w-6 {
	width:  12px;
}


.nudge-x {
	margin:0 3px;
}

/* 3. BODY */
.column {
	grid-column:span 1
}

/* ~~~~~ HOMEPAGE ~~~~~ */
body.home article {
	display:grid;
	grid-template-columns:1fr
}
.headline {
	display: grid;
	align-items: center;
	margin-block-end: 32px;
}
	.headline h2 {
		margin: 0;
		line-height: 1;
	}
	.intro {
	border-left:4px solid var(--fallback);
	border-left:4px solid var(--link);
	padding:0 0 0 8px;
	margin-block: 8px;
}
.categories {
	column-count: 0;
	column-gap: 0;
}
.order--1 {
	order:2
}
.order--2 {
	order:1
}
/* ~~~~~ PAGE HEADLINE ~~~~~ */
/* ~~~~~ PAGE CONTENTS ~~~~~ */
article {
	display: grid;
	grid-gap: 8px;
	grid-template-columns:repeat(2,1fr);
	margin: 0 0;
}
.gap--16 {
	grid-gap:16px
}
.gap--24 {
	grid-gap:24px
}
.gap--32 {
	grid-gap:32px
}
.gap--40 {
	grid-gap:40px
}
.gap--48 {
	grid-gap:48px
}
.col-2 {
	grid-template-columns:1fr
}
.col-3,.col-4,.col-5,.col-6 {
	grid: template columns:repeat(2,1fr)
}
.col-5 .item {
	max-height:350px
}
.item {
	border-top: 2px solid var(--fallback);
	border-top: 2px solid var(--link);
	margin: 0 0 8px;
	max-height:800px;
	overflow:hidden;
	padding: 4px 0 0;
	transition:all .2s ease-in-out
}
.item img {
	width:100%
}
.item a:hover {
	background:0 0
}
.shim {
	display:none
}
/* ~~~~~ LIGHTBOX MARKUP ~~~~~ */
.thumbnail {
	max-width:40%
}
.lightbox {
	display:none;
	left:0;
	position:fixed;
	text-align:center;
	top:0;
	width:100%;
	min-height:100vh;
	height:100%;
	z-index:999;
}
.lightbox img {
	border-radius: 4px;
	margin-top:32px;
	margin-bottom:32px;
	max-width:80%;
	height:auto;
}
.lightbox:target {
	border-radius: 0;
	background: var(--text);
	outline:0;
	display:grid;
	align-items:top;
	justify-items:center;
	overflow:scroll;
}
.overlay {
	display:none;
	font-size: clamp(1rem, 0rem + 3.2vw, 2rem);
}
.overlay:target {
	left: 0;
	position: fixed;
	text-align: left;
	top: 0;
	width: 100%;
	min-height: 100vh;
	height: 100%;
	z-index: 999;
	background: var(--background);
	outline: 0;
	display: grid;
	/* margin: -12px; */
	padding: 2em;
	/* align-items: top; */
	/* justify-items: center; */
	overflow: scroll;
	width: 100vw;
}
/* 4. FOOTER */
footer {
	border-top:4px solid var(--fallback);
	border-top:4px solid var(--link);
	display:grid;
	grid-template-columns:1fr;
	margin-top:32px;
	padding:8px 0 16px
}
footer nav {
	margin:0;
	text-align: center;
}
footer div {
	align-content:center;
	display:grid;
	grid-column:span 1;
	line-height:1;
	margin:32px 0;
	padding:0;
	text-align:center
}
footer .logo-svg {
	margin: 0;
	width:33%
}
footer nav {
	align-content:center;
	color:#A6B4C2;
	display:grid;
	grid-column:span 1;
	min-height:100px
}
footer .info {
	text-align:center
}
/* 5. BREAKPOINTS (544 SM, 768 MD, 1012 LG, 1280 XL) */
@media (min-width: 544px) {
	.intro {
		border-left:4px solid var(--fallback);
		border-left:4px solid var(--link);
		border-top:none;
		padding:0 0 0 24px;
	}
	.column {
		grid-column:span 1
	}
	@supports (display: grid) {
	}
}
@media (min-width: 768px) {
	@supports (display: grid) {
	}
}
@media (max-width: 1011px) {
	@supports (display: grid) {
	}
}

/* ~~~~~ DESKTOP VIEW ~~~~~ */

@media (min-width: 1012px) {
	/* HEADER */
	header {
		display:grid;
		grid-template-columns:250px 1fr;
		min-height:100px;
		margin-bottom: 0;
		text-align: left;
	}
	header .logo {
		text-align: left;
	}
	.logo { line-height: 1; }
	.logo-svg {
		text-align: left;
		margin: 0;
		width: 88%;
	}
	nav { text-align: left; }
	/* BODY */
	body {
		margin:32px 40px;
	}
	.intro {
		border-left:4px solid var(--fallback);
		border-left:4px solid var(--link);
		border-top:none;
		padding:0 0 0 24px;
		margin-block: 32px;
	}
	.item:hover {
		padding-top:0;
		transform:scale(1.15);
		z-index:10
	}
	article {
		display:grid;
		grid-gap:8px;
		grid-template-columns:repeat(4,1fr);
	}
	.col-1 {
		grid-template-columns:repeat(1,1fr)
	}
	.col-2 {
		grid-template-columns:repeat(2,1fr)
	}
	.col-3 {
		grid-template-columns:repeat(3,1fr)
	}
	.col-4 {
		grid-template-columns:repeat(4,1fr)
	}
	.col-5 {
		grid-template-columns:repeat(5,1fr)
	}
	.col-6 {
		grid-template-columns:repeat(6,1fr)
	}
	body.home article {
		display:grid;
		grid-template-columns:repeat(2,1fr)
	}
	.content > h1 > span {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		text-transform: uppercase;

	}

	.categories {
		column-count: 2;
		column-gap: 40px;
	}
	.order--1 {
		order: 1;
	}
	.order--2 {
		order: 2;
	}
	.inner {
		padding: 0 16px;
	}
	/* FOOTER */
	footer {
		display:grid;
		grid-template-columns:1fr 250px;
	}
	footer nav { 		justify-content: start;
	}
	footer div {
		margin:0;
		text-align:right
	}
	/*footer nav {
		grid-column:span 1
	}
*/
	footer .logo-svg {
		line-height: 1;
		margin: 0;
		width: 64%;
	}
	footer .info {
		text-align:left
	}
	.shim {
		display:block
	}
	@supports (display: grid) { }
}
@media (min-width: 1280px) {  }