/* The catalogue's pages (26 October 2026). Iain: with the museum theme now running through the direct home page, carry it
   to the other pages. Each direct page is a section of the museum's catalogue: it opens with its section label in the
   accession marks' Marcellus and bronze ink, and an installation view of its room in the museum, the room photographed and
   mounted like a catalogue plate, captioned, with the museum-blue crossing to that room under it. Loaded after each page's
   own styles; Marcellus is in each page's font link. The crossing moved here from casefile.css so every page shares it. */
:root { --ff-serif: 'Marcellus', 'Times New Roman', serif; --bronze-ink: #6E4B21; }

/* the section label: "The catalogue · The index" */
.cat-sec { display: block; margin-bottom: .85rem; font: 400 14px / 1.45 var(--ff-serif); letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-ink); }
/* a catalogue number set inline, as in "No. 02 Hilton" */
.cat-no { font: 400 .95em / 1 var(--ff-serif); letter-spacing: .04em; text-transform: none; color: var(--bronze-ink); white-space: nowrap; }

/* the installation view: the photograph mounted on white like the book's prints, its caption on the mount's foot */
.cat-plate { margin: 0; padding: 10px 10px 0; background: #fff; box-shadow: 0 1px 2px rgba(40, 30, 10, .16), 0 12px 30px rgba(40, 30, 10, .1); }
.cat-plate img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #E9E4DA; }
.cat-plate figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 2px 11px; font: 500 11px / 1.35 var(--ff-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mid); }
.cat-plate figcaption b { font-weight: 600; color: var(--ink); }
.cat-plate .pl-n { flex: none; font: 400 13px / 1.35 var(--ff-serif); letter-spacing: .04em; text-transform: none; color: var(--bronze-ink); }
.cat-plate + .file-crossing { margin-top: 14px; }

/* the crossing into the museum, where this work hangs: the museum's own door, in its blue (white 5.5:1) and its serif */
.file-crossing { margin: 28px 0 0; }
.file-museum { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; background: #2D69B4; border: 1px solid rgba(141, 186, 242, .55); color: #fff; text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, transform .2s ease; }
.file-museum:hover { background: #3070C0; border-color: rgba(141, 186, 242, .85); color: #fff; }
.file-museum:active { transform: scale(.98); }
.file-museum-k { font: 600 11.5px / 1.2 var(--ff-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.file-museum-t { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 400 24px / 1.1 var(--ff-serif); }
.file-museum-t svg { flex: none; width: 22px; height: 16px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
@media (hover: hover) and (pointer: fine) { .file-museum:hover .file-museum-t svg { transform: translateX(4px); } }
.file-museum-c { font-size: 14.5px; line-height: 1.45; color: #fff; }   /* solid white: .92 white measured 4.4:1 on the blue */
/* on hover, the museum's blue sweep: a pale blue-white crosses from the left over a copy of the label (.blue-hi, made by
   portfolio.js), the words turning deep museum blue (7.0:1) exactly where it has passed. The copy sits above the label's
   own arrow, which its hover transform lifts into the copy's layer */
.file-museum > .blue-hi { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: inherit; gap: inherit; padding: inherit; background: #E6EFFA; color: #1E4F8F;
  clip-path: inset(0 100% 0 0); transition: clip-path .6s cubic-bezier(.65, 0, .35, 1); pointer-events: none; }
.file-museum:hover > .blue-hi, .file-museum:focus-visible > .blue-hi { clip-path: inset(0 0 0 0); }
.blue-hi .file-museum-k, .blue-hi .file-museum-c { color: inherit; }

/* an essay: its reading time in the byline, and the crossing to the shelf after the author. No initial letter: the browser
   takes the punctuation after a first letter into it, so "I've" opens as a large "I'" and a small "ve" */
.article-page .article-byline .byl-read { color: var(--ink-mid); }
.article-crossing { max-width: 680px; margin: 2.5rem auto 4rem; }

/* an older case study as one of the catalogue's plates: its label over the hero's dark gradient in the light bronze of the
   book's foil, and the crossing to where it hangs in Gallery 3 before the pager */
.cs-hero .cat-sec { margin-bottom: 1rem; color: #E0B982; }
.cs-crossing { max-width: var(--max-w); margin: 0 auto; padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3rem); box-sizing: border-box; }
.cs-crossing .file-crossing { max-width: 560px; margin: 0; }