:root {
	--pleasurable: 0,50%,50%;
	--exclusive: 90,50%,50%;
	--teaching: 180,50%,50%;
	--external: 270,50%,50%;
	--background: hsl(160,95%,99%);
	--whitespace: 4em;
	--bodycopy: "Fedra Sans 6", sans-serif;
	--headings: "Fedra Sans Display 2 Heavy", sans-serif;
	--smallcaps: "Fedra Sans 7", sans-serif;
	--condensed: "Fedra Sans Condensed Book 2", sans-serif;
	--monospace: "Fedra Mono Screen Regular 7", monospace;
}
@media (max-width: 50em) {
	:root {
		--whitespace: 2em;
	}
}
@media (max-width: 30em) {
	:root {
		--whitespace: 1em;
	}
}
html {
	background-color: black;
}
html.pleasurable {
	background: hsla(var(--pleasurable),1);
}
html.teaching {
	background: hsla(var(--teaching),1);
}
html.exclusive {
	background: hsla(var(--exclusive),1);
}
html.external {
	background: hsla(var(--external),1);
}
body {
	background-color: white;
	margin: 0;
	padding: 0;
	font-family: var(--bodycopy);
	line-height: 1.414;
	background: var(--background);
    font-feature-settings: "liga" 1;
	scroll-behavior: smooth;
}
@supports (font-variant-ligatures: common-ligatures) {
    body {
        font-feature-settings: normal;
        font-variant-ligatures: common-ligatures;
    }
}
h2, h3, h4 {
	font-family: var(--headings);
	font-weight: normal;
	line-height: 1;
}
@supports (-webkit-hyphenate-limit-lines: 2) {
	p {
		-webkit-hyphens: auto;
		hyphens: auto;
		-webkit-hyphenate-limit-lines: 2;
		-webkit-hyphenate-limit-chars: 6 3 2;
	}
}
@supports (hyphenate-limit-lines: 2) {
	p {
		hyphens: auto;
		hyphenate-limit-lines: 2;
		hyphenate-limit-chars: 6 3 2;
	}
}
header h1 {
	flex-grow: 1;
	flex-shrink: 1;
	font-size: 1em;
	font-weight: normal;
	margin: 0;
}
header nav {
	flex-grow: 3;
	flex-shrink: 3;
}
header + nav {
	margin-top: .5em;
}
header nav > ul,
header + nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: stretch;
}
header nav li,
header + nav ul li {
	flex-grow: 1;
	margin: 0 .25em;
	padding: 0;

}
header nav li:first-of-type,
header + nav li:first-of-type {
	margin-left: 0;
}
header nav li:last-of-type,
header + nav li:last-of-type {
	margin-right: 0;
}
header nav li > * {
	flex-grow: 1;
}
header nav a,
header + nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1em;
	color: black;
	text-decoration: none;
	font-weight: bold;
}
header nav li li a {
	display: block;
}
header nav span,
header + nav a {
	font-weight: normal;
	font-style: italic;
}
@media (max-width: 35em) {
	header nav li,
	header + nav ul li {
		margin: 0 .125em;
	}
	header + nav {
		margin-top: .25em;
	}
	header nav a,
	header + nav a {
		font-family: var(--condensed);
		font-weight: normal;
		font-style: normal;
		padding: .8em;
	}
}
@media (max-width: 25em) {
	header nav a,
	header + nav a {
		padding: .5em 0;
		font-size: 90%;
	}
}
@media (max-width:55.1em) {
	header nav span {
		display: none;
	}
}
header a {
	transition: .2s;
	border-bottom: .5em solid black;
}
header a[href*="pleasurable-user-interfaces"],
header + nav.pleasurable a:hover,
header + nav.pleasurable a:focus,
header + nav.pleasurable a {
	background: hsla(var(--pleasurable),.4);
	border-bottom: .5em solid hsla(var(--pleasurable),1);
}
header a[href="/research/"],
header a[href="/research/about/"]  {
	background: hsla(var(--external),.4);
	border-bottom: .5em solid hsla(var(--external),1);
}
header a[href*="exclusive"],
header + nav.exclusive a:hover,
header + nav.exclusive a:focus,
header + nav.exclusive a {
	background: hsla(var(--exclusive),.4);
	border-bottom: .5em solid hsla(var(--exclusive),1);
}
header a[href*="teaching"] {
	background: hsla(var(--teaching),.4);
	border-bottom: .5em solid hsla(var(--teaching),1);
}
header a[href*="pleasurable-user-interfaces"]:hover,
header a[href*="pleasurable-user-interfaces"]:focus,
header + nav.pleasurable a {
	background: hsla(var(--pleasurable),.1);
	color: black;
}
header a[href="/research/"]:hover,
header a[href="/research/"]:focus,
header a[href="/research/about/"]:hover,
header a[href="/research/about/"]:focus {
	background: hsla(var(--external),.1);
	color: black;
}
header a[href*="exclusive"]:hover,
header a[href*="exclusive"]:focus,
header + nav.exclusive a {
	background: hsla(var(--exclusive),.1);
	color: black;
}
header a[href*="teaching"]:hover,
header a[href*="teaching"]:focus {
	background: hsla(var(--teaching),.1);
	color: black;
}


