@import "fonts.css";

html {
	--font-heading: 'Unica One', cursive;
	--font-body:    'Crimson Pro', serif;

	--colour-bg-norm: rgba(128, 128, 128, 0.1);

	--colour-fg-norm: rgb(250, 250, 250);
	--colour-fg-lite: rgb(69, 140, 249);
	--colour-fg-dark: rgb(132, 132, 132);
	--colour-fg-spec: rgb(255, 165, 0);

	--root-padding: 1rem;
	--root-padding-t: var(--root-padding);
	--root-padding-b: var(--root-padding);
	--root-padding-r: var(--root-padding);
	--root-padding-l: var(--root-padding);

	--byline-author-icon-w: 32px;
	--byline-author-icon-h: 32px;
	--byline-author-h: calc(var(--byline-author-icon-w) + 8px);

	background: url(herschel-36-in-lagoon-nebula.jpg) no-repeat center center fixed;
	background-size: cover;

	margin: 0;

	padding: var(--root-padding-t) var(--root-padding-r) var(--root-padding-b) var(--root-padding-l);

	font-size: 100%;
	line-height: 1.5;
}

body {
	--body-border-width: 1px;
	--body-border-width-t: var(--body-border-width);
	--body-border-width-b: var(--body-border-width);
	--body-border-width-r: var(--body-border-width);
	--body-border-width-l: var(--body-border-width);

	--body-border-colour: black;
	--body-border-colour-t: var(--body-border-colour);
	--body-border-colour-b: var(--body-border-colour);
	--body-border-colour-r: var(--body-border-colour);
	--body-border-colour-l: var(--body-border-colour);

	--body-padding: 1rem;
	--body-padding-t: var(--body-padding);
	--body-padding-b: var(--body-padding);
	--body-padding-r: var(--body-padding);
	--body-padding-l: var(--body-padding);

	display: flex;
	flex-direction: column;

	margin: 0 auto;

	border-top: var(--body-border-width-t) solid var(--body-border-colour-t);
	border-bottom: var(--body-border-width-b) solid var(--body-border-colour-b);
	border-left: var(--body-border-width-l) solid var(--body-border-colour-l);
	border-right: var(--body-border-width-r) solid var(--body-border-colour-r);
	border-radius: 0.5rem;

	padding: var(--body-padding-t) var(--body-padding-r) var(--body-padding-b) var(--body-padding-l);

	background: url(scan-lines.svgz);

	color: var(--colour-fg-norm);

	font-family: var(--font-body);

	min-height: calc(100vh - (
		var(--root-padding-t) + var(--root-padding-b)
		+ var(--body-border-width-t) + var(--body-border-width-b)
		+ var(--body-padding-t) + var(--body-padding-b)
	));

	max-width: 40rem;
}

h1, h2, h3, h4, h5, h6,
th,
dt,
summary {
	font-family: var(--font-heading);
}

#title {
	font-size: 2rem;
	margin: 0 0 0.5rem;
}

#synopsis {
	color: var(--colour-fg-dark);
	font-style: italic;
	margin: 0;
	text-align: right;
}

#byline {
	font-family: var(--font-heading);

	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0.5rem;
	margin-top: 1rem;
}

#byline > p {
	display: flex;
	align-items: flex-end;
	margin: 0;
	min-height: var(--byline-author-icon-h);
}

#byline .authors {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#byline .authors .author {
	display: flex;
	align-items: flex-end;
	min-height: var(--byline-author-icon-h);
}

#byline .authors .author img {
	width: var(--byline-author-icon-w);
	height: var(--byline-author-icon-h);
	vertical-align: bottom;
}

main {
	margin-top: 1rem;
}

#pubdate {
	font-family: var(--font-heading);
	color: var(--colour-fg-dark);
	font-style: italic;
	text-align: right;
	margin: 0 0 1rem;
}

#notes > details {
	background: var(--colour-bg-norm);
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.25rem 0.5rem;
}

#notes > details > *:last-child {
	margin-bottom: 0;
}

.story-list {
	margin: 1rem 0;
	width: 100%;
}

