/* This is heavily derived from 2019.css.  Since the new Equity and Concourse
 * font files mean lots of little changes to the CSS typography, it's easiest to
 * fork the file along with the fonts.
 *
 * Browser usage stats are from caniuse.com as of mid-April 2021. */
 
@import '2021-fonts.css';

/* CSS variables are supported in almost 95% of browsers.  The fallback behavior
 * might be awful, but I won't bother offering fallbacks. */

/* sizes */

:root {
	--basefontsize: 1.2rem;	/* a little larger than default */
	--fontsize: var(--basefontsize);
	--lineheight: 1.6;
	--fontserif: 'Equity B', 'Times', 'Times New Roman', serif;
	--fontsans: 'Concourse', 'Helvetica', 'Arial', sans-serif;
	--fontmono: 'PT Mono', 'Andale Mono', 'Menlo', monospace;
}
/* Make the text larger for larger screens, which presumably are at a larger
 * distance from the viewer. */
@media screen and (min-width: 60em) {
	:root {
		--fontsize: calc(1.25 * var(--basefontsize));	/* 1.25 scaling factor for distance */
	}
}
@media screen and (min-width: 120em) {
	:root {
		--fontsize: calc(1.5 * var(--basefontsize)); /* 1.5 scaling factor for distance */
	}
}
/* Narrow screens get narrow layout.  https://viewportsizer.com/devices/
 * suggests that iPads start at 768px, so we won't limit their layout, but we
 * should limit (most) iPhones in portrait mode.
 */
@media screen and (max-device-width: 500px) and (orientation: portrait) {
	body {
		max-width: 18em;
	}
}


/* colors */

:root {
	--foreground: #202020;
	--background: #fbfbfb;
	--link-color: #2222ff;
	--link-color-visited: #990099;
	--link-color-active: #bb0000;
}
@media (prefers-color-scheme: dark) {
	:root {
		--foreground: #cccccc;
		--background: #222222;
		--link-color: #8888ff;
		--link-color-visited: #9966cc;
		--link-color-active: #882222;
	}
}
@media print {
	:root {
		--foreground: black;
		--background: unset;
		--link-color: black;
		--link-color-visited: black;
		--link-color-active: black;
	}
}


body {
	font-family: var(--fontserif);
	font-size: var(--fontsize);
	color: var(--foreground);
	background-color: var(--background);
	font-variant-numeric: oldstyle-nums; /* 95% supported */
}

.lnum { /* lining numerals */
	font-variant-numeric: lining-nums;
}

.smallcaps {
	font-variant-caps: small-caps; /* 93% supported */
}
abbr, abbr[title], acronym, acronym[title], .smallcaps-lc, .caps {
	/* Also turn capital letters into small caps. */
	font-variant-caps: all-small-caps;
}
em abbr, cite abbr, i abbr {
	/* small caps doesn't have an italic style */
	font-style: normal;
}

pre, code {
	font-family: var(--fontmono);
	font-size: 90%;
	line-height: 115%;
	/* scroll if too long, on phone or other narrow windows */
	overflow-x: scroll;
}
pre {
	margin-left: calc(var(--lineheight) * 1em);
}
code {
	/* Relies on <wbr> at appropriate places, e.g. after _ characters. */
	-ms-hyphens: none;
	-moz-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
}

@media screen and (min-width: 60em) {
	pre {
		/* spill to the right if too long */
		overflow-x: visible;
	}
}

.nowrap {
	white-space: nowrap; /* 96% supported */
}

/* "promoted" from 2021-e5.css */

.temperature, .time, .trail {
	/* all-small-caps makes the numbers wrong, so we transform the letters to
	 * lowercase (e.g. F to f, AM to am, GR to gr) and then do small-caps */
	text-transform: lowercase; /* 96% supported */
	font-variant-caps: small-caps;
	white-space: nowrap;
}
.shape-letter {	/* e.g. "T in the road", "X marks the spot" */
	font-family: var(--fontsans);
	font-weight: 300;
}

/* Italicize stretches of French, Breton, German, Italian, Latin, or Turkish
 * text; use {{<e5lang "fr">}}...{{</e5lang>}} or <span lang="fr">...</span>.
 * House style is to tag words and phrases (if they don't appear in a standard
 * English dictionary) and sentences, but to leave proper names unstyled; use
 * {{<e5langname "fr">}}...{{</e5langname>}} or
 * <span class="name" lang="fr">...</span> for proper names, for hyphenation. */