/* Sub nav  */
header li {
	position: relative;
}
header li ul {
	width: 100%;
	position: absolute;
	margin: 0;
	padding: 0;
	background: white;
	z-index: 1;
	max-height: 0;
	overflow: hidden;
	transition: max-height .2s;
}
header li ul.is-open {
	max-height: 10.2em;
}
header li li {
	margin: 0;
}
header li li:not(:last-of-type) a,
header li a.is-open {
	border-bottom-width: .1em;
}
header li li a {
	font-weight: normal;
}



/* Subnav on pages */
header + nav {
	overflow: auto;
	padding-bottom: 1em;
	animation: scrollin .75s cubic-bezier(.5,0,.75,1);
}
@keyframes scrollin {
	0% {
		opacity: 0;
		padding-left: 8%;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		padding-left: 0%;
	}
}
header + nav ul li {
	display: flex;
}
header + nav ul li a {
	justify-content: center;
	font-size: .9em;
	flex-grow: 1;
	text-align: left;
	align-items: flex-start;
	white-space: pre;
}
@media (max-width: 30em) {
	header + nav ul li:nth-of-type(3):nth-last-of-type(2) {
		display: none;
	}
}


/* Articles */

article::before,
*:not(html).external::before {
	content: '';
	right: 0;
	left: 0;
	position: absolute;
	top: 0;
	height: .5em;
}
*:not(html).pleasurable::before {
	background: hsla(var(--pleasurable),1);
}
*:not(html).teaching::before {
	background: hsla(var(--teaching),1);
}
*:not(html).exclusive::before {
	background: hsla(var(--exclusive),1);
}
*:not(html).external::before {
	background: hsla(var(--external),1);
}

.video-container {
	position: relative;
	//padding-top: 37.5%;
	padding-top: 56.25%;
}
@media (min-width: 35em) {
	.video-container {
		padding-top: 19.6em;
	}
}
@media (min-width: 60em) {
	.video-container {
		width: 35em !important;
		position: relative;
		padding-top: 56.25%;
		max-width: 35em !important;
		font-size: 1.5em;
	}
}
.video-container iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

img {
	width: auto;
	max-width: 100%;
}
div.wide-image {
	max-width: 100%;
}
div.wide-image img {
	border: 1px solid silver;
}
#stream {
	padding: 2em;
}
#stream div.external,
#stream > article {
	position: relative;
	overflow: auto;
	max-width: 35em;
	margin: 0 auto 1em;
	transition: .2s;
}
#stream h2 {
	font-size: 2em;
}
#stream article h2 a {
	color: black;
	text-decoration: none;
}
#stream .external article {
	margin-left: 2em;
}
#stream .external div {
	/display: flex;
}
#stream .external img {
	width: 40%;
	width: calc(50% - 1em);
	margin: 0 1em 0 0;
	float: left;
	border: 1px solid hsla(var(--external),.4);
}
#stream .external a {
	text-decoration: none;
	color: black;
}
#stream .external h2::before {
	content: '☞ ';
	position: absolute;
	margin-left: -1em;
}
#stream .external a::before {
	content: 'External link: ';
	font-weight: bold;
}
#stream article a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	transition: .2s;
}
#stream .external a:hover::after,
#stream .external a:focus::after {
	background: hsla(var(--external),.4);
}
#stream .pleasurable a:hover::after,
#stream .pleasurable a:focus::after {
	background: hsla(var(--pleasurable),.4);
}
#stream .exclusive a:hover::after,
#stream .exclusive a:focus::after {
	background: hsla(var(--exclusive),.4);
}
#stream .teaching a:hover::after,
#stream .teaching a:focus::after {
	background: hsla(var(--teaching),.4);
}

