* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	max-width: 948px;
	margin: 0 auto;
	padding: 48px 24px 48px 24px;
	background: #c8bfb8;
	color: #241e1a;
}

body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0 -12px;
	padding: 0;
	font-family: "Times New Roman", "Times", serif;
	font-size: 17px;
	line-height: 24px;
}

nav, ul.cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0 -12px;
	padding: 0 12px;
}

section, aside, figure, footer, h1, h2, header, hr, main, nav ul, p.subtitle, p.more, p.pagination, ul.cards li {
	order: 0;
	flex: 0 0 auto;
	align-self: auto;
	padding: 0 12px;
}

.col25, aside, nav ul, p.pagination {width: 25%;}

.col25p {width: 25%;margin-left: 25%;}

.col33 {width: 33%;}

.col50, footer, header, main, p.subtitle, p.more {width: 50%;}

.col50p {width: 50%;margin-left: 25%;}

.col75p, footer, header, main, figure.tall {margin-left: 25%;}

.col66 {width: 66%;}

.col75, .col75p, h1, h2, hr, figure.tall {width: 75%;}

.col100, figure, nav {width: 100%;}

nav ul {padding: 0;}

nav ul:nth-child(2) {
	margin-bottom: 0;
}

nav ul:nth-child(3) {
	margin-left: 25%;
	padding-left: 18px;
}

nav ul.logo {
	margin: 0px 18px 0 0;
	padding: 0 0px 0 0;
}

nav ul.logo img {
	width: 80px;
	float: right;
}

/*nav ul:last-child {width: 20%;}*/

nav ul li {
	margin-bottom: 6px;
}

nav ul li:last-child, .no-bottom {
	margin-bottom: 0;
}

nav ul li a:hover:after, ul li.here a:after {
	content: "✸";
	position: absolute;
	padding-left: 6px;
	margin-top: 1px;
}

nav ul li h1 a:hover:after {content: none;}

section, section p, aside, figure, footer p, header, header p, hr, main, main p, main ul, aside p, nav ul, ul.cards li, aside ul, ol {margin-bottom: 24px;}

section p:last-child, footer p:last-child, header p:last-child, main p:last-child, main ul:last-child, aside ul:last-child, aside p:last-child {margin-bottom: 0;}

hr {
	display: block;
	order: 0;
	flex: 0 0 auto;
	align-self: auto;
	content: " ";
	background-image: url(../img/cross.svg);
	background-size: 24px 24px;
	background-position: 12px 0;
	background-repeat: no-repeat;
	width: 75%;
	height: 24px;
	margin: 24px auto 48px 25%;
	border: none;
	z-index: 10;
}

main hr {
	background-position: 0 0;
	width: 100%;
	margin: 36px auto 48px 0%;
}

/* title font */
@font-face {
 	font-family: 'Basteleur';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/basteleur-bold.woff2) format('woff2');
}

h1, h2 {
	font-family: "Basteleur", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
	text-transform: uppercase;
}

h3 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 900;
}

h1, h2 {
	font-size: 32px;
	line-height: 36px;
	margin: 0 0 24px 25%;
}

nav h1 {
	font-size: 42px;
	line-height: 45px;
	margin: 0px 0 24px -15px;
}

nav h1 a {text-decoration: none;}

h3 {
	font-size: 18px;
	margin: 0 0 12px 0;
}

aside h3:first-of-type, section h3:first-of-type { border-top: 1px solid; padding-top: 5px; }

p.subtitle {
	margin: 0 0 0px 25%; 
	font-family: Courier, monospace; 
	font-size: 14px;
}

p.more, p.pagination {margin: 0 0 24px 25%;}

p.pagination a:after {content: " ↑";}

p.pagination + p.pagination {margin: 0 0 24px 0%;}

p.more a:after, p.pagination + p.pagination a:after {content: " ↓";}

