/* Berean 2 theme.
 *
 * Layout rows and columns come from Eternium (html.eternium-layout);  this file holds
 * everything else.  Eternium's utilities sit in a cascade layer, so any rule here wins.
 *
 * The file is written with CSS nesting, one block per part of the page.  Each block holds its
 * own screen-width adjustments, so there is no separate responsive section.  Everything that
 * styles the article's own text is nested inside article.content, so it can never reach the
 * header, the table of contents, the notes or the footer.
 *
 * Colour has three families, each with one job:
 *   --link   cobalt, for everything you click, in both modes;
 *   --green  the single structural accent (section marks, quotation rules, callouts, the
 *            table-of-contents bar);
 *   neutrals white paper in light mode;  in dark mode a near-black with a slight blue
 *            tint, derived from one colour, --dark-bg.
 * --green-l/--green-d and --dark-bg are the seeds the rest are derived from.
 *
 * Widths:  wide screens (1300px and up) show the table of contents on the left;  below that
 * it becomes a bar at the top.  At 980px and up citations sit in the right margin;  below
 * that they open as popovers.  At 640px and below the phone layout applies. */

/*┌─────────────────╮
  |Tokens           |
  └─────────────────╯*/
:root {
	--green-l: #2E6B45;   /* forest:  6.3:1 on white */
	--green-d: #86C49A;   /* its dark partner */
	--link-l:  #2537D8;   /* cobalt:  7.8:1 on white */
	--link-d:  #8FA0FF;   /* lighter cobalt for dark mode:  7:1 or better on --dark-bg */
	--dark-bg: #181B1F;

	--font-body: "Source Sans 3";
	--font-head: var(--font-body);
	--head-w: 600;
	--text: var(--font-body), "Helvetica Neue", Arial, system-ui, sans-serif;
	--head: var(--font-head), var(--font-body), "Helvetica Neue", Arial, sans-serif;

	--measure: 610px;
	--gutter:  52px;
	--note-w:  300px;
	--toc-w:   216px;
	--toc-gap: 56px;
	--page-pad: 32px;
	/* The article and its margin notes, without the table of contents. */
	--main-w: calc(var(--measure) + var(--gutter) + var(--note-w));

	@media (max-width: 1299px) { --measure: 590px; --gutter: 40px; --note-w: 260px }
	@media (max-width: 979px) { --page-pad: 22px }
}