#stream .pleasurable .more {
	color: hsl(var(--pleasurable));
	font-weight: bold;
}
#stream .exclusive .more {
	color: hsl(var(--exclusive));
	font-weight: bold;
}
#stream .teaching .more {
	color: hsl(var(--teaching));
	font-weight: bold;
}




/* If there’s room, split the stream into blogs and external sources */

@media (min-width: 50em) {
	#stream {
		max-width: 70em;
		margin: 0 auto;
		padding: var(--whitespace);
	}
	#stream {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-column-gap: var(--whitespace);
		grid-row-gap: var(--whitespace);
	}
	#stream nav {
		grid-column-start: 1;
		grid-row-start: auto;
	}
	/*
	#stream article:nth-of-type(-n + 10) {
		grid-column-start: 1;
	}
	#stream .external:nth-of-type(-n + 10) {
		grid-column-start: 2;
	}
	#stream > *:nth-of-type(1)  {
		grid-row-start: 1;
	}
	#stream > *:nth-of-type(2) {
		grid-row-start: 2;
	}
	#stream > *:nth-of-type(3) {
		grid-row-start: 3;
	}
	#stream > *:nth-of-type(4) {
		grid-row-start: 4;
	}
	#stream > *:nth-of-type(5) {
		grid-row-start: 5;
	}
	#stream > *:nth-of-type(6) {
		grid-row-start: 6;
	}
	#stream > *:nth-of-type(7) {
		grid-row-start: 7;
	}
	#stream > *:nth-of-type(8) {
		grid-row-start: 8;
	}
	#stream > *:nth-of-type(9) {
		grid-row-start: 9;
	}
	#stream > *:nth-of-type(10) {
		grid-row-start: 10;
	}
	 */
}

/* Filter hacks */

html:target #stream article,
head:target + body #stream .external {
	grid-column-start: auto;
	grid-row-start: auto;
}
html:target #stream .external,
head:target + body #stream > article {
	display: none;
}



/* Single article */

.h-entry {
	max-width: calc(35em * 1.5);
	margin: 4em auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: relative;
}
@media (max-width: 60em) {
	.h-entry {
		margin: 4em;
	}
}
@media (max-width: 50em) {
	.h-entry {
		margin: 2em;
	}
}
@media (max-width: 30em) {
	.h-entry {
		margin: 1em;
	}
}
.h-entry > * {
	width: 100%;
	max-width: 35rem;
	margin: 0 0 1rem;
}
.h-entry > * li {
	margin-left: 1em;
}
.h-entry h1 {
	font-size: 3em;
	margin: .7em 0;
	max-width: 35em;
	line-height: 1;
	letter-spacing: -.01em;
	font-family: var(--headings);
}
@media (max-width: 30em) {
	.h-entry h1 {
		font-size: 2em;
	}
}
.h-entry h1 a {
	color: black;
	text-decoration: none;
}
.h-entry h1 + p {
	font-size: 1.5em;
	max-width: 35em;
	margin-top: 0;
	line-height: 1.3;
	letter-spacing: -.01em;
}
@media (max-width: 30em) {
	.h-entry h1 + p {
		font-size: 1em;
		font-style: italic;
		letter-spacing: normal;
	}
	.h-entry h1 + p em {
		font-style: normal;
	}
}

