/*
 * Just a Load of Pixels (blog.kegamble.com): the look of the WordPress theme AutoFocus 1.0.1
 * by Allan Cole as the site used it: white, Georgia, an 800px column, a photo mosaic.
 *
 * Mobile first. From 832px the page is the theme's 800px layout; the « and » arrows beside the
 * column need 1000px. Sizes are the theme's: html is 62.5% and the body 1.4em, so 1em is
 * 14px in the body. No web fonts: "Hoefler Text" where it is installed, else Georgia.
 */

:root {
	--text: #444;          /* text and links */
	--grey: #767676;       /* AutoFocus's #888, a little darker for small text (WCAG AA) */
	--grey-large: #888;    /* AutoFocus's grey, for large text */
	--arrow: #efefef;      /* the « and » arrows */
	--paper: #fff;
	--hover: #000;
	--placeholder: #ddd;   /* behind a photo until it has loaded */
}

/* Base */

html {
	font-size: 62.5%;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--text);
	font: 1.4em/1.6 "Hoefler Text", Georgia, serif;
}

h1,
h2,
p,
ul,
figure {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: normal;
}

p {
	margin-bottom: 1em;
}

ul {
	list-style: none;
}

img {
	display: block;
}

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

a:hover {
	color: var(--hover);
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

.skip-link {
	position: absolute;
	top: 16px;
	left: -9999px;
	z-index: 10;
	padding: 8px 12px;
	background: var(--paper);
}

.skip-link:focus {
	left: 16px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The column */

.site {
	padding: 0 16px;
}

/* Header: the site title, and the menu (Home, About, RSS) */

.site-header {
	padding: 24px 0 16px;
}

.site-title {
	margin: 0;
	font-size: 2.15em;
	line-height: 1.1;
	letter-spacing: -0.05em;
}

.site-title a:hover {
	color: var(--grey-large);
	text-decoration: none;
}

.site-nav {
	font-size: .8em;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: 20px;
	margin-top: 6px;
}

.site-nav a {
	display: inline-block;
	padding: 4px 0;
	font-weight: 800;
}

/* The big dates ("13 Jan"): AutoFocus set them at 3.6em and the reset it used shrank the date
   itself to 85%. The date is a block of its own so that, as on the old site, only its own line
   height places it. */

.bigdate {
	margin: 0;
	font-size: 3.6em;
	letter-spacing: -0.05em;
}

.bigdate time {
	display: block;
	font-size: 85%;
}

/* The « and » arrows to older and newer posts, beside the column on wide screens only */

.arrows {
	display: none;
}

/* The post list: the mosaic. One tile per row on small screens. */

.mosaic {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-bottom: 5px;
}

.tile,
.entry__preview {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	background: var(--placeholder);
}

.tile {
	height: 300px;
}

.tile__photo,
.entry__photo {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tile .bigdate,
.entry .bigdate {
	position: absolute;
	top: 0;
	left: 0;
	color: var(--paper);
	text-shadow: #666 1px 1px 3px;
}

.tile .bigdate {
	padding: 5px 0 0 15px;
}

/* The title and excerpt over a photo: on hover and on keyboard focus, in AutoFocus's white
   box at 70% (only the box is see-through, not the text). The title's link covers the photo. */

.tile__text,
.entry__text {
	padding: 10px;
	background: rgba(255, 255, 255, .7);
	opacity: 0;
}

.tile__text h2,
.entry__text h2 {
	font-weight: bold;
}

.tile__text p,
.entry__text p {
	margin: 0;
}

.tile__text a:hover,
.entry__text a:hover {
	color: var(--text);
	text-decoration: none;
}

.tile__text h2 a::after,
.entry__text h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.tile:focus-within .tile__text,
.entry__preview:focus-within .entry__text {
	opacity: 1;
}

.tile__text h2 a:focus-visible,
.entry__text h2 a:focus-visible {
	outline: none;
}

.tile__text h2 a:focus-visible::after,
.entry__text h2 a:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--text), inset 0 0 0 5px var(--paper);
}

@media (hover: hover) {
	.tile:hover .tile__text,
	.entry__preview:hover .entry__text {
		opacity: 1;
	}
}

/* « Older posts and Newer posts » under a list */

.pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 60px;
	margin-top: 3em;
}

.pager a {
	font-size: 1.2em;
	font-weight: 800;
}

.pager__older {
	grid-column: 1;
	justify-self: start;
}

.pager__newer {
	grid-column: 2;
	justify-self: end;
	text-align: right;
}

/* Category and tag archives */

.archive-title {
	font-size: 1.8em;
	font-weight: 800;
	color: var(--grey-large);
}

.archive-title span {
	font-style: italic;
	font-weight: normal;
	color: var(--text);
}

.archive-list {
	margin: 2px 0;
}

.site-main--archive > .archive-list:last-child {
	margin-bottom: 42px;
}

.entry + .entry {
	margin-top: 16px;
}

.entry__preview {
	height: 200px;
}

.entry .bigdate {
	top: .1em;
	left: .1em;
	line-height: 1.2em;
	letter-spacing: normal;
}

.entry__meta {
	margin: 0;
	padding-top: 4px;
	font-size: .8em;
	color: var(--grey);
}

/* A post: the photo with its credit on hover, the title, the text and, beside it, the date
   and AutoFocus's sentence about the post; then Browse. */

.site-main--post {
	padding-top: 16px;
}

.post__photo {
	position: relative;
}