:root {
	--paper:        #FFFFFF;
	--raised:       #FFFFFF;
	--ink:          #17181C;
	--ink-soft:     #2D2F35;
	--muted:        #5B5D66;
	--rule:         #E4E5E8;
	--rule-2:       #CDD0D5;
	--link:         var(--link-l);
	--link-line:    color-mix(in srgb, var(--link-l) 45%, transparent);
	--accent:       var(--link-l);   /* note numbers, focus ring, active note edge */
	--accent-tint:  #EEF0FE;
	--select:       color-mix(in srgb, var(--link-l) 16%, transparent);
	--green:        var(--green-l);
	--on-fill:      #FFFFFF;          /* text on a filled link-blue or green background */
	--green-tint:   color-mix(in srgb, var(--green) 8%, var(--paper));
	--foot-bg:      #111315;
	--caution:      #B4332A;       --caution-bg:   #FBEDEB;
	--note:         #5B5D66;       --note-bg:      #F3F4F6;
	--info:         var(--link-l); --info-bg:      #EEF0FE;
	--band:         #0B0C0E;       /* caption strip and the photo-less header;  its text colours serve the footer too */
	--band-ink:     #D5D8DD;
	--band-mute:    #9BA1A9;
	--scrim-top:    rgba(6, 7, 9, .38);
	--scrim-mid:    rgba(8, 9, 11, .48);
	--scrim-foot:   rgba(8, 9, 11, .86);
	--photo-filter: none;
	--shadow: 0 1px 2px rgba(15, 18, 24, .06), 0 14px 36px -10px rgba(15, 18, 24, .22);
	color-scheme: light;
}
:root[dark] {
	--paper:        var(--dark-bg);
	--raised:       color-mix(in srgb, var(--dark-bg), #FFFFFF 7%);
	--ink:          #E6E8EB;
	--ink-soft:     #CDD1D6;
	--muted:        #A2A7AE;
	--rule:         color-mix(in srgb, var(--dark-bg), #FFFFFF 11%);
	--rule-2:       color-mix(in srgb, var(--dark-bg), #FFFFFF 20%);
	--link:         var(--link-d);
	--link-line:    color-mix(in srgb, var(--link-d) 50%, transparent);
	--accent:       var(--green-d);
	--accent-tint:  color-mix(in srgb, var(--dark-bg), #FFFFFF 6%);
	--select:       color-mix(in srgb, var(--green-d) 30%, transparent);
	--green:        var(--green-d);
	--on-fill:      var(--dark-bg);
	--green-tint:   color-mix(in srgb, var(--green) 9%, var(--paper));
	--foot-bg:      color-mix(in srgb, var(--dark-bg), #000 45%);
	--caution:      #EE8A78;       --caution-bg:   #2A1716;
	--note:         #A2A7AE;       --note-bg:      color-mix(in srgb, var(--dark-bg), #FFFFFF 5%);
	--info:         #CDD1D6;       --info-bg:      color-mix(in srgb, var(--dark-bg), #FFFFFF 5%);
	--band:         color-mix(in srgb, var(--dark-bg), #000 45%);
	--scrim-top:    rgba(4, 5, 6, .5);
	--scrim-mid:    rgba(6, 7, 9, .62);
	--scrim-foot:   rgba(6, 7, 9, .93);
	--photo-filter: saturate(.8) brightness(.82);
	--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 18px 44px -10px rgba(0, 0, 0, .7);
	color-scheme: dark;
}

/*┌─────────────────╮
  |Base             |
  └─────────────────╯*/
*, *::before, *::after { box-sizing: border-box }
html {
	-webkit-text-size-adjust: 100%; scroll-padding-top: 24px; scroll-behavior: smooth;
	@media (max-width: 1299px) { scroll-padding-top: 64px }   /* room for the sticky contents bar */
	@media (prefers-reduced-motion: reduce) { scroll-behavior: auto }
}
body {
	margin: 0; background: var(--paper); color: var(--ink);
	font: 400 1.1875rem/1.62 var(--text);   /* 19px */
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility; font-kerning: normal;
	transition: background-color .25s ease, color .25s ease;
	@media (max-width: 640px) { font-size: 1.125rem }
}
::selection { background: var(--select) }
a { color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
[hidden] { display: none !important }
@media (prefers-reduced-motion: reduce) { * { transition: none !important } }

/*┌─────────────────╮
  |Masthead         |
  └─────────────────╯*/
.site-header .inner, .site-footer .inner { max-width: 1240px; margin: 0 auto; padding: 18px var(--page-pad) }
.site-header .inner {
	justify-content: space-between;
	/* The logo stands on a rule, which takes the place of its base bar (see theme.php):  the
	 * header's bottom rule on wider screens;  on a phone, where the nav wraps onto a second
	 * line, a rule along the top of the nav.  On wider screens the nav and toggle keep equal
	 * space above and below, and only the logo drops through the bottom padding onto the rule. */
	@media (min-width: 641px) {
		.wordmark { align-self: flex-end; margin-bottom: -18px }   /* the padding above */
	}
	@media (max-width: 640px) { flex-wrap: wrap; gap: 0 1rem; padding-bottom: 10px }
}
/* The logo (inlined):  lettering and pediment in the text colour, the four columns green.  It is
 * sized by width, because the header's copy (logo-no-base.svg) is shorter than logo.svg but the
 * same width, so both draw the lettering at the same size. */
.wordmark {
	display: block; color: inherit; line-height: 0;
	.logo { display: block; width: 121px; height: auto }
	.cols { fill: var(--green) }
}
.site-nav {
	margin-left: auto; gap: 1.6rem; font-size: .875rem; font-weight: 500;
	a { text-decoration: none; padding: 4px 0; border-block: 2px solid transparent }   /* the top one keeps the text centred */
	@media (max-width: 640px) { margin-left: 0; width: 100%; gap: 1.1rem; font-size: .82rem; order: 3; padding-top: 8px; border-top: 1px solid var(--ink) }
}
.theme-toggle {
	cursor: pointer; font: 600 .8rem/1 var(--text); color: inherit; background: transparent;
	border: 1px solid currentColor; padding: .5rem .7rem; border-radius: 0;
	svg { width: 15px; height: 15px }
	@media (max-width: 640px) { margin-left: auto; align-self: flex-start }
}

/*┌─────────────────╮
  |Photo header     |
  └─────────────────╯*/
/* The masthead lies over the photo's sky, the title and description over a bottom scrim.
 * On a phone the masthead leaves the photo and sits above it on the page colour. */
.hero {
	position: relative; background: var(--band); color: #fff;

	.site-header {
		position: absolute; inset: 0 0 auto 0; z-index: 5; border-bottom: 1px solid rgba(255, 255, 255, .5);
		@media (max-width: 640px) { position: static; background: var(--paper); color: var(--ink); border-bottom: 0 }
	}
	.wordmark {
		filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .4));
		.cols { fill: var(--green-d) }
		@media (max-width: 640px) {
			filter: none;
			.cols { fill: var(--green) }
		}
	}
	.site-nav a {
		text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
		&:hover { border-bottom-color: var(--green-d) }
		@media (max-width: 640px) { text-shadow: none }
	}
	.theme-toggle {
		border-color: rgba(255, 255, 255, .55); background: rgba(10, 11, 13, .22);
		&:hover { border-color: #fff; background: rgba(10, 11, 13, .4) }
		@media (max-width: 640px) { border-color: var(--rule-2); background: transparent }
	}

	/* The frame grows with the title and description;  the title block always sits at its foot.
	 * Nothing here depends on the window's height, so resizing the window never moves the title. */
	.hero-frame {
		position: relative; min-height: 420px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
		@media (max-width: 979px) { min-height: 380px }
		@media (max-width: 640px) { min-height: 220px }
	}
	.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: var(--photo-filter) }
	.hero-scrim {
		position: absolute; inset: 0; pointer-events: none;
		background:
			linear-gradient(180deg, var(--scrim-top) 0, rgba(0, 0, 0, 0) 110px),
			linear-gradient(180deg, rgba(0, 0, 0, 0) 34%, var(--scrim-mid) 64%, var(--scrim-foot) 100%);
	}
	/* No photo:  a shorter dark band with a faint drafting grid. */
	&.no-photo {
		.hero-frame { min-height: 0 }
		.hero-scrim {
			background:
				linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 24px 24px,
				linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 24px 24px,
				radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--green-d) 16%, transparent), transparent 60%);
		}
	}

	/* The title sits in the same column as the article body below it. */
	.hero-title {
		position: relative; z-index: 4; padding: 104px var(--page-pad) 30px; display: flex; justify-content: center;
		@media (max-width: 640px) { padding: 28px var(--page-pad) 16px }
	}
	.ht {
		width: var(--main-w); margin-left: calc(var(--toc-w) + var(--toc-gap)); min-width: 0;
		@media (max-width: 1299px) { margin-left: 0 }
		@media (max-width: 979px) { width: 100%; max-width: 44rem }
	}
	.crumbs {
		gap: .2rem .55rem; font: 600 .75rem/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: #fff;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 14px rgba(0, 0, 0, .5);
		a { text-decoration: none }
		a:hover { text-decoration: underline; text-underline-offset: 3px }
		.sep { color: rgba(255, 255, 255, .6); font-size: 1.1em }
		@media (max-width: 640px) { font-size: .64rem; letter-spacing: .1em }
	}
	h1 {
		font-family: var(--head); font-weight: var(--head-w); color: #fff;
		font-size: clamp(2.5rem, 4.7vw, 4.4rem); line-height: 1.0; letter-spacing: -.028em;
		margin: .9rem 0 0; max-width: 24ch; text-wrap: balance;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 30px rgba(0, 0, 0, .45);
		&::after { content: ""; display: block; width: 72px; height: 5px; background: var(--green-d); margin-top: 1.15rem }
		@media (max-width: 640px) {
			font-size: 1.9rem; margin-top: .4rem; max-width: none;
			&::after { width: 44px; height: 4px; margin-top: .6rem }
		}
	}
	/* The description is a summary, not body text:  smaller, italic, and a step dimmer than the title. */
	.hero-tag {
		margin: 1rem 0 0; max-width: 40rem; font: italic 400 1.02rem/1.5 var(--text); color: rgba(255, 255, 255, .78);
		text-shadow: 0 1px 10px rgba(0, 0, 0, .6); text-wrap: pretty;
		@media (max-width: 640px) { font-size: .9rem; line-height: 1.4; margin-top: .5rem }
	}
}

/*┌─────────────────╮
  |Caption strip    |
  └─────────────────╯*/
/* Article metadata on the left, the photo credit on the right.  The text starts where the
 * title starts:  the same width, with the table-of-contents offset added to the padding. */
.hero-cap {
	background: var(--band); color: var(--band-ink); font: 400 .78rem/1.45 var(--text); letter-spacing: .005em;
	border-top: 1px solid rgba(255, 255, 255, .07);
	@media (max-width: 640px) { font-size: .72rem }

	.inner {
		box-sizing: content-box; max-width: var(--main-w); margin: 0 auto; gap: .5rem 2.2rem;
		padding: 8px var(--page-pad) 9px calc(var(--page-pad) + var(--toc-w) + var(--toc-gap));
		@media (max-width: 1299px) { padding-left: var(--page-pad) }
		@media (max-width: 979px) { max-width: 44rem; position: relative }
		@media (max-width: 640px) { padding: 7px var(--page-pad) }
	}
	p { margin: 0 }
	a {
		color: var(--link-d); text-decoration: none;
		&:hover { text-decoration: underline; text-underline-offset: 2px }
	}

	/* Each item carries its separator dot in its left margin;  the strip starts 1.4em early and
	 * clips that band, so a wrapped line never begins with a dot. */
	.cap-meta {
		align-items: baseline; min-width: 0; margin: 0 0 0 -1.4em; clip-path: inset(-2px -2px -2px 1.4em);
		@media (max-width: 979px) { padding-right: 1.6rem }
		> span {
			position: relative; white-space: nowrap; margin-left: 1.4em;
			&::before { content: "\00B7"; position: absolute; left: -.9em; color: var(--band-mute); font-weight: 700 }
		}
		.m-k { color: var(--band-mute) }
		b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums }
	}
	/* The credit folds into a small (i) that opens it on hover, focus or tap.  On wide screens a
	 * short credit is shown inline instead. */
	.cap-credit {
		position: relative; flex: none; max-width: 45%; color: var(--band-mute); text-align: right;
		@media (max-width: 979px) { position: absolute; right: var(--page-pad); bottom: 8px }

		.cap-i {
			display: block; width: 20px; height: 20px; padding: 0; cursor: pointer;
			border: 1.5px solid var(--band-mute); border-radius: 50%; background: transparent; color: var(--band-ink);
			font: italic 700 12px/17px Georgia, serif; text-align: center;
		}
		.cap-text {
			display: none; position: absolute; z-index: 30; right: 0; bottom: calc(100% + 8px);
			width: max-content; max-width: min(26rem, calc(100vw - 40px)); padding: .6rem .8rem;
			background: var(--band); color: var(--band-ink); border: 1px solid rgba(255, 255, 255, .2);
			text-align: left; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
		}
		&:is(:hover, :focus-within, .open) {
			.cap-i { border-color: #fff; color: #fff }
			.cap-text { display: block }
		}
		@media (min-width: 1300px) {
			&:not(.long) .cap-i { display: none }
			&:not(.long) .cap-text { display: block; position: static; width: auto; padding: 0; background: none; border: 0; box-shadow: none; text-align: right }
		}
	}
}

/*┌─────────────────╮
  |Layout           |
  └─────────────────╯*/
.layout { padding: 0 var(--page-pad) }
/* A short page still fills the window:  the article area grows, so the footer sits at the bottom. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh }
main.layout { flex: 1 0 auto }
.lay-row {
	padding-top: 36px; gap: var(--toc-gap); width: calc(var(--toc-w) + var(--toc-gap) + var(--main-w));
	@media (max-width: 1299px) { width: var(--main-w) }
	@media (max-width: 979px) { width: 100%; justify-content: center }
	@media (max-width: 640px) { padding-top: 28px }
}
.body-wrap {
	position: relative; width: var(--measure);
	@media (max-width: 979px) { width: 100%; max-width: var(--measure) }
}

/*┌─────────────────╮
  |Contents         |
  └─────────────────╯*/
/* Wide screens:  a sticky list with one green bar that slides to the current section. */
.toc {
	position: sticky; top: 0; width: var(--toc-w); max-height: 100vh; overflow: auto; scrollbar-width: thin; padding: 0; font-size: 1rem;
	@media (max-width: 1299px) { display: none }

	.toc-list { position: relative }
	/* The logo appears above the list once the list sticks to the top of the window, which is when
	 * the masthead's own logo has scrolled away (theme.js sets html.toc-stuck).  It stays put while
	 * the list scrolls beneath it. */
	.toc-logo {
		position: sticky; top: 0; z-index: 1; background: var(--paper);
		display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .25s ease, opacity .25s ease;
		.wordmark { overflow: hidden; min-height: 0; padding-left: .75rem; color: var(--ink) }
		.logo { width: 110px; margin: 1.1rem 0 1.2rem }
		:root.toc-stuck & { grid-template-rows: 1fr; opacity: 1 }
	}
	ol { list-style: none; margin: 0; padding: 0 }
	li { margin: 0 }
	a {
		display: block; text-decoration: none; color: var(--muted); font-size: .82rem; line-height: 1.3; padding: .22rem 0 .22rem .75rem;
		transition: color .2s;
		&:hover { color: var(--ink) }
		&.active { color: var(--ink); font-weight: 600 }
	}
	li.h3 > a { padding-left: 1.6rem; font-size: .78rem }
	/* Sub-sections show only under the section being read;  theme.js marks them .open. */
	li.h3:not(.open) { display: none }
	.toc-mark { position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--green); pointer-events: none; transition: top .2s ease, height .2s ease }
}
/* Medium and narrow screens:  a sticky bar that opens the same list. */
.toc-bar {
	display: none; position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--rule);
	@media (max-width: 1299px) { display: block }

	button {
		width: 100%; cursor: pointer; background: none; border: 0; color: var(--ink); font: 500 .85rem/1 var(--text); padding: .8rem var(--page-pad); text-align: left;
		&[aria-expanded="true"] svg { transform: rotate(180deg) }
	}
	.lbl { color: var(--green) }
	.cur { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
	svg { width: 12px; height: 12px; transition: transform .2s }
}
.toc-panel {
	padding: .2rem var(--page-pad) 1rem; border-top: 1px solid var(--rule); max-height: 70vh; overflow: auto;
	ol { list-style: none; margin: 0; padding: 0 }
	a { display: block; text-decoration: none; color: var(--ink-soft); font-size: .9rem; padding: .5rem 0; border-bottom: 1px solid var(--rule) }
	li.h3 > a { padding-left: 1.4rem; font-size: .85rem; color: var(--muted) }
}
/*┌─────────────────╮
  |Labels           |
  └─────────────────╯*/
/* Small uppercase labels share one style;  the rules for each set only colour and spacing. */
.toc-bar .lbl, .site-footer .f-verse b, article.content :is(.callout-title, table.ruled th) {
	font: 700 .68rem/1 var(--text); letter-spacing: .15em; text-transform: uppercase;
}

/*┌─────────────────╮
  |Article          |
  └─────────────────╯*/
/* Everything here applies only inside the article. */
article.content {
	p { margin: 0 0 1.12em }
	strong { font-weight: 650 }
	code { font-size: .86em }
	pre {
		margin: 1.2rem 0 1.6rem; padding: .85rem 1rem; overflow-x: auto; background: var(--note-bg); border-left: 3px solid var(--rule-2);
		font-size: .9rem; line-height: 1.5; tab-size: 4;
		code { font-size: 1em }
	}
	hr { border: 0; height: 0; margin: 0 }
	img { max-width: 100%; height: auto }
	q { quotes: none }
	q::before, q::after { content: none }
	a:not(.footnote-ref, .footnote-backref, .card) {
		color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--link-line); text-underline-offset: 3px;
		&:hover { text-decoration-color: var(--link) }
	}

	/* Headings */
	h2 {
		position: relative; font-family: var(--head); font-weight: var(--head-w);
		font-size: 3rem; line-height: 1.08; letter-spacing: -.02em;
		margin: 3.4rem 0 1.3rem; padding-top: 1rem; border-top: 1px solid var(--rule-2); text-wrap: balance;
		&::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 4px; background: var(--green) }
		@media (max-width: 640px) { font-size: 2.3rem }
	}
	> .sec:is(:first-child, .first) > h2:first-child { margin-top: 0 }
	/* Each level differs in more than size:  h2 has the rule and green bar, h3 is large type, h4 is
	 * smaller, h5/h6 are body-sized italic. */
	h3 {
		font: 600 1.7rem/1.2 var(--head); letter-spacing: -.012em; margin: 2.6rem 0 .75rem; color: var(--ink); text-wrap: balance;
		@media (max-width: 640px) { font-size: 1.45rem }
	}
	h4 { font: 600 1.2rem/1.35 var(--head); margin: 1.9rem 0 .4rem; color: var(--ink); text-wrap: balance }
	h5, h6 { font: italic 600 1em/1.4 var(--text); margin: 1.5rem 0 .3rem; color: var(--ink-soft) }

	/* Footnote references */
	sup {
		font-size: .6em; line-height: 0; vertical-align: .72em;
		& + sup { margin-left: .12em }
	}
	a.footnote-ref {
		font-weight: 650; color: var(--link); text-decoration: none; padding: .08em .2em;
		font-variant-numeric: tabular-nums; border-radius: 1px; transition: background-color .12s, color .12s;
		&:is(:hover, .is-active) { background: var(--link); color: var(--on-fill) }
		/* A mark that cites a footnote nobody wrote. */
		&.footnote-undefined { color: var(--muted); cursor: help }
	}

	/* Opening quotes */
	/* A paragraph at the top of the article that starts with a <q>.  The whole paragraph, quote
	 * and attribution alike, gets one style. */
	.front > p:has(> q:first-child) {
		position: relative; margin: 0 0 1.6rem; padding-left: 2.7rem;
		font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft);
		&::before { content: "\201C"; position: absolute; left: -.05em; top: -.3rem; font: normal 600 3.8rem/1 var(--head); color: var(--green) }
	}

	/* Block quotations:  a thin green rule and slightly smaller type, so pages with dozens of
	 * them stay quiet.  The big quotation mark belongs to the opening quotes only. */
	blockquote {
		margin: 1.8rem 0 2rem; padding: .15rem 0 .15rem 1.25rem; border-left: 3px solid var(--green); font-size: .95em; color: var(--ink-soft);
		p { margin: 0 0 .8em }
		p:last-child { margin-bottom: 0 }
	}

	/* Charts and line drawings marked class="inverted" flip to light-on-dark in dark mode;  the
	 * hue turn keeps their colours close to how they were drawn.  Not for photographs. */
	:root[dark] & img.inverted { filter: invert(.9) hue-rotate(180deg) }

	/* Glossary terms (<dfn>, or ++term++ in Markdown) with a definition (glossary.js) get a faint
	 * dashed underline. */
	dfn { font-style: inherit }
	dfn.has-def {
		cursor: help; text-decoration: underline dashed color-mix(in srgb, var(--ink) 30%, transparent);
		text-decoration-thickness: 1px; text-underline-offset: .22em;
		&:is(:hover, .open) { text-decoration-color: var(--green) }
	}

	/* class="lightbox":  click to see the whole image (theme.js).  On an <img>, or on a link
	 * around one that points at the full-size file. */
	:is(img.lightbox, a.lightbox img) { cursor: zoom-in }

	/* class="wide":  a chart or table too detailed for the text column takes the margin too,
	 * on screens wide enough to have one.  theme.js keeps the margin notes clear of it. */
	.wide {
		:root[data-layout="article"] & {
			@media (min-width: 980px) {
				width: var(--main-w); max-width: none;
				&:is(img) { width: auto; max-width: var(--main-w) }   /* never enlarged past its own size */
			}
		}
	}

	/* class="left" or "right":  a small image beside the text. */
	img:is(.left, .right) { max-width: min(45%, 15rem) }
	img.left { float: left; margin: .25rem 1.2rem .6rem 0 }
	img.right { float: right; margin: .25rem 0 .6rem 1.2rem }

	/* class="small":  a table that lays out an image beside its explanation, in smaller type. */
	table.small {
		margin: 1.4rem 0 1.8rem; font-size: .84rem; line-height: 1.5; color: var(--ink-soft);
		td { vertical-align: middle; padding: 0 1rem 0 0 }
		td:last-child { padding-right: 0 }
	}

	/* Asides are margin figures:  on wide screens theme.js moves each into the right-hand column
	 * level with its place in the text (.in-margin), sharing the column with the sidenotes.  On
	 * tablets they float beside the text, and on phones they sit in the text. */
	aside {
		float: right; clear: right; width: min(45%, 260px); margin: .3rem 0 1rem 1.4rem;
		font-size: .82rem; line-height: 1.45; color: var(--ink-soft);
		&.in-margin { position: absolute; left: calc(100% + var(--gutter)); width: var(--note-w); margin: 0; float: none }
		@media (max-width: 640px) { float: none; width: auto; margin: 1.5rem 0 }

		p { margin: 0 0 .6rem }
		img { display: block; width: 100%; margin: 0 0 .5rem }
		> :last-child { margin-bottom: 0 }
		ul, ol { margin: 0 0 .6rem; padding-left: 1.1rem }
		blockquote { margin: .5rem 0; padding-left: .8rem; border-left-width: 2px; font-size: 1em }
	}

	/* Callouts:  one family, told apart by colour and a small geometric marker */
	.callout {
		--c: var(--note); --c-bg: var(--note-bg); --shape: none;
		display: flow-root; margin: 2.2rem 0; padding: 1.1rem 1.35rem 1.25rem; background: var(--c-bg); border-top: 3px solid var(--c);
		p { margin: 0 0 .6em; font-size: .96em; line-height: 1.55 }
		p:last-child { margin-bottom: 0 }
		.callout-title {
			display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; color: var(--c);
			&::before { content: ""; width: .62rem; height: .62rem; background: var(--c); clip-path: var(--shape); flex: none }
		}
		&.callout-info      { --c: var(--info);    --c-bg: var(--info-bg);    --shape: circle(50%) }
		&.callout-tip       { --c: var(--green);   --c-bg: var(--green-tint); --shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) }
		&.callout-important { --c: var(--green);   --c-bg: var(--green-tint); --shape: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 35% 0, 35% 100%, 0 100%); border-top-width: 6px }
		&.callout-warning   { --c: var(--green);   --c-bg: var(--green-tint); --shape: polygon(50% 0, 100% 100%, 0 100%) }
		&.callout-caution   { --c: var(--caution); --c-bg: var(--caution-bg); --shape: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%) }
	}

	/* Tables are unstyled by default, since some carry their own styles for diagrams;  every
	 * table only scrolls sideways on a phone.  class="ruled" is the ruled data table. */
	.table-wrap { overflow-x: auto }
	table.ruled {
		width: 100%; margin: 1.8rem 0 2.2rem; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
		font-size: .8rem; line-height: 1.42;
		th { text-align: left; padding: .75rem 1rem .6rem 0; color: var(--muted); border-bottom: 1px solid var(--ink) }
		td { padding: .62rem 1rem .62rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-soft) }
		td:first-child { color: var(--ink); font-weight: 500 }
		tbody tr:last-child td { border-bottom: 0 }
		tbody tr:hover td { background: var(--accent-tint) }
		sup { font-size: .8em }
	}

	/* class="quotes":  one row per speaker, a portrait beside the name, role and quotation.
	 * They are written as Markdown tables, whose first row is a header row:  either empty, which
	 * hides, or the first speaker, which looks like the rest. */
	table.quotes {
		width: 100%; margin: 1.8rem 0 2.2rem; border-collapse: collapse;
		thead:not(:has(img, strong, blockquote)) { display: none }
		:is(th, td) { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; font-weight: inherit }
		tbody tr:last-child td { border-bottom: 0 }
		:is(th, td):first-child {
			width: 7.5rem; padding-right: 1.3rem;
			@media (max-width: 640px) { width: 5rem; padding-right: .9rem }
		}
		img { display: block; width: 100% }
		blockquote { margin: .6rem 0 0 }
	}

	/* Sources:  each source, then the exact passages quoted from it, with the note numbers that
	 * cite them.  The source's citation stays pinned while its passages scroll past. */
	.sec-sources {
		@media (min-width: 980px) { width: var(--main-w) }
	}
	/* The list is collapsed by default behind a full-width button. */
	.sources-box {
		> summary {
			display: flex; align-items: center; gap: .7rem; cursor: pointer; list-style: none;
			padding: .95rem 1.1rem; border: 1px solid var(--rule-2); color: var(--link); font-weight: 600; font-size: .95rem;
			&::-webkit-details-marker { display: none }
			&::after { content: ""; width: .45rem; height: .45rem; margin-left: auto; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg) }
			&:hover { border-color: var(--link) }
		}
		.sb-close { display: none }
		&[open] {
			> summary { margin-bottom: 1.6rem; &::after { transform: translateY(2px) rotate(225deg) } }
			.sb-open { display: none }
			.sb-close { display: inline }
		}
	}
	.sources-lede { font: 400 .82rem/1.5 var(--text); color: var(--muted); margin: 0 0 1.4rem; max-width: 46rem }
	.footnotes {
		> hr { display: none }
		ol { list-style: none; margin: 0; padding: 0 }
		> ol > li {
			display: grid; grid-template-columns: 3.2rem minmax(0, 5fr) minmax(0, 7fr); column-gap: 1.6rem;
			padding: 1.4rem 0 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 80px;
			&:first-child { border-top: 2px solid var(--ink) }
			> :is(p, .fnMarker) {
				position: sticky; top: 24px; align-self: start;
				@media (max-width: 1299px) { top: 64px }
				@media (max-width: 979px) { position: static }
			}
			> .fnMarker { grid-column: 1; font-size: .8rem }
			> p {
				grid-column: 2; margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ink);
				:is(> a:not(.footnote-backref), a.title) { font-weight: 600; color: var(--link); text-decoration-color: var(--link-line) }
			}
			> ol { grid-column: 3; grid-row: 1 / span 3 }
			&:not(:has(> ol > li)) > p { grid-column: 2 / -1 }
			@media (max-width: 979px) {
				grid-template-columns: 2.6rem minmax(0, 1fr);
				> ol { grid-column: 2; grid-row: auto; margin-top: 1rem }
			}
		}
		small { display: block; margin-top: .75rem; padding: .1rem 0 .1rem .75rem; border-left: 2px solid var(--rule-2); font: 400 .74rem/1.5 var(--text); color: var(--muted) }
		li li {
			display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .6rem; padding: .5rem 0 .55rem; border-bottom: 1px solid var(--rule); scroll-margin-top: 80px;
			&:first-child { padding-top: 0 }
			&:last-child { border-bottom: 0 }
			p { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--ink-soft) }
		}
		li:is(:target, .flash) { background: var(--accent-tint); box-shadow: -10px 0 0 var(--accent-tint), 10px 0 0 var(--accent-tint) }
		.loc { font-size: .9em; font-weight: 650; color: var(--ink) }
		.fnMarker { font: 700 .72rem/1.6 var(--text); color: var(--accent); font-variant-numeric: tabular-nums }
		li.uncited > .fnMarker { color: var(--rule-2) }
		a.footnote-backref { color: var(--link); text-decoration: none; font-size: .85em; padding: 0 .15em }
	}
}