.h-entry h2,
.h-entry h3 {
	margin: 1em 0 0;
}
.h-entry h4 {
	margin: 0 0 -.2em;
	line-height: 1.414;
}

.h-entry blockquote {
	margin: .5em 0 1.5em;
	border-left: .5em solid;
	padding-left: .5em;
	font-style: italic;
	font-size: 1.2em;
}
.h-entry blockquote.has-sidenote {
	box-sizing: border-box;
}
.h-entry blockquote em,
.h-entry blockquote i {
	font-style: normal;
}
.pleasurable blockquote {
	border-left-color: hsl(var(--pleasurable));
}
.exclusive blockquote {
	border-left-color: hsl(var(--exclusive));
}
.teaching blockquote {
	border-left-color: hsl(var(--teaching));
}
.h-entry blockquote p {
	margin: 0 0 1em;
}
.h-entry blockquote footer,
.h-entry blockquote em,
.h-entry blockquote i,
.h-entry blockquote footer cite {
	font-style: normal;
}
.h-entry blockquote footer {
	font-size: .8333em;
	font-style: italic;
}
.h-entry blockquote footer::before {
	content: "— "
}
q {
	font-style: italic;
}
q::before {
	content: "”";
}
q::after {
	content: "“";
}

.h-entry figure {}
.h-entry figcaption {
	font-style: italic;
	text-align: right;
	font-size: .9em;
}

.h-entry .margin-figure {
	display: flex;
	align-items: flex-start;
	background: hsla(0,0%,0%,0.05);
	padding: 1px;
	box-sizing: border-box;
	margin: 1em 0 2em;
}
.pleasurable .margin-figure {
	background-color: hsla(var(--pleasurable),.075);
}
.exclusive .margin-figure {
	background-color: hsla(var(--exclusive),.075);
}
.teaching .margin-figure {
	background-color: hsla(var(--teaching),.075);
}

@media (min-width: 60em) {
	.h-entry .margin-figure {
		max-width: 80%;
	}
}
.margin-figure img {
	height: auto;
	width: 50%;
	flex-basis: 50%;
}
@media (max-width: 30em) {
	.margin-figure {
		flex-direction: column;
	}
	.margin-figure img {
		width: 100%;
	}
}
.margin-figure:nth-of-type(2n) img {

}
.margin-figure figcaption {
	font-style: normal;
	font-size: 100%;
	text-align: left;
	padding: .5em 1em;
}
.margin-figure figcaption p {
	margin: 0;
}


.h-entry .in-margin img {
	position: absolute;
	max-width: 15em;
	margin-left: -17em;
	border: 1px solid hsl(0, 0%, 75.3%);
}
@media (max-width: 50em) {
	.h-entry .in-margin {
		float: left;
	}
}


.h-entry abbr {
	font-family: var(--smallcaps);
	hyphens: manual;
}
code {
	font-family: var(--monospace);
}

aside ul {
	margin: 0;
	padding: 0;
	list-style: '☞ ';
	font-family: var(--headings);
	font-weight: normal;
}
aside li a {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: .2s;
}
aside li a > * {
	margin: 0;
}
aside li a > p {
	font-family: var(--bodycopy);
}

.h-entry aside {
	border-top: .5em solid;
	width: 100%;
	margin-top: 4em;
}
.pleasurable aside {
	border-top-color: hsl(var(--pleasurable));
}
.exclusive aside {
	border-top-color: hsl(var(--exclusive));
}
.teaching aside {
	border-top-color: hsl(var(--teaching));
}
.pleasurable aside li a:hover,
.pleasurable aside li a:focus {
	background-color: hsla(var(--pleasurable),.4);
}
.exclusive aside li a:hover,
.exclusive aside li a:focus {
	background-color: hsla(var(--exclusive),.4);
}
.teaching aside li a:hover,
.teaching aside li a:focus {
	background-color: hsla(var(--teaching),.4);
}