:lang(fr), :lang(br), :lang(de), :lang(it), :lang(la), :lang(tr) {
	font-style: italic;
}
.name:lang(fr), .name:lang(br), .name:lang(de), .name:lang(it), .name:lang(la), .name:lang(tr) {
	font-style: normal;
}

/* If we link to an anchor, highlight the anchored element, and then let the
 * highlight fade.  For example, if we link to page#interest, and that page has
 * "here is <span id='interest'>some text</span> of interest", "some text" will
 * be highlighted. */
@keyframes highlight { /* 95% supported */
	0% {
		background-color: var(--highlight);
	}
	90% {
		background-color: var(--highlight);
		animation-timing-function: ease-in;
	}
	100% {
		background-color: inherit; /* default, whatever that is */
	}
}
:target {
	animation: highlight 5s; /* use the "highlight" keyframes defined above */
}


/*
 * Blocks
 */
#wrapper {
	max-width: 33em;
	margin: auto;
	background: url('images/coffee-leaf.png') right top / 15% no-repeat;
}

article {
	max-width: 33em;
	margin: auto;

	line-height: var(--lineheight);

	text-align: start;
	text-wrap: pretty;	/* 77% support as of end of 2025 */

	/* hyphenation, broadly following (first) Bringhurst and (second) http://clagnut.com/blog/2395 */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto; /* 77% supported, 96% with various prefixes */
	/* only hyphenate words of 6+ chars, leave 2+ on original line, 3+ on following */
	--hyphen-chars-before: 2;
	--hyphen-chars-after: 3;
	--hyphen-chars-word: 6;	
	-webkit-hyphenate-limit-before: var(--hyphen-chars-before);
	-webkit-hyphenate-limit-after: var(--hyphen-chars-after);
	-webkit-hyphenate-limit-chars: var(----hyphen-chars-word) var(--hyphen-chars-before) var(--hyphen-chars-after); /* not yet supported */
	-moz-hyphenate-limit-chars: var(----hyphen-chars-word) var(--hyphen-chars-before) var(--hyphen-chars-after); /* not yet supported */
	-ms-hyphenate-limit-chars: var(----hyphen-chars-word) var(--hyphen-chars-before) var(--hyphen-chars-after);
	hyphenate-limit-chars: var(----hyphen-chars-word) var(--hyphen-chars-before) var(--hyphen-chars-after);
	/* only 2 consecutive hyphenated lines */
	--hyphen-line-limit: 2;
	-webkit-hyphenate-limit-lines: var(--hyphen-line-limit);
	-moz-hyphentate-limit-lines: var(--hyphen-line-limit); /* not yet supported */
	-ms-hyphenate-limit-lines: var(--hyphen-line-limit);
	hyphenate-limit-lines: var(--hyphen-line-limit);
	/* don't hyphenate the last word of a paragraph */
	--hyphen-limit-last: always;
	-webkit-hyphenate-limit-last: var(--hyphen-limit-last); /* not yet supported */
	-moz-hyphenate-limit-last: var(--hyphen-limit-last); /* not yet supported */
	-ms-hyphenate-limit-last: var(--hyphen-limit-last);
	hyphenate-limit-last: var(--hyphen-limit-last);
	/* don't bother hyphenating if text stops within 8% line width of the end */
	--hyphen-zone: 8%;
	-webkit-hyphen-limit-zone: var(--hyphen-zone);
	-moz-hyphen-limit-zone: var(--hyphen-zone);
	-ms-hyphen-limit-zone: var(--hyphen-zone);
	hyphen-limit-zone: var(--hyphen-zone);

	hanging-punctuation: first allow-end; /* 18% supported (Safari only) */
}