/*┌─────────────────╮
  |Citation notes   |
  └─────────────────╯*/
/* A citation shows as a sidenote (.sn) in the right margin, or as a popover (.fn-pop) on
 * narrow screens, wide pages, or when its sidenote has scrolled out of view.  Both are built
 * from the same parts:  .note-head, .note-body and .note-more. */
.sn, .fn-pop {
	.note-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; line-height: 1.2; margin-bottom: .1rem }
	.note-num { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 1.1rem }
	.note-cite { font-weight: 650; color: var(--ink); flex: 1 1 auto; min-width: 0 }
	.note-body {
		color: var(--ink-soft);
		p { margin: 0 }
		.loc { font-size: .82em; font-weight: 650; color: var(--muted) }
	}
	.note-more { margin-top: .6rem; padding-top: .55rem; border-top: 1px solid var(--rule) }
	.note-src {
		font-size: .88rem; line-height: 1.35; color: var(--ink);
		a { color: var(--ink); text-decoration-color: var(--link-line); text-underline-offset: 2px }
		a:hover { color: var(--link) }
	}
	.note-prov { margin-top: .45rem; font-size: .7rem; line-height: 1.45; color: var(--muted) }
	.note-jump {
		display: inline-block; margin-top: .5rem; font-size: .7rem; font-weight: 650; color: var(--link); text-decoration: none;
		&:hover { text-decoration: underline }
	}
}

