/*
Theme Name: Unblinking Eye Silver Gelatin
Description: A fibre-base print in CSS. Pure white paper, pure black, neutral silver greys and one typeface. The old site's black banner strips return as full-width black bands. Cleans the imported NetObjects pages as they render; the database is left untouched.
Author: Unblinking Eye
Version: 1.5.12
Requires at least: 6.4
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: ube-sg
*/

/* Tokens ---------------------------------------------------------------- */
:root {
	--paper: #ffffff;
	--ink: #000000;
	--silver-1: #45484b;   /* mid grey, slight cool bias like selenium-toned silver */
	--silver-2: #6f7378;
	--silver-3: #d9dbdd;
	--band: #000000;
	--band-ink: #ffffff;
	--band-dim: #c9cbcd;
	--plate: #f2f2f1;      /* the mat a card picture sits on */
	--serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--measure: 62ch;
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: 1.1875rem;
	line-height: 1.6;
	font-optical-sizing: auto;
	font-feature-settings: "liga", "kern", "onum";
	text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem; z-index: 10; }

.wrap {
	width: min(100%, 74rem);
	margin-inline: auto;
	padding-left: max(16px, env(safe-area-inset-left, 0px));
	padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.col { width: min(100%, var(--measure)); margin-inline: auto; }

/* Masthead -------------------------------------------------------------- */
.mast { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-block: 3rem 2.5rem; text-align: center; }
.brand { display: flex; align-items: center; gap: 1.3rem; justify-content: center; flex-wrap: wrap; }
.brand-eye { width: clamp(68px, 8.5vw, 100px); height: auto; display: block; }
.wordmark {
	font-style: italic; font-weight: 300; font-variation-settings: "opsz" 72;
	font-size: clamp(2.5rem, 6.2vw, 4.1rem); line-height: 1; letter-spacing: -0.015em;
}
.tagline { margin: 0; color: var(--silver-1); font-size: 1.0625rem; font-style: italic; }
.nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.9rem; font-size: 1.0625rem; padding: 0; margin: 0; list-style: none; }
.nav a { padding-block: 0.25rem; border-bottom: 1px solid transparent; }
.nav a:hover, .nav [aria-current] { border-bottom-color: var(--ink); }

/* Notice line under the masthead (front page and gun pages): hairlines
   either side, one line of type, links to Ed's letter. */
.notice { display: flex; align-items: center; gap: 1.5rem; margin-top: -0.75rem; padding-bottom: 2.25rem; font-size: 1.0625rem; }
.notice::before, .notice::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--silver-3); }
.notice a { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.2rem 0.7rem; text-align: center; }
.notice-from { font-style: italic; color: var(--silver-1); }
.notice-title { border-bottom: 1px solid var(--silver-3); transition: border-color .2s ease; }
.notice-arrow { color: var(--silver-2); transition: transform .2s ease; }
.notice a:hover .notice-title { border-bottom-color: var(--ink); }
.notice a:hover .notice-arrow { transform: translateX(3px); color: var(--ink); }
@media (max-width: 36rem) {
	.notice { gap: 0.9rem; font-size: 1rem; padding-bottom: 1.75rem; }
	.notice::before, .notice::after { flex-basis: 1rem; flex-grow: 0; }
	.notice a { flex: 1; }
	.notice-arrow { display: none; }
}
.notice + .article .art-head { padding-top: 0.75rem; }