.h-entry .footnote {
	font-feature-settings: "subs" 1;
	font-variant-position: super;
}
.h-entry .notes,
.h-entry .footnotes {
	font-size: .85em;
}
.h-entry .footnotes ol {
	margin: 0;
	padding: 0;
}
.h-entry .footnotes hr {
	border: 1px solid;
}
.h-entry .footnotes p {
	margin: 0;
}
.h-entry .footnotes p + p {
	text-indent: 1em;
}

[href^="#note"],
[href^="#fn"] {
	color: inherit;
}
.pleasurable [href^="#note"],
.pleasurable [href^="#fn"] {
	border-bottom: 1px solid hsl(var(--pleasurable));
	text-decoration: none;
}
.exclusive [href^="#note"],
.exclusive [href^="#fn"] {
	border-bottom: 1px solid hsl(var(--exclusive));
	text-decoration: none;
}
.teaching [href^="#note"],
.teaching [href^="#fn"] {
	border-bottom: 1px solid hsl(var(--teaching));
	text-decoration: none;
}
@supports (text-decoration-color: hsl(var(--pleasurable))) {
	.pleasurable [href^="#note"],
	.pleasurable [href^="#fn"] {
		text-decoration: underline hsl(var(--pleasurable));
		border: 0;
	}
	.exclusive [href^="#note"],
	.exclusive [href^="#fn"] {
		text-decoration: underline hsl(var(--exclusive));
		border: 0;
	}
	.teaching [href^="#note"],
	.teaching [href^="#fn"] {
		text-decoration: underline hsl(var(--teaching));
		border: 0;
	}
}
[href^="#note"]::after,
[href^="#fn"][href$="n"]::after {
	content: 'ℹ';
	/color: red;
	display: inline-block;
	text-decoration: none !important;
	margin-left: .2em;
	font-size: 1em;
	line-height: 1;
	transition: .2s;
	font-variant-position: super;
}

	[href^="#note"].is-open::after,
	[href^="#fn"].is-open::after {
		//transform: rotate(180deg) translate(0, -.1em);
		//transition: .4s;


	}
	[href^="#fn"][href$="1n"]::after {
		content: "\2780";
	}
	[href^="#fn"][href$="2n"]::after {
		content: "\2781";
	}
	[href^="#fn"][href$="3n"]::after {
		content: "\2782";
	}
	[href^="#fn"][href$="4n"]::after {
		content: "\2783";
	}
	[href^="#fn"][href$="5n"]::after {
		content: "\2784";
	}
	[href^="#fn"][href$="6n"]::after {
		content: "\2785";
	}
	[href^="#fn"][href$="7n"]::after {
		content: "\2786";
	}
	[href^="#fn"][href$="8n"]::after {
		content: "\2787";
	}
	[href^="#fn"][href$="9n"]::after {
		content: "\2788";
	}
