@font-face {
	font-family: "Atacama Trial";
	src: url("fonts/atacama-trial-vf.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-stretch: 50% 200%;
	font-display: block;
}

@font-face {
	font-family: "Atacama Trial";
	src: url("fonts/atacama-trial-italic-vf.ttf") format("truetype-variations");
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 50% 200%;
	font-display: block;
}

@font-face {
	font-family: "Alpaga Trial";
	src: url("fonts/alpaga-trial-vf.ttf") format("truetype-variations");
	font-weight: 1 950;
	font-stretch: 37% 200%;
	font-display: block;
}

@font-face {
	font-family: "Aloha Trial";
	src: url("fonts/aloha-trial-vf.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-display: block;
}

@font-face {
	font-family: "Mono NG Trial";
	src: url("fonts/monong-trial-vf.ttf") format("truetype-variations");
	font-weight: 1 950;
	font-stretch: 37% 200%;
	font-display: block;
}

@font-face {
	font-family: "Caslon NG Trial";
	src: url("fonts/caslonng-trial-vf.ttf") format("truetype-variations");
	font-weight: 100 900;
	font-stretch: 50% 200%;
	font-display: block;
}

@font-face {
	font-family: "Caslon NG Trial";
	src: url("fonts/caslonng-trial-italic-vf.ttf") format("truetype-variations");
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 50% 200%;
	font-display: block;
}

@font-face {
	font-family: "Caslon Display";
	src: url("fonts/caslon-display.woff2") format("woff2");
	font-weight: 400;
	font-display: block;
}

@font-face {
	font-family: "Caslon Text";
	src: url("fonts/caslon-text-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Caslon Text";
	src: url("fonts/caslon-text-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("fonts/dm-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "DM Mono";
	src: url("fonts/dm-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

:root {
	--ground: #ffffff;
	--ink: #0a0a0a;
	--display: "Atacama Trial", "Caslon Display", Georgia, serif;
	--text: "Atacama Trial", "Caslon Display", Georgia, serif;
	--face: "Atacama Trial", "Caslon Display", Georgia, serif;
	--mono: "Alpaga Trial", "DM Mono", ui-monospace, monospace;
	/* The sheet's margin and head air: 56px and 64px on the full sheet, and the
	   same share of a narrower or shorter screen. */
	--margin: clamp(1.25rem, 5.5vw, 56px);
	--head: clamp(2.5rem, 7vh, 64px);
	/* The page. A catalogue's page does not widen when you open the window:
	   48em of plate plus two margins, rounded up for air. */
	--page: 64rem;
	/* The page's interior — margin to margin. Every plate measures against it. */
	--interior: calc(min(100vw, var(--page)) - 2 * var(--margin));
	/* How much of the screen a plate may take before it stops growing. A picture
	   in a catalogue is bounded by the page's height, never by the column. */
	--cap: 80vh;
	/* The wide measure: 48em on the full sheet, and on a narrower one the share
	   of the interior the sheet was drawn at (768 of 912), so a wide plate always
	   leaves the hang's width free and the alternation survives. */
	--wide: min(48em, calc(var(--interior) * 0.842));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { min-height: 100%; }

html, body {
	background: var(--ground);
	color: var(--ink);
}

body {
	max-width: var(--page);
	margin: 0 auto;
	padding: var(--head) var(--margin) 0;
}

/* The cover — the one page that spends the mark at full size. It was a
   self-contained document until 2026-08-23; the duplication meant every type
   change had to be made twice, and the second one got missed. */

body.cover-page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	padding: 0 var(--margin);
}

/* The mark is the running head — sticky rather than fixed, so it keeps its
   place in the flow and nothing downstream has to be measured against it.
   The ground colour is what lets the page scroll underneath. */
.masthead {
	position: sticky;
	top: 0;
	z-index: 2;
	padding-top: var(--head);
	padding-bottom: 2.5rem;
	background: var(--ground);
}

.masthead svg { display: block; width: 100%; overflow: visible; }

/* The mark keeps its drawn width; the viewBox is cut to its natural
   length (1488 units) so it fills the measure without being narrowed. */
.masthead text {
	font-family: var(--face);
	font-weight: 250;
	font-variation-settings: "CNTR" 76;
	fill: var(--ink);
}

/* The photograph runs margin to margin at every size and the cover scrolls
   where the screen is too short for it. Ruled 2026-09-07 against a cropped
   and against a scaled picture: the full-width plate is the magazine. */
.cover-plate { width: 100%; margin-bottom: 2rem; }

.cover-plate img { display: block; width: 100%; height: auto; }

/* Everything a first-time visitor needs sits at the foot of the page, under
   the mark: the work in the photograph, then the show it is in — on now, or
   the latest. */
.cover {
	margin-top: auto;
	padding-bottom: 7rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 64px;
}

.cover section + section { margin-top: 3.25rem; }

.entry,
.works p {
	font-family: var(--face);
	font-weight: 250;
	font-variation-settings: "CNTR" 40;
	font-size: 1.5rem;
	line-height: 1.25;
}

.entry { max-width: 26em; }

.works p { max-width: 22em; }

.entry .meta {
	display: block;
	font-size: 1.0625rem;
	line-height: 1.5;
	margin-top: 0.5rem;
}

.entry a, .works a { text-decoration: none; }

.entry a:hover, .works a:hover { text-decoration: underline; }

/* The cover's foot sits tighter to the edge than an interior page's. */
.cover-page .foot { padding: 0 var(--margin) 0.375rem; }

.cover-page .foot nav { margin-right: 0; }

/* The 404 — the cover's slot dropped into the bottom third of the page, the
   way a magazine sets a block into the lower third: the main takes exactly
   that third and the slot sits on its top edge, the two-thirds line. */
.not-found .cover {
	margin-top: auto;
	min-height: 33.333vh;
	padding-bottom: 0;
	align-items: flex-start;
}

/* The mark is spent once, at full size, on the cover. Interior pages carry
   a folio instead — so the air the masthead occupied stays, and the page
   opens on its own first line. */
article {
	margin-top: 8rem;
	max-width: 36em;
	font-family: var(--text);
	font-weight: 250;
	font-variation-settings: "CNTR" 40;
	font-size: 1.0625rem;
	line-height: 1.62;
	hyphens: auto;
	padding-bottom: 8rem;
}

h2 {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The page names itself at the top, in the reading face. The strike in the
   folio confirms where you are; it cannot do the naming, because a reader
   halfway down the page is nowhere near it. */
h1 {
	font-family: var(--text);
	font-size: 2.25rem;
	font-weight: 250;
	font-variation-settings: "CNTR" 55;
	line-height: 1.15;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: 2.75rem;
}

/* A show's name is a name, not a section label — it stays as written. */
h1.title { letter-spacing: 0; text-transform: none; }

h1 + h2, h1 + .year:first-of-type { margin-top: 0; }

h2 { margin: 3.5rem 0 1rem; }

h3 {
	font-family: var(--text);
	font-size: 1.0625rem;
	font-weight: 640;
	margin: 2.5rem 0 0.75rem;
}

strong { font-weight: 640; }

p { margin-bottom: 1rem; }

/* Running prose, and only running prose: direct children of the article are
   exactly the reading paragraphs, while records sit one level deeper inside
   .record. The space is 2.5 lines of the text it separates (2.5 × 1.62em
   against a line-height of 1.62); the weight is the bottom of the face's
   axis. Both work only because weight travels on font-weight and
   font-variation-settings carries CNTR alone. */
article > p {
	font-weight: 100;
	margin-bottom: 4.05em;
}

/* Some works name themselves at the end. One recursion to a line, hard
   broken at the loop's own seam — flowed as a paragraph the repetition
   dissolves and the recursive moment is lost. The box takes its width from
   the longest line rather than from a number, and the type size is solved
   rather than chosen: the block aligns with the text column, not with the
   plates. Measured at wght 250 / wdth 100 / CNTR 40 — the axes it actually
   inherits — the loop line runs 35.45em against the widest specimen line's
   33.20em, so it takes 33.20/35.45 of the specimen's 18.24px = 17.08px.
   Solved as a ratio against .specimen rather than against 612px, because a
   glyph-advance sum reads ~1% narrow and the ratio cancels that error.
   The size rides on the element as --size: the next work that names itself
   at the end will have its own line lengths and so its own solved size. */
.full-title {
	width: max-content;
	max-width: calc(min(100vw, var(--page)) - 2 * var(--margin));
	font-size: var(--size, 1.0676rem);
	font-weight: 250;
	line-height: 1.85;
	hyphens: none;
	margin: 1rem 0 0;
}
p:last-child { margin-bottom: 0; }

/* A listing. G-code quoted as evidence, not as the artwork — which is why it
   does NOT take the .specimen solve: filling the column would put 29 characters
   at 32px and make a source file shout. Machine *language* is apparatus and
   sits with the other mono apparatus (11px labels, 12px rules), a step above
   them because it has to stay readable line by line. */
.listing {
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 425;
	line-height: 1.75;
	white-space: pre;
	overflow-x: auto;
	margin: 3.5rem 0;
}

/* Machine output, set rather than photographed. On the live site these were
   pictures of type; here they are type, in the page's own face and measure, so
   the repetition wraps in this column and becomes a typographic event instead
   of a screenshot of one. Quoted at 250 against prose at 100.
   One size cannot serve two of these. Each block is a different generation of
   machine output with its own line lengths, so each is solved separately to
   land its own widest line on the 36em column, and carries the result as
   --size. Measured at the axes the block inherits — wght 250, wdth 100,
   CNTR 40 — and solved as a ratio against a block already flush, because a
   glyph-advance sum reads ~1% narrow and the ratio cancels that error.
   The width axis was the other candidate and lost: a field of I's needs
   wdth 130% to gain 3% of line, because a stem with serifs barely widens
   and only the spacing moves. */
.specimen {
	font-size: var(--size, 1.14rem);
	font-weight: 250;
	line-height: 1.9;
	hyphens: none;
	margin: 3.5rem 0;
}


ul { margin: 0 0 1rem 1.25rem; }
li { margin-bottom: 0.25rem; }

a { color: inherit; }

address { font-style: normal; margin-bottom: 1rem; }

code { font-family: var(--mono); font-size: 0.9em; }

.alt, .source {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 2rem;
}

.source { margin: 3rem 0 0; }

/* Art. 21(4) wants this "clearly and separately". The capitals are the
   template's convention rather than the statute's requirement, but they
   are also what a reader scanning for soft targets recognises — so the
   characters stay as delivered and only the setting is ours. */
.separate {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 1px solid var(--ink);
	font-size: 0.8125rem;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.separate .label {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 0.75rem;
}

.foot {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	max-width: var(--page);
	margin-inline: auto;
	padding: 1.25rem var(--margin) 0.375rem;
	background: var(--ground);
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* letter-spacing adds its space AFTER the last glyph too, so flush-right
   text hangs short of the margin by one letter-space. Pull it back. */
.foot .row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: clamp(1.5rem, 6vw, 64px);
}

.foot .row > :first-child { white-space: nowrap; }

.foot nav { text-align: right; margin-right: -0.14em; text-wrap: balance; }

/* Not a link and not a title — the line that says what this is, sitting
   close enough to the edge to read as the bottom of the sheet. */
.foot .colophon {
	font-family: var(--text);
	font-weight: 250;
	font-variation-settings: "CNTR" 40;
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.4;
	text-align: center;
	margin: 2rem 0 0;
}

.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* The current section is struck through: the mail-order convention for the
   item you cannot click because you are standing on it. */
.foot .here { text-decoration: line-through; }

/* ---------- exhibition page ---------- */

.label {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.85rem;
}

.exhibition { max-width: 36em; }

/* A quoted outside voice (a review). The marks in the display voice; the
   passage the reading weight a step above the reading size, at the title's
   contrast; the attribution the mono label. The site is one weight throughout
   and hierarchy is size and contrast, so the quote takes no axis of its own. */
.exhibition blockquote {
	margin: 7rem 0;
}
/* Marks in the site's display voice — light (250), high-contrast (76). The
   closing drops down-right off the short last line; the opening sets onto the
   first line and rises up-left off it, so only that line steps in for the
   mark — symmetric with the close, each hanging into its own whitespace. */
.exhibition blockquote .q p:first-child {
	position: relative;
	text-indent: 5.5rem;
}
.exhibition blockquote .q p:first-child::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -0.75rem;
	text-indent: 0;
	font-family: var(--display);
	font-weight: 250;
	font-variation-settings: "CNTR" 76;
	font-size: 16rem;
	line-height: 0.5;
}
.exhibition blockquote .q::after {
	content: "\201D";
	display: block;
	font-family: var(--display);
	font-weight: 250;
	font-variation-settings: "CNTR" 76;
	font-size: 16rem;
	line-height: 0.5;
	text-align: right;
	margin-top: -0.02em;
}
.exhibition blockquote p {
	font-size: 1.16rem;
	font-weight: 250;
	font-variation-settings: "CNTR" 55;
	line-height: 1.62;
}
.exhibition blockquote cite {
	display: block;
	margin-top: -2.5rem;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-style: normal;
	font-variation-settings: normal;
}

/* The facts hold the reading column. Tried at the plate measure on 2026-08-22
   and reverted the same hour: it unwrapped nine values, and it cost the page
   its single text edge. The law is that text holds the measure and only images
   break out — an apparatus that breaks out too dissolves the distinction the
   whole design rests on. Wrapping is the cheaper price. */
.facts {
	display: grid;
	grid-template-columns: 8.5em 1fr;
	gap: 0.9rem 2rem;
	align-items: baseline;
	margin-bottom: 5rem;
}

.facts dt {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Same size and same leading as the prose it sits above — the weight is what
   separates the apparatus from the text, and it is the only thing that does. */
.facts dd {
	font-size: 1.0625rem;
	line-height: 1.62;
}

.shown { margin-bottom: 3.5rem; }

.shown .work {
	font-size: 1.5rem;
	line-height: 1.25;
}

/* A work title is a destination, not an inline reference — quiet like the cover. */
.shown a, .facts dd a { color: inherit; text-decoration: none; }
.shown a:hover, .facts dd a:hover { text-decoration: underline; }

.links dl {
	display: grid;
	grid-template-columns: 18em 1fr;
	gap: 0.6rem 2rem;
	align-items: baseline;
}

.links dt {
	font-size: 1.0625rem;
	line-height: 1.5;
}

.links dd a {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
}

/* ---------- recordings ---------- */

/* A player made of the two elements the page already owns: a mono label and a
   hairline rule. Progress is shown by weight rather than by lightness, because
   there is only one ink — the elapsed part is a thicker rule growing over the
   thin one, the same logic as striking through instead of greying out. */
.recording {
	width: 36em;
	max-width: calc(min(100vw, var(--page)) - 2 * var(--margin));
	margin: 3.5rem 0;
}

.js .recording audio { display: none; }
.recording .cue { display: none; }
.js .recording .cue { display: inline-block; }

/* A moving plate. It is a plate first — same measures, same hang, same
   interval — and takes the audio player's chrome-less transport rather than
   the browser's, so a video on this site is a picture that runs, not a widget.
   Without JS the video keeps its own controls and the page still works. */
.motion video { display: block; width: 100%; height: auto; }
.js .motion video { pointer-events: none; }
.motion .cue { display: none; }
.js .motion .cue { display: inline-block; }

.motion .cue, .recording .cue,
.motion .stop, .recording .stop {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: inherit;
	background: none;
	border: 0;
	padding: 0 0 0.7rem;
	cursor: pointer;
}

/* Audio has nothing above it; a video does. The transport takes the same
   0.85rem the captions take, so it sits off the picture on the page's own
   rhythm rather than against its edge. */
.motion .transport { padding-top: 0.85rem; }

/* The transport is one line: the verb, Stop beside it, the clock at the far
   right. The script builds the row and moves the clock out of the cue. */
.motion .transport, .recording .transport {
	display: flex;
	align-items: baseline;
	gap: 1.5em;
}
.motion .transport .dur, .recording .transport .dur {
	margin-left: auto;
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-bottom: 0.7rem;
}

.motion .cue:hover .verb, .recording .cue:hover .verb,
.motion .stop:hover, .recording .stop:hover { text-decoration: underline; }

/* The track is the scrubber. The line stays a hairline; the touch area around
   it is what a finger can hit. */
.motion .track, .recording .track {
	position: relative;
	height: 1px;
	background: var(--ink);
	cursor: pointer;
	touch-action: none;
}
.motion .track::before, .recording .track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	bottom: -12px;
}
.motion .elapsed, .recording .elapsed { height: 3px; width: 0; margin-top: -1px; background: var(--ink); }

.motion figcaption, .recording figcaption {
	font-size: 13px;
	line-height: 1.5;
	margin-top: 0.85rem;
}

/* ---------- plates ---------- */

/* Plates are hung, not sized. Three things decide a plate: its measure, its
   hang, and the interval of white before it — and the third does most of the
   work. A plate three paragraphs from the last one reads as an illustration;
   the same plate with a held interval reads as a plate. White costs no pixels
   and no height, which is why it is the lever here. */
.plate {
	margin: 5rem 0;
	width: var(--w, 36em);
	max-width: var(--interior);
}

/* The held interval — a plate that carries a section rather than illustrating
   a paragraph. Twice the air, same ink. */
.plate--held { margin: 9rem 0; }

/* The lead plate is part of the title, not the opening of a section: the
   title already sets the air above it. It takes the ordinary interval and
   cannot be held. */
.title + .plate { margin-top: 5rem; }

/* Landscape and square take the wide measure outright. */
.plate--landscape,
.plate--square,
.plate--wide { --w: var(--wide); }

/* A portrait is bound by HEIGHT, not width — the same law the cover already
   obeys: the photograph is cropped to the page, the page is never resized to
   the photograph. It grows toward the wide measure on a tall screen and stops
   itself at 80vh on a short one, so a portrait is never taller than a screen
   and never narrower than the text column. --ar (width/height) rides on the
   element; the figure box is therefore the image's true rendered width, so
   the caption aligns with the picture rather than with a box around it. */
.plate--portrait {
	--w: clamp(36em, calc(var(--cap) * var(--ar, 0.75)), var(--wide));
}

/* The hang. The left edge was the spine and only the right edge moved; now
   both do. A plate hung outer lands its right edge on the page's right
   margin, and the text keeps the spine — the magazine's own alternation. */
.plate--outer { margin-left: max(0px, calc(var(--interior) - var(--w))); }

.plate img {
	display: block;
	width: 100%;
	height: auto;
}

/* The caption is a note, not a label — same quiet register as the colophon. */
.plate figcaption {
	font-size: 13px;
	line-height: 1.5;
	margin-top: 0.75rem;
}

/* ---------- index pages ---------- */

.index { max-width: 36em; }

/* The year is the spine: an index key, so it speaks in the apparatus voice. */
.year {
	font-family: var(--mono);
	font-size: 12px;
	font-weight: 425;
	letter-spacing: 0.14em;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 0.7rem;
	margin: 4rem 0 2rem;
}

.year:first-of-type { margin-top: 2.5rem; }

.record {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.4rem 2rem;
	align-items: baseline;
	margin-bottom: 2.25rem;
}

.record .title {
	font-size: 1.5rem;
	line-height: 1.25;
	margin: 0;
}

.record .title a { color: inherit; text-decoration: none; }
.record .title a:hover { text-decoration: underline; }

.record .state {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
}

.record .meta {
	grid-column: 1 / -1;
	font-size: 1.0625rem;
	line-height: 1.5;
	margin: 0;
}

/* ---------- curriculum vitae ---------- */

.cv {
	display: grid;
	grid-template-columns: 5em 1fr;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	margin-bottom: 1rem;
}

/* A year is an index key, so it speaks in the apparatus voice — the same
   register the exhibitions index gives it. */
.cv dt {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 425;
	letter-spacing: 0.14em;
}

.cv dd { line-height: 1.45; }

/* ---------- the phone ---------- */

/* The foot stacks, its menu at the size that holds one line. */
@media (max-width: 600px) {
	.foot .row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.foot nav {
		text-align: left;
		margin-right: 0;
		font-size: 10px;
		letter-spacing: 0.08em;
		text-wrap: wrap;
	}

	.foot .colophon { margin-top: 0.75rem; }
}