.post__photo img {
	max-width: 100%;
	height: auto;
}

.post__photo figcaption {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px;
	font-size: 1.2em;
	color: var(--paper);
	opacity: 0;
}

.post__photo:hover figcaption {
	opacity: 1;
}

.post__title,
.page__title {
	margin: .5em 0 .25em;
	font-size: 2.6em;
	line-height: 1.2;
	letter-spacing: -0.05em;
}

/* A long address (Pensive's link) breaks rather than run out of a narrow column. */
.post__text,
.page__content {
	font-size: 1.2em;
	color: var(--grey);
	overflow-wrap: break-word;
}

.post__meta {
	padding-top: 5px;
	line-height: 1.4;
	color: var(--grey);
}

.post__meta p {
	margin: 0;
}

.post__meta time {
	font-size: 85%;
}

.post__meta .bigdate {
	margin-bottom: 3px;
	line-height: 1em;
	color: var(--grey-large);
	text-shadow: 0 0 #333;
}

.browse {
	margin: 42px 0;
}

.browse h2 {
	font-size: 1.8em;
	color: var(--grey-large);
}

.browse__older,
.browse__newer {
	min-height: 60px;
	font-size: 1.2em;
	color: var(--grey);
}

.browse a {
	font-weight: 800;
}

.browse p {
	padding-right: 20px;
	font-size: .8em;
}

/* About and the 404 page */

.page {
	padding-bottom: 42px;
}

/* Footer */

.site-footer {
	padding: 4px 0 36px;
	color: var(--grey);
}

.site-footer p {
	margin: 0;
}

/* Phones: lower tiles */

@media (max-width: 479px) {
	.tile {
		height: 240px;
	}
}

/* From 832px: AutoFocus's 800px layout */

@media (min-width: 832px) {
	.site {
		width: 800px;
		margin: 0 auto;
		padding: 0;
	}

	.site-header {
		display: flex;
		height: 160px;
		padding: 0;
	}

	.site-title {
		flex: 0 0 600px;
		margin-top: 55px;
		padding-top: 5px;
		font-size: 2.8em;
		line-height: .8;
	}

	.site-nav {
		display: flex;
		flex: 0 0 200px;
		align-items: center;
	}

	.site-nav ul {
		display: block;
		margin: 0;
	}

	.site-nav a {
		display: inline;
		padding: 0;
	}

	/* The mosaic: ten tiles in four rows of 800px (595 + 200; 450 + 345; 300 + 295 + 195;
	   200 + 345 + 245), each photo at its own size and centred, as the theme's backgrounds
	   were; a photo smaller than its tile is scaled to cover it. */
	.mosaic {
		flex-flow: row wrap;
	}

	.tile--p1 { width: 595px; }
	.tile--p2 { width: 200px; }
	.tile--p3 { width: 450px; }
	.tile--p4 { width: 345px; }
	.tile--p5 { width: 300px; }
	.tile--p6 { width: 295px; }
	.tile--p7 { width: 195px; }
	.tile--p8 { width: 200px; }
	.tile--p9 { width: 345px; }
	.tile--p10 { width: 245px; }

	.tile__photo,
	.entry__photo {
		object-fit: none;
	}

	/* The archives show the top 200px of the 300px-high window the theme centred the photo in. */
	.entry__photo {
		object-position: 50% calc(50% + 50px);
	}

	.tile__photo.is-small,
	.entry__photo.is-small {
		object-fit: cover;
	}

	.entry {
		display: flex;
	}

	.entry + .entry {
		margin-top: 4px;
	}

	/* A single-page archive keeps the room the theme's empty pager took. */
	.site-main--archive > .archive-list:last-child {
		margin-bottom: 104px;
	}

	.entry__preview {
		flex: 0 0 595px;
	}

	.entry__meta {
		width: 200px;
		margin-left: 5px;
		padding: 0;
	}

	.site-main--post {
		padding-top: 36px;
	}

	.post__title,
	.page__title {
		font-size: 3.6em;
	}

	.post__body {
		display: grid;
		grid-template-columns: 600px 200px;
		min-height: 200px;
	}

	/* The text starts level with the top of the big date beside it, where the theme had it
	   (below the empty paragraph the "Remove First Image" plugin left at its start). */
	.post__text {
		grid-column: 1;
		padding: 1em 10px 0 0;
	}

	.post__meta {
		grid-column: 2;
		grid-row: 1;
	}

	.browse {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin-bottom: 84px;
	}

	.browse h2 {
		grid-column: 1 / -1;
	}

	.browse__newer {
		grid-column: 2;
	}

	.page__content {
		width: 595px;
	}

	/* The theme's 404 page sat right under the header, its title not tightened. */
	.page--404 .page__title {
		margin-top: 0;
		letter-spacing: normal;
	}
}

/* From 1000px: the « and » arrows, 100px wide boxes just outside the column, fixed where the
   content starts (their own place in the page) while it scrolls. */

@media (min-width: 1000px) {
	.arrows {
		display: block;
		position: fixed;
	}

	.arrows a {
		position: absolute;
		top: 0;
		box-sizing: border-box;
		width: 100px;
		font-size: 5em;
		line-height: 4;
		color: var(--arrow);
	}

	.arrows a:hover {
		color: var(--grey-large);
		text-decoration: none;
	}

	.arrows__older {
		right: 0;
		padding-right: 20px;
		text-align: right;
	}

	.arrows__newer {
		left: 800px;
		padding-left: 20px;
	}
}