@media (max-width: 59.999em) {
	[href^="#fn"][href$="1n"].is-open::after {
		content: "\278A";
	}
	[href^="#fn"][href$="2n"].is-open::after {
		content: "\278B";
	}
	[href^="#fn"][href$="3n"].is-open::after {
		content: "\278C";
	}
	[href^="#fn"][href$="4n"].is-open::after {
		content: "\278D";
	}
	[href^="#fn"][href$="5n"].is-open::after {
		content: "\278E";
	}
	[href^="#fn"][href$="6n"].is-open::after {
		content: "\278F";
	}
	[href^="#fn"][href$="7n"].is-open::after {
		content: "\2790";
	}
	[href^="#fn"][href$="8n"].is-open::after {
		content: "\2791";
	}
	[href^="#fn"][href$="9n"].is-open::after {
		content: "\2792";
	}
}
[id^="note"],
[id^="fn:"][id$="n"] {
	display: inline-block;
	overflow: hidden;
	font-style: italic;
	width: 0;
	height: 0;
	box-sizing: border-box;
	transition: 0s;
}
[id^="note"]:target,
[id^="note"].is-open,
[id^="fn:"][id$="n"]:target,
[id^="fn:"][id$="n"].is-open {
	display: block;
	width: 100%;
	height: auto;
	padding: 2em;
	transition: padding-top .2s,
				padding-bottom .2s;
}
[id^="note"] img,
[id^="fn:"][id$="n"] img {
	max-height: 20vh;
	display: block;
}
[id^="fn:"][id$="n"] .reversefootnote {
	font-style: normal;
}
@media (min-width: 60em) {
	[href^="#note"],
	[href^="#fn"]:not(.reversefootnote) {
		text-decoration: none !important;
		cursor: text;
		/pointer-events: none;
		border-bottom: 0 !important;
	}
	[href^="#fn"]:hover + span,
	[href^="#fn"].is-hover,
	[href^="#fn"]:hover,
	[href^="#fn"] + span:hover {
		transition: .3s;
		background-color: hsla(0,0%,0%,.2);
	}
	.pleasurable [href^="#fn"]:hover + span,
	.pleasurable [href^="#fn"] + span:hover,
	.pleasurable [href^="#fn"]:hover,
	.pleasurable [href^="#fn"].is-hover {
		background-color: hsla(var(--pleasurable),.2);
	}
	.exclusive [href^="#fn"]:hover + span,
	.exclusive [href^="#fn"] + span:hover,
	.exclusive [href^="#fn"]:hover,
	.exclusive [href^="#fn"].is-hover {
		background-color: hsla(var(--exclusive),.2);
	}
	.teaching [href^="#fn"]:hover + span,
	.teaching [href^="#fn"] + span:hover,
	.teaching [href^="#fn"]:hover,
	.teaching [href^="#fn"].is-hover {
		background-color: hsla(var(--teaching),.2);
	}
	[id^="fn:"][id$="n"] .reversefootnote {
		display: none;
	}
	[id^="note"],
	[id^="note"]:target,
	[id^="note"].is-open,
	[id^="fn:"][id$="n"],
	[id^="fn:"][id$="n"]:target,
	[id^="fn:"][id$="n"].is-open {
		display: block;
		position: absolute;
		margin-left: -33.333%;
		width: calc(33.333% - 1em);
		height: auto;
		padding: 0 1em 1em 0;
		margin-top: -2.999em;
		margin-top: calc(-2.999em * 1.04);
		font-size: .85em;
		border-right: .5em solid;
		overflow: visible;
	}
	[id^="note"]::before,
	[id^="fn:"][id$="n"]::before {
		content: 'ℹ';
		margin-left: -1em;
		position: absolute;
	}
	.pleasurable [id^="note"],
	.pleasurable [id^="fn:"][id$="n"] {
		border-right-color: hsl(var(--pleasurable));
	}
	.exclusive [id^="note"],
	.exclusive [id^="fn:"][id$="n"] {
		border-right-color: hsl(var(--exclusive));
	}
	.teaching [id^="note"],
	.teaching [id^="fn:"][id$="n"] {
		border-right-color: hsl(var(--teaching));
	}
	[id^="fn:"][id$="1n"]::before {
		content: "\2780";
	}
	[id^="fn:"][id$="2n"]::before {
		content: "\2781";
	}
	[id^="fn:"][id$="3n"]::before {
		content: "\2782";
	}
	[id^="fn:"][id$="4n"]::before {
		content: "\2783";
	}
	[id^="fn:"][id$="5n"]::before {
		content: "\2784";
	}
	[id^="fn:"][id$="6n"]::before {
		content: "\2785";
	}
	[id^="fn:"][id$="7n"]::before {
		content: "\2786";
	}
	[id^="fn:"][id$="8n"]::before {
		content: "\2787";
	}
	[id^="fn:"][id$="9n"]::before {
		content: "\2788";
	}
}
@media (max-width: 59.999em) {
	[id^="fn"]{
		margin-top: 0 !important;
	}
}

.h-entry > footer {
	border-left: .5em solid;
	margin-bottom: 0;
	padding-left: .5em;
	margin-top: 1em;
}
.pleasurable > footer {
	border-left-color: hsl(var(--pleasurable));
}
.exclusive > footer {
	border-left-color: hsl(var(--exclusive));
}
.teaching > footer {
	border-left-color: hsl(var(--teaching));
}

