/* fonts */
@font-face {
	font-family: "Courier Prime";
	src: url("/assets/fonts/CourierPrime-Regular.ttf");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Courier Prime";
	src: url("/assets/fonts/CourierPrime-Bold.ttf");
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: "Courier Prime";
	src: url("/assets/fonts/CourierPrime-Italic.ttf");
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: "Courier Prime";
	src: url("/assets/fonts/CourierPrime-BoldItalic.ttf");
	font-weight: bold;
	font-style: italic;
}

/* variables */
:root {
	--Cochinilla-Ink: #ef2735;
	--Antique-White: #FFFDF4;
	--White-Paper: #ffffff;
	/* hsb(53, 18%, 100%) at 95%, converted: css has no hsb notation */
	--Yellow-Paper: hsl(53 100% 91% / 0.95);
	--section-width: 100px;
	--index-narrow: 180px; /* the index column while the about page is open */
	--entry-info-width: 280px;
	--entry-next-width: 160px;
	--entry-bottom: 120px; /* how far the tall side of an image stops short of the bottom */
	--line: 1.15em;
	/* anything pinned to the bottom sits on the line grid running down from 50vh, landing 20px up or one line further, whichever keeps it on the grid */
	--baseline-bottom: calc(100dvh - 50vh - round(down, 100dvh - 50vh - 20px, var(--line)));
}

/* overrides */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-width: none; /* everything scrolls without ever showing a bar */
	-ms-overflow-style: none;
}
*::-webkit-scrollbar {
	display: none;
}
html, body {
	height: 100%;
	overflow: hidden;
	overscroll-behavior: none;
}
body {
	background-color: var(--Antique-White);
	font-family: "Courier Prime", monospace;
	color: var(--Cochinilla-Ink);
	font-size: 16px;
	line-height: 1.15;
	letter-spacing: -0.02em;
}
h1, h2, h3, h4, h5, h6 {
	font-family: "Courier Prime", monospace;
	color: var(--Cochinilla-Ink);
	font-size: 16px;
	line-height: 1.15;
	font-weight: normal;
	letter-spacing: -0.02em;
}
a {
	text-decoration: none;
	color: var(--Cochinilla-Ink);
}
button {
	font-family: "Courier Prime", monospace;
	color: var(--Cochinilla-Ink);
	font-size: 16px;
	line-height: 1.15;
	font-weight: normal;
	letter-spacing: -0.02em;
	border: 1px solid var(--Cochinilla-Ink);
	background-color: var(--Antique-White);
	border-radius: 0;
}
::selection {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}