/* Sidenotes show three lines of the quotation, fewer when crowded, and open fully on hover,
 * focus or click. */
.sidenotes {
	position: absolute; top: 0; left: calc(100% + var(--gutter)); width: var(--note-w);
	@media (max-width: 979px) { display: none }
}
.sn {
	position: absolute; left: 0; width: 100%; padding: .55rem .75rem .6rem .85rem; border-left: 1px solid var(--rule-2);
	font-size: .76rem; line-height: 1.45; color: var(--muted);
	transition: box-shadow .15s, background-color .15s, border-color .15s;

	.note-body {
		font-size: .93rem; line-height: 1.42; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
		p { display: inline }
	}
	&.mid .note-body { -webkit-line-clamp: 2 }
	&.tight .note-body { -webkit-line-clamp: 1 }
	&.repeat .note-num::after { content: "\2191"; font-weight: 500; margin-left: .15em; color: var(--muted) }
	.note-more { display: none }
	&:is(.active, :hover) {
		z-index: 20; background: var(--raised); border-left: 2px solid var(--accent); box-shadow: var(--shadow); padding-left: calc(.85rem - 1px);
		.note-body { display: block; -webkit-line-clamp: unset; overflow: visible }
		.note-more { display: block }
	}
}

/* On a phone the popover becomes a sheet along the bottom of the screen. */
.fn-pop {
	position: absolute; z-index: 100; width: min(27rem, calc(100vw - 2rem)); background: var(--raised); color: var(--ink);
	border: 1px solid var(--rule-2); border-top: 3px solid var(--accent); box-shadow: var(--shadow);
	padding: .85rem 1.05rem 1rem; font-size: .8rem; line-height: 1.45;
	@media (max-width: 640px) { position: fixed; left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 62vh; overflow: auto; border-left: 0; border-right: 0 }

	.note-head { margin-bottom: .3rem }
	.note-body {
		font-size: .98rem; line-height: 1.5;
		.loc { font-size: .8em }
	}
	.close {
		position: absolute; top: .45rem; right: .45rem; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); font: 400 1.3rem/1 var(--text); cursor: pointer;
		&:hover { color: var(--accent) }
	}
}