.h-entry > footer ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-style: italic;
}
.h-entry > footer li {
	display: inline-block;
}
.h-entry > footer li:nth-child(3) {
	display: block;
}
.h-entry > footer li::before {
	font-style: normal;
	font-weight: bold;
}
.h-entry > footer li:first-child::before {
	content: 'Published on ';
}
.h-entry > footer li:nth-child(2)::before {
	content: 'by ';
}
.h-entry > footer li:nth-child(3)::before {
	content: 'Filed under ';
}
.h-entry > footer li:nth-child(4)::after {
	content: ' or ';
	margin-right: .25em;
}

#comments {
	/border-top: .5em solid;
	width: 100%;
	margin-top: 4em;
}
#comments h2 {
	font-size: 2em;
	margin: 1rem 0;
}
.pleasurable #comments {
	border-top-color: hsl(var(--pleasurable));
}
.exclusive #comments {
	border-top-color: hsl(var(--exclusive));
}
.teaching #comments {
	border-top-color: hsl(var(--teaching));
}

#commentform fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	position: relative;
}
#commentform legend span {
	display: block;
	font-family: var(--headings);
	font-size: 2em;
	margin: 1rem 0;
}
#commentform label {
	display: block;
	width: 100%;
	font-weight: bold;
}
#commentform label input {
	display: block;
	max-width: 100%;
	width: 29ch;
	font-size: inherit;
	margin-bottom: .5em;
	box-sizing: border-box;
	font-family: var(--bodycopy);
}
#commentform textarea {
	width: 100%;
	box-sizing: border-box;
	height: 8em;
}
#comments article {
	width: 100%;
	margin-left: 1.5em;
	margin-right: 1em;
	margin-top: 2em;
	box-sizing: border-box;
	max-width: 33.5em;
}

#comments article h1,
#comments article h2,
#comments article h3,
#comments article h4,
#comments article h5 {
	font-size: 1em;
	font-weight: normal;
	font-family: var(--bodycopy);
	margin: 1em 0;
}
#comments article h1 + p {
	font-size: 1em;
}
#comments article ul,
#comments article ol {
	margin-left: 0;
	padding-left: 1em;
}
#comments article > footer {
	margin-left: -1.5em;
	margin-bottom: -1em;
}
#comments article > footer ul {
	margin: 0;
	padding: 0;
	font-family: var(--headings);
	font-size: 1.5em;
}
#comments article > footer li {
	display: inline-block;
	list-style: none;
	margin: 0;
	padding: 0;
}
#comments article > footer li:nth-child(n + 2),
#comments article > footer li:nth-child(2)::before {
	font-size: 1.2rem;
	font-family: var(--smallcaps);
}
#comments article > footer a {
	text-decoration: none;
}
#comments i {
	font-style: italic;
	font-weight: 400;
}

#comments .submit {
	border-left: .5em solid;
	padding-left: .5em;
	margin-top: .5em;
}
.pleasurable #comments .submit {
	border-color: hsl(var(--pleasurable))
}
.exclusive #comments .submit {
	border-color: hsl(var(--exclusive))
}
.teaching #comments .submit {
	border-color: hsl(var(--teaching))
}
#comments [type="submit"] {
	font-size: inherit;
	font-family: inherit;
	font-weight: bold;
	display: block;
	margin-top: .5em;
	padding: .3em 1.5em;
}

.pleasurable #comments [type="submit"] {
	background: hsla(var(--pleasurable),.4);
	border: 1px solid hsl(var(--pleasurable));
}
.exclusive #comments [type="submit"] {
	background: hsla(var(--exclusive),.4);
	border: 1px solid hsl(var(--exclusive));
}
.teaching #comments [type="submit"] {
	background: hsla(var(--teaching),.4);
	border: 1px solid hsl(var(--teaching));
}


/* PAGE FOOTER */
body > footer {
	max-width: calc(35em * 1.5);
	margin: 4em auto 0;
	padding: var(--whitespace);
}
body > #stream ~ footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: var(--whitespace);
	grid-row-gap: var(--whitespace);
	max-width: 70em;
	margin: 0 auto;
	padding-bottom: var(--whitespace);
}