/* container and sections */
.container {
	display: grid;
	grid-template-columns: var(--section-width) 1fr var(--section-width) var(--section-width);
	grid-template-rows: minmax(0, 1fr); /* an auto row would grow past the viewport to fit its content */
	height: 100dvh;
	max-height: 100dvh; /* expanding content scrolls inside a column, it never grows the page */
	overflow: hidden;
	transition: grid-template-columns linear .02s;
}
/* the open column takes the space, the rest stay at their fixed widths */
.container[data-page="about"] {
	grid-template-columns: 1fr var(--index-narrow) var(--section-width) var(--section-width);
}
.container[data-page="events"] {
	grid-template-columns: var(--section-width) var(--index-narrow) 1fr var(--section-width);
}
.container[data-page="notes"] {
	grid-template-columns: var(--section-width) var(--index-narrow) var(--section-width) 1fr;
}
.section {
	position: relative;
	overflow: hidden; /* crops the collapsed columns down to their sliver */
	/* a grid item is never smaller than its content by default, which would grow the section past the viewport and stop anything inside it scrolling */
	min-height: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.section[data-active="1"] {
	background-color: var(--White-Paper);
}
/* a hovered nav column reaches 20px over its neighbour, by margin rather than width so the cell it leaves keeps its size */
.section[data-active="0"]:hover {
	z-index: 2;
	margin-left: -20px;
	background-color: var(--Antique-White);
}
/* a column before the open one shifts everything after it along by the same 20px, so the open section moves without being resized */
.section[data-active="0"]:has(~ .section[data-active="1"]):hover {
	margin-left: 0;
	width: calc(100% + 20px);
}
.section[data-active="0"]:has(~ .section[data-active="1"]):hover ~ .section {
	transform: translateX(20px);
}
/* .container:has(.section:nth-child(1)[data-active="0"]:hover) {
	grid-template-columns: 120px 1fr 100px 100px;
}
.container:has(.section:nth-child(2)[data-active="0"]:hover) {
	grid-template-columns: 100px 1fr 100px 100px;
}
.container:has(.section:nth-child(3)[data-active="0"]:hover) {
	grid-template-columns: 100px 1fr 120px 100px;
}
.container:has(.section:nth-child(4)[data-active="0"]:hover) {
	grid-template-columns: 100px 1fr 100px 120px;
} */
.section::before {
	content: "";
	width: 1px;
	height: 100dvh;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--Cochinilla-Ink);
}
.section:nth-child(1)::before {
	display: none;
}
/* a collapsed column lays its content out at its open width and the section crops it, with the heading and click target over the top */
.about {
	--open-width: calc(100vw - var(--index-narrow) - var(--section-width) * 2);
}
.index {
	--open-width: calc(100vw - var(--section-width) * 3);
}
.events,
.notes {
	--open-width: calc(100vw - var(--index-narrow) - var(--section-width) * 2);
}
.section[data-active="0"] .section-content {
	width: var(--open-width);
}
.section-link {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.section-heading {
	position: absolute;
	z-index: 1; /* image entries scroll underneath the title and controls */
	top: 20px;
	left: 20px;
	writing-mode: vertical-lr;
	text-orientation: upright;
}
.section[data-active="1"] .section-heading {
	writing-mode: unset;
	text-orientation: unset;
	letter-spacing: .35em;
}
/* the short form of a heading is only ever wanted below the breakpoint */
.section-heading-short {
	display: none;
}
/* fills the section so in-flow content can size itself against it */
.section-content {
	position: relative; /* absolute content anchors here, so it follows the open width */
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* the mobile sidebar, hidden until the breakpoint claims it */
.nav {
	display: none;
}

/* language toggles */
.lang {
	position: absolute;
	z-index: 11; /* the one thing left of an overlay that stays live */
	left: 20px;
	bottom: var(--baseline-bottom);
	display: flex;
	gap: 20px;
}
.lang-toggle {
	writing-mode: vertical-lr;
	text-orientation: upright;
	border: 1px solid var(--Cochinilla-Ink);
	padding: 2px 0 0 0;
	width: 20px;
	background-color: var(--White-Paper);
}
.lang-toggle[data-active="1"] {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}
.lang-toggle:hover {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}

/* dotted borders */
.dotted-left,
.dotted-right {
	position: relative;
	height: 100dvh;
	pointer-events: none;
}
.dotted-left::before, 
.dotted-right::before {
	content: "";
	width: 2px;
	position: absolute;
	top: 0;
	bottom: 0;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 2px 1ch;
	background-repeat: repeat-y;
	background-position: center calc(0.5ch + 1px);
}
.dotted-left::before {
	left: 0;
}
.dotted-right::before {
	right: 0;
}

/* index */
.index {
	--col1-width: max(200px, 20vw);
}
/* scroll cursor, 20px wide and centred on the pointer, only over the open list view */
.index[data-active="1"]:has(.index-list[data-active="1"]) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40' fill='%23ef2735'%3E%3Cpath fill='rgba(255,255,255,.9)' d='M19,30c0,4.96-4.04,9-9,9S1,34.96,1,30V10C1,5.04,5.04,1,10,1s9,4.04,9,9v20Z'/%3E%3Cpath d='M10,0C4.49,0,0,4.49,0,10v20c0,5.51,4.49,10,10,10s10-4.49,10-10V10C20,4.49,15.51,0,10,0ZM19,30c0,4.96-4.04,9-9,9S1,34.96,1,30V10C1,5.04,5.04,1,10,1s9,4.04,9,9v20Z'/%3E%3Cpolygon points='10.24 30.78 6.35 26.89 5.65 27.6 10.24 32.19 14.84 27.6 14.13 26.89 10.24 30.78'/%3E%3Cpolygon points='5.65 11.89 6.35 12.6 10.24 8.71 14.13 12.6 14.84 11.89 10.24 7.29 5.65 11.89'/%3E%3C/svg%3E") 10 20, auto;
}
.index-controls {
	position: absolute;
	z-index: 1;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	gap: 40px;
}
.index-view[data-active="1"] {
	text-decoration: underline;
}
.index-controls a:hover {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}
.index-shuffle {
	display: flex;
	align-items: center;
	gap: 1ch;
}
.index-shuffle svg {
	fill: currentColor;
	width: 1.1em;
	height: 1.1em;
	margin-top: -.15em;
	overflow: visible;
}

/* view switching */
.index-list[data-active="0"],
.index-list-gridlines[data-active="0"],
.index-images[data-active="0"],
.index-images-gridlines[data-active="0"],
.index-shuffle[data-active="0"] {
	display: none;
}
.index-content {

}
.index-list {
	position: absolute;
	top: 50vh;
	left: 20px;
	right: 20px;
	bottom: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.index-list-headings {
	display: grid;
	grid-template-columns: var(--col1-width) 1fr 1fr 1fr 1fr;
	margin-bottom: 1.15em;
	gap: 40px;
}
.index-list-heading {
	cursor: pointer;
	user-select: none;
	width: fit-content;
}
/* the column picker only exists below the breakpoint, where one column shows at a time */
.index-sort,
.index-select,
/* the date is written out in full until the column is too narrow for it, heading and entries together */
.index-heading-short,
.index-date-year {
	display: none;
}
.index-list-heading:hover {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}
.index-list-links {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
	overscroll-behavior: none;
}
.index-list-link {
	display: grid;
	grid-template-columns: var(--col1-width) 1fr 1fr 1fr 1fr;
	margin-bottom: 1.15em;
	gap: 40px;
}
.index-list-link {
	cursor: inherit; /* keeps the scroll cursor instead of the anchor's pointer */
}
.index-list-link:hover,
.index-list-link[data-active="1"] {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}
.index-list-gridlines {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: var(--col1-width) 1fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 0 20px;
	pointer-events: none;
}
.index-list-gridlines div {
	margin-right: -20px;
}

/* index images */
.index-images {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-start; /* stretched columns would all measure the same height */
	overflow: hidden;
}
.index-images-column {
	flex: 1;
	min-width: 0;
	display: flow-root; /* keeps the last item's margin inside the loop period */
}
.index-image {
	display: block;
	margin: 0 40px 80px 40px;
}
.index-image-crop {
	position: relative;
	display: block;
	margin-bottom: 20px;
	isolation: isolate; /* keeps the letter tint off everything behind the picture */
}
.index-image-thumb {
	display: block;
	width: 100%;
	height: auto;
}
.index-image-info {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.index-image:hover .index-image-info,
.index-image[data-active="1"] .index-image-info {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}
.index-images-gridlines {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	pointer-events: none;
}

/* index preview */
.index-preview[data-active="0"] {
	display: none;
}
.index-preview {
	position: absolute;
	top: calc(60px + 1ch);
	left: 40px;
	bottom: calc(50dvh + 40px);
	width: calc(var(--col1-width) - 40px);
}
/* the ratio sizes the box to the picture, so the letter tint ends where the paper does */
.index-preview-crop {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	max-height: 100%;
	aspect-ratio: var(--preview-ratio, 1);
	isolation: isolate;
}
.index-preview-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* letterboxes rather than stretches if the ratio is ever missing */
}

/* a letter is ink on white paper, so multiplying the paper colour over it leaves the ink alone and turns the sheet yellow */
.index-image[data-letter="1"] .index-image-crop::after,
.index-preview[data-letter="1"] .index-preview-crop::after,
.entry-frame[data-letter="1"]::after,
.entry-next-frame[data-letter="1"]::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var(--Yellow-Paper);
	mix-blend-mode: multiply;
	pointer-events: none;
}
/* the picture masks the tint, so a cut out letter is tinted only where the paper is */
.index-image[data-letter="1"] .index-image-crop::after,
.index-preview[data-letter="1"] .index-preview-crop::after,
.entry-frame[data-zoom="1"][data-letter="1"]::after,
.entry-next-frame[data-letter="1"]::after {
	mask-image: var(--tint, none);
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-image: var(--tint, none);
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
}
.entry-frame,
.entry-next-frame {
	isolation: isolate;
}
/* a monospace space is a whole character wide, which reads as too large a gap between the month and the year */
.index-date {
	word-spacing: -0.3em;
}

/* index table mobile styles */
@media only screen and (max-width: 1400px) {
	.index-list-headings {
		grid-template-columns: var(--col1-width) 1fr 1fr 1fr;
	}
	.index-list-heading:nth-child(5) {
		display: none;
	}
	.index-list-link {
		grid-template-columns: var(--col1-width) 1fr 1fr 1fr;
	}
	.index-list-link span:nth-child(5) {
		display: none;
	}
	.index-list-gridlines {
		grid-template-columns: var(--col1-width) 1fr 1fr 1fr;
	}
	.index-list-gridlines div:nth-child(4) {
		display: none;
	}
}
@media only screen and (max-width: 1100px) {
	.index-list-headings {
		grid-template-columns: var(--col1-width) 1fr 1fr;
	}
	.index-list-heading:nth-child(4) {
		display: none;
	}
	.index-list-link {
		grid-template-columns: var(--col1-width) 1fr 1fr;
	}
	.index-list-link span:nth-child(4) {
		display: none;
	}
	.index-list-gridlines {
		grid-template-columns: var(--col1-width) 1fr 1fr;
	}
	.index-list-gridlines div:nth-child(3) {
		display: none;
	}
}
/* entry overlay */
.entry-backdrop,
.view-backdrop,
.article-backdrop {
	position: fixed;
	z-index: 9; /* under the overlay, over everything to the left of it */
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.entry-backdrop[data-active="0"],
.view-backdrop[data-active="0"],
.article-backdrop[data-active="0"] {
	display: none;
}
.entry {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc(var(--section-width) + 120px);
	display: flex;
	background-color: rgba(255,255,255,.9);
	border-left: 1px solid var(--Cochinilla-Ink);
}
.entry[data-active="0"] {
	display: none;
}

/* entry info column */
.entry-info {
	position: relative;
	flex: none;
	width: var(--entry-info-width);
}
.entry-close {
	position: absolute;
	top: 20px;
	left: 20px;
}
/* any character that takes the ink circle on hover of the link it sits in */
.mark {
	position: relative;
	/* a stacking context, so the circle sits behind the character but in front of the section background */
	z-index: 0;
}
.mark::before {
	content: "";
	position: absolute;
	top: .025em;
	left: -.18em;
	width: 1.6ch;
	height: 1.6ch;
	background-color: var(--Cochinilla-Ink);
	pointer-events: none;
	z-index: -1;
	border-radius: 50%;
	display: none;
}
a:hover > .mark {
	color: var(--Antique-White);
}
/* the circle is the hover state, so these links never underline as well */
a:has(.mark):hover {
	text-decoration: none;
}
a:hover > .mark::before {
	display: block;
}
/* the paired + and - swap with whatever they are attached to */
.about-expand[data-active="0"] .mark-less,
.about-expand[data-active="1"] .mark-more,
.events-event[data-active="0"] .mark-less,
.events-event[data-active="1"] .mark-more,
.view-expand[data-active="0"] .mark-less,
.view-expand[data-active="1"] .mark-more,
.notes-expand[data-active="0"] .mark-less,
.notes-expand[data-active="1"] .mark-more,
.nav[data-active="0"] .mark-less,
.nav[data-active="1"] .mark-more,
.index-sort[data-active="0"] .mark-less,
.index-sort[data-active="1"] .mark-more {
	display: none;
}
.entry-text {
	position: absolute;
	top: 50vh;
	left: 20px;
	right: 20px;
}
.entry-line + .entry-line {
	margin-top: 1.15em; /* a full empty line between each */
}
.entry-line:first-child {
	display: flex;
	align-items: center;
	gap: 5px;
}
.entry-download svg {
	display: block;
	width: 1em;
	height: 1em;
	overflow: visible;
	fill: var(--Cochinilla-Ink);
	border: 1px solid var(--Cochinilla-Ink);
	border-radius: 50%;
}
.entry-download:hover svg {
	background-color: var(--Cochinilla-Ink);
	fill: var(--White-Paper);
}
.entry-count {
	position: absolute;
	bottom: var(--baseline-bottom);
	left: 20px;
	right: 20px;
}

/* entry image column */
.entry-image {
	position: relative;
	flex: 1;
	min-width: 0;
}
.entry-frame {
	position: absolute;
	top: 40px;
	left: 40px;
	width: calc(100% - 80px);
	/* aspect-ratio turns the height cap into a width cap, so the box is exactly the picture and the zoom controls have something to sit on */
	max-width: calc((100dvh - 40px - var(--entry-bottom)) * var(--ratio, 1));
	aspect-ratio: var(--ratio, 1);
	overflow: hidden;
}
/* the scroller sits inside the frame so the zoom controls don't scroll away with it */
.entry-scroll {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
.entry-frame:not([data-zoom="1"]) .entry-scroll {
	overflow: auto;
}
.entry-photo {
	display: block;
	width: calc(100% * var(--zoom, 1));
	height: calc(100% * var(--zoom, 1));
	object-fit: contain;
	object-position: left top;
}
.entry-zoom {
	position: absolute;
	z-index: 1;
	bottom: 20px;
	right: 20px;
	width: 60px;
	height: 30px;
	display: none;
	background-color: var(--White-Paper);
	padding: 2px 2px 0 2px;
	border: 1px solid var(--Cochinilla-Ink);
	align-items: center;
	justify-content: center;
}
.entry-frame:hover .entry-zoom {
	display: flex;
}
.entry-zoom a {
	position: relative;
	cursor: pointer;
}
.entry-zoom a::before {
	content: "";
	position: absolute;
	top: .025em;
	left: -.18em;
	width: 1.6ch;
	height: 1.6ch;
	background-color: var(--Cochinilla-Ink);
	pointer-events: none;
	z-index: -1;
	border-radius: 50%;
	display: none;
}
.entry-zoom a:hover {
	color: var(--Antique-White);
}
.entry-zoom a:hover::before {
	display: block;
}
/* the markers carry .mark, so the circle lands on the caret alone rather than the label beside it */
.entry-nav {
	position: absolute;
	bottom: var(--baseline-bottom);
	left: 40px;
}

/* a single photograph: no next column, no controls, and the picture reaches the bottom baseline and the right edge */
.entry[data-single="1"] .entry-next,
.entry[data-single="1"] .entry-nav {
	display: none;
}
.entry[data-single="1"] .entry-frame {
	max-width: calc((100dvh - 40px - var(--baseline-bottom)) * var(--ratio, 1));
}

/* entry next column */
.entry-next {
	position: relative;
	flex: none;
	width: var(--entry-next-width);
	overflow: hidden;
}
.entry-next-frame {
	position: absolute;
	top: 40px;
	left: 40px;
	/* matches the second column's picture width, so it crops rather than shrinks */
	width: calc(var(--entry-width, 0px) - 80px);
	max-width: calc((100dvh - 40px - var(--entry-bottom)) * var(--next-ratio, 1));
	aspect-ratio: var(--next-ratio, 1);
}
.entry-next-photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left top;
}

/* dotted borders down the second and third columns */
.entry-image::before,
.entry-next::before {
	content: "";
	position: absolute;
	z-index: 1;
	width: 2px;
	top: 20px;
	bottom: 40px;
	left: 0;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 2px 1ch;
	background-repeat: repeat-y;
	background-position: center calc(0.5ch + 1px);
	pointer-events: none;
}


/* about */
/* named apart from the .about on the section itself, which these rules would turn into a grid of its own */
.about-columns {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/* an auto row would grow to the tallest column and nothing would ever scroll */
	grid-template-rows: minmax(0, 1fr);
}
/* spans the last two columns, behind the contact and legal text */
.about-image {
	position: absolute;
	top: 50vh;
	left: 50%;
	right: 0;
	bottom: 0;
	padding: 40px;
}
.about-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left top;
}
/* contact at the top and legal at the bottom, the column scrolling over the image when the two would meet */
.about-side {
	position: relative;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 20px 20px 50vh 20px;
}
.about-legal {
	margin-top: auto; /* sits at the bottom while there is room to spare */
	padding-top: 40px; /* and keeps this much clear once there is not */
	font-size: 12px;
	line-height: 1.25em;
}
.about-contact > * + *,
.about-legal > * + * {
	margin-top: 1.15em;
}
.about-link {
	overflow-wrap: anywhere; /* the email is longer than the column is wide */
	display: block;
}
/* the caret arrives inline on hover, after a non breaking space so the line cannot break there and strand it */
.about-link:hover::before {
	content: ">\00a0";
}
.about-policy:hover {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}
.about-column {
	min-height: 0;
	min-width: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* the tail padding matches the head, so the last line can be scrolled up to the same 50vh line the first one starts on */
	padding: 50vh 20px 50vh 20px;
}
.about-column > * + * {
	margin-top: 1.15em; /* a full empty line between blocks */
}
.about-hidden {
	margin-top: 1.15em;
}
.about-expand[data-active="0"] .about-hidden {
	display: none;
}
.about-hidden p + p {
	margin-top: 1.15em;
}
.about-gridlines {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	pointer-events: none;
}

/* about popups */
.about-popup {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 20px;
	width: calc(25% - 40px); /* the fourth column, inset 20px each side */
	max-height: calc(100dvh - 40px);
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--Cochinilla-Ink);
	background-color: var(--White-Paper);
}
.about-popup[data-active="0"] {
	display: none;
}
.about-popup-head {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
/* only the body scrolls, so the title and close button stay put */
.about-popup-body {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.about-popup-text {
	margin-top: 200px;
	font-size: 12px;
	line-height: 1.15;
}
.about-popup-text p + p {
	margin-top: 1.15em;
}

/* events */
.events-columns {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
}
.events-column {
	position: relative;
	min-height: 0;
	min-width: 0;
}
/* the gap between a heading and the first entry under it */
.events-columns {
	--events-gap: calc(50vh - 20px - 1.15em);
}
.events-listing {
	grid-column: 2 / 4;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
	min-width: 0;
}
.events-group {
	position: relative;
	min-height: 0;
	min-width: 0;
}
.events-heading {
	position: absolute;
	z-index: 1;
	top: 20px;
	left: 20px;
	right: 20px;
}
/* the intro sits at 50vh and the calendar at the baseline, the column scrolling when the two would meet */
.events-info {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 50vh 20px var(--baseline-bottom) 20px;
}
.events-intro p + p {
	margin-top: 1.15em;
}

/* calendar */
.events-calendar {
	margin-top: auto; /* drops to the baseline while there is room to spare */
	padding-top: 1.15em; /* and keeps an empty line once there is not */
}
.events-calendar-days {
	margin-top: 1.15em; /* one empty line under the month */
	display: grid;
	grid-template-columns: repeat(auto-fill, 2ch);
	column-gap: 1ch;
	row-gap: 0;
	max-width: 38ch; /* 13 columns of 2ch with 1ch between them */
}
.events-calendar-days span {
	width: 2ch;
	text-align: center;
	position: relative;
	z-index: 0; /* own stacking context, so the circle can sit behind the number */
}
.events-calendar-days span[data-event="1"] {
	color: var(--White-Paper);
}
.events-calendar-days span[data-event="1"]::before {
	content: "";
	top: -.15em;
	left: -.1em;
	width: 2.25ch;
	height: 2.25ch;
	position: absolute;
	z-index: -1;
	background-color: var(--Cochinilla-Ink);
	border-radius: 50%;
}
.events-calendar-nav {
	margin-top: 2.3em; /* two empty lines under the dates */
}
.events-calendar-nav a span {
	position: relative;
}
.events-calendar-nav a span::before {
	content: "";
	position: absolute;
	top: .025em;
	left: -.18em;
	width: 1.6ch;
	height: 1.6ch;
	background-color: var(--Cochinilla-Ink);
	pointer-events: none;
	z-index: -1;
	border-radius: 50%;
	display: none;
}
.events-calendar-nav a:hover span {
	color: var(--Antique-White);
}
.events-calendar-nav a:hover span::before {
	display: block;
}

/* event listings */
.events-list {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 50vh 20px 50vh 20px;
}
.events-event + .events-event {
	margin-top: 1.15em; /* the last of the five lines between entries */
}
.events-event:not(:last-child)::after {
	content: "";
	display: block;
	margin-top: 4.6em; /* four empty lines, with the rule drawn on the fourth */
	height: 2px;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 1ch 2px;
	background-repeat: repeat-x;
	background-position: calc(0.5ch + 1px) center;
}
.events-event > * + * {
	margin-top: 1.15em;
}
.events-type {
	text-decoration: underline;
}
.events-name {
	text-transform: uppercase;
}
.events-thumb {
	display: block;
	width: 100%;
	height: auto;
}
.events-blurb p + p,
.events-hidden p + p {
	margin-top: 1.15em;
}
.events-event[data-active="0"] .events-less,
.events-event[data-active="1"] .events-more,
.events-event[data-active="0"] .events-hidden {
	display: none;
}
.events-toggle,
.events-submit,
.events-view {
	display: block; /* inline anchors ignore margin-top and share a line */
	width: fit-content;
}
.events-event[data-active="0"] .events-submit,
.events-event[data-active="0"] .events-view {
	margin-top: 0; /* no empty line until the description pushes them apart */
}
/* what an open call asks for, set on dotted paper with the line height set to one grid row */
.events-request {
	--request-row: calc(1.15em + 10px); /* a line of text with 5px above and below it */
	position: relative;
	margin: 20px 0;
	padding: 20px;
	line-height: var(--request-row);
	text-align: center;
	text-transform: uppercase;
	background-color: var(--Yellow-Paper);
}
/* the grid is drawn on its own box, reaching a pixel past the inset so a dot on the boundary is whole, and shifted half a row so the dots fall between rows */
.events-request::before {
	content: "";
	position: absolute;
	top: 19px;
	right: 19px;
	bottom: 19px;
	left: 19px;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: var(--request-row) var(--request-row);
	background-position: calc(1px - var(--request-row) / 2) calc(1px - var(--request-row) / 2);
	pointer-events: none;
}
/* positioned, so the text paints over the grid rather than under it */
.events-request-row {
	position: relative;
}
.events-request-row:empty::before {
	content: "\00a0"; /* holds an empty row open to one line */
}
.events-gridlines {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	pointer-events: none;
}

/* event view overlay */
.view {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	/* 120px into the events section, which starts after the two collapsed columns */
	left: calc(var(--section-width) + var(--index-narrow) + 120px);
	border-left: 1px solid var(--Cochinilla-Ink);
	background-color: rgba(255,255,255,.9);
}
.view[data-active="0"] {
	display: none;
}
.view-close {
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 20px;
}

/* filmstrip: one row of equal height pictures, scrolled by whole images */
.view-images {
	position: absolute;
	top: 50vh;
	right: 0;
	left: 0;
	/* stops 40px above the controls, which sit on the baseline */
	height: calc(50vh - var(--baseline-bottom) - 1.15em - 40px);
	overflow: hidden;
}
.view-strip {
	display: flex;
	height: 100%;
	width: max-content;
}
.view-image {
	position: relative;
	flex: none;
	height: 100%;
	padding: 0 40px; /* the dotted rule lands midway between two pictures */
}
.view-image img {
	display: block;
	height: 100%;
	width: auto;
}
/* the rule separates one picture from the next, so the first one has nothing to its left */
.view-image:first-child::before {
	display: none;
}
.view-image::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 2px 1ch;
	background-repeat: repeat-y;
	background-position: center calc(0.5ch + 1px);
	pointer-events: none;
}
.view-nav {
	position: absolute;
	bottom: var(--baseline-bottom);
	left: 40px;
}

/* the details panel pinned to the top right of the overlay */
.view-info {
	position: absolute;
	z-index: 1;
	top: 16px;
	right: 40px;
	width: 350px;
	max-height: calc(100vh - 16px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--Yellow-Paper);
}
.view-info-title {
	margin: 20px;
}
.view-info-rows {
	margin-top: 80px;
	margin-bottom: 40px;
	border-bottom: 1px solid var(--Cochinilla-Ink);
}
.view-info-row {
	border-top: 1px solid var(--Cochinilla-Ink);
	padding: 10px 20px;
}
.view-info-name {
	text-transform: uppercase;
}
.view-expand[data-active="0"] .view-info-hidden {
	display: none;
}
/* a dotted rule separates the description from the label above it */
.view-info-hidden::before {
	content: "";
	display: block;
	margin: 10px 0;
	height: 2px;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 1ch 2px;
	background-repeat: repeat-x;
	background-position: calc(0.5ch + 1px) center;
}
.view-info-hidden p + p {
	margin-top: 1.15em;
}

/* signup, sitting over the collapsed columns on the about page */
.signup {
	position: fixed;
	z-index: 10;
	right: 40px;
	bottom: var(--baseline-bottom);
	/* 40px inside the index column on the left, 40px from the screen on the right */
	width: calc(var(--index-narrow) + var(--section-width) * 2 - 80px);
	border: 1px solid var(--Cochinilla-Ink);
	background-color: var(--Yellow-Paper);
}
.signup[data-active="0"] {
	display: none;
}
.signup-top {
	padding: 20px;
	border-bottom: 1px solid var(--Cochinilla-Ink);
}
.signup-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}
.signup-close {
	flex: none;
}
.signup-label {
	margin-top: 3.45em; /* three empty lines */
}
/* the field and the empty rows below it share a height */
.signup-field,
.signup-row {
	display: block;
	width: 100%;
	padding: 10px 20px;
	border-bottom: 1px solid var(--Cochinilla-Ink);
}
.signup-row::before {
	content: "\00a0"; /* holds the row open to one line */
}
.signup-field {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: none;
	border: none;
	border-bottom: 1px solid var(--Cochinilla-Ink);
	border-radius: 0;
}
.signup-field:focus {
	outline: none;
}
.signup-field:focus-visible {
	outline: none;
}
.signup-foot {
	padding: 20px;
}
.signup-submit {
	display: block;
	width: fit-content;
}
/* the button, the thank you and the nudge share one place, and the state picks which of them stands in it */
.signup-send,
.signup-sent,
.signup-invalid {
	display: none;
}
.signup-submit[data-state="idle"] .signup-send,
.signup-submit[data-state="sent"] .signup-sent,
.signup-submit[data-state="invalid"] .signup-invalid {
	display: inline;
}