.nohyph {
	-ms-hyphens: manual;
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* No space between paragraphs; indent first line of all paragraphs but the
 * first */
article p {
	margin-bottom: 0;
}
article p ~ p {
	margin-top: 0;
	text-indent: calc(var(--lineheight) * 1em);
}
/* Don't indent a paragraph immediately following an <hr>, <pre>, <ul>, etc. */
article hr + p, article pre + p, article ul + p, article nav + p,
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p,
article table + p, article div.table-hscroll + p {
	text-indent: 0;
}

article h1, article h2 {
	margin-bottom: 0.25em;
}

/* Standardize other indentation */
article blockquote {
	margin-left: calc(var(--lineheight) * 1em);
	margin-right: calc(var(--lineheight) * 1em);
}
article ol, article ul {
	padding-left: calc(var(--lineheight) * 1em);
}
article dl dd {
	margin-left: calc(var(--lineheight) * 1em);
}

/* Undo "normal" footer style. */
article footer {
	margin-left: 0;
	margin-right: 0;
	padding-top: 0;
	font-size: 75%;
	text-align: inherit;
}

/* Pull the footer up closer to the preceding header. */
article h1 + footer, article h2 + footer {
	margin-top: -0.25em;
	line-height: 140%;
}

/* Tables */

article table {
	margin-left: calc(var(--lineheight) * 1em);
}
article table tr th {
	font-family: var(--fontsans);
	font-weight: 600;
	/* eliminate old-style numerals, since this isn't body text */
	font-variant-numeric: lining-nums;
}
article table tr td {
	/* eliminate old-style numerals, since this isn't body text */
	font-variant-numeric: lining-nums;
}

/* numeric cells */
th.num, td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}
article table col.lb { /* lb = left border */
	border-left: thin var(--foreground) solid;
}
article table tbody.tb { /* tb = top border */
	border-top: thin var(--foreground) solid;
}
article table tbody.bb { /* bb = bottom border */
	border-bottom: thin var(--foreground) solid;
}

/* New table style 12/2022 */
article table.spaced {
	margin-left: 0;
	border-collapse: collapse;
	line-height: 110%;
	vertical-align: baseline;
}
article table.spaced th, article table.spaced td {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.4em;
	padding-bottom: 0.4em;
}

article div.table-hscroll {
	overflow-x: scroll;
}


/* Fleurons! */
hr {
	display: block;
	margin: 1em auto;
	border: none;
	height: 1.67em;
	/* "contain" scales the image to fit within the available space, in this case limited to the height */
	background: url('images/coffee-beans-fleuron.png') center / contain no-repeat;
}
@media (prefers-color-scheme: dark) {
	hr {
		filter: brightness(120%);
	}
}

nav {
	font-size: 75%;
	line-height: 133%;
}
nav#TableOfContents {
	font-size: inherit;
	line-height: inherit;
}

footer {
	clear: both;

	padding-top: 1em;
	margin-left: 1em;
	margin-right: 1em;
	
	text-align: center;
	font-size: 75%;
}

/* A footer following a paragraph gets extra space above it. */
p + footer {
	margin-top: 1em;
}

footer .author {
	-ms-hyphens: none;
	-moz-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
}


/*
 * Headings
 */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--fontsans);
	font-weight: 600;
	line-height: 115%;

	/* no hyphenation, justification, or hanging punctuation */
	-ms-hyphens: manual;
	-moz-hyphens: manual;
	-webkit-hyphens: manual;
	hyphens: manual;
	text-align: start;
	hanging-punctuation: none;
	
	font-variant-numeric: lining-nums;
}

article h1 {
	font-size: calc(2 * var(--fontsize));
}
article h2 {
	font-size: calc(1.66667 * var(--fontsize));
}
article h3 {
	font-size: calc(1.5 * var(--fontsize));
}
article h4 {
	font-size: calc(1.33333 * var(--fontsize));
}
article h5 {
	font-size: calc(1.25 * var(--fontsize));
}
article h6 {
	font-size: var(--fontsize);
}


/*
 * Links
 */

a {
	color: var(--link-color);
}
a:visited {
	color: var(--link-color-visited);
}
a:active {
	color: var(--link-color-active);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	display: block;
	color: inherit;
	text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:visited:hover, h2 a:visited:hover, h3 a:visited:hover, h4 a:visited:hover, h5 a:visited:hover, h6 a:visited:hover {
	color: inherit;
}

/* These resemble links but aren't -- an indication of a hoverable abbreviation. */
abbr {
	/* No title, thus nothing to be gained by hovering the mouse over it. */
	text-decoration: none;
}
abbr[title] {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--link-color);
}
abbr[title] a:visited, a:visited abbr[title] {
	color: var(--link-color-visited);
	text-decoration-color: var(--link-color-visited);
}
abbr[title] a:active, a:active abbr[title] {
	color: var(--link-color-active);
	text-decoration-color: var(--link-color-active);
}


#recent > h3 {
	clear: both;
	padding-top: 1em;
}
#recent > h3, #recent > p {
	text-align: center;
}
#recent > ul {
	display: table;

	/* left and right auto to center the block */
	margin-left: auto;
	margin-right: auto;

	list-style-position: outside;
}
#recent > a[rel='prev'] {
	float: left;
	display: inline-block;
}
#recent > a[rel='next'] {
	float: right;
	display: inline-block;
}
#recent > a[rel='prev'] > h5, #recent > a[rel='next'] > h5 {
	display: inline-block;
	color: var(--foreground);
	text-decoration: none;
}