a {color: #241e1a; }

a:hover {text-decoration: none;}

p.more a, p.pagination a, a.blocklink, a.blocklinknull {
    display: block;
    color: #c8bfb8;
    background: #241e1a;
    border: 1px solid #241e1a;
    padding: 12px;
    margin: 6px 0;
    border-radius: 5px;
    text-decoration: none;
}

p.more a:hover, p.pagination a:hover, a.blocklink:hover, a.blocklinknull {
    color: #241e1a !important;
    background: transparent;
    border: 1px solid #241e1a;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul li {margin: 0 0 12px 0;}

ul li:last-child, ol li:last-child {margin-bottom: 0;}

ul.cards li:last-child {margin-bottom: 24px;}

ol li {margin: 0 0 12px 18px;}

ol li ol {margin-top: 12px; list-style-type: lower-latin;}

main ul.cards li::before {
	content: none;
}

main ul.cards {
	padding: 0;
}

main p.more {
	width: 100%;
	margin: 0 0 24px 0;
	padding: 0;
}

main p.more:last-child {
	margin-bottom: 0;
}

img {
	max-width: 100%;
}

sup {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
 }

figure { text-align: center;}

footer a.cc {
	padding-left: 20px;
	background-image: url(../img/cc.svg);
	background-size: 14px 14px;
	background-position: 0 2px;
	background-repeat: no-repeat;
}

footer a.rss {
	padding-left: 20px;
	background-image: url(../img/rss.svg);
	background-size: 12px 12px;
	background-position: 1px 3px;
	background-repeat: no-repeat;
}

footer a.merveilles {
	padding-left: 20px;
	background-image: url(../img/merveilles.svg);
	background-size: 14px 14px;
	background-position: 0 2px;
	background-repeat: no-repeat;
}

/* latin-ext */
@font-face {
  font-family: 'Charm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/charm-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Charm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/charm-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html.white {background: #f3e9e1;}
html.white ul li.listing a {background: #f3e9e1;}
html.white ul li.listing span {background: #f3e9e1;}
html.white p.more a, html.white p.pagination a, html.white a.blocklink, html.white a.blocklinknull {color: #f3e9e1;}

html.black {background: #241e1a; color: #f3e9e1;}
html.black hr {background-image: url(../img/cross-black.svg);}
html.black a {color: #f3e9e1;}
html.black ul li.listing a, html.black ul li.listing span {background: #241e1a;}
html.black p.more a, html.black p.pagination a, html.black a.blocklink, html.black a.blocklinknull {color: #241e1a; background: #f3e9e1; border: 1px solid #f3e9e1;}
html.black p.more a:hover, html.black p.pagination a:hover, html.black a.blocklink:hover, html.black a.blocklinknull {color: #f3e9e1 !important; background: #241e1a; border: 1px solid #f3e9e1;}
html.black footer a.cc {background-image: url(../img/cc-black.svg);}
html.black footer a.rss {background-image: url(../img/rss-black.svg);}
html.black footer a.merveilles {background-image: url(../img/merveilles-black.svg);}

.red {font-family: "Charm", cursive; font-size: 18px; line-height: 24px; color: #db5746;}
.red a {color: #db5746;}

a[target="_blank"]:after { 	content: " ⇢"; }

.outline {border: 1px solid #241e1a;}

@media only screen and (max-width: 648px) {
	.col25, .col25p, .col33, .col50, .col50p, .col75, .col75p, section, aside, figure, figure.tall, footer, h1, h2, header, hr, main, nav, nav ul.logo, p.subtitle, p.more, p.pagination, ul.cards li {width: 100%;}
	
	nav ul {
		width: 50%;
		padding: 0 0 0 12px;
	}
	
	nav ul.logo {margin: 0 0 0 12px;}
	
	nav ul.logo img {float: none;}

	nav h1 {margin: 0 0 28px -15px;}
	
	nav ul:nth-child(2) {width: 51%;}

	nav ul:nth-child(3) {padding-left: 12px;}

	.col25p, .col50p, .col75p, nav ul:nth-child(3), footer, h1, h2, header, hr, main, figure.tall, p.subtitle, p.more, p.pagination {margin-left: 0;}
}