/* notes */
.notes-columns {
	position: relative;
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
}
.notes-listing {
	grid-column: 2 / 4;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
	min-width: 0;
}
.notes-column {
	position: relative;
	min-height: 0;
	min-width: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 50vh 20px 50vh 20px;
}
/* the intro sits at 50vh and the controls at the baseline, the column scrolling when the two would meet */
.notes-info {
	display: flex;
	flex-direction: column;
	padding-bottom: var(--baseline-bottom);
}
.notes-intro p + p {
	margin-top: 1.15em;
}
.notes-nav {
	margin-top: auto;
	padding-top: 1.15em;
}
.notes-nav a[data-active="0"],
.notes-nav[data-both="0"] .notes-sep {
	display: none;
}

/* one issue shows at a time in each of the two right hand columns */
.notes-issue[data-active="0"] {
	display: none;
}
.notes-issue > * + * {
	margin-top: 1.15em;
}
.notes-text {
	margin-top: 2.3em; /* two empty lines under the issue number and date */
}
.notes-text p + p,
.notes-hidden p + p {
	margin-top: 1.15em;
}
.notes-hidden {
	margin-top: 1.15em;
}
.notes-expand[data-active="0"] .notes-hidden,
.notes-expand[data-active="0"] .notes-less,
.notes-expand[data-active="1"] .notes-more {
	display: none;
}
.notes-toggle {
	display: block;
	width: fit-content;
}
/* the read more affordance inverts rather than underlining */
.notes-open:hover {
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
}

