/* 
	Standards
	(Shared by most projects.)
*/

/* For browsers that don't recognize HTML5 tags. */
article, aside, figure, figcaption, footer, header, main, nav, section, summary  {
	display: block;
}

html {
	/* Fixes the bizarre default behavior of boxes in CSS. */
	box-sizing: border-box;
	/* When clicking links to anchors, automatically animates scrolling to new position. */
	scroll-behavior: smooth;
}
  
*, *:before, *:after {
	box-sizing: inherit;
}

a {
	/* Removes default link styling */
	color: inherit;
	text-decoration: none;
}

a, button, h1, h2, h3, h4, h5, h6, p, figure, figcaption, div, body, ul {
	margin: 0;
	padding: 0;
}

ul {
	list-style-type: none;
}

/* Used to disable transitions on initial page load. */
.preload * {
	transition: none !important;
}

/*
	Forms
*/

form input, textarea, button {
	border: none;
}

span.avoidwrap { 
	display:inline-block; 
}

/* 
	Fonts 
*/

/* Gives us consistent font weights on Firefox and Safari. */
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Fixes an issue where Firefox applies a "faux bold" effect to fonts. */
a, h1, h2, h3, h4, h5, h6, p, b, i, figcaption, li {
	font-weight: normal;
}

/* Aspect ratio */

div.square-content {
	position: relative;
	width: 100%;
}

div.square-content::after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

div.square-content img {
	position: absolute;
	width: 100%;
	height: 100%;
}

/*  Site nav */

nav#site {
	position: sticky;
	top: 0px;
	width: 100%;
	padding: 1.714em 0 0.286em;
	z-index: 5;
	
	font-family: 'Circular-Bold';
	font-size: 0.75em;
	background-color: rgba(243, 243, 243, 0.5);
	backdrop-filter: blur(3px);
}

nav#site.staging {
	background: repeating-linear-gradient(
		45deg,
		rgba(50, 50, 50, 0),
		rgba(50, 50, 50, 0) 20px,
		rgba(50, 50, 50, 0.2) 20px,
		rgba(50, 50, 50, 0.2) 40px
	);
}

nav#site > ul {
	width: var(--main-column-width);
	margin: 0 var(--main-column-margin-x);
	
	display: flex;
	justify-content: flex-end;
}

nav#site > ul > li {
	margin-left: 50px;
}

nav#site a {
	color: black;
}

nav#site a:hover {
	color: darkcyan;
}

body.designs nav#site a#designs,
body.writes nav#site a#writes,
body.makes nav#site a#makes {
	color: var(--primary-accent-color);
}

body.designs nav#site a#designs:hover,
body.writes nav#site a#writes:hover,
body.makes nav#site a#makes:hover {
	color: darkcyan;
}

/* Footer */

footer#site {
	background-color: white;
	height: 200px;
	padding: 0 calc((100vw - 1480px) / 2);
	
	display: grid;
	grid-template-columns: 111px 1fr;
	grid-template-rows: 118px 1fr;
	grid-template-areas:	"ort 		links"
						"copyright 	copyright";
	align-items: center;
}

footer#site img {
	display: block;
}

footer#site a#ort {
	grid-area: ort;
	display: block;
}

footer#site a#ort img {
	width: 100%;
	height: auto;
}

footer#site p#copyright {
	grid-area: copyright;
	font-size: 0.536em;
}

footer#site ul#links {
	grid-area: links;
	display: flex;
	justify-content: flex-end;
}

footer#site ul#links li {
	margin-left: 50px;
}

footer#site ul#links a {
	text-decoration: underline;
	font-size: 0.75em;
}

footer#site ul#links img {
	display: none;
}

footer#site ul#links p {
	display: block;
}

/*  Global site styles */

body {
	font-size: 28px;
	color: #323232;
	background-color: #f3f3f3;
	font-family: 'Harriet-Regular';
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	
	--primary-accent-color: #e87979;
	--main-column-width: 1480px;
	--main-column-margin-x: auto;
}

body.no-scroll {
	overflow-y: hidden;	
}

main {
	width: var(--main-column-width);
	margin: 0 var(--main-column-margin-x);
	padding-top: 150px;
	font-size: 1em;
	min-height: calc(100vh - 72px);
}