/*┌─────────────────╮
  |Glossary popover |
  └─────────────────╯*/
/* A <dfn>'s definition (glossary.js):  the term, then its meaning. */
.dfn-pop {
	position: absolute; z-index: 110; width: max-content; max-width: min(22rem, calc(100vw - 24px));
	padding: .6rem .85rem .7rem; background: var(--raised); color: var(--ink-soft);
	border: 1px solid var(--rule-2); border-top: 3px solid var(--green); box-shadow: var(--shadow);
	font: 400 .85rem/1.45 var(--text);
	b { display: block; margin-bottom: .15rem; color: var(--ink); font-weight: 650 }
}

/*┌─────────────────╮
  |Forms            |
  └─────────────────╯*/
/* Plain fields and buttons for forms in the article.  :where() gives these no weight, so a
 * tool's own styles always win. */
:where(article.content) {
	:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), textarea, select) {
		font: inherit; font-size: .95em; color: var(--ink); background: var(--paper);
		border: 1px solid var(--rule-2); border-radius: 0; padding: .45rem .6rem;
	}
	:where(button, input[type="submit"]) {
		font: 600 .9rem/1 var(--text); color: var(--on-fill); background: var(--link); cursor: pointer;
		border: 1px solid var(--link); border-radius: 0; padding: .65rem 1.1rem;
	}
	:where(input, textarea, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent) }
	:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--green) }
}