/* articles, separated like the events entries */
.notes-article > * + * {
	margin-top: 1.15em;
}
.notes-blurb {
	margin-top: 2.3em; /* two empty lines under the title */
}
.notes-article + .notes-article {
	margin-top: 1.15em; /* the last of the five lines between articles */
}
.notes-article:not(:last-child)::after {
	content: "";
	display: block;
	margin-top: 4.6em; /* four empty lines, with the rule drawn on the fourth */
	height: 2px;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 1ch 2px;
	background-repeat: repeat-x;
	background-position: calc(0.5ch + 1px) center;
}
.notes-gridlines {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	pointer-events: none;
}

/* article popup */
.article {
	position: fixed;
	z-index: 10;
	top: 0;
	right: 0;
	bottom: 0;
	/* 120px into the notes section, which starts after the three collapsed columns */
	left: calc(var(--section-width) * 2 + var(--index-narrow) + 120px);
	border-left: 1px solid var(--Cochinilla-Ink);
	background-color: rgba(255,255,255,.9);
	overflow: hidden;
	/* the circles are punched out of the panel, so the page shows through them */
	--hole-x: calc(25% - 140px);
	mask-image:
		radial-gradient(circle 13.5px at var(--hole-x) 25%, transparent 13.5px, #000 13.5px),
		radial-gradient(circle 13.5px at var(--hole-x) 50%, transparent 13.5px, #000 13.5px),
		radial-gradient(circle 13.5px at var(--hole-x) 75%, transparent 13.5px, #000 13.5px);
	/* the rings are positioned against the padding box, so the mask must be too */
	mask-origin: padding-box;
	-webkit-mask-origin: padding-box;
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}
.article[data-active="0"] {
	display: none;
}
/* fixed to the panel rather than the scroller, so they stay put */
.article-close {
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 20px;
}
.article-issue {
	position: absolute;
	z-index: 2;
	top: 20px;
	left: 0;
	right: 0;
	text-align: center;
	pointer-events: none; /* it spans the full width, so it must not eat the close button */
}
/* the number alone once the centred line would reach the close button */
.article-issue[data-short="1"] .article-issue-name {
	display: none;
}
.article-holes {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}
.article-hole {
	position: absolute;
	left: var(--hole-x);
	width: 30px;
	height: 30px;
	margin: -15px 0 0 -15px;
	border: 1px solid var(--Cochinilla-Ink);
	border-radius: 50%;
}
.article-hole:nth-child(1) {
	top: 25%;
}
.article-hole:nth-child(2) {
	top: 50%;
}
.article-hole:nth-child(3) {
	top: 75%;
}
.article-scroll {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* the head reserves the space above the body, and the box floats inside it so an open bio overlaps what follows */
.article-head {
	position: relative;
	height: var(--article-head, 50vh);
}
.article-box {
	position: absolute;
	z-index: 1; /* .article-body is a later positioned sibling and would cover it */
	top: calc(20px + 1.15em + 80px); /* 80px under the issue line */
	left: 40px;
	right: 40px;
	max-width: 400px;
	margin: 0 auto; /* centred in the panel */
	padding: 20px;
	text-align: center;
	background-color: var(--Yellow-Paper);
}
.article-type {
	margin-bottom: 1.15em;
}
.article-author-line {
	margin-top: 1.15em;
}
/* the names sit together until a bio is open */
.article-box[data-active="0"] .article-author-line + .article-author-line {
	margin-top: 0;
}
.article-author {
	display: block;
	width: fit-content;
	margin: 0 auto;
}
.article-bio {
	margin-top: 1.15em;
	text-align: left;
}
.article-box[data-active="0"] .article-bio,
.article-box[data-active="0"] .mark-less,
.article-box[data-active="1"] .mark-more {
	display: none;
}

/* the running text, centred and capped, with pictures breaking out of it */
.article-body {
	position: relative;
	/* everything inside measures against this box, so the picture offsets and the caption keep their relationships */
	padding: 0 20px 60px 20px;
}
.article-paragraph {
	max-width: 560px;
	margin: 0 auto;
}
.article-paragraph + .article-paragraph {
	margin-top: 1.15em; /* one line between paragraphs */
}
/* the figure spans the panel so the caption can sit against the text column, with the picture offset inside it */
.article-figure {
	position: relative;
	margin: 60px 0;
}
.article-figure img {
	display: block;
	height: auto;
}
/* landscape starts 80px inside the text and runs to the right edge */
.article-figure[data-orientation="landscape"] img {
	margin-left: calc(50% - 200px);
	width: calc(50% + 200px);
}
/* portrait keeps the text width, centred between the text and the right edge */
.article-figure[data-orientation="portrait"] img {
	margin-left: calc(75% - 420px);
	width: 560px;
}
/* captions hang off the right edge of the text column, level with the next block */
.article-caption {
	position: absolute;
	top: calc(100% + 60px);
	left: calc(50% + 320px);
	right: 0; /* the body padding already holds it off the edge */
	font-size: 12px;
	line-height: 1.15em;
}
.article-caption::before {
	content: ">\00a0";
}

/* closing rule and the rest of the issue */
.article-end {
	max-width: 560px;
	margin: 60px auto 0 auto;
}
.article-rule {
	height: 2px;
	background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
	background-size: 1ch 2px;
	background-repeat: repeat-x;
	background-position: calc(0.5ch + 1px) center;
}
.article-more {
	margin-top: 2.3em;
}
.article-more-item {
	margin-top: 1.15em;
}
.article-more-link {
	display: block;
	width: fit-content;
}

/* annotations, numbered as they appear and opened by clicking */
.article-note {
	position: relative;
	cursor: pointer;
}
.article-note-mark {
	position: relative;
	z-index: 0;
	color: var(--White-Paper);
}
.article-note-mark::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: .025em;
	left: -.18em;
	width: 1.6ch;
	height: 1.6ch;
	background-color: var(--Cochinilla-Ink);
	border-radius: 50%;
}
.article-note-box {
	position: absolute;
	z-index: 3;
	display: none;
	bottom: calc(100% + 10px);
	left: 10px;
	width: max-content;
	min-width: 200px;
	max-width: 320px;
	padding: 10px;
	background-color: var(--Cochinilla-Ink);
	color: var(--White-Paper);
	cursor: auto;
}
.article-note[data-active="1"] .article-note-box {
	display: block;
}
/* inside the red box the marker inverts */
.article-note-box .article-note-mark {
	color: var(--Cochinilla-Ink);
}
.article-note-box .article-note-mark::before {
	background-color: var(--White-Paper);
}
.article-note-link {
	color: var(--White-Paper);
}
.article-note-link:hover > .mark {
	color: var(--Cochinilla-Ink);
}
.article-note-link:hover > .mark::before {
	background-color: var(--White-Paper);
}

/* notes article, once there is no room beside the text */
@media only screen and (max-width: 1350px) {
	/* pictures stop breaking out and line up with the text */
	.article-figure[data-orientation="landscape"] img,
	.article-figure[data-orientation="portrait"] img {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}
	/* the caption drops under its picture, and the figure's margins sit above the image and below the caption */
	.article-caption {
		position: static;
		width: 100%;
		max-width: 560px;
		margin: 10px auto 0 auto;
	}
	/* nothing left of the text to punch through */
	.article {
		mask-image: none;
		-webkit-mask-image: none;
	}
	.article-holes {
		display: none;
	}
}

/* entry overlay mobile styles */
@media only screen and (max-width: 1200px) {
	.entry-next {
		display: none;
	}

	/* the empty column goes and the image drops into the last one, alongside the contact and legal text */
	.about-spacer {
		display: none;
	}
	.about-columns {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.about-image {
		left: 66.6667%;
	}
	.about-gridlines {
		grid-template-columns: repeat(3, 1fr);
	}
	.about-gridlines div:nth-child(3) {
		display: none;
	}
	.about-popup {
		width: calc(33.3333% - 40px);
	}
	.about-image {
		padding: 20px;
	}
	/* the dates wrap onto more rows in a narrow column, so give the block more air */
	.events-calendar {
		padding-top: 2.3em;
	}

	/* the two lists become one scrolling column, headings scrolling with them */
	.events-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.events-listing {
		grid-column: 2 / 3;
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 20px 20px 50vh 20px;
	}
	.events-group,
	.events-heading,
	.events-list {
		position: static;
	}
	.events-heading {
		margin-bottom: var(--events-gap);
	}
	.events-list {
		overflow: visible;
		padding: 0;
	}
	/* after the upcoming list: the gap, a dotted rule, 20px, then the past heading */
	.events-group + .events-group::before {
		content: "";
		display: block;
		margin-top: var(--events-gap);
		margin-bottom: 20px;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}
	.events-gridlines {
		grid-template-columns: repeat(2, 1fr);
	}
	.events-gridlines div:nth-child(2) {
		display: none;
	}

	/* the editor's note and the articles become one scrolling column */
	.notes-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.notes-listing {
		grid-column: 2 / 3;
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 50vh 20px 50vh 20px;
	}
	.notes-editor,
	.notes-articles {
		overflow: visible;
		padding: 0;
	}
	/* the same gap and rule that separate two articles */
	.notes-articles .notes-issue[data-active="1"]::before {
		content: "";
		display: block;
		margin-top: 4.6em;
		margin-bottom: 1.15em;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}
	.notes-gridlines {
		grid-template-columns: repeat(2, 1fr);
	}
	.notes-gridlines div:nth-child(2) {
		display: none;
	}
}

/* mobile: a single column, a sidebar nav, and everything starting at 33dvh */
@media only screen and (max-width: 900px) {
	:root {
		/* the baseline grid now runs down from 33dvh, and the common margin is 18px */
		--baseline-bottom: calc(100dvh - 33dvh - round(down, 100dvh - 33dvh - 18px, var(--line)));
	}
	body,
	h1, h2, h3, h4, h5, h6,
	button {
		font-size: 14px;
		line-height: 1.15;
	}

	/* the four column nav gives way to the sidebar, and only the open section shows */
	.container[data-page] {
		grid-template-columns: 1fr;
		padding-left: 60px;
	}
	.section[data-active="0"],
	.lang {
		display: none;
	}
	.section::before {
		display: none; /* the sidebar already draws that line */
	}
	.section-heading {
		top: 36px;
		left: 18px;
	}
	.section-heading-full {
		display: none;
	}
	.section-heading-short {
		display: inline;
	}

	/* sidebar */
	.nav {
		display: block;
		position: fixed;
		z-index: 12;
		top: 0;
		bottom: 0;
		left: 0;
		width: 60px;
		background-color: var(--Antique-White);
	}
	/* the rule is painted over the last pixel of the box, so the padding box is the full width in both states */
	.nav::after {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		bottom: 0;
		width: 1px;
		background-color: var(--Cochinilla-Ink);
	}
	.nav[data-active="1"] {
		width: calc(100% - 54px);
	}
	.nav-bar {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	/* the whole strip is one control while closed, but once open only the marker and the links are */
	.nav[data-active="1"] .nav-bar {
		cursor: default;
	}
	/* centred on the bar, and without the tracking that only suits horizontal text */
	.nav-title {
		position: absolute;
		top: 36px;
		left: 50%;
		transform: translateX(-50%);
		writing-mode: vertical-lr;
		text-orientation: upright;
	}
	.nav[data-active="1"] .nav-title {
		left: 18px;
		transform: none;
		writing-mode: unset;
		text-orientation: unset;
		letter-spacing: .35em;
	}
	.nav-open {
		position: absolute;
		bottom: var(--baseline-bottom);
		left: 0;
		right: 0;
		text-align: center;
	}
	/* the marker stays put and turns into the close control, on the left margin */
	.nav[data-active="1"] .nav-open {
		left: 18px;
		right: auto;
		text-align: left;
		cursor: pointer;
	}
	.nav-menu {
		display: none;
		position: absolute;
		top: 33dvh;
		left: 18px;
		right: 18px;
	}
	.nav[data-active="1"] .nav-menu {
		display: block;
	}
	.nav-link,
	.nav-language > span,
	.nav-language-row > span:first-child {
		display: block;
		letter-spacing: .35em;
	}
	/* an empty line, a dotted rule, an empty line, above every row after the first */
	.nav-link + .nav-link,
	.nav-language {
		margin-top: 1.15em;
	}
	.nav-link + .nav-link::before,
	.nav-language::before {
		content: "";
		display: block;
		margin-top: 1.15em;
		margin-bottom: 1.15em;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}
	/* the rule sits above the row, so the flex pair lives one level in */
	.nav-language-row {
		display: flex;
		justify-content: space-between;
		gap: 1ch;
	}
	.nav-language-links {
		letter-spacing: normal;
		text-align: right;
	}
	.nav-language-links a[data-active="1"] {
		text-decoration: underline;
	}

	/* index: heading and controls on the new margins */
	.index-controls {
		top: 36px;
		right: 18px;
		gap: 18px;
	}
	.index-shuffle-label {
		display: none;
	}
	/* no hover states and no hover preview on a touch screen */
	.index-preview {
		display: none;
	}
	.index-list-link:hover,
	.index-list-link[data-active="1"],
	.index-image:hover .index-image-info,
	.index-image[data-active="1"] .index-image-info {
		background-color: transparent;
		color: var(--Cochinilla-Ink);
	}

	/* list: one column at a time, chosen from the sort menu */
	.index-list {
		top: 33dvh;
		left: 18px;
		right: 18px;
	}
	.index-list-gridlines {
		display: none;
	}
	.index-list-headings,
	.index-list-link {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.index-list-heading {
		pointer-events: none; /* the order is fixed on mobile */
	}
	.index-list-headings > .index-list-heading,
	.index-list-link > span {
		display: none;
	}
	.index-list[data-column="0"][data-selecting="0"] .index-list-headings > .index-list-heading:nth-child(1),
	.index-list[data-column="1"][data-selecting="0"] .index-list-headings > .index-list-heading:nth-child(2),
	.index-list[data-column="2"][data-selecting="0"] .index-list-headings > .index-list-heading:nth-child(3),
	.index-list[data-column="3"][data-selecting="0"] .index-list-headings > .index-list-heading:nth-child(4),
	.index-list[data-column="4"][data-selecting="0"] .index-list-headings > .index-list-heading:nth-child(5) {
		display: block;
	}
	.index-list[data-column="0"] .index-list-link > span:nth-child(1),
	.index-list[data-column="1"] .index-list-link > span:nth-child(2),
	.index-list[data-column="2"] .index-list-link > span:nth-child(3),
	.index-list[data-column="3"] .index-list-link > span:nth-child(4),
	.index-list[data-column="4"] .index-list-link > span:nth-child(5) {
		display: block;
	}
	.index-list[data-selecting="1"] .index-select {
		display: block;
	}
	/* the entries give way to the menu while a column is being picked */
	.index-list[data-selecting="1"] .index-list-links {
		display: none;
	}
	.index-heading-full,
	.index-date-full {
		display: none;
	}
	.index-heading-short,
	.index-date-year {
		display: inline;
	}

	/* the sort menu only picks which column shows */
	.index-list-headings {
		position: relative;
	}
	.index-sort {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
	}
	/* anchored on the right, but as wide as the list, so it lines up with SELECT ONE */
	.index-sort-menu {
		display: none;
		position: absolute;
		top: 3.45em; /* two empty lines under the heading row */
		left: auto;
		right: 0;
		width: calc(100vw - 60px - 36px);
	}
	.index-sort[data-active="1"] .index-sort-menu {
		display: block;
	}
	.index-sort-option {
		display: block;
		text-align: left;
	}
	.index-sort-option + .index-sort-option {
		margin-top: 1.15em;
	}
	.index-sort-option + .index-sort-option::before {
		content: "";
		display: block;
		margin-top: 1.15em;
		margin-bottom: 1.15em;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}

	/* the strip scrolls itself here, so touch keeps its momentum and its rubber band */
	.index-images {
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-top: 33dvh; /* the strip opens this far down, with nothing above it */
	}
	.index-image {
		margin: 0 18px 36px 18px;
	}
	.index-image-crop {
		margin-bottom: 9px;
	}
	.index-images-gridlines {
		display: none;
	}

	/* an opened entry covers the content, leaving the sidebar clear */
	.entry {
		left: 60px;
		background-color: var(--White-Paper);
		border-left: none; /* the sidebar already draws that line */
		/* how far down the picture may reach before the information below it */
		--entry-cap: calc(100dvh - 33dvh - var(--baseline-bottom) - var(--entry-text, 5.75em) - 36px);
	}
	.entry-backdrop {
		display: none;
	}
	.entry-image::before {
		display: none; /* no dotted rule with only one column */
	}
	.entry-info {
		position: static;
		width: auto;
	}
	.entry-close {
		top: 36px;
		left: 18px;
	}
	.entry-count {
		top: 36px;
		right: 18px;
		bottom: auto;
		left: auto;
		text-align: right;
	}
	.entry-text {
		top: auto;
		bottom: var(--baseline-bottom);
		left: 18px;
		right: 18px;
	}
	.entry-line + .entry-line {
		margin-top: 0; /* the lines run on, as one block */
	}
	.entry-image {
		position: static;
	}
	/* pinned to its top left corner, so a tall picture shrinks in from the right and bottom */
	.entry-frame {
		top: 33dvh;
		left: 18px;
		right: auto;
		width: calc(100% - 36px);
	}
	/* the same cap however many pictures the entry holds, since the information sits below it either way */
	.entry-frame,
	.entry[data-single="1"] .entry-frame {
		max-width: calc(var(--entry-cap) * var(--ratio, 1));
	}
	.entry-nav {
		bottom: var(--baseline-bottom);
		left: auto;
		right: 18px;
	}
	.entry-nav-label,
	.entry-nav-prev,
	.entry-zoom {
		display: none;
	}

	/* about: the four columns become one, read straight down */
	.about-columns {
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		/* the tail matches the head, so the last line can be scrolled up to the line the first one starts on */
		padding: 33dvh 18px 33dvh 18px;
	}
	.about-column,
	.about-side {
		display: block;
		overflow: visible;
		padding: 0;
	}
	/* the spacer column has no place in a single column */
	.about-image,
	.about-spacer,
	.about-gridlines {
		display: none;
	}
	/* four empty lines and a rule between one section and the next */
	.about-column + .about-column::before,
	.about-side::before {
		content: "";
		display: block;
		margin-top: 4.6em;
		margin-bottom: 1.15em;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}
	/* the small print runs at the same size as everything else, four lines down */
	.about-legal {
		margin-top: 4.6em;
		padding-top: 0;
		font-size: inherit;
		line-height: inherit;
	}
	/* a tap can leave the hover state stuck behind it, and the caret with it */
	.about-link:hover::before {
		content: none;
	}

	/* the policy popups sit on the baseline, in the width of the column they open from, and scroll once they reach 36px from the top */
	.about-popup {
		position: fixed;
		top: auto;
		bottom: var(--baseline-bottom);
		left: 78px;
		right: 18px;
		width: auto;
		max-height: calc(100dvh - 36px - var(--baseline-bottom));
		padding: 18px;
	}
	.about-popup-head {
		gap: 18px;
	}
	.about-popup-text {
		margin-top: 120px;
	}

	/* events: the intro, the calendar and both lists become one column */
	.events-columns {
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 33dvh 18px 33dvh 18px;
	}
	.events-info,
	.events-listing {
		display: block;
		overflow: visible;
		padding: 0;
	}
	.events-calendar {
		margin-top: 4.6em; /* four empty lines under the intro */
		padding-top: 0;
	}
	/* four empty lines and a rule before the upcoming list, and again before the past */
	.events-listing::before,
	.events-group + .events-group::before {
		content: "";
		display: block;
		margin-top: 4.6em;
		margin-bottom: 1.15em;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}
	.events-heading {
		margin-bottom: 4.6em; /* the same four empty lines that sit above the rule */
	}
	.events-gridlines {
		display: none;
	}

	/* the event view: a card, the pictures stacked, then the details, with display: contents letting the rows order around the pictures */
	.view {
		left: 60px;
		border-left: none; /* the sidebar already draws that line */
		background-color: var(--White-Paper);
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 33dvh 0;
	}
	.view-info,
	.view-info-rows {
		display: contents;
	}
	/* each item keeps its own height, so the column flexbox cannot shrink them into each other */
	.view-info-title,
	.view-info-name,
	.view-info-date,
	.view-images,
	.view-info-line,
	.view-expand {
		flex: none;
	}
	.view-close {
		position: fixed;
		top: 36px;
		left: 78px;
	}
	.view-nav {
		display: none;
	}

	/* a ruled card: an empty line, the label, an empty line, the name, the date, and one more empty line */
	.view-info-title,
	.view-info-name,
	.view-info-date {
		/* an empty row stands as tall as a line of text with its padding */
		--card-row: calc(1.15em + 18px);
		margin: 0 18px;
		padding: 9px;
		text-align: center;
		background-color: var(--Yellow-Paper);
		/* the rule belongs under each line, and the row's own top border would double it */
		border: none;
		border-bottom: 1px solid var(--Cochinilla-Ink);
	}
	.view-info-title {
		order: 1;
		text-transform: uppercase;
	}
	.view-info-name {
		order: 2;
	}
	.view-info-date {
		order: 3;
		/* the rule comes straight after the date, and the closing row sits below it */
		padding-bottom: 0;
		border-bottom: none;
	}
	/* the negative margins reach back through the padding, so a rule on an empty row runs the full width of the card */
	.view-info-title::before,
	.view-info-name::before {
		content: "";
		display: block;
		height: var(--card-row);
		margin: -9px -9px 9px -9px;
		border-bottom: 1px solid var(--Cochinilla-Ink);
	}
	.view-info-date::after {
		content: "";
		display: block;
		height: var(--card-row);
		margin: 9px -9px 0 -9px;
		border-top: 1px solid var(--Cochinilla-Ink);
	}

	/* the filmstrip becomes a stack, and the gap below it separates card from details */
	.view-images {
		order: 4;
		position: static;
		height: auto;
		overflow: visible;
		margin: 18px 18px 72px 18px;
	}
	.view-strip {
		display: block;
		width: auto;
		height: auto;
	}
	.view-image {
		padding: 0;
		height: auto;
	}
	.view-image + .view-image {
		margin-top: 18px;
	}
	.view-image img {
		width: 100%;
		height: auto;
	}
	.view-image::before {
		display: none; /* no rule between pictures once they are stacked */
	}

	/* an empty line between each detail, then three before the description */
	.view-info-line {
		order: 5;
		margin: 0 18px;
		padding: 0;
		border: none;
	}
	.view-info-line + .view-info-line {
		margin-top: 1.15em;
	}
	.view-expand {
		order: 6;
		margin: 3.45em 18px 0 18px;
		padding: 0;
		border: none;
	}
	/* the description is the point of opening this, so it is not folded away here */
	.view-info-toggle {
		display: none;
	}
	.view-expand[data-active="0"] .view-info-hidden {
		display: block;
	}
	.view-info-hidden::before {
		display: none;
	}
	/* the blurb reads as an opening, set apart from the longer text under it */
	.view-info-hidden .view-info-blurb + p {
		margin-top: 2.3em;
	}

	/* notes read straight down, the wrappers stepping aside so their columns can be ordered */
	.notes-columns {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 33dvh 18px 33dvh 18px;
	}
	.notes-info,
	.notes-listing {
		display: contents;
	}
	/* each item keeps its own height, so the column flexbox cannot shrink them into each other */
	.notes-intro,
	.notes-editor,
	.notes-nav,
	.notes-articles {
		flex: none;
	}
	.notes-intro {
		order: 1;
	}
	.notes-editor {
		order: 2;
	}
	.notes-nav {
		order: 3;
		margin-top: 0; /* it is placed by its order here, not pushed to a baseline */
		padding-top: 0;
	}
	.notes-articles {
		order: 4;
		margin-top: 72px; /* straight into the first article, with no rule before it */
	}
	.notes-articles .notes-issue[data-active="1"]::before {
		display: none;
	}
	/* a rule before the editor's note, and a pair of them around the issue controls */
	.notes-editor::before,
	.notes-nav::before,
	.notes-nav::after {
		content: "";
		display: block;
		height: 2px;
		background-image: radial-gradient(circle, var(--Cochinilla-Ink) 1px, transparent 1.01px);
		background-size: 1ch 2px;
		background-repeat: repeat-x;
		background-position: calc(0.5ch + 1px) center;
	}
	.notes-editor::before {
		margin: 72px 0 1.15em 0;
	}
	.notes-nav::before {
		margin: 36px 0 1.15em 0;
	}
	.notes-nav::after {
		margin-top: 1.15em;
	}
	/* the same 72px between one article and the next */
	.notes-article:not(:last-child)::after {
		margin-top: 72px;
	}
	.notes-gridlines {
		display: none;
	}

	/* the article popup covers the page, with the close button and issue line pinned */
	.article {
		left: 60px;
		border-left: none; /* the sidebar already draws that line */
		background-color: var(--White-Paper);
	}
	.article-close {
		top: 36px;
		left: 18px;
	}
	.article-issue {
		top: 36px;
	}
	.article-issue-name {
		display: none; /* the number alone fits across the top */
	}
	/* the title box opens on the line the pages start on, holding the width of the text below it */
	.article-box {
		top: 33dvh;
		left: 18px;
		right: 18px;
		max-width: 560px;
		margin: 0 auto;
		padding: 36px 18px;
	}
	/* the box is never wider than the panel it opens in */
	.article-note-box {
		max-width: calc(100vw - 60px - 36px);
	}
	.article-body {
		padding: 0 18px 72px 18px;
	}
	/* 72px above a picture and below it, or below its caption where there is one */
	.article-figure {
		margin: 72px 0;
	}
	.article-caption {
		margin-top: 9px;
	}

	/* the signup covers the page rather than sitting beside it */
	.signup {
		top: 33dvh;
		right: 18px;
		bottom: auto;
		left: 78px;
		width: auto;
	}
	.signup-top,
	.signup-foot {
		padding: 18px;
	}
	.signup-field,
	.signup-row {
		padding: 9px 18px;
	}
	.signup-head {
		gap: 18px;
	}
}