h1.headline {
	font-family: 'Harriet-Light';
	font-size: 2.5em;
	line-height: 1.09em;
}

h1.headline b {
	font-family: 'Harriet-Medium';
}

/* Sentence nav */

nav#sentence h1.headline, 
nav#sentence h1.headline a.home-page {
	font-family: 'Harriet-Light';
	font-style: normal;
}

nav#sentence h1.headline a {
	font-family: 'Harriet-Light-Italic';
	font-style: italic;
}

nav#sentence h1.headline a:hover {
	color: var(--primary-accent-color);
}

/*  Section index and categories nav */

nav#section-index, 
nav#category {
	margin: 130px 0 55px;
}

nav#section-index ul, 
nav#category ul {
	display: flex;
	flex-flow: row wrap;
}

nav#section-index ul li, 
nav#category ul li {
	margin-right: 50px;
}

nav#section-index a,
nav#category a {
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	font-size: 0.86em;
}

body.post article a,
article section.body a {
	text-decoration: underline;
}

a.strike {
	position: relative;
	display: inline-block;
}

a.strike::before {
	content: '';
	border-bottom: 2px solid var(--primary-accent-color);
	width: 100%;
	position: absolute;
	right: 0;
	top: calc(50% - 1px);
}

/* Responsive */

@media (min-width: 1440px) and (max-width: 1880px) {
	
	body {
		--main-column-width: calc(100vw - 400px);
	}
		
	footer#site {
		padding: 0 200px;
	}	
}

@media (min-width: 1440px) and (max-width: 1749px) {
	
	body {
		font-size: calc(24px + (28 - 24) * (100vw - 1440px) / (1750 - 1440));
	}
}

@media (min-width: 1340px) and (max-width: 1439px) {
	
	body {
		--main-column-width: 1040px;
	}

	footer#site {
		padding: 0 calc((100vw - 1040px) / 2);
	}	
}

@media (min-width: 1024px) and (max-width: 1339px) {
	
	body {
		--main-column-width: calc(100vw - 300px);
	}
	
	footer#site {		
		height: 144px;
		padding: 0 150px;
		grid-template-columns: 94px 1fr;
		grid-template-rows: 92px 1fr;
	}	
}

@media (min-width: 1024px) and (max-width: 1439px) {
	
	body {
		font-size: calc(21px + (24 - 21) * (100vw - 1024px) / (1440 - 1024));
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	
	body {
		font-size: 21px;
	}
	
	footer#site {		
		height: 144px;
	}
}

@media (min-width: 924px) and (max-width: 1023px) {

	body {
		--main-column-width: 724px;
	}
	
	footer#site {
		padding: 0 30px;
	}	
}

@media (min-width: 768px) and (max-width: 923px) {
	
	body {
		--main-column-width: calc(100vw - 200px);
	}

	footer#site {
		padding: 0 30px;
	}	
}

@media (min-width: 768px) and (max-width: 1339px) {

	main {
		padding-top: 120px;
	}	
	
	nav#section-index, 
	nav#category {
		margin: 54px 0;
	}
}

@media (max-width: 767px) {

	body {
		font-size: 21px;
		--main-column-width: calc(100vw - 60px);
	}

	nav#site > ul {
		justify-content: space-between;
	}
	
	nav#site > ul > li {
		margin-left: 0px;
	}

	main {
		margin: 54px var(--main-column-margin-x) 0;
		padding-top: 0;
	}

	h1.headline {
		font-size: 2.0em;
		line-height: 1.2em;
	}
	
	footer#site {
		padding: 0 30px;
		height: 144px;
		grid-template-columns: 93px 1fr;
		grid-template-rows: 92px 1fr;
	}
	
	footer#site ul#links li {
		margin-left: 25px;
	}
	
	footer#site ul#links img {
		display: block;
		width: 32px;
		height: auto;
	}
	
	footer#site ul#links p {
		display: none;
	}
	
	nav#section-index, 
	nav#category {
		margin: 27px 0 24px;
	}

	nav#section-index ul li, 
	nav#category ul li {
		margin: 0 20px 19px 0;
	}
}

@media (max-width: 380px) {
	body {
		--main-column-width: 320px;
	}	
}