/* Lists */

ul, ol {
	list-style-position: outside;
}

dt {
	font-family: var(--fontsans);
	font-weight: 600;
}


/*
 * Misc
 */

article img {
	margin-top: 10px;
	margin-bottom: 10px;
	border: none;
	/* together, float:left and width:100% combine to produce a
	 * non-indented full-width image */
	float: left;
	width: 100%;
}
article img.thumbnail {
	width: initial;
	height: initial;
	margin: 0.5em;
}
article img.thumbnail.left {
	float: left;
}
article img.thumbnail.right {
	float: right;
}

/* From pileimg shortcode */
article figure {
	margin-inline-start: 0;
	margin-inline-end: 0;
}

/* From pileimg2 and pilevid shortcodes */

article figure.v2021 {
	margin: 0 0 0 0;
}
article figure.v2021 figcaption {
	font-size: 75%;
	line-height: 133%;
	clear: both;
}
article figure.v2021.left {
	width: 50%;
	float: left;
	margin-right: 1em;
}
article figure.v2021.right {
	width: 50%;
	float: right;
	margin-left: 1em;
}
article figure.v2021.full {
	width: 100%;
	margin-bottom: 0.75em;
}

video::cue {
	font-family: var(--fontserif);
	color: #cccccc;
}

article figure + p, article blockquote + p, article table + p {
	text-indent: inherit;
}

.footnotes {
	font-size: 75%;
	line-height: 133%;
}
a.footnote-backref {
	text-decoration: none;
}

/* Superscripts and subscripts */

/* I want to use font-variant-position, but only Firefox supports it, so I can't
 * test it!  Maybe something like the following? */
/*sup {
	font-size: 100%;
	vertical-align: 0ex;
	font-variant-position: super;
}
sub {
	font-size: 100%;
	vertical-align: 0ex;
	font-variant-position: sub;
}*/

/* Don't mess with line spacing. */
sup, sub {
	vertical-align: 0ex;
	position: relative;
}
sup {
	bottom: 3ex;
}
sub {
	top: 0.8ex;
}

/* Since a little superscript footnote is too small of a target for screens,
 * override the above typography:  Make it just a little smaller than the
 * containing text, and put [ ] around it to increase the click/tap target.  For
 * reference, the generated HTML is of the following forms:
 *
 * <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>
 * <a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a>
 */
sup[id^=fnref] { /* the value of the id attribute starts with fnref */
	font-size: 75%;
}
sup[id^=fnref] > a::before {
	content: '[';
}
sup[id^=fnref] > a::after {
	content: ']';
}

@media (pointer: coarse) {
	/* Make the footnote link the same size as the containing text. */
	sup[id^=fnref] {
		font-size: inherit;
		vertical-align: inherit;
		position: inherit;
		bottom: inherit;
	}
	/* "Hoverable" abbreviations require the ability to hover, which at least on iOS isn't possible. */
	abbr[title] {
		text-decoration-line: none;
	}
}

@media print {
	sup[id^=fnref] a { /* link to footnote */
		text-decoration: none;
	}
	sup[id^=fnref] > a::before, sup[id^=fnref] > a::after {
		content: none;
	}
	a.footnote-backref { /* hide backref arrow link */
		display: none;
	}
}


input, input::placeholder {
	font-family: var(--fontsans);
	font-size: 100%;
}
input[type='text'] {
	width: 15em;
}
button {
	font-family: var(--fontsans);
	font-weight: 300;
	font-size: 100%;
}


/*
 * Printing
 * (Alas, I haven't spent enough time to make it work the way I want.)
 */

@media print {
	body {
		column-count: 2 !important;
		column-gap: 2em;
	}

	#wrapper {
		max-width: unset;
		background: unset;
	}
	
	article {
		max-width: unset;
		background: unset;
	}
	
	/* Most links show their URL, but with some exceptions. */
	a::after {
		content: ' (' attr(href) ')';
		font-style: italic;
		text-decoration: none;
	}
	h1 a::after, /* article title */
	article > h2 a::after, /* site title */
	figure a::after, /* photo linking to original */
	sup a::after /* link to footnote */ {
		content: none;
	}
	
	/* These don't seem to work, at least in Big Sur Safari */
	article figure.v2021 {
		break-inside: avoid;
	}
	article figure.v2021 picture, article figure.v2021 img {
		break-inside: avoid;
	}
}