.story-list > thead {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.story-list .story {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	background: var(--colour-bg-norm);
	border-radius: 0.5rem;
	padding: 0.5rem 1rem;
}

.story-list .story + .story {
	margin-top: 1rem;
}

.story-list .story .title {
	font-family: var(--font-heading);
	font-size: 120%;
	width: 100%;
}

.story-list .story .title a {
	color: var(--colour-fg-lite);
}

.story-list .story .title a:visited {
	color: var(--colour-fg-norm);
}

.story-list .story .title a:hover,
.story-list .story .title a:active {
	color: var(--colour-fg-spec);
}

.story-list .story .title .under-construction {
	display: inline-block;
	font-size: 50%;
	vertical-align: middle;
}

.story-list .story .synopsis {
	color: var(--colour-fg-dark);
	font-style: italic;
	padding: 0 1em;
	width: 100%;
}

.story-list .story .extra {
	color: var(--colour-fg-dark);
	font-family: var(--font-heading);
	font-size: 0.8rem;
	width: 100%;
}

.story-list .story .extra.storytellers-cafe-ingredients {
	font-family: var(--font-body);
}

.story-list .story .extra.storytellers-cafe-ingredients::before {
	font-family: var(--font-heading);
	content: 'Ingredients: ';
	margin-right: 1em;
}

.story-list .story .extra.storytellers-cafe-ingredients > ul {
	display: inline;
	margin: 0;
	padding: 0;
}

.story-list .story .extra.storytellers-cafe-ingredients .extra {
	font-family: var(--font-body);
	font-size: 80%;
	text-transform: none;
}

.story-list .story .extra.word-of-the-day {
	font-family: var(--font-body);
	text-transform: uppercase;
}

.story-list .story .extra.word-of-the-day::before {
	font-family: var(--font-heading);
	content: 'Word-of-the-day: ';
	margin-right: 1em;
	text-transform: none;
}

.story-list .story .type,
.story-list .story .content-info,
.story-list .story .pubdate {
	color: var(--colour-fg-dark);
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-style: italic;
}

.story-list .story .type {
	order: 10;
	min-width: 8rem;
}

.story-list .story .content-info {
	order: 11;
	flex: 1;
}

.story-list .story .pubdate {
	order: 12;
	min-width: 8rem;
	text-align: right;
}

#navigation {
	font-family: var(--font-heading);
	margin-top: auto;
	font-size: 0.8rem;
}

.breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

#licence {
	margin-top: 0.5rem;
}

a {
	color: var(--colour-fg-lite);
	text-decoration: none;
}

a:visited {
	color: var(--colour-fg-dark);
}

a:active,
a:hover {
	color: var(--colour-fg-spec);
}

abbr[title] {
	text-decoration: none;
}

sup,
sub {
	line-height: 0;
}

.screenreader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

.badge {
	height: 15px;
	width: 88px;
	vertical-align: text-bottom;
}

.flat-list,
.story-list .story .content-info > ul
 {
	display: inline;
	margin: 0;
	padding: 0;
}

.flat-list > li,
.story-list .story .content-info > ul > li,
.story-list .story .extra.storytellers-cafe-ingredients > ul > li
 {
	display: inline;
	margin: 0;
	padding: 0;
}

.flat-list > li:not(:last-child)::after,
.story-list .story .content-info > ul > li:not(:last-child)::after,
.story-list .story .extra.storytellers-cafe-ingredients > ul > li:not(:last-child)::after
 {
	content: ', ';
}

.first-char {
	float: left;
	font-family: var(--font-heading);
	font-size: 2em;
	line-height: 1.18;
}

.first-char.first-word {
	margin-right: 0.5rem;
}

.first-words {
	text-transform: uppercase;
}

.hazard {
	display: inline-block;
	background: #f9a800;
	color: #2b2b2c;
	font-family: sans-serif;
	font-style: normal;
	font-weight: bold;
}

.hazard::before,
.hazard::after {
	display: inline-block;
	content: ' ';
	background: url(../iso-3684-hazard-marking.svg);
	height: 100%;
	width: 2em;
	vertical-align: bottom;
}

.hazard::before
{
	margin-right: 0.5em;
}

.hazard::after
{
	margin-left: 0.5em;
}