/*┌─────────────────╮
  |Lightbox         |
  └─────────────────╯*/
/* The whole image, as large as the window allows.  A click anywhere or Escape closes it. */
dialog.lightbox {
	max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; padding: 2.5vmin; border: 0;
	background: transparent; cursor: zoom-out;
	&[open] { display: flex; align-items: center; justify-content: center }
	&::backdrop { background: rgba(8, 9, 11, .88) }
	img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 20px 60px rgba(0, 0, 0, .6) }
	:root[dark] & img.inverted { filter: invert(.9) hue-rotate(180deg); background: var(--paper) }
}

/*┌─────────────────╮
  |Article cards    |
  └─────────────────╯*/
/* A grid of links to articles, on the home page and in "More in …":  a square thumbnail
 * beside the title and the description.  A card without an image is text only, unless it holds
 * a .ph placeholder square, as the article catalogue's cards do. */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1.7rem 2.4rem }
.card {
	display: grid; grid-template-columns: 96px minmax(0, 1fr); align-content: start; gap: .3rem 1rem; color: var(--ink); text-decoration: none;
	&:not(:has(img, .ph)) { grid-template-columns: minmax(0, 1fr) }
	/* aspect-ratio rather than a height, so the article's img { height: auto } can't undo it. */
	img { grid-row: span 2; width: 100%; aspect-ratio: 1; object-fit: cover }
	.ph { grid-row: span 2; width: 100%; aspect-ratio: 1; background: var(--rule-2) }
	b { font: var(--head-w) 1.05rem/1.28 var(--head) }
	/* align-self keeps the box three lines tall;  stretched to the image's height, it would show part of a fourth. */
	.desc { align-self: start; font-size: .84rem; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden }
	&:hover b { color: var(--link) }
	@media (max-width: 640px) { grid-template-columns: 72px minmax(0, 1fr) }
}

