/* moore archives — recreated from the 2004 Flash source.
Geometry, type and timings are lifted verbatim from shell.swf and
kodachromes.swf; see tools/ for the extractors that produced them. */
/* ---------------------------------------------------------------- fonts
Subsets rebuilt from the DefineFont2 glyph outlines embedded in the SWFs.
Metrics are uniform (upm 1024, ascent 760, descent 240, no line gap) so the
baseline offset used by .t below is exact. They also carry the kerning
reconstructed from the SWF's own DefineText advances.
The display Caslon in the original is set in italic; the caption body is
roman. Only the faces the SWFs actually embedded exist here. */
@font-face { font-family: "Caslon 224 Black"; src: url("../fonts/caslon224-black-italic.woff2") format("woff2"); font-style: italic; font-display: block; }
@font-face { font-family: "Caslon 224 Medium"; src: url("../fonts/caslon224-medium.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Caslon 224 Medium"; src: url("../fonts/caslon224-medium-italic.woff2") format("woff2"); font-style: italic; font-display: block; }
@font-face { font-family: "Caslon 224 Book"; src: url("../fonts/caslon224-book.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Caslon 224 Book"; src: url("../fonts/caslon224-book-italic.woff2") format("woff2"); font-style: italic; font-display: block; }
@font-face { font-family: "Akzidenz BE"; src: url("../fonts/akzidenz-be.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Akzidenz BE Cn"; src: url("../fonts/akzidenz-be-cn.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Helvetica Neue 45"; src: url("../fonts/helvetica-neue-45.woff2") format("woff2"); font-display: block; }
/* **The one face that did not come out of a SWF**, and the only one with a
character set rather than a subset: 327 glyphs of Latin against the 81 of
the face it replaces. It sets the archive's *prose* and nothing else — see
`--prose` below. SIL OFL 1.1; source and licence in `tools/fonts-src/`,
built by `fonts.libre`. The italic is declared and is not downloaded until
something on the page is italic, which today nothing is. */
@font-face { font-family: "Libre Caslon"; src: url("../fonts/librecaslontext.woff2") format("woff2"); font-weight: 400 700; font-display: block; }
@font-face { font-family: "Libre Caslon"; src: url("../fonts/librecaslontext-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: block; }
:root {
--stage-w: 800;
/* Back to the 2004 stage. It was taken to the 2005 build's 622 so those
sections would fit at their own coordinates; they fit at 550 too, once
each sheet is centred in the band rather than placed at its original y,
and 622 left every page with room going spare at the top. `--drop` and
`--grid-drop` fall to zero on their own from this. */
--stage-h: 550;
--paper: #cccccc; /* SetBackgroundColor from both SWFs */
--ink: #000;
--rule: #333; /* the 1px nav divider strokes */
/* line-height:1 puts the baseline at half-leading + ascent from the top:
(1 - 1000/1024)/2 + 760/1024 = 0.753906em */
--baseline-offset: 0.753906em;
/* Frame counts from the SWF timelines, at its 20 fps — but taken down by
about a third. The 2004 timings were authored for a file that had to
stream over a modem, where a slow dissolve covered the wait; with the
enlargements primed on hover there is nothing left to cover, and the
original 700ms sheet return in particular reads as lag rather than as
grace. The proportions between them are kept.
thumbs in 14 frames 700 -> 420
thumbs out 13 frames 650 -> 200 (see below)
enlarge 9 frames 450 -> 300
caption 200 -> 150 */
--t-thumbs-in: 420ms;
/* The SWF took 13 frames to clear the sheet while the enlargement arrived
in 9, so thumbnails were still dissolving behind a photograph that had
already landed — it reads as lag. Clear first, and quickly. */
--t-thumbs-out: 240ms;
--t-enlarge: 420ms;
--t-dim: 350ms;
/* ⚠ **Coming back is faster than going down — 2026-08-27.** Dimming happens
while the reader is moving and is not waited on; *un*-dimming happens
after they have stopped, and is. The owner asked to halve the time a sheet
takes to reach full strength once the pointer rests between frames: that
is `gallery.roll`'s `restMs`, and this fade.
⚠ **Both were halved and only the wait should have been.** At 175ms the
sheet came back with a snap; the owner, having felt it: *"I like that
later one to be the way it was, 350."* So the *wait* stays halved at 500ms
and the *fade* is 350ms again — what was slow was the stillness before
anything happened, not the coming back.
**The variable stays even though it now equals `--t-dim`**, because the
two directions turned out to be separable and worth being able to tune
apart. Only the return uses it; the dimmed rules keep `--t-dim`. */
--t-undim: 350ms;
--t-caption: 300ms; /* the annotation rides in with the photograph */
/* Flash tweened linearly, and a linear opacity ramp is what made this read
as blocky: it starts and stops at full speed, so there is no sense of
anything having been set in motion. These are the two curves the whole
enlargement uses.
`glide` is a decelerating curve — quick off the mark, long settle — which
is what lets the sheet clear early while the photograph is still easing
in, keeping the ordering the note above is about. `ease-out-soft` is
gentler still, for the thing that leaves.
Duration matters as much as shape: 300ms of movement is about 18 frames,
and the eye reads the end of a short ramp as a stop rather than a
settle. 420 buys enough frames to feel continuous without dragging. */
--ease-glide: cubic-bezier(.16, .68, .3, 1);
--ease-soft: cubic-bezier(.4, 0, .5, 1);
/* how far the enlargement travels as it arrives. Small on purpose — this is
a photograph coming to rest, not a card being dealt. */
--enlarge-rise: 10px;
--t-flip: 560ms; /* turning a print over to read its back */
/* ...and stepping along a long card, which slides rather than turns. Slower
than a cross-fade would be because the eye is following something across
the box rather than watching it appear in place. */
--t-step: 420ms;
/* ---- the slideshow. Four motions and four speeds, which is the whole of
its pacing; `stage.js` reads all four off here rather than holding its own
copies, for the reason the stage size is read rather than declared.
They are not variations on one number. `--t-lead` carries the archive to
the photographs and back and is by far the slowest — it is a change of
mode, not of picture. `--t-dissolve` is between one photograph and the
next. `--t-veil` is the wash of paper going over or off, half the lead,
because at the lead's own speed the arrival read as slower than it is.
The splash's small cover photograph has **one duration for each leg**,
because the two legs do different work and are not bounded by the same
thing. `--t-cover-out` has a ceiling: the cover has to be out of the way
before the first photograph is halfway up — at the lead's 1500 that is
750ms — or there are two photographs on a page that only ever had one.
`--t-cover-in` has no ceiling at all, since it plays after everything else
has finished and there is nothing left for it to compete with; it is a
judgement about how the page should settle, not a constraint.
Both were 400ms when they were one dial, chosen against a moving
photograph. They are slower now at the owner's ear. */
--t-lead: 1500ms;
--t-dissolve: 700ms;
--t-veil: 750ms;
--t-cover-out: 700ms;
--t-cover-in: 600ms;
/* ...and a third, which is a different act on the same element: the two
above take the whole cover *away* when the slideshow goes full screen,
while this is one cover dissolving into the next on the splash. Read by
`stage.js` as well as by CSS, so the script knows when the layers have
finished and it is safe to hand the photograph down to the base one. */
--t-cover-swap: 900ms;
/* how long a slide holds before the next begins, and how long the pointer
must rest on the mark before a preview starts. Read by stage.js; nothing
in CSS uses them, and they live here so the pacing is stated in one place. */
/* the preview's cadence and the default. The reader's three choices —
2, 5 and 10 seconds — live in stage.js beside the control that sets
them; this is the one a page starts at. */
--t-hold: 2000ms;
--t-carousel-hover: 120ms;
--dim-alpha: 0.2;
--nav-off: .38; /* a nav label that is not the one you want */
/* The stage grew from the 2004 550 to the 2005 622 so the sections rebuilt
from the 2005 build fit at their own coordinates. Everything that belongs
to the *bottom* of the page — the watermark, the nav, its dividing rules,
the sheet pager — is placed by an absolute y taken from the 2004 SWF, so
without this it would float 72px up from the edge it was designed to sit
on. It travels down with the stage instead. */
--drop: calc(var(--stage-h) - 550);
/* The sheets keep their 2004 coordinates too, so the taller stage opened all
of the new space *below* them: the grid sat where it always had while the
nav moved 72px away from it. Half the growth goes above and half below,
which lands these sheets within a few pixels of where the 2005 sections
put theirs — they run about 80 from the top and 90 from the nav.
Only the Kodachrome sheet needs it. The computed sheets took the space
into their own area instead (sections.AREA), so they fill it rather than
merely sitting lower in it; the 2005 sections are placed at coordinates
authored for this stage and were already where they belong. */
--grid-drop: calc(var(--drop) / 2);
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: "Caslon 224 Book", Georgia, "Times New Roman", serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; }
.skip {
position: absolute; left: -9999px; top: 0;
background: #fff; padding: .5rem 1rem; z-index: 100;
}
.skip:focus { left: 0; }
/* --------------------------------------------------------------- stage
The original is a fixed 800 x 550 composition. On wide viewports we keep it
exactly and scale the whole thing; below --break we hand the same DOM over
to a flow layout (see the media query at the end). */
.viewport {
display: flex;
justify-content: center;
padding: 24px 0;
}
.stage {
position: relative;
width: calc(var(--stage-w) * 1px);
height: calc(var(--stage-h) * 1px);
flex: none;
background: var(--paper) url("../img/paper.jpg") 0 0 / 100% 100% no-repeat;
transform: scale(var(--s, 1));
transform-origin: top center;
box-shadow: 0 2px 24px rgb(0 0 0 / .18);
}
/* Absolutely positioned text, placed by its typographic baseline.
--tr carries any per-field tracking the SWF applied on top of the font's
own advances; the fonts themselves carry the kerning. */
.t {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--bl) * 1px - var(--baseline-offset));
font-size: calc(var(--sz) * 1px);
line-height: 1;
white-space: nowrap;
letter-spacing: calc(var(--tr, 0) * 1px);
font-kerning: normal;
margin: 0;
}
.f-caslon-black { font-family: "Caslon 224 Black", Georgia, serif; }
.f-caslon-medium { font-family: "Caslon 224 Medium", Georgia, serif; }
.f-caslon-book { font-family: "Caslon 224 Book", Georgia, serif; }
.f-akzidenz { font-family: "Akzidenz BE", "Helvetica Neue", Arial, sans-serif; }
.f-akzidenz-cn { font-family: "Akzidenz BE Cn", "Helvetica Neue", Arial, sans-serif; }
.f-helvetica45 { font-family: "Helvetica Neue 45", "Helvetica Neue", Arial, sans-serif; }
.is-i { font-style: italic; }
/* --------------------------------------------------- the top nav
One square per section, along the top where the masthead leaves the stage
empty; the one for the page you are on is drawn larger. Its colour is the
section's own — the same the foot nav label wears, so the two marks agree.
Right-aligned in the generator rather than here, so the row grows leftward
as pages are added and can never reach the masthead. */
.topnav { margin: 0; padding: 0; }
.topnav-item {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--s) * 1px);
height: calc(var(--s) * 1px);
background: var(--on);
display: block;
opacity: var(--nav-off);
transition: opacity var(--t-dim) linear;
}
a.topnav-item:focus-visible { opacity: 1; }
a.topnav-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
/* the page you are on: larger, and at full strength */
.topnav-item.is-here { opacity: 1; }
/* The same sticky states the foot nav carries, driven by the same code —
mooreStage.linkNavs lights a square and its label together, so pointing at
either row brings both up and steps the rest back.
The dim rule outranks `.is-here` on purpose, two class-level selectors
against three: while you are pointing at one section, the one you are
actually in stands back with the others, exactly as the foot nav's own
comment describes. It returns to full strength the moment you let go.
Without scripting there is no sticky and no pairing, so plain hover stands
in for this row alone — the same states, released as the pointer leaves. */
.topnav[data-lit] .topnav-item { opacity: var(--nav-off); }
.topnav .topnav-item[data-lit] { opacity: 1; }
html:not(.js) a.topnav-item:hover { opacity: 1; }
/* ----------------------------------------------- the Log in control
Top right of the landing page, and only there. Since 2026-09-02 the public
splash makes its offer under the nav instead — `.invite`, below — and this
corner is the signed-in state's alone, saying who was let in; on a phone
the `.login-foot` copies still wear this class. A label in the archive's own
type with the browser's native password dialog behind it. The gate is at the
host, so following the link is the whole mechanism — see CONTRIB.md phase 1
and nginx/default.conf in streamrD/homepage.
**Placed by its right edge, alone on this stage.** Everything else here is
fixed 2004 wording whose width the generator knows, so it emits a left. This
slot has a second state whose text nginx substitutes per request — inside
the gated build it says whoever authenticated — and a left solved for one
username strands every other one. `--rx` is the distance in from the stage's
right edge; the browser measures the string it actually got.
Set in the splash key's own face and size, at the same `--nav-off` a nav
label wears when it is not the one you want. It is furniture for two people
out of every reader the site has, so being quiet is the requirement and
being findable is the constraint. */
.login {
position: absolute;
right: calc(var(--rx) * 1px);
top: calc(var(--bl) * 1px - var(--baseline-offset));
font-size: calc(var(--sz) * 1px);
line-height: 1;
white-space: nowrap;
font-kerning: normal;
color: var(--ink);
text-decoration: none;
opacity: var(--nav-off);
transition: opacity var(--t-dim) linear;
}
/* Only the offer lights up. The signed-in state is a span — basic auth has no
log out, so there is nothing there to press, and a hover that brightened it
would promise one. */
a.login:hover, a.login:focus-visible { opacity: 1; }
a.login:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* The target, not the ink: 11.6px of type in the corner of a stage that is
drawn through a transform. Four hit areas on this site have already been too
small. A pseudo-element rather than padding, because padding would move the
type and this label is positioned to the hundredth. */
a.login::after { content: ''; position: absolute; inset: -11px -13px -9px; }
/* ------------------------------------------ the invitation under the nav
The public splash's offer since 2026-09-02, at the owner's word: not a
label in the corner but a sentence saying what is behind the door —
`gen_site.INVITE_TEXT` — centred two nav rows below the nav's second row,
in the band the stage had empty there. The city line's own Caslon italic,
two sizes below it, so it reads as the same voice as *Detroit, Michigan*
and plainly defers to the ten collections above it. It went live as
spaced Akzidenz capitals first and the owner reversed that the same day —
*"I don't want it to dominate what is already there"* — so `--tr`, px of
tracking in the unit every `.t` run uses, is 0 now and the rule keeps it
in case the capitals come back.
Centred by the browser, not by a solved `--x`: the sentence is fixed but
the cut is not — italic where the grafts are in, roman where the licensed
original was not there to graft from — and `text-align` is right in both.
`padding-left` puts back whatever tracking the last letter carries on its
right, so the ink is centred and not the box.
Standing at .45 rather than `--nav-off`'s .38: chosen off the comp, and
it is an invitation rather than a nav label standing back. Brightens to
full on hover, the way the corner did. */
.invite {
position: absolute;
left: 0;
right: 0;
top: calc(var(--bl) * 1px - var(--baseline-offset));
font-size: calc(var(--sz) * 1px);
line-height: 1;
letter-spacing: calc(var(--tr, 0) * 1px);
padding-left: calc(var(--tr, 0) * 1px);
text-align: center;
white-space: nowrap;
font-kerning: normal;
color: var(--ink);
text-decoration: none;
opacity: .45;
transition: opacity var(--t-dim) linear;
}
a.invite:hover, a.invite:focus-visible { opacity: 1; }
a.invite:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* A full-width box would make the whole band the target, and a reader
pointing at the paper beside the words would light them. The hit area is
the ink's own, with the same margins the corner's has: an inline-block
the width of the sentence, and the pseudo drawn against it. */
.invite > span { position: relative; display: inline-block; }
a.invite > span::after { content: ''; position: absolute; inset: -11px -13px -9px; }
/* The line under the invitation — `gen_site.inspired_html`. The invitation's
family in roman, two sizes smaller, centred on the same axis a line below
it, at the invitation's opacity. Only the clause is the link, and only
the clause lights up; the hit area is the ink's own, as the invitation's
is. */
.inspired {
position: absolute;
left: 0;
right: 0;
top: calc(var(--bl) * 1px - var(--baseline-offset));
margin: 0;
font-size: calc(var(--sz) * 1px);
line-height: 1;
text-align: center;
white-space: nowrap;
font-kerning: normal;
color: var(--ink);
opacity: .45;
transition: opacity var(--t-dim) linear;
}
.inspired > span { position: relative; display: inline-block; }
.inspired a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
position: relative; }
.inspired a::after { content: ''; position: absolute; inset: -9px -10px -8px; }
.inspired a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.inspired:has(a:hover), .inspired:has(a:focus-visible) { opacity: 1; }
/* ⚠ **The foot copy of the unlock control does not exist above the
breakpoint.** Every page but the splash carries one so that a phone can
offer it at the bottom of a sheet — see `gen_site.login_html(foot=True)` —
and up here it would draw at the *splash's* corner coordinates, over
whatever that page keeps in its own corner, on nineteen pages. Turned back
on inside the 859px block and nowhere else.
⚠ **0-2-0 through `.stage`, and 0-1-0 was not enough.** The element carries
both `login` and `login-foot`, and the mobile block sets `.login { display:
block }` at the same 0-1-0 *later in the file* — so a bare `.login-foot`
hide lost on source order, the control drew anyway, and the rule that was
supposed to bring it back was dead. Found by mutating that rule and watching
the check stay green: a rule you can delete without consequence is not the
rule doing the work. Both halves are 0-2-0 now, so each one can be broken
and seen to break. */
.stage .login-foot { display: none; }
/* Screen-reader names. The squares carry no text, and a colour is not a label. */
.vh {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; clip-path: inset(50%); overflow: hidden;
white-space: nowrap;
}
/* It slides in on the first page of a visit and never again — see stage.js.
A nav that re-animates on every page is furniture calling attention to
itself; once is an introduction. */
@keyframes topnav-in {
from { opacity: 0; transform: translateY(-9px); }
}
html[data-nav-intro] .topnav-item {
animation: topnav-in 520ms var(--ease-glide) backwards;
}
/* a short stagger left to right, so the row arrives rather than appears */
html[data-nav-intro] .topnav-item:nth-child(1) { animation-delay: 0ms; }
html[data-nav-intro] .topnav-item:nth-child(2) { animation-delay: 45ms; }
html[data-nav-intro] .topnav-item:nth-child(3) { animation-delay: 90ms; }
html[data-nav-intro] .topnav-item:nth-child(4) { animation-delay: 135ms; }
html[data-nav-intro] .topnav-item:nth-child(5) { animation-delay: 180ms; }
html[data-nav-intro] .topnav-item:nth-child(6) { animation-delay: 225ms; }
html[data-nav-intro] .topnav-item:nth-child(7) { animation-delay: 270ms; }
html[data-nav-intro] .topnav-item:nth-child(8) { animation-delay: 315ms; }
html[data-nav-intro] .topnav-item:nth-child(9) { animation-delay: 360ms; }
html[data-nav-intro] .topnav-item:nth-child(10) { animation-delay: 405ms; }
@media (prefers-reduced-motion: reduce) {
html[data-nav-intro] .topnav-item { animation: none; }
}
/* On the splash the dividers are these instead: a small square in the
section's own colour, before each label. It separates two labels as the rule
did, and it says what the squares along the top of every other page are. */
.nav-sq {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--s) * 1px);
height: calc(var(--s) * 1px);
background: var(--on);
/* Full strength, like the splash labels themselves — the splash has no
current section to pick out, so nothing there is faded. These are a key
and they stay one; they do not join the roll-over, because dimming a
legend while you read the thing it explains is backwards. */
opacity: 1;
}
/* the 1px vertical strokes that separate the nav labels */
.tick {
position: absolute;
left: calc(var(--x) * 1px);
top: calc((var(--y1) + var(--drop)) * 1px);
width: 1px;
height: calc((var(--y2) - var(--y1)) * 1px);
background: var(--rule);
}
/* --------------------------------------------------------------- home */
.home-title { margin: 0; font-weight: normal; }
.home-title .t { color: var(--ink); }
.home-cover {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
display: block;
}
/* The splash's cover, which cycles.
----------------------------------------------------------------------
`.home-cover` is the box and the positioning context; the two `.cover-shot`
layers fill it and the dots hang below it. The box is solved from the
photographs' own aspect in `gen_site.cover_box` — 231.8 x 166.3 against
2004's 207.8 x 166.3 — so **nothing here crops or stretches**: the picture
and its rectangle are the same shape, which is the whole point of the
choice that was made. `object-fit` is deliberately absent. If it ever needs
to appear, the box and the file have stopped agreeing and the fix is in the
build, not here. */
.cover-shot {
display: block;
width: 100%;
height: 100%;
}
/* The incoming photograph, above the outgoing one.
**Only the top layer fades**, and this is not the obvious way to write it.
Fading both at once is what the slideshow does, and it dips: at the midpoint
both are near half opacity and a quarter of the kraft shows through the
pair. See *Three things about the fades* in INTERACTIONS.md. Here the
outgoing layer simply sits still at full opacity and the new one covers it,
so the cross-dissolve has no hole in the middle of it. */
.cover-in {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity var(--t-cover-swap, 900ms) ease;
}
.home-cover[data-swapping] .cover-in { opacity: 1; }
/* The dots, below the photograph and outside its box.
Hidden until the reader is on the cover — `:hover` for a pointer,
`:focus-within` so a keyboard reader tabbing to a dot can see the row they
have arrived in. They are `pointer-events: none` while hidden so an
invisible control can never take a click.
Hovering a *dot* still counts as hovering `.home-cover`, even though the row
sits outside the box: `:hover` matches an ancestor of whatever is under the
pointer regardless of where the child is painted. That is what stops the row
vanishing as the reader reaches for it. */
.cover-dots {
position: absolute;
/* **The row's box touches the photograph, and that is the whole trick.**
It was `left: 50%` with a translate and a 7px `margin-top`, which left a
7px band of bare paper between the picture and the dots and a gutter
either side of a 208px row inside a 232px box. Every one of those is
outside `.home-cover`, so reaching down for a dot crossed ground that
belongs to nothing, `:hover` dropped, and the row faded out from under
the pointer — reported, exactly right, as "they are not usable as nav
elements".
Full width, no gap, and the 7px is `padding` inside the element instead
of `margin` outside it. The strip below the picture is now continuous
with it, so the pointer never leaves the cover on the way down. */
left: 0;
right: 0;
top: 100%;
padding-top: 7px;
display: flex;
justify-content: center;
/* **No gap, and that is the fix rather than the oversight.** Each dot is a
6px mark inside a 16px target, so the separation is already there as
padding; adding 6px of `gap` on top made the row 280px wide inside a
231.8px box — it hung 24px past the photograph on each side, which reads
as a row belonging to something else. Butted up, thirteen dots are 208px
and sit inside the picture, and the targets touch rather than leaving
dead 6px lanes between them, which is better for hitting one. */
gap: 0;
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
}
.home-cover:hover .cover-dots,
.home-cover:focus-within .cover-dots {
opacity: 1;
pointer-events: auto;
}
.cover-dot {
width: 6px;
height: 6px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ink);
opacity: .28;
cursor: pointer;
transition: opacity 160ms ease;
/* The mark is 6px and the target is 16 — a 6px circle is well under the
smallest thing a finger or a hurried cursor reliably hits, and four hit
areas on this site have already been too small. The padding does the
work and `background-clip` keeps it from painting. */
box-sizing: content-box;
padding: 5px;
background-clip: content-box;
}
.cover-dot:hover { opacity: .6; }
.cover-dot[aria-current="true"] { opacity: 1; }
/* **While a swap runs, the dots move on the photograph's clock.**
160ms is right for hover — a control should answer a pointer at once — and
wrong for the marker, which was snapping to the new dot while the picture
took 900ms to arrive. The mark is set as the dissolve *begins* now (see
`mark` in stage.js), so borrowing the same duration and the same easing here
makes the old dot dim and the new one come up in step with the photographs
themselves.
One value drives both, which is the point: matching two numbers by hand is
how they drift apart on the next change. */
.home-cover[data-swapping] .cover-dot {
transition-duration: var(--t-cover-swap, 900ms);
}
/* The cover, opened full screen.
----------------------------------------------------------------------
**A sibling of `.viewport`, never a child of `.stage`.** The stage is drawn
through a transform, which makes it the containing block for `position:
fixed` inside it — a layer saying `inset: 0` in there would cover the
scaled stage rather than the window. See `gen_site.cover_full_html`.
The ground is the archive's own kraft rather than the black a lightbox
usually reaches for. These photographs already carry their slide mounts, so
a black ground would put a second black frame around a black frame; the
paper is what the rest of the site lays a photograph on, and it keeps the
full-screen view inside the same material world as the page behind it. */
.cover-full {
/* **Absolute, inside the stage — never fixed over the window.** It was fixed
for one afternoon and painted kraft across the whole browser, which broke
the rule the whole design rests on: nothing outside the project's own
rectangle. The stage's transform is exactly what makes `absolute` right
here — the layer is in stage units, scales with everything else, and
`inset: 0` means the paper's own edges. */
position: absolute;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
/* **No padding: the covers are cut to the canvas's own 16:11 now**, so the
photograph fills the stage exactly, edge to edge, which is what the owner
re-exported them at 2800 x 1925 to do. A margin here would have made that
work pointless — the photograph would sit inside the paper rather than
being it. Restore a value only if the set stops matching the canvas. */
padding: 0;
background: var(--paper) url("../img/paper.jpg") 0 0 / 100% 100% no-repeat;
cursor: zoom-out;
opacity: 0;
transition: opacity var(--t-cover-swap, 900ms) ease;
}
/* **`display: flex` above beats `[hidden]`, and that is not a detail.** The
browser's own rule is `[hidden] { display: none }` at UA specificity, which
a class selector overrides — so the layer was laid over the entire page from
the moment it loaded: invisible at `opacity: 0`, and swallowing every click
and painting its `zoom-out` cursor across the whole splash. Reported as "a
magnifying glass with a minus sign when I hover anywhere, no fullscreen on
click", which is exactly what an invisible sheet on top of everything does.
`pointer-events` is the second half rather than a spare: `display` cannot
transition, so the layer has to be laid out for its fade in and out, and
during those 900ms it must not be catching clicks meant for the page under
it either. */
.cover-full[hidden] { display: none; }
.cover-full:not([data-open]) { pointer-events: none; }
.cover-full[data-open] { opacity: 1; pointer-events: auto; }
.cover-full img {
max-width: 100%;
max-height: 100%;
/* The photograph, whole. `contain` is the whole point of the view: the
landing page shows these at 232 units and this is the one place they are
seen at their own size, so nothing here may crop. */
object-fit: contain;
cursor: zoom-out;
}
/* The cover invites the click that opens it. Only where there is something to
open — the no-JavaScript fallback is a plain `` with
no layers, and offering a pointer for a click that does nothing is worse
than offering none. */
.home-cover .cover-shot { cursor: zoom-in; }
/* A hairline round the black-and-white covers.
----------------------------------------------------------------------
The colour slides carry their own black mount; the prints have no edge of
their own and dissolve into the kraft without one. Which covers get it is
`build.COVER_EDGES`, keyed by source filename.
**`outline` rather than `border`, and the reason is layout.** A border is
part of the box, so a 1px one would make the photograph 2px narrower than
the rectangle solved for it and the cover would no longer meet its own
edges. An outline is painted outside the flow and changes nothing; the
negative offset draws it just inside the picture, on top of it, so the line
is on the photograph rather than around it.
**And it is drawn here rather than baked into the file** because the same
cover is painted anywhere between 242 and 1400 css px — 5.8x. A line baked
into a 2800px export reads as 0.09px on the splash and 0.5px enlarged; to
look like 1px on the splash it has to be 11.6px in the file, which is 6px
thick once opened. There is no single baked width that is right in both
places, and one CSS pixel is one CSS pixel in all of them. */
.cover-edge {
outline: 1px solid rgba(38, 32, 24, .55);
outline-offset: -1px;
}
.cover-dot:focus-visible {
outline: 2px solid var(--section-ink, var(--ink));
outline-offset: 1px;
}
.home-who { margin: 0; }
.nav { margin: 0; padding: 0; }
.nav-item {
position: absolute;
left: calc(var(--x) * 1px);
top: calc((var(--bl) + var(--drop)) * 1px - var(--baseline-offset));
font-size: calc(var(--sz) * 1px);
line-height: 1;
white-space: nowrap;
letter-spacing: calc(var(--tr, 0) * 1px);
font-kerning: normal;
text-decoration: none;
color: var(--ink);
background: none;
border: 0;
padding: 0;
}
/* The whole site's interaction language is the SWF's: things fade, nothing
gets decorated. So the nav carries no underline — the section you are in is
simply the one at full strength, the rest sit back, and hovering brings one
forward on the same 350ms linear ramp the thumbnails use. */
.nav-item {
/* Faded well back, so the section you are in reads first. The active label
is coloured rather than merely full-strength (gen_site.SECTION_COLOUR),
and colour alone is a weak signal at 12px, so the gap either side of it
does the rest of the work. */
opacity: var(--nav-off);
transition: opacity var(--t-dim) linear, color var(--t-dim) linear;
}
/* A band of the same height below each label, which lights it too.
The labels are 12px of type in a single row: reaching one means aiming at
it, and the row is narrow enough that the aim is the whole difficulty. The
box grows downward instead — `--hit`, one nav-bar height, written per item
by gen_site.nav_hits — so the paper under a label belongs to it.
Nothing moves. The label is placed by its baseline from the top, so padding
added below extends the box without touching the type. And `sticky`
measures its release bound from these same rectangles, which means the band
counts as inside the nav rather than as having left it.
Per item rather than a flat rule because the splash sets its nav in two
rows 10.4 apart: a full 11.6 there would lay the first row's box over the
top of the second row's labels, and pointing at one would light the other.
nav_hits caps each row at the room beneath it.
Scoped to `.nav`, so the sheet pager — which is `.nav-item` too, but sits
in `
` above the photographs — keeps its own hit area. */
/* ...and the same band **above**, which is the half a reader reaches for
coming down the page rather than up from the foot. It needs the padding and
an equal negative margin together: the label is positioned absolutely from
its baseline, so padding alone would push the type down the page. The
margin takes the growth back out and the box extends upward around type
that has not moved — the trick the navigator's arrows use, for the same
reason.
`nav_hits` gives the two bands separately and caps the upper one by what
the row above has already taken downward, so the splash's two rows touch
without overlapping. */
.nav .nav-item {
padding-bottom: calc(var(--hit, 0) * 1px);
padding-top: calc(var(--hit-up, 0) * 1px);
margin-top: calc(var(--hit-up, 0) * -1px);
}
/* ...except the pager, which is not bottom furniture: its y is measured from
the foot of the deepest sheet, so it has already followed the content and
must not be dropped a second time. */
.sheet-item { top: calc(var(--bl) * 1px - var(--baseline-offset)); }
.sheet-tick { top: calc(var(--y1) * 1px); }
a.nav-item { cursor: pointer; }
a.nav-item:hover,
a.nav-item:focus-visible { opacity: 1; color: var(--on, var(--ink)); }
a.nav-item:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.nav-item[aria-current="page"] { opacity: 1; color: var(--on, var(--ink)); }
/* The splash has no current section, so nothing there is holding the eye and
there is no reason to hold the rest back: the whole list stands at full
strength until you reach for it. */
.nav-home .nav-item { opacity: 1; }
/* Both navs roll over *stickily*, like the contact sheets: the label under
the pointer keeps its weight and takes its section's colour, the rest drop
away — and rolling off does nothing. It stays lit until another label takes
over or the pointer leaves the row. The labels are far enough apart that
releasing on the way past made the whole row flare between every pair.
mooreStage.stickyNav drives the two data attributes.
These come after the aria-current rule on purpose: while you are pointing
at one label, the section you are actually in steps back with the others.
Without scripting there is no sticky to be had, so plain hover stands in —
the same states, released the moment the pointer leaves a label. */
.nav[data-lit] .nav-item { opacity: var(--nav-off); }
.nav .nav-item[data-lit],
.nav .nav-item:focus-visible { opacity: 1; color: var(--on, var(--ink)); }
html:not(.js) .nav:hover .nav-item { opacity: var(--nav-off); }
html:not(.js) .nav .nav-item:hover { opacity: 1; color: var(--on, var(--ink)); }
/* categories the 2004 original named but never published */
.nav-item[aria-disabled="true"] { opacity: .24; cursor: default; }
/* a section that runs to more than one contact sheet */
.sheets { margin: 0; }
/* The pager belongs to the contact sheet, so it goes when the sheet goes.
The rule between the two labels is a *child* of .sheets, not a sibling of
it — written with `~` it was never matched, and the divider stayed hanging
in the middle of the enlargement with nothing either side of it. */
#grid[data-state="out"] ~ .sheets .sheet-item,
#grid[data-state="out"] ~ .sheets .tick { opacity: 0; pointer-events: none; }
.sheets .sheet-item,
.sheets .tick { transition: opacity var(--t-dim) linear; }
/* the wordmark, reduced to nav size, linking home */
.masthead {
opacity: .62;
transition: opacity var(--t-dim) linear;
text-decoration: none;
color: var(--ink);
}
/* The link's own target. Everything inside the anchor is absolutely
positioned, so the anchor has no box and only the glyphs took the pointer —
which left the gap between the two lines dead, and every gap between words
with it. This is one solid rectangle over both lines, transparent, and
inside the anchor so pressing it follows the link.
It is not `.masthead` given a box: the runs position against the nearest
positioned ancestor, which is the stage, so making the anchor positioned
would re-base all of them. See `gen_site.masthead_html`. */
/* ⚠ **The masthead's third line does not exist above the breakpoint.**
`masthead_html` writes a run carrying the splash's subtitle so that a sheet
can wear the splash's three-line treatment on a phone. Every run in that
anchor is absolutely positioned against the stage, so without this it would
paint across the desktop masthead at line two's coordinates. It is turned
back on inside the 859px block and nowhere else. */
.masthead .mast-subline { display: none; }
/* ⚠ **The long form of a section's name does not exist above the breakpoint.**
`gen_site.MOBILE_TITLE` writes a second run — `world war two` beside `wwii` —
and on the stage the title is a watermark lying along the foot at 65px, where
the short name is what belongs. Both runs are absolutely positioned at the
same coordinates, so without this they would print on top of each other.
Scoped through `.gallery-title` so the rule that shows it below the
breakpoint can match specificity and win on order — the `.mast-subline`
lesson, applied before it could bite a second time. */
.gallery-title .title-long { display: none; }
.mast-hit {
position: absolute;
left: calc(var(--x) * 1px); top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px); height: calc(var(--h) * 1px);
}
.masthead:hover, .masthead:focus-visible { opacity: 1; }
.masthead:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* ------------------------------------------------------------ gallery */
.gallery-title { margin: 0; font-weight: normal; }
/* The watermark sits its baseline on the very bottom edge, which is where it
was before the stage grew — see --drop.
So its descenders hang past the paper, over the page behind it. That is
deliberate and the owner chose it: pulling the line up by its descender
depth to tuck the tails inside was tried and rejected. It means .stage must
not clip — see the note on overflow there. */
.gallery-title .t {
top: calc((var(--bl) + var(--drop)) * 1px - var(--baseline-offset));
}
.gallery-title .t { opacity: var(--title-alpha, .102); }
.grid { margin: 0; padding: 0; list-style: none; }
.thumb {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
padding: 0;
border: 0;
background: none;
cursor: pointer;
opacity: 1;
/* the *return* to full strength — see `--t-undim` */
transition: opacity var(--t-undim) linear;
}
/* `.shot` is the *painted picture*, not the cell it sits in.
It used to fill the cell and let `object-fit: contain` letterbox the
photograph inside it, which meant the element box and the picture were
different rectangles on every frame whose shape did not match its cell. That
is the trap the old turned-up corner fell into — it had to be inset by
however much letterbox each axis happened to carry, and could only be
checked by eye. Sizing the box to the picture instead means anything hung
off a corner is hung off the photograph's own corner, on any sheet. */
.shot {
position: relative; display: block;
aspect-ratio: var(--ar);
max-width: 100%; max-height: 100%;
margin: auto;
}
/* `contain`, not a stretch. The 2004 Kodachrome thumbs were 5:4 like their
cell, so a stretch was invisible; the re-scans are mounted to the slide's
own 1.42 and would be squashed by one. A frame narrower than its cell now
letterboxes and sits centred, which is also what lets a re-scanned frame
and a 2004 one share a sheet without either being distorted. */
.shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* A print with writing on the back used to be marked by a turned-up corner
drawn over its enlargement. It is gone, at the owner's request — the
wording on the control says the same thing without drawing on the
photograph, and the corner was the one mark here that imitated damage.
A thumbnail with more frames behind it is marked: a
single small corner rule set off its lower right — one card behind, showing at
the corner. Three cascading rules were tried and were too busy at 60-100px;
so was one drawn large. It wants to be noticed on the second look, not the
first, so the arms stay about 5px whatever the thumbnail. A verso is not marked
on the sheet at all — you find the writing by turning the print over, which
is what the control is for.
It hangs off `.shot`, which is the painted picture rather than the cell, so
it finds the photograph's own corner whatever shape the frame is. The white
halo is what lets one ink read on a dark photograph and on kraft paper
alike; without it the mark disappears into half the archive. */
/* `--mark-dx` / `--mark-dy` pull the mark back toward the ink, and exist for
one case: a **cutout**. `.shot` is the picture's own box, which for a
rectangular print is also where its ink stops — but a deckled print scanned
against nothing has an empty box corner, and the mark then floats. wwii 5's
nearest ink is 3.9 units in on each axis, so it hung about nine units from
the photograph instead of five. Per-frame, from `sections.MARK_NUDGE`, and
measured off the file's own alpha channel. */
.thumb[data-others] .shot::after {
content: "";
position: absolute;
right: calc((-5 + var(--mark-dx, 0)) * 1px);
bottom: calc((-5 + var(--mark-dy, 0)) * 1px);
width: 6px; height: 6px;
border-right: 1px solid var(--section-ink, var(--ink));
border-bottom: 1px solid var(--section-ink, var(--ink));
pointer-events: none;
opacity: .85;
transition: opacity var(--t-dim) linear;
}
.thumb[data-others]:hover .shot::after,
.thumb[data-others][data-hovered] .shot::after { opacity: 1; }
/* rolling over one thumbnail fades every other one down to 20%.
⚠ The dim keeps `--t-dim`: a transition is read from the state being moved
*to*, so this rule governs going down and `.thumb` governs coming back. */
.grid[data-hover] .thumb:not([data-hovered]) {
opacity: var(--dim-alpha);
transition: opacity var(--t-dim) linear;
}
.thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* ...but not when the script moved the focus itself, which is what returning
from an enlargement does. The stage is scaled up to 1.75, so this outline
lands as a heavy black box around one frame of a quiet sheet — the same
complaint the viewer's own ring drew, and the same answer. */
html[data-quiet] .thumb:focus-visible { outline: none; }
/* ------------------------------------------------- adaptive contact sheet
The Kodachromes grid is hand-placed at the coordinates the SWF used. The
seven sections that were never published hold between 13 and 64 frames in
both orientations, so their sheets compute a square cell that fits the same
area (see tools/sections.py) and let each frame sit inside it at its own
aspect ratio — which is what a real contact sheet looks like. */
.grid--auto {
position: absolute;
left: calc(var(--gx) * 1px);
top: calc(var(--gy) * 1px);
display: grid;
grid-template-columns: repeat(var(--cols), calc(var(--cell) * 1px));
/* fix the row height so a row of nothing but placeholders still lines up */
grid-auto-rows: calc(var(--cell) * 1px);
gap: calc(var(--gap) * 1px);
}
/* A sheet that ends short and is not waiting on more photographs centres its
last row rather than standing placeholders in it. The grid's columns are
fixed tracks, so `justify-content` on the container would move every row —
each item of the short row is offset instead. `left` and not `transform`,
because the thumbnails already animate on transform as an enlargement
opens, and because the roll-over measures their rects. */
/* One width for every frame on the sheet, with the height left to follow the
photograph — `thumb_width` on the sheet.
A square cell with `contain` already gives a 1.44 print and a square one the
same width, but the square one is half as tall again, and on the wedding
sheet those four squares took the page over. Fixing the width and letting
the depth vary is what a strip of contact prints looks like, and it holds
for a portrait too, which `contain` would otherwise pinch narrow. The cell
is unchanged, so the columns still line up. */
/* Each row hugs its own tallest photograph rather than standing a square cell
deep — see sections.row_depths. `align-items: center` matters as much as the
row sizing: a grid item stretches to its row by default, which is what made
the placeholders full-cell deep while the photographs beside them were half
that. */
.grid--auto.grid--uniform {
grid-auto-rows: min-content;
/* Centre every item in its own track, vertically and horizontally. A
placeholder *is* the grid item, so with a width of its own it sat at the
left of its cell while the photographs beside it were centred in theirs,
and the columns did not line up. */
align-items: center; justify-items: center;
}
.grid--auto.grid--uniform > li {
display: flex; align-items: center; justify-content: center;
}
.grid--auto.grid--uniform .thumb {
width: calc(var(--cell) * var(--thumb-w, 1) * 1px);
height: auto;
}
.grid--auto.grid--uniform .shot img { width: 100%; height: auto; }
/* an empty cell is a photograph that has not arrived, so it takes the same
width as one and the sheet's typical shape */
.grid--auto.grid--uniform .slot {
width: calc(var(--cell) * var(--thumb-w, 1) * 1px);
height: auto; max-height: none; aspect-ratio: var(--slot-ar, 1);
}
/* ------------------------------------------------------- a banded sheet
A sheet read in two or more column groups with air between them, each able
to carry a heading. Fotron sheet 3 is the first: three columns of Fotron
prints and two of photographs that were kept in the same album and are not
Fotron prints at all.
The gutter is a column of the grid held open (sections.build derives it from
`bands`), so the sheet still solves inside the contact-sheet area and the
columns stay square. The headings are the grid's own first row, which is why
`grid-template-rows` names it: row one takes the height of its line and
every row after it comes from `grid-auto-rows`, still one cell deep. */
.grid--banded { grid-template-rows: min-content; }
/* Not a placeholder. A placeholder says a photograph is coming; these cells
are the gutter and the spare at the end of a finished sheet. `visibility`
and not `display`, because the cell still has to hold its column open. */
.band-gap { visibility: hidden; }
/* ⚠ **The span needs the stronger selector, and `.band-head` alone was not
it — 2026-08-24.** A banded sheet is also an auto sheet, so it carries both
classes, and `.grid--auto > li` sets `grid-column: span var(--span-c, 1)` at
0-1-1 against this rule's 0-1-0. The heads therefore took **one column
each** and `--span: 3` was read and thrown away: `Fotron prints` sat over
column 0, the hidden gutter took column 1, and `Also in the album` landed on
column 2 — over the third column of the band it does not label, while its
own nine photographs sat away to the right. The owner reported it as the
heading having moved left and the photographs right, which is exactly what
two rules disagreeing about one property looks like from the page.
**The fallback is what made it silent.** `var(--span-c, 1)` has an answer
for an element that has never heard of `--span-c`, so nothing was invalid
and nothing warned; the head simply became a one-column cell. A default that
is *plausible* for the element it lands on is the hardest kind to see. */
.grid--banded > .band-head { grid-column: span var(--span); }
.band-head {
grid-column: span var(--span);
align-self: end;
/* **Painted down toward its photographs, not laid out lower.** A grid has
one row gap and no way to make the first one smaller, so the heading is
nudged with `position: relative` — which moves the ink and leaves the
track alone — and sections.build lifts the whole grid by the same amount.
The heading lands where it would have; the photographs come up to meet it.
`top` and not `transform`, for the reason the short row uses `left`. */
position: relative;
top: calc(var(--head-pull, 0) * 1px);
/* **Akzidenz BE roman, and the choice is not decorative.** The condensed cut
this site sets its nav in carries capitals only, so a heading with a
lower-case letter in it would be served from Arial and read as bad
spacing rather than as a missing glyph. This face covers both cases. */
font-family: "Akzidenz BE", "Helvetica Neue", Arial, sans-serif;
font-size: 8px;
line-height: 1;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ink);
opacity: .62;
padding-bottom: 3px;
border-bottom: 1px solid currentColor;
}
/* The photographs a band ends short on sit under the columns of their own
group rather than in the middle of the page — `centre_last`, scoped to the
band. Half a cell for every column the row is short, which is the sheet-wide
`--nudge` on `.row-centred` read against one band's column count instead of
the whole grid's. `left` and not `transform`: gallery.js measures these
rects to open an enlargement, and a transform would move what it reads. */
.band-centre { position: relative; left: calc(var(--band-nudge, 0) * 1px); }
/* the Kodachrome sheet places every thumbnail itself, so the drop goes on the
thumbnails rather than on the container */
.grid--placed .thumb,
.grid--placed .slot { top: calc((var(--y) + var(--grid-drop)) * 1px); }
/* **The span goes on the grid item, and the grid item is the `
`.** Setting
it on `.thumb` inside makes the picture wider and tells the grid nothing, so
the next photograph is placed in a track the wide one is already painting
over — which is exactly what the first cut of this did, and it looked like a
packing bug rather than a selector one. The `
` is what `gen_site` puts
`--span-c` / `--span-r` on; custom properties inherit, so the thumb inside
reads the same two numbers to size itself. */
.grid--auto > li {
grid-column: span var(--span-c, 1);
grid-row: span var(--span-r, 1);
}
.grid--auto > .row-centred { position: relative; left: calc(var(--nudge, 0) * 1px); }
/* when the short row leads, the frame after it starts a row of its own —
otherwise auto-placement fills the gap the short row left */
.grid--auto > .row-break { grid-column-start: 1; }
/* `--scale` is a per-cell size nudge, written by gen_site off the sheet's
`scale` and absent everywhere else, so the default of 1 is what every other
frame in the archive gets and nothing moves. The negative margin is what
makes it grow about its own centre rather than out of its top-left corner:
a grid track here is a fixed cell, so an item wider than one would otherwise
hang off the right and push nothing. Margin and not `transform` — the
thumbnails already animate on transform as an enlargement opens, and
gallery.js measures their rects to do it. */
/* `--dx` / `--dy` move a cell off the centre of its own slot, as a fraction of
the cell — the companion to `--scale`, which only resizes about that centre.
Written by gen_site off the sheet's `offset` and absent everywhere else.
It is spent on the margins rather than on a transform for exactly the reason
`--scale` is: gallery.js measures these rects to open an enlargement out of
them, and a transform would move the rect it measures. Each pair sums to the
same total it had — `+dx` on the left is `-dx` on the right — so the cell
moves inside its grid track and the track, and everything after it, does
not. */
/* `--span-c` / `--span-r` let one cell take two slots or four — `span` on the
sheet. **The grid does the work.** These are fixed tracks with a `gap`, so a
`span` is a thing CSS grid already understands and everything after it flows
around the wide cell on its own; `sections.pack` reimplements the placement
only so the *build* can solve how deep the sheet comes out.
The slot a spanning cell sits in is n tracks *plus the gaps between them* —
`2 * cell + gap`, not `2 * cell` — which is the arithmetic to get wrong
here. `--slot-w` / `--slot-h` name it once so the width and the two margins
cannot disagree about it. */
.grid--auto .thumb {
--slot-w: calc(var(--cell) * var(--span-c, 1)
+ var(--gap) * (var(--span-c, 1) - 1));
--slot-h: calc(var(--cell) * var(--span-r, 1)
+ var(--gap) * (var(--span-r, 1) - 1));
position: static;
width: calc(var(--slot-w) * var(--scale, 1) * 1px);
height: calc(var(--slot-h) * var(--scale, 1) * 1px);
/* `--dx` / `--dy` stay a fraction of the **cell**, not of the slot: a nudge
is a nudge whatever the cell is spanning, and keying it to the slot would
silently double it the day a photograph is widened. */
margin:
calc((1 - var(--scale, 1)) / 2 * var(--slot-h) * 1px
+ var(--dy, 0) * var(--cell) * 1px)
calc((1 - var(--scale, 1)) / 2 * var(--slot-w) * 1px
- var(--dx, 0) * var(--cell) * 1px)
calc((1 - var(--scale, 1)) / 2 * var(--slot-h) * 1px
- var(--dy, 0) * var(--cell) * 1px)
calc((1 - var(--scale, 1)) / 2 * var(--slot-w) * 1px
+ var(--dx, 0) * var(--cell) * 1px);
display: flex;
align-items: center;
justify-content: center;
}
.grid--auto .shot img { object-fit: contain; }
/* **The picture scales up to its cell, instead of stopping at the thumbnail's
own size.** `.shot` is the painted picture and takes its size from the
image, so as a `flex: 0 1 auto` item it could only ever *shrink*: a cell
drawn larger than the 150px derivative — anything spanning two slots, or
scaled much past 1.4x — held its picture at 150 and left paper around it.
On the page it read as the span not working.
Reported 2026-08-22 against barbara sheets 1 and 2, and the fault is as old
as `span` itself. What made it visible was the rest of the sheet growing
when the gutter was stated: the 1x1 cells are smaller than 150 and had
always filled correctly, so only the spanning and enlarged ones were left
behind, which is exactly the comparison that showed it up.
**Neither obvious fix works.** `max-width`/`max-height` clamp downward only.
`width: 100%` breaks the ratio whenever the height is the binding axis — and
the ratio is load-bearing here, because `.thumb[data-others] .shot::after`
hangs the stack marker off the *photograph's* corner rather than the cell's.
So the fit is computed rather than negotiated: the larger size that still
fits both axes, which is what `object-fit: contain` would work out, from the
slot the cell already states and the ratio it already carries. Measured
against Chrome cell by cell on both sheets — spans, scales and both binding
axes — before it was written here.
Not on `.grid--uniform`: that sheet gives every frame one width and has its
own rule above. */
.grid--auto:not(.grid--uniform) .shot {
/* **The width of the cell, and the height follows the photograph** — not a
`contain` fit inside it. That is what the layout editor actually draws,
and it is not what the editor's own stylesheet says: `.cell img` there is
`max-width: 100%; max-height: 100%`, and in its grid cell the max-height
silently does not bind. So the tool fits to width and lets a tall print
hang below its cell — the hero of sheet 1 is drawn 159x226 in a 159x159
cell, and `8.png` 75x156 in a 76 square, twice its own cell.
**A landscape print is identical either way**, which is exactly why only
*some* photographs looked wrong: 11 of sheet 1's 26 cells and 6 of sheet
2's 13 are portrait and were drawn about 38% smaller here than in the
tool the owner arranged them in. Reported three times before it was
measured in both instruments side by side rather than off screenshots.
The overflow is centred, as `align-items: center` on `.thumb` gives it and
`place-items: center` gives it there, so a print grows equally above and
below its cell and the arrangement reads the same in both. */
--fit-w: calc(var(--slot-w) * var(--scale, 1));
width: calc(var(--fit-w) * 1px);
height: calc(var(--fit-w) / (var(--ar, 1)) * 1px);
max-width: none;
max-height: none;
flex: none;
/* **The excess hangs below, and `margin: auto` is what does it.** A flex
item larger than its line has negative free space, where the spec resolves
an auto margin to zero and aligns the item to the start — so an over-tall
picture grows downward from its cell's top rather than out of both edges.
**That is the tool's behaviour too, and it is worth saying why**, because
the tool looks like it should centre: `.cell` there is `display: grid;
place-items: center`, but its implicit row is `auto`, so the row sizes to
the 226-tall picture and starts at the cell's top. Centring the item
inside a row that tall puts it back at the top of the cell. Measured in
both instruments: the hero's picture begins exactly at its own cell's top
in each.
This was briefly `margin: 0` and it lifted every portrait by half its
overflow — 14 to 34 units — into the row above, which is what overlapping
photographs on sheets 1 and 2 were. */
}
/* An empty cell on the Kodachrome sheet, waiting on a photograph. That grid
is hand-placed at the SWF's own coordinates rather than solved, so unlike
the section sheets' slots below this one is positioned, and gen_site gives
it the cards' shape and centres it in the cell. */
.grid:not(.grid--auto) .slot {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
opacity: 1;
transition: opacity var(--t-dim) linear;
}
/* An empty cell, waiting on a photograph. Square unless the sheet has a
standard shape of its own — Landscapes is all 5:4 slides — in which case a
placeholder takes the same rectangle as the photographs beside it. */
.grid--auto .slot {
width: calc(var(--cell) * 1px);
aspect-ratio: var(--slot-ar, 1);
height: auto;
max-height: calc(var(--cell) * 1px);
align-self: center;
opacity: 1;
transition: opacity var(--t-dim) linear;
}
.grid[data-hover] .slot {
opacity: var(--dim-alpha);
transition: opacity var(--t-dim) linear;
}
/* the grid fades out as a whole while an enlargement fades in */
/* `will-change` keeps the sheet and the enlargement on their own compositor
layers, so neither has to be rasterised on the first frame of the
transition — which is where a dropped frame shows most. Two layers only;
this is not a hint worth spreading around. */
.grid { opacity: 1; transition: opacity var(--t-thumbs-out) var(--ease-soft);
will-change: opacity; }
.grid[data-state="out"] { opacity: 0; pointer-events: none; }
.grid[data-state="in"] { transition-duration: var(--t-thumbs-in); }
/* On the way out the sheet is one fading layer and nothing more. Without
this, the 60-odd dimmed siblings each animate back to full opacity as the
container disappears — brightening while they vanish, and a pile of
concurrent transitions for something nobody can see. */
.grid[data-state="out"] .thumb,
.grid[data-state="out"] .slot { transition: none; }
/* ------------------------------------------------------------- the reel
One row of photographs longer than the page, seen through a window that
clips it at the paper's own edges. The 6 x 9 cm negatives sheet is the
only one; see `reel` in tools/sections.py for the layout and `reel()` in
gallery.js for the movement.
The window is exactly the row and no more. A transparent box any larger
would sit over paper the reader has to click through — the masthead, the
foot nav, this section's own album link — and this site positions nearly
everything absolutely, so "the thing you can see is not the thing you can
press" cuts both ways. */
/* Its own custom properties are named apart from the frames' `--x/--y/--w/--h`
on purpose: they inherit, and a `.thumb` gets its four inline but a `.slot`
would not — so a plain `--h` here would have been the row's height standing
in for a placeholder's. There are no placeholders on this sheet today, which
is exactly the kind of quiet the next curation would break. */
.reel {
position: absolute;
left: 0; top: calc(var(--reel-y) * 1px);
width: 100%; height: calc(var(--reel-h) * 1px);
/* Native scrolling is the *default*, not the fallback of last resort: with
no JavaScript, and on a touch screen where there is no pointer to sweep
with, this is the whole of the interaction and it works. The sweep in
gallery.js replaces it only where a fine pointer can drive it, by setting
`data-reel="sweep"` below. */
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
/* Swept rather than scrolled: the track is moved by transform, which paints
without laying out, and the window stops being a scroller so the two
mechanisms can never both be live at once. */
.reel[data-reel="sweep"] { overflow-x: hidden; }
.reel[data-reel="sweep"] .grid {
transform: translateX(calc(var(--sx, 0) * 1px));
/* the track moves on every pointermove, so it wants its own layer as much
as the fade does — `.grid` already asks for one, on opacity */
will-change: opacity, transform;
}
/* The row itself. Its width is real — the frames are laid out at their true
coordinates, not transformed into place — which is what lets the window
scroll natively when nothing is driving it. */
.reel .grid {
position: absolute; left: 0; top: 0;
width: calc(var(--reel-w, 100) * 1px); height: 100%;
}
/* A frame on this sheet stands out of the seven or eight on the paper, not
out of a sheet of twenty — so the sheet's own 0.2 all but erases its
neighbours here. This one fades to 0.45, where they stay legible as
photographs while the one you are on is plainly the one you are on. */
.reel .grid { --dim-alpha: .45; }
/* The enlargement glides up into place rather than simply appearing. The
transform is on the whole layer, so the photograph, its annotation and the
controls all arrive together as one composition — and it is a transform, so
the browser can run it on the compositor without repainting anything.
`.viewer-photo` below establishes the 3D context for the flip; this
translate sits above that and does not disturb it. */
.viewer {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transform: translate3d(0, var(--enlarge-rise), 0);
transition: opacity var(--t-enlarge) var(--ease-glide),
transform var(--t-enlarge) var(--ease-glide);
will-change: opacity, transform;
}
/* Open, but still transparent to the pointer: only what is drawn takes it.
The viewer is `inset: 0`, so it lies over the whole stage, and taking the
pointer everywhere meant it swallowed the top nav — which sits *before* it
in the markup and so paints beneath it. The foot nav comes after and was
unaffected, which is why only the top squares went dead while an
enlargement was open. Both navs are meant to work from here.
Fixing it here rather than with a z-index on the nav: the fault is a
transparent box capturing clicks it never draws in, and there is nothing to
capture — the viewer closes on the photograph, the hint or Escape, and has
no backdrop handler. Nothing falls through to the sheet either, since the
grid is already `pointer-events: none` while the viewer is open.
The children are re-enabled only under `[data-open]`. `pointer-events` is
inherited, so with the rule scoped this way a closed viewer's buttons stay
untouchable rather than becoming live targets over the contact sheet. */
.viewer[data-open] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ⚠ **The sideways axis belongs to the swipe, and the browser has to be told
before the finger moves.** The viewer is `overflow-y: auto`, so a touch on
it starts an argument the browser settles by watching the first few pixels
— and when it decides the gesture is a scroll it fires `pointercancel` and
the swipe handler never hears another word. That is the whole of *"it
sometimes works and sometimes doesn't"*: the answer depended on how
straight the swipe started.
`pan-y` keeps vertical scrolling native, which the caption needs on a long
card. **`pinch-zoom` is kept deliberately** — this is an archive of
photographs and pinching one open is a reasonable thing to want; `pan-y`
alone would have taken it away as a side effect of fixing the swipe. */
.viewer { touch-action: pan-y pinch-zoom; }
.viewer[data-open] .viewer-photo,
.viewer[data-open] .viewer-caption,
.viewer[data-open] .viewer-hint,
.viewer[data-open] .viewer-turn,
.viewer[data-open] .viewer-flip,
.viewer[data-open] .viewer-nav { pointer-events: auto; }
/* Stepping with the arrow keys keeps the enlargement open, so there is
nothing to travel — only the picture inside changes. Re-running the rise on
every step would jog the whole composition sideways of the reader. */
.viewer[data-step] { transition-duration: var(--t-caption); }
.viewer[data-step], .viewer[data-step][data-open] { transform: none; }
/* ⚠ **A viewer that has been closed holds no picture.** `close` sets
`data-blank` and `paintRecto` lifts it, so the moment between opening a
different photograph and its frame decoding shows paper rather than the
*previous* photograph fading in. `visibility` and not `display`, because the
box must keep its measured size — `.flip` carries the aspect ratio that
gives an enlargement its height on a phone, and collapsing it here would be
the `350 x 0` fault of 2026-08-26 in a new place. */
.viewer-photo[data-blank] .face-recto { visibility: hidden; }
.viewer-photo {
position: absolute;
left: calc(var(--x) * 1px);
top: calc(var(--y) * 1px);
width: calc(var(--w) * 1px);
height: calc(var(--h) * 1px);
display: block;
padding: 0;
border: 0;
background: none;
cursor: zoom-out;
}
.viewer-photo:focus-visible { outline: none; }
.viewer-photo:focus-visible .flip { outline: 2px solid var(--ink); outline-offset: 3px; }
/* ...but not when we moved the focus there ourselves */
html[data-quiet] .viewer-photo:focus-visible .flip { outline: none; }
/* ------------------------------------------------------------- the flip
Seventeen prints in the archive were scanned on both sides, because
somebody wrote on the back. They are one object, so the viewer turns them
over rather than listing the two scans separately. */
.flip {
position: relative;
display: block;
/* the card is the photograph's own shape, so the focus ring hugs the print
and the turn happens about the print's axis rather than the frame box's */
aspect-ratio: var(--ar, 5 / 4);
width: auto;
height: 100%;
max-width: 100%;
max-height: 100%;
transform-style: preserve-3d;
transition: transform var(--t-flip) cubic-bezier(.42, 0, .2, 1);
}
.viewer-photo {
perspective: 1600px;
display: flex;
align-items: center;
justify-content: center;
}
.viewer[data-face="verso"] .flip { transform: rotateY(180deg); }
/* ------------------------------------------------------ the strip
Past `gallery.NAV_MIN` a card stops turning and starts sliding. Turning is
right for a verso — one object, two sides, and rotating it is what you would
do holding the print — and fine for a stack of five. Twenty-seven is a
sequence, and rotating a card twenty-six times to walk along a line is a lot
of motion for a step; the axis of the rotation also keeps saying "this has
another side", which stops being true after the second frame.
The frames sit in a row and the row moves, one width per press. It is the
most literal answer to "you are somewhere in a run": the neighbour arrives
and the old frame leaves, and after a few presses there is a real sense of a
strip running past.
**Three cells, not one per frame.** The wedding card is twenty-seven, and a
track that long would hold twenty-seven full-size photographs in the
document to show one of them. The window carries the previous, the current
and the next; after each slide it is silently recentred and repainted, which
is invisible because it happens with the transition off. */
.viewer-strip { display: none; position: absolute; inset: 0; overflow: hidden; }
.viewer[data-mode="strip"] .flip { display: none; }
.viewer[data-mode="strip"] .viewer-strip { display: block; }
.strip-track {
position: absolute; inset: 0; display: flex;
transform: translateX(-100%); /* the middle cell is the one you see */
transition: transform var(--t-step) var(--ease-glide);
}
/* the recentring step: move without animating, then let the transition back */
.strip-track[data-still] { transition: none; }
.strip-cell {
flex: 0 0 100%; display: flex; align-items: center; justify-content: center;
}
/* Each frame sits centred in a cell the size of the whole box rather than in a
card its own shape, because a strip can only slide cleanly if the cells are
one width.
The 2px is not padding taste, it is a clip. The stage is drawn through a CSS
transform at a fractional scale, so the `overflow: hidden` boundary lands on
a fraction of a device pixel — and a frame wide enough to fill its cell
touches that boundary exactly, which let a 1px sliver of the *neighbouring*
photograph paint on the paper beside the one you are looking at. Keeping
every image a hair inside its cell means nothing is ever on the seam.
It costs at most 2px of a 450px box on the widest frames. */
.strip-cell img {
max-width: calc(100% - 2px); max-height: 100%; display: block;
}
.face {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* the two sides rarely share a shape */
backface-visibility: hidden;
}
.face-verso { transform: rotateY(180deg); }
.face-verso:not([src]), .face-verso[src=""] { display: none; }
.viewer-controls { position: static; margin: 0; }
/* Sections with no annotations: the frame is centred in the stage and sized
to fit either orientation, rather than sharing the width with a caption. */
.viewer--plain .viewer-caption { display: none; }
.viewer--plain .viewer-hint { left: 175px; top: 478px; }
.viewer--plain .viewer-turn,
.viewer--plain .viewer-nav { left: auto; right: 175px; top: 478px; }
/* ...and the series title with them. **The whole row moves on a section page**
— down 14 and in to 175 either side — and a title left on the Kodachrome
geometry sat one line above the controls it belongs to, which is exactly how
it looked: a caption floating under the photograph rather than a label on
the row. The gap it centres in moves too, so the numbers are derived from
the two controls' own edges here rather than repeated. */
.viewer--plain .viewer-series {
top: 478px;
left: 293px; /* the hint ends at 292.7 on this row */
right: 262px; /* 800 - 538, the navigator's own left edge here */
}
/* The SWF snapped the annotation on at the frame the photograph finished
fading in — a 450ms hold and then a pop, which reads as a stall. It now
comes up with the photograph instead. */
.viewer-caption {
position: absolute;
left: calc(var(--cx) * 1px);
top: calc(var(--cy) * 1px);
width: calc(var(--cw) * 1px);
font-size: 12px;
line-height: 13.7px;
opacity: 0;
/* a shade behind the photograph, so the picture leads and the words settle
onto it rather than the two arriving as one flat block */
transition: opacity var(--t-caption) var(--ease-glide) 90ms;
}
.viewer[data-open] .viewer-caption { opacity: 1; }
/* stepping between slides swaps the text in place, quicker still */
.viewer[data-step] .viewer-caption { transition-duration: 120ms; }
/* **16px, matching the album pages**, at the owner's word on 2026-08-15 —
"we want that header styling throughout the site". It was 12px against a
body of 11.4, so the headline was six tenths of a pixel larger than the
words under it and read as an emphasised first line rather than as a title.
`.page-text h2` was already 17 and `.entry h2` 15; this was the last one
still sitting on the body's own size.
**The one thing to watch here that the album pages could not show is
overflow.** This column has a top and a width and no height: it grows
downward, and below it lie the viewer's own controls at 464. A caption is
the family's writing and some of them are long — 87 characters of headline
on `early` sheet 2 frame 32, 700 characters of body on `wwii` 12 — so a
heading that takes one more line pushes everything under it down. Both were
rendered at 16px before this shipped; see the note in INTERACTIONS.md. */
.viewer-caption h2 {
margin: 0 0 6.5px;
font: italic normal 16px/17.5px "Caslon 224 Black", Georgia, serif;
}
/* ------------------------------------------------- the archive's own prose
**One rule, three places, and deliberately not the `body` default.** The
caption body, the about and bios copy and the album's text are the only
things on this site that a member of the family writes; everything else is
2004's own words, reproduced. So they are the only things set in a face
with a full character set, and the split is exactly the line drawn in
`CONTRIB.md`: *the reproduction is the chrome.*
The headline above this stays Caslon 224 Black Italic, and so do the splash,
the masthead, both navs and the section watermarks — which share the
`Caslon 224 Book` file with what this rule replaces, so nothing is dropped
from the build.
**95%, and the number was arrived at by looking.** Libre sets 25% denser
and 7% wider than Caslon 224 Book at the same pixel size — measured as ink
over the area the line occupies, not guessed from x-heights — which does
two things, both of them bad here. It closes the gap between the headline
and the body until the body looks like the louder of the two, which is how
this was first reported; and it added 17 lines across the archive's 111
caption bodies, in a column whose width is fixed by a 2004 stage. Taking
the body to 95% pulls back most of both. The **line height does not
change** — it stays the SWF's own 13.7 — so the effect is a little more
air between the lines as well as a smaller letter, which is what a denser
face wants. See `concepts/caption_face.py`. */
:root { --prose: "Libre Caslon", Georgia, "Times New Roman", serif;
--prose-size: 0.95em; }
.viewer-caption p, .page-text p, .album-text p {
font-family: var(--prose);
font-size: var(--prose-size);
}
.viewer-caption p { margin: 0 0 13.7px; }
.viewer-caption p:last-child { margin-bottom: 0; }
/* **A caption sized by the owner.** `--asz` scales the block's own type so a
long caption can hold one page instead of being turned; it is set per
caption, because two voices on one photograph are two different lengths.
Absent unless he has chosen one, and then the fitting loop leaves it alone —
`data-asz="set"` says the decision is his. The heading comes with it, or a
shrunk caption would sit under a title that had not moved. */
/* **Scaled off `--prose-size`, not off `1em`.** `1em` here is the column's
own 12px, while a caption's paragraphs are set at `--prose-size` — 11.4px —
so `1em * 0.88` came out at 10.56 where the field previewing it said 10.03,
and at full size the rule would have *raised* the type from 11.4 to 12
before any shrinking began. The two have to agree exactly, or the control
lies about its own result.
Paragraphs only. A caption's heading is short and is not what overruns the
column; scaling it would need a second base and give the same disagreement
in the other direction. */
.cap[data-asz] p {
font-size: calc(var(--prose-size, 11.4px) * var(--asz, 1));
line-height: calc(var(--prose-size, 11.4px) * var(--asz, 1) * 1.2);
}
/* **A caption that runs to more than one page.** The album column's pager,
one column over — see `.album-pager` — and deliberately the same object: the
same drawn arrows, the same `1/2`, the same face. A reader who has met one
has met the other.
`.viewer-caption p.cap-pager` and not a bare class, because
`.viewer-caption p` is 0-1-1 and sets `--prose`; the album's pager spent an
afternoon set in Libre Caslon while declaring Akzidenz for exactly this
reason, and `audit_faces.py` is what noticed. Third time in this file. */
.viewer-caption p.cap-pager {
position: absolute; right: 0; bottom: 0;
margin: 0; display: flex; align-items: center; justify-content: flex-end;
gap: 7px;
font: normal 9px/1 "Akzidenz BE Cn", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .07em; color: var(--ink); opacity: .55;
}
.cap-pager:hover { opacity: .85; }
.cap-pager button {
appearance: none; background: none; border: 0; padding: 2px 4px; margin: 0;
font: inherit; line-height: 1; color: inherit; cursor: pointer;
display: flex; align-items: center;
}
.cap-pager button svg { display: block; width: 15px; height: 9px; }
.cap-pager button:hover { opacity: 1; }
.cap-at { font-variant-numeric: tabular-nums; }
/* ------------------------------------------------ who wrote this caption
**An attribution is a field, not punctuation somebody typed** — one click in
the edit box, and everything a reader sees about it is decided here. That is
the point of storing it apart: the dash, the gap and the weight can be
changed for every caption at once, and none of it can be half-deleted while
editing. Added 2026-08-17 at the owner's word.
Right-aligned, because it is a signature rather than a sentence and the eye
should not mistake it for the next line of the paragraph. A little quieter
than the body and in the body's own face: it is the family's writing too,
and a second typeface here would announce it far more loudly than it
deserves. The gap above is a little over one line, which is what separates
it from prose without floating free of it.
**The seven captions ending in a typed attribution are not this.** (The
name is deliberately not quoted here: this stylesheet is served to the
public and `leakcheck` reads it, so a comment naming the family's writing
is a leak like any other — a small one, and the only one it found outside
the markup.) They are prose
typed by the 2005 author, inside the body, and they stay prose. If they are
ever migrated to the field, this rule is what they will look like. */
/* -------------------------------------- several captions on one photograph
**One is shown and the rest are offered**, which is the owner's own answer
to a column that cannot grow: a line at the foot of a caption saying
somebody else wrote about this photograph too, and one press to read them.
This site's TURN OVER gesture applied to words. Chosen off
`concepts/stacked_captions.py`, 2026-08-17.
Every caption is wrapped in `.cap` even when there is only one — 99 of the
archive's 99 captioned frames have exactly one, and the alternative was two
DOM shapes for the scripts to tell apart. */
.viewer-caption .cap[hidden] { display: none; }
/* **`.viewer-caption p.alsoby`, not `.alsoby`.** The rule above sets `--prose`
on every `p` in here and is 0-1-1; a bare class is 0-1-0 and loses, so the
line came out in Libre Caslon while claiming Akzidenz. Found in the comp,
and `document.fonts.check` is what said so — `fontFamily` reports the
declared stack and will happily name a face that never loaded. */
.viewer-caption p.alsoby {
margin: 26px 0 0;
font: normal 9px/1.5 "Akzidenz BE Cn", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ink);
opacity: .55;
}
/* **`text-transform: inherit` is not optional.** A button does not inherit it
from the UA stylesheet, so the name rendered mixed-case — and this face has
no lowercase at all, so every letter of it came from Georgia. The oldest
fault in this project wearing its usual disguise. */
.viewer-caption p.alsoby button {
appearance: none; background: none; border: 0; padding: 0;
font: inherit; letter-spacing: inherit; text-transform: inherit;
color: inherit; text-decoration: underline; cursor: pointer;
}
.viewer-caption p.alsoby button:hover,
.viewer-caption p.alsoby button:focus-visible { opacity: 1; }
.viewer-caption p.credit {
margin: 16px 0 0;
text-align: right;
opacity: .72;
font-style: italic;
}
/* **Who is in the photograph.** Below the caption and quieter than it: the
caption is what somebody wrote, this is a list of facts, and a row of names
set at the caption's own weight would read as a sentence somebody meant.
The label is the condensed nav face at the size the `alsoby` switch uses,
so the two pieces of furniture under a caption match each other. */
.viewer-caption p.who {
margin: 14px 0 0;
/* Bounded by `edit_src.fitWho`, which sets `max-height` from the room the
column actually has left. Scrolls rather than truncates: every name stays
present and clickable. Without this the line grows over WRITE/EDIT
CAPTION and ADD YOURS, which are then painted and unpressable. */
overflow-y: auto;
font: normal 9px/1.6 "Akzidenz BE Cn", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .82;
}
.viewer-caption p.who b {
font-weight: normal;
opacity: .55;
margin-right: .5em;
}
/* A name that leads somewhere is underlined like any other link in the
column; one that does not — the person was deleted from the bios store —
is the same words without the rule under them, which is exactly what it
means. */
.viewer-caption p.who span { opacity: .85; }
/* A URL is one long unbreakable word in a 228px column, so it has to be
allowed to break rather than push the column wider than the stage. */
.viewer-caption, .entry p { overflow-wrap: anywhere; }
/* The site decorates nothing — but a link inside running text is the one
place where the reader has to be told, and fading is not a signal you can
see in a single word. An underline, kept off the baseline. */
.viewer-caption a, .entry a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-offset: 2px;
}
.viewer-caption a:hover, .entry a:hover { opacity: .7; }
/* sits in the empty band between the photograph and the nav rule */
.viewer-hint, .viewer-turn, .viewer-nav, .viewer-flip {
position: absolute;
left: 55.4px;
top: 464px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: pointer;
font: normal 10px/1.4 "Akzidenz BE Cn", "Helvetica Neue", Arial, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .45;
}
/* Under the right-hand edge of the enlargement, not the right-hand edge of
the stage. The Kodachrome enlargement sits at x 55.4 and is 450 wide, so
its far edge is 505.4 and this is the 800-wide stage less that. The hint
opposite already sits on 55.4, the picture's near edge, so the two now
bracket the photograph instead of straddling the caption column as well.
`.viewer--plain` needs no such correction: its box is centred, and 175 is
already both its inset and its far edge. */
.viewer-turn, .viewer-nav {
left: auto; right: 294.6px; text-align: right;
display: inline-flex; align-items: center; gap: .62em;
}
/* The back of the photograph, on the one kind of card that has both — several
photographs *and* something written on the back of one of them. The turn
control keeps stepping through the photographs; this turns the one you are
looking at over.
Placed by measurement, not by guess. The stack control is 88.49 wide with
its left edge on 416.91, and that edge does not move when the count appears
because the count hangs out of the flow — so there is a fixed edge to sit
beside. 401 leaves 15.9px of paper between the two, and the hint opposite
ends at 173.13, so this can grow leftward as far as its wording ever needs
without meeting anything.
Right-anchored with the arrow last, for the same reason the turn control
puts its mark first: TURN OVER and TURN BACK are not the same width, and
whichever end is anchored is the end that stays still. The arrow is the
anchor here, so the label grows away from it and nothing on the row moves. */
.viewer-flip {
left: auto; right: 401px; text-align: right;
display: inline-flex; align-items: center; gap: .62em;
}
.viewer-flip .turn-arrow { display: block;
transition: transform var(--t-dim) var(--ease-glide); }
.viewer-flip:hover .turn-arrow,
.viewer-flip:focus-visible .turn-arrow { transform: translateX(2.6px); }
.flip-label { display: inline-block; text-align: right; }
/* the plain sections put their controls on the stage's own inset; this keeps
the same 106.4px of separation from the turn control that 401 does.
**`top` as well as `right`, and it was missing until 2026-08-16.** The row
moves down 14 on a plain section — the hint, the turn and the navigator all
take 478 — and this rule set only the horizontal, so the flip stayed on 464
and sat a line above the control it is spaced against. It never showed:
before the layout became per-frame, no plain sheet had a frame that was both
a two-sided print and a card, so TURN OVER and ANOTHER FRAME were never on
screen together here. `wwii 5` is both, and the moment that sheet's
uncaptioned frames took the plain layout the two controls overlapped. The
horizontal separation in this rule was reasoned about; the vertical was
simply not noticed. */
.viewer--plain .viewer-flip { left: auto; right: 281.4px; top: 478px; }
/* The control for a card of several frames wears the same mark its thumbnail
does — three cards seen from above, the front one crisp and the two behind
it falling back. One idea doing both jobs: the sheet says "there are more of
these", the enlargement says "here is the next one". A verso keeps the plain
wording; it is one object with two sides, not a set. */
.turn-mark { display: none; position: relative; width: 16px; height: 12px;
border: 1px solid currentColor; flex: none; }
.turn-mark::before, .turn-mark::after {
content: ""; position: absolute; inset: -1px;
border: 1px solid currentColor;
}
.turn-mark::before { transform: translate(3px, 3px); opacity: .5; }
.turn-mark::after { transform: translate(6px, 6px); opacity: .26; }
.viewer-turn[data-stack] .turn-mark,
.viewer-nav .turn-mark,
.album-turn .turn-mark { display: block; }
/* ...and how far through the set you are, once you have turned it once */
.turn-label { display: inline-block; text-align: left; }
/* A print with a back to read gets an arrow rather than the stack mark: it is
one object turning over, not a set being stepped through. The gap opens a
little on hover, so the control moves before the photograph does. */
.turn-arrow { display: none; width: 15px; height: 9px; flex: none; }
.turn-arrow svg { display: block; width: 100%; height: 100%; }
.viewer-turn:not([data-stack]) .turn-arrow { display: block; }
/* The arrow leads away a little as you point at it — the control moving
before the photograph does. It travels by `transform`, which paints without
laying out: widening the flex `gap` instead, as this did, made the row
wider, and the row is anchored on its right, so "TURN OVER" jumped 2.6px
leftward the instant the pointer arrived and back again as it left. The
same fault the stacked card's control was cured of — a control that
flinches when you reach for it.
`will-change` is deliberately absent: this is 15px of SVG. */
.viewer-turn:not([data-stack]) .turn-arrow {
transition: transform var(--t-dim) var(--ease-glide);
}
.viewer-turn:not([data-stack]):hover .turn-arrow,
.viewer-turn:not([data-stack]):focus-visible .turn-arrow {
transform: translateX(2.6px);
}
/* The count hangs off the control's right, out of the flow. That is the whole
mechanism, and it is doing two jobs at once.
It cannot move the mark. The control is anchored on its right, so anything
in the row that changes width walks the mark sideways — which the count did
twice over: 13px when "2/5" first appeared, and a further 0.8px on any turn
crossing 1, because `1` is narrower than the other digits here.
(`font-variant-numeric: tabular-nums` is declared below and is **inert** —
these are 40-glyph subsets lifted out of the SWF with no `tnum` feature in
them, carrying Flash's own proportional advances. It is left for a face that
would honour it; it is not what holds the width.) Out of the flow, the count
contributes no width at all, so none of that can happen however wide it gets.
And it leaves the wording where it was. Reserving room for the count inside
the row would have held the control's right edge on the photograph's own
505.4 but stopped the *ink* 19.4px short of it, over blank paper, until the
card was turned — breaking the bracket with the hint opposite, which starts
exactly on 55.4. This way the wording ends on 505.4 as it always did, and
the count crosses that edge once turned: 511.6 to 524.8, which is 2.7px
inside the annotation column's left edge at 522.1. Nothing collides — the
deepest annotation stops at y 397.9 and this sits at 464, 66px of clear
paper below it. The comp that settled it, with all three candidates at true
geometry, is tools/concepts/turn-count-space.html.
`margin-left` here must match the flex `gap` above, since it is standing in
for the gap the count no longer gets from the row. `top: 0` rather than any
centring: the count and the label are both 10px/1.4, so identical box
heights put their baselines on each other exactly. */
/* **The count paints at the control's own strength, because opacity on a
child multiplies.** It used to say `.62`, which reads as "a little quieter
than the words" and is not what it did: the count is inside the button, so
.62 of the button's own `--turn-rest` put it on the paper at **.446 against
the wording's .72**, and on hover at .62 against 1. The two never matched at
any moment, and every change moved them by different amounts — which is what
made the number read as a separate thing that happened to be nearby, and
what made its fades look awkward beside a label that was not fading.
At 1 it inherits the button exactly: same strength at rest, same lift on
hover, same drop under `[data-waiting]`, all of it carried by the parent
rather than restated here. The transition stays for the one moment the count
has of its own — its first appearance, when the card is turned once — so it
eases in rather than popping.
**It is already one control for the pointer**, and that was checked rather
than assumed: the count is a DOM child of the button, so hovering it makes
`.viewer-turn:hover` true and lifts the whole thing, and a press on the
number advances the card. Hover and clicks follow the tree, not the box —
the same property the mark's label relies on. What was wrong here was only
ever the paint. */
.turn-count { position: absolute; left: 100%; top: 0; margin-left: .62em;
font-variant-numeric: tabular-nums; opacity: 0;
transition: opacity var(--t-dim) linear; }
.viewer-turn[data-counting] .turn-count { opacity: 1; }
.viewer-hint:hover, .viewer-hint:focus-visible,
.viewer-turn:hover, .viewer-turn:focus-visible,
.viewer-nav:hover, .viewer-nav:focus-within,
.viewer-flip:hover, .viewer-flip:focus-visible { opacity: 1; }
.viewer-turn[hidden], .viewer-nav[hidden],
.viewer-flip[hidden] { display: none; }
/* The turn now waits for the incoming frame rather than rotating over a file
that has not arrived. Warming the card on open makes that wait almost never
happen — but when it does, the press has to look received, or the button
reads as dead. Deliberately not a spinner: it is usually one frame long. */
.viewer-turn[data-waiting] { opacity: .45; }
.viewer-nav[data-waiting] { opacity: .45; }
/* ------------------------------------------------------- the navigator
**In the section's own colour, not the ink.** Everything else that names
where you are wears it — the active foot label, the current top square, the
corner rule on a stacked thumbnail — and this control is doing the same job
at the other end of the page: it says which of twenty-seven you are looking
at. In black it read as furniture belonging to the browser rather than to
the section. `--section-ink` is set on the stage per page and is already
darkened to NAV_CONTRAST, so it is legible at 10px; the fallback keeps a
page that somehow has none from losing the control altogether.
A card long enough that "another frame" stops describing it. Past
`gallery.NAV_MIN` you are not looking at one more photograph — you are
somewhere in a run of twenty-seven and may want to go back — so the control
becomes a back arrow, the count, and a forward arrow, around the same
three-card mark the short cards wear.
`.viewer-turn` is untouched and still serves the verso and the short stack.
Two elements rather than one that changes shape: those two are styled by
different rules and each has been broken by a change meant for the other,
and the navigator needs two press targets, which a `