/* Black band (the original's banner strips) ------------------------------ */
.band { background: var(--band); color: var(--band-ink); }
.band a:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.band a:focus-visible { outline-color: var(--band-ink); }
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; padding-block: 3.5rem; }
.feature-text h2 {
	margin: 0 0 0.9rem; font-weight: 300; font-variation-settings: "opsz" 72;
	font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -0.012em; text-wrap: balance;
}
.feature-text p { margin: 0; color: var(--band-dim); font-size: 1.0625rem; max-width: 46ch; }
.byline { display: block; margin-top: 1rem; font-style: italic; font-size: 1.0625rem; }
.feature-art { margin: 0; }
.feature-art img { display: block; width: 100%; }
.feature-art figcaption { margin-top: 0.75rem; font-size: 0.9375rem; color: #a7aaad; font-style: italic; }
.formulae { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; padding-block: 3.25rem; }
.formulae h3 { margin: 0 0 0.4rem; font-weight: 400; font-size: 1.375rem; font-variation-settings: "opsz" 36; }
.formulae p { margin: 0; color: var(--band-dim); font-size: 1rem; line-height: 1.5; }

/* Front page: white "mat" sections between the black bands --------------
   Twelve-column grid; section headings hang in the left three columns. */
.mat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 1.5rem; padding-block: 5rem; }
.hang { grid-column: 1 / 4; padding-right: 1rem; }
.hang h2 { margin: 0; font-weight: 300; font-style: italic; font-variation-settings: "opsz" 60; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.hang p { margin: 0.75rem 0 0; color: var(--silver-1); font-size: 1rem; line-height: 1.5; }
.hang a { border-bottom: 1px solid var(--ink); }
.mat-body { grid-column: 4 / 13; min-width: 0; }

/* Everything on the mat prints in black and white, so the feature image in
   the top band is the only colour on the page. */
.front .mat img, .printband img { filter: grayscale(1); }

/* Rows of prints: proportional columns give every print in a row one height. */
.row { display: grid; grid-template-columns: var(--cols); gap: 2.25rem; align-items: start; }
.row + .row { margin-top: 3.5rem; }
.print { min-width: 0; }
.print img { display: block; width: 100%; height: auto; background: var(--silver-3); }
.print h3 { margin: 1rem 0 0.2rem; font-weight: 400; font-variation-settings: "opsz" 36; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.005em; text-wrap: balance; }
.row.two .print h3 { font-size: 1.625rem; }
.print h3 a:hover, .families li a:hover, .book h3 a:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.print .by { margin: 0 0 0.4rem; font-style: italic; color: var(--silver-1); font-size: 1rem; }
.print .deck { margin: 0; color: var(--silver-1); font-size: 1rem; line-height: 1.5; max-width: 44ch; }

/* The Cuenca carbon print, uncropped in its own black band. */
/* Front-page bands: the picture takes the larger share and, on wide screens,
   runs past the content edge (the feature to the right, Cuenca to the left);
   generous space between picture and text. */
.front { overflow-x: clip; }
.front .feature { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.45fr); gap: clamp(2.5rem, 6vw, 6.5rem); padding-block: 4.5rem; }
.front .feature-mirror { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.82fr); }
.front .feature-art img { display: block; width: 100%; height: auto; }
@media (min-width: 80rem) {
	.front .feature:not(.feature-mirror) .feature-art { margin-right: -4.5rem; }
	.front .feature-mirror .feature-art { margin-left: -4.5rem; }
}
/* The Cuenca carbon print band mirrors the feature band: picture left, text right. */
.feature-mirror { grid-template-columns: 1fr 1.05fr; }
.feature-mirror .feature-art img { display: block; width: 100%; height: auto; }
.band-link { display: inline-block; margin-top: 1.25rem; font-size: 1.0625rem; border-bottom: 1px solid var(--band-ink); }
.band .band-link:hover { text-decoration: none; border-bottom-width: 2px; }

/* Index by process family, set like a book's table of contents. */
.families { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem 3rem; }
.fam { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1.25rem; align-items: start; }
.fam .swatch { grid-row: 1 / 3; display: block; width: 4.75rem; aspect-ratio: 4 / 5; object-fit: cover; }
.families h3 { margin: 0 0 0.7rem; font-weight: 300; font-style: italic; font-variation-settings: "opsz" 48; font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.01em; }
.families ul { list-style: none; margin: 0; padding: 0; }
.families li { margin: 0 0 0.55rem; font-size: 1.1875rem; line-height: 1.35; text-wrap: pretty; }
.families .au { font-style: italic; color: var(--silver-2); font-size: 1rem; }
.families .au::before { content: ", "; }

.book { display: grid; grid-template-columns: 7rem 1fr; gap: 1.75rem; align-items: center; }
.book img { display: block; width: 7rem; height: auto; }
.book h3 { margin: 0 0 0.25rem; font-weight: 400; font-style: italic; font-size: 1.75rem; line-height: 1.15; }
.book p { margin: 0; color: var(--silver-1); font-size: 1.0625rem; }
.book p a { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* Article --------------------------------------------------------------- */
.article { padding-block: 0.5rem 3.5rem; }
.art-head { text-align: center; padding-block: 1.5rem 2.75rem; }
.art-head .kicker { margin: 0 0 1rem; font-style: italic; color: var(--silver-1); font-size: 1.0625rem; }
.art-head .kicker a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.art-head h1 {
	margin: 0 0 1.1rem; font-weight: 300; font-variation-settings: "opsz" 72;
	font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -0.018em; text-wrap: balance;
}
.art-head .by { margin: 0; font-style: italic; font-size: 1.125rem; }
.art-head .meta { margin: 0.45rem 0 0; color: var(--silver-1); font-size: 1rem; }

/* Legacy body, as cleaned by inc/legacy-content.php */
.entry { overflow-wrap: break-word; }
.entry::after { content: ""; display: table; clear: both; }
.entry p { margin: 0 0 1.3em; text-wrap: pretty; }
.entry .ube-lede::first-letter { font-size: 3.3em; float: left; line-height: 0.82; padding-right: 0.1em; margin-top: 0.06em; font-weight: 300; }
.entry h2, .entry h3 { text-wrap: balance; clear: both; }
.entry h2 { margin: 2.6rem 0 1rem; font-weight: 400; font-style: italic; font-variation-settings: "opsz" 36; font-size: 1.625rem; line-height: 1.25; letter-spacing: -0.005em; }
.entry h3 { margin: 2rem 0 0.75rem; font-weight: 600; font-size: 1.1875rem; line-height: 1.35; }
.entry a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--silver-3); }
.entry a:hover { text-decoration-color: var(--ink); }
.entry h2 a, .entry h3 a { text-decoration: none; }
.entry h2 a:hover, .entry h3 a:hover { text-decoration: underline; text-decoration-color: var(--ink); }

/* Index entries: the old card tables (picture beside title, author, note),
   set as one consistent list like the front page. */
.entry .ube-entry { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.6rem; align-items: start; padding-block: 1.6rem; border-top: 1px solid var(--silver-3); clear: both; }
.entry .ube-entry:last-of-type { border-bottom: 1px solid var(--silver-3); }
.entry .ube-entry-media { display: grid; gap: 0.6rem; }
.entry .ube-entry .ube-entry { display: block; border: 0; padding: 0; }
.entry .ube-entry-media .ube-entry-text { margin-top: 0.4rem; font-size: 0.9375rem; }
.entry .ube-entry-media img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; float: none; }
.entry .ube-entry-media a > img { margin: 0; }
.entry .ube-entry-text { min-width: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--silver-1); }
.entry .ube-entry-text p { margin: 0 0 0.45rem; }
.entry .ube-entry-text .ube-center, .entry .ube-entry-text .ube-caption { text-align: left; font-style: normal; }
.entry .ube-entry img, .entry .ube-gallery img, .entry .ube-entry img.ube-float-left, .entry .ube-entry img.ube-float-right, .entry .ube-gallery img.ube-float-left, .entry .ube-gallery img.ube-float-right { float: none; margin: 0; }
.entry .ube-gallery img { margin-bottom: 0.5rem; }
.entry .ube-gallery .ube-center, .entry .ube-gallery .ube-caption { text-align: left; }
.entry .ube-entry-text a { color: var(--ink); }
.entry .ube-entry-text > a:first-child, .entry .ube-entry-text > :first-child > a:first-child, .entry .ube-entry-text > :first-child > :first-child > a:first-child {
	font-size: 1.3125rem; line-height: 1.25; text-decoration: none; letter-spacing: -0.005em; font-weight: 500; }
.entry a b, .entry a strong, .entry b a, .entry strong a { font-weight: 500; }
.entry .ube-entry-text a:hover { text-decoration: underline; text-decoration-color: var(--ink); }
.entry ul, .entry ol { padding-left: 1.3em; margin: 0 0 1.3em; }
.entry li { margin-bottom: 0.35em; }
.entry blockquote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 2px solid var(--ink); font-style: italic; }
.entry hr { border: 0; border-top: 1px solid var(--silver-3); margin: 2.5rem 0; }
.entry img { display: block; margin: 1.75rem auto 0.75rem; }
.entry a > img { margin-bottom: 0.75rem; }
.entry img.ube-float-left { float: left; margin: 0.35rem 1.5rem 1rem 0; }
.entry img.ube-float-right { float: right; margin: 0.35rem 0 1rem 1.5rem; }
.entry img.ube-wide { width: min(100vw - 32px, 58rem, var(--w, 58rem)); max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
.entry .ube-cell { min-width: 0; }
.entry .ube-center { text-align: center; }
.entry .ube-caption { text-align: center; font-size: 0.9375rem; font-style: italic; color: var(--silver-1); line-height: 1.5; }
.entry .ube-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.25rem; align-items: start; margin: 2rem 0; }
.entry .ube-gallery img { margin: 0 0 0.4rem; }
.entry .ube-gallery p { margin: 0; font-size: 0.9375rem; line-height: 1.35; text-align: left; }
.entry .ube-maplinks { list-style: none; margin: 0.75rem 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; font-size: 0.9375rem; }
.entry .ube-maplinks a { text-decoration-color: var(--silver-3); }
.entry .ube-subnav { display: inline-block; margin: 0 1.25rem 0.5rem 0; font-style: italic; }
.entry pre, .entry code { font-size: 0.9em; }
.entry pre { overflow-x: auto; }

/* Data tables: formulae, film times */
.ube-table-wrap { overflow-x: auto; margin: 2rem 0; clear: both; }
.ube-table { border-collapse: collapse; min-width: 60%; font-size: 1rem; line-height: 1.4; font-variant-numeric: lining-nums tabular-nums; }
.ube-table td, .ube-table th { padding: 0.5rem 1.25rem 0.5rem 0; border-bottom: 1px solid var(--silver-3); text-align: left; vertical-align: top; }
.ube-table tr:first-child td { border-top: 1px solid var(--ink); }
.ube-table tr:last-child td { border-bottom-color: var(--ink); }
.ube-table td.n { text-align: right; white-space: nowrap; }
.ube-table td:last-child { padding-right: 0; }
.ube-table img { margin: 0; }
.ube-table p { margin: 0 0 0.4em; }

.pager { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--silver-3); font-style: italic; }
.pager a { border-bottom: 1px solid var(--ink); }
.pager .next { margin-left: auto; }
.pager .up { color: var(--silver-1); border-bottom-color: var(--silver-3); }
.results { padding-left: 1.2em; }

/* Section indexes ---------------------------------------------------------
   The front page's language: a white mat per group, the group heading hung
   in the left margin, cards on a grid, link lists like a table of contents. */
.ix-head { padding-block: 1.5rem 1rem; }
.ix-intro { width: min(100%, var(--measure)); margin: 1.75rem auto 0; text-align: left; color: var(--silver-1); }
.ix-intro p { margin: 0 0 0.9em; }
.ix-sec { padding-block: 3.5rem; border-top: 1px solid var(--silver-3); }
.ix-sec:first-of-type { border-top: 0; }
.ix-sec .hang p { font-variant-numeric: lining-nums tabular-nums; }
.ix-untitled .mat-body { grid-column: 1 / 13; }
.ix-untitled .ix-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.ix-prose { max-width: var(--measure); margin-bottom: 2.5rem; font-size: 1.0625rem; }
.ix-prose p { margin: 0 0 0.9em; }
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 3rem 2rem; }
.ix-card { min-width: 0; }
.ix-plate { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--plate); padding: 0.75rem; }
.ix-plate img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); transition: filter 0.35s ease; }
.ix-card:hover .ix-plate img, .ix-card:focus-within .ix-plate img { filter: none; }
.ix-card h3 { margin: 0.9rem 0 0.2rem; font-weight: 400; font-variation-settings: "opsz" 36; font-size: 1.25rem; line-height: 1.22; letter-spacing: -0.005em; text-wrap: balance; }
.ix-card h3 a:hover, .ix-subs a:hover, .ix-links a:hover { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: 1px; }
.ix-card .by { margin: 0 0 0.35rem; font-style: italic; color: var(--silver-1); font-size: 0.9375rem; }
.ix-card .note { margin: 0.2rem 0 0; color: var(--silver-1); font-size: 0.9375rem; line-height: 1.45; }
.ix-subs { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.9375rem; line-height: 1.4; }
.ix-subs li { padding-block: 0.15rem; }
/* A card with a long list of its own pages spans the row: picture left, list beside it. */
.ix-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); column-gap: 2.5rem; align-items: start; }
.ix-card-wide .ix-plate { grid-row: 1 / span 5; }
.ix-card-wide h3 { margin-top: 0; font-size: 1.5rem; }
.ix-card-wide .ix-subs { columns: 2; column-gap: 2.5rem; font-size: 1rem; }
.ix-card-wide .ix-subs li { break-inside: avoid; }
.ix-subs li::before { content: ""; display: inline-block; width: 0.7rem; height: 1px; background: var(--silver-2); vertical-align: middle; margin-right: 0.5rem; }
.ix-links { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.ix-grid + .ix-links { margin-top: 3rem; }
.ix-links:first-child { margin-top: 0; }
.ix-links-cols { columns: 2; column-gap: 3rem; }
.ix-links li { break-inside: avoid; margin: 0 0 0.55rem; font-size: 1.125rem; line-height: 1.35; }
.ix-links .au, .ix-subs .au { font-style: italic; color: var(--silver-2); font-size: 0.9375rem; }
.ix-links .au::before, .ix-subs .au::before { content: ", "; }
.ix-plates { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; margin-bottom: 2.5rem; }
.ix-plate-ad img { display: block; max-height: 7rem; width: auto; }
.ix-hang-links li { font-size: 1.25rem; font-style: italic; font-weight: 300; }
/* Page-level advertisement and links above the first group. */
.ix-untitled:has(.ix-plates):not(:has(.ix-grid)) { padding-block: 0 2.5rem; border-top: 0; }
.ix-untitled:has(.ix-plates):not(:has(.ix-grid)) .mat-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem; }
.ix-untitled:has(.ix-plates):not(:has(.ix-grid)) .ix-plates, .ix-untitled:has(.ix-plates):not(:has(.ix-grid)) .ix-links { margin: 0; }
.ix-untitled:has(.ix-plates):not(:has(.ix-grid)) + .ix-sec { border-top: 1px solid var(--silver-3); }

/* Photograph pages: the print in a black band, in full colour ------------- */
.photo-head { padding-block: 1.5rem 2.25rem; }
.lightbox { padding-block: clamp(1.5rem, 4vw, 3.5rem); }
.lightbox figure { margin-block: 0; display: flex; justify-content: center; }
.lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(78vh, 56rem); }
.lightbox a { display: block; }
.photo-cap { width: min(100%, 46ch); margin: 1.75rem auto 0; text-align: center; font-size: 1rem; line-height: 1.55; color: var(--silver-1); }
.photo-cap p { margin: 0 0 0.6em; }
.photo-cap .ube-caption, .photo-cap .ube-center { font-style: normal; }
.photo-cap h2, .photo-cap h3 { font-size: 1.125rem; font-style: italic; font-weight: 400; margin: 0 0 0.5rem; }
.pager-wrap { padding-block: 0 2rem; }
.photo-page .pager { margin-top: 2.5rem; }

/* Figures, contact sheets and margin figures inside articles -------------- */
.entry figure.ube-fig { margin: 2rem 0; }
.entry .ube-fig img { margin: 0; }
.entry .ube-fig figcaption { margin-top: 0.6rem; font-size: 0.9375rem; line-height: 1.45; color: var(--silver-1); }
.entry .ube-fig figcaption p { margin: 0 0 0.3rem; }
.entry .ube-fig figcaption .ube-center, .entry .ube-fig figcaption .ube-caption { text-align: left; font-style: normal; }
.entry .ube-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 2rem 1.5rem; margin: 2.5rem 0; clear: both; }
/* A contact sheet uses the page width, not just the reading column. */
.article .entry .ube-sheet { width: min(100vw - 32px, 62rem); position: relative; left: 50%; transform: translateX(-50%); }
.entry .ube-sheet figure.ube-fig { margin: 0; min-width: 0; }
.entry .ube-sheet .ube-fig > a, .entry .ube-sheet .ube-fig > img { display: flex; align-items: flex-end; justify-content: center; height: 9.5rem; }
.entry .ube-sheet .ube-fig img { max-height: 9.5rem; max-width: 100%; width: auto; height: auto; }
.entry .ube-sheet .ube-fig > img { display: block; margin: 0 auto; max-width: 100%; width: auto; height: auto; align-self: flex-end; }
.entry .ube-sheet figcaption { font-size: 0.875rem; }
/* A few labeled pictures in a row (print choices), kept with the column. */
.article .entry .ube-sheet.ube-choices {
	width: min(100vw - 32px, 46rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.75rem 1.5rem;
	margin: 0.25rem 0 2.5rem;
}
.entry .ube-choices .ube-fig > a,
.entry .ube-choices .ube-fig > img { height: auto; align-items: flex-end; }
.entry .ube-choices .ube-fig img { max-height: none; max-width: 100%; width: auto; height: auto; margin-inline: auto; }
.entry .ube-choices figcaption,
.entry .ube-choices figcaption .ube-caption,
.entry .ube-choices figcaption .ube-center { text-align: center; }
.entry figure.ube-margin { float: right; clear: right; width: min(42%, 15rem); margin: 0.4rem 0 1.25rem 1.75rem; }
.entry figure.ube-margin img { width: auto; max-width: 100%; }
@media (min-width: 82rem) {
	/* Wide screens: hang lone figures in the right margin beside the text. */
	.entry figure.ube-margin { width: 14rem; margin: 0.35rem -16.5rem 1.5rem 2rem; }
}

/* A letter (Ed's announcement): title and photograph in a black band like
   the front page's feature, then the letter as a reading column. ---------- */
.letter { overflow-x: clip; }
.letter-hero {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(2.5rem, 5vw, 5rem); align-items: center; padding-block: 4.5rem;
}
.letter-hero.no-art { grid-template-columns: 1fr; text-align: center; }
.letter-kicker {
	margin: 0 0 1.4rem; font-style: italic; font-size: 1.125rem; color: var(--band-dim);
	display: flex; align-items: center; gap: 0.9rem;
}
.letter-kicker::before { content: ""; width: 2.25rem; border-top: 1px solid var(--band-dim); }
.letter-head h1 {
	margin: 0; font-weight: 300; font-variation-settings: "opsz" 72;
	font-size: clamp(2.2rem, 3.7vw, 3.25rem); line-height: 1.08; overflow-wrap: break-word; letter-spacing: -0.015em; text-wrap: balance;
}
.letter-art { margin: 0; }
.letter-art img { display: block; width: 100%; height: auto; }
@media (min-width: 80rem) {
	.letter-art { margin-right: -4.5rem; }
}
.letter-body { padding-block: 4.5rem 3.5rem; }
.letter .entry p { margin-bottom: 1.45em; }
.letter .entry > p:first-child { font-size: 1.3125rem; line-height: 1.6; }
.letter .entry > p:last-child { margin-bottom: 0; font-style: italic; }
.letter + .foot { margin-top: 0; }
@media (max-width: 52rem) {
	.letter-hero { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.75rem 2.25rem; }
	.letter-body { padding-block: 3rem 2.5rem; }
	.letter .entry > p:first-child { font-size: 1.1875rem; }
}

/* Footer ---------------------------------------------------------------- */
.foot { padding-block: 3.5rem 3rem; text-align: center; color: var(--silver-1); font-size: 1rem; border-top: 1px solid var(--silver-3); margin-top: 1rem; }
.foot-eye { width: 46px; height: auto; display: block; margin: 0 auto 1.25rem; color: var(--ink); }
.foot p { margin: 0 0 0.85rem; }
.foot-nav { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem 1.75rem; }
.foot-nav a { border-bottom: 1px solid var(--silver-3); }
.foot-nav a:hover { border-bottom-color: var(--ink); color: var(--ink); }
.foot .addr { user-select: all; color: var(--ink); }
.foot .small { font-size: 0.875rem; color: var(--silver-2); }
.front + .foot { margin-top: 0; }

@media (max-width: 60rem) {
	.hang { grid-column: 1 / 13; margin-bottom: 2rem; }
	.mat-body { grid-column: 1 / 13; }
}
@media (max-width: 52rem) {
	.feature { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.75rem; }
	.front .feature, .front .feature-mirror { grid-template-columns: 1fr; gap: 2rem; padding-block: 2.75rem; }
	.formulae { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (max-width: 44rem) {
	.ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
	.ix-card h3 { font-size: 1.0625rem; }
	.ix-links-cols { columns: 1; }
	.ix-card-wide { grid-template-columns: 1fr; }
	.ix-card-wide .ix-plate { grid-row: auto; margin-bottom: 0.9rem; }
	.ix-card-wide .ix-subs { columns: 1; }
	.ix-sec { padding-block: 2.5rem; }
	.entry .ube-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
	.article .entry .ube-sheet.ube-choices { width: 100%; left: auto; transform: none; grid-template-columns: 1fr; gap: 2rem; }
	.entry .ube-choices .ube-fig img { max-height: 16rem; }
	.entry figure.ube-margin { float: none; width: auto; margin: 1.75rem 0; }
	.mat { padding-block: 3.5rem; }
	.row { grid-template-columns: 1fr; gap: 2.75rem; }
	.families { grid-template-columns: 1fr; gap: 2.75rem; }
	.book { grid-template-columns: 4.5rem 1fr; gap: 1.25rem; }
	.book img { width: 4.5rem; }
}
@media (max-width: 36rem) {
	body { font-size: 1.125rem; }
	.mast { padding-block: 2.25rem 2rem; gap: 1.25rem; }
	.nav { gap: 0.25rem 1.25rem; font-size: 1rem; }
	.entry img.ube-float-left, .entry img.ube-float-right { float: none; margin: 1.5rem auto 0.75rem; }
	.entry .ube-entry { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.1rem; padding-block: 1.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
	.nav a, .foot-nav a { transition: border-color .2s ease, color .2s ease; }
}
@media print {
	.mast nav, .foot nav, .pager, .skip { display: none; }
	.band { background: none; color: #000; }
}