/*┌─────────────────╮
  |More articles    |
  └─────────────────╯*/
/* Up to three other published articles from the same section, above the footer. */
.related {
	margin-top: 5rem; padding: 0 var(--page-pad);
	.inner { max-width: calc(var(--toc-w) + var(--toc-gap) + var(--main-w)); margin: 0 auto; padding-top: 1.4rem; border-top: 1px solid var(--rule-2) }
	h2 { margin: 0 0 1.2rem; font: var(--head-w) 1.3rem/1.2 var(--head) }
	.cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) }
}

/*┌─────────────────╮
  |Footer           |
  └─────────────────╯*/
.site-footer {
	margin-top: 5rem; background: var(--foot-bg); color: var(--band-ink);

	.inner {
		padding-top: 3.2rem; padding-bottom: 3.4rem;
		> * { flex: 1 1 16rem }
	}
	.f-mid { flex-grow: 1.4 }
	.wordmark .cols { fill: var(--green-d) }
	.f-purpose { font: 400 1.2rem/1.42 var(--text); letter-spacing: -.005em; margin: 0 }
	.f-legal {
		margin: .9rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--band-mute);
		a { color: inherit }
	}
	.f-verse {
		margin: 0; font: italic 400 .98rem/1.5 var(--text); color: var(--band-mute);
		b { display: block; margin-top: .45rem; color: var(--band-ink) }
	}
	.f-nav {
		font-size: .84rem;
		a { color: var(--band-ink); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .25) }
		a:hover { border-color: currentColor }
	}
}

/*┌─────────────────╮
  |Wide pages       |
  └─────────────────╯*/
/* layout: wide, for tools and lists of articles.  One wide column:  prose keeps a readable
 * measure, and everything else (forms, tables, result panels, cards) takes the full width.
 * No margin notes;  citations open as popovers.  Everything lines up with the masthead's
 * wordmark:  1240px less the masthead's padding. */
[data-layout="wide"] {
	--wide-w: calc(1240px - 2 * var(--page-pad));

	.hero .ht {
		width: 100%; max-width: var(--wide-w); margin-left: 0;
		@media (max-width: 979px) { max-width: none }
	}
	.hero-cap .inner { max-width: var(--wide-w); padding-left: var(--page-pad) }
	.lay-row { width: 100%; max-width: var(--wide-w) }
	.body-wrap { width: 100% }
	/* With a table of contents (toc: true), the contents column stands left of the body and the
	 * title, as on an article.  A wide page has no margin notes, so the column stays down to 980px
	 * wide, where an article's gives way to the Contents bar at 1300px. */
	&[data-toc] {
		.body-wrap { width: auto; flex: 1; min-width: 0 }
		.hero .ht { box-sizing: border-box; padding-left: calc(var(--toc-w) + var(--toc-gap)) }
		.toc { @media (max-width: 1299px) { display: block } }
		.toc-bar { @media (min-width: 980px) { display: none } }
		@media (max-width: 979px) {
			.hero .ht { padding-left: 0 }
			.toc { display: none }
		}
	}
	article.content .sec > :is(p, ul, ol, h3, h4, blockquote, .callout) { max-width: 46rem }
}