/* Unholy Land — the museum view A second reading of a band page: what the band made, first and largest, with every word of detail held back behind the thing it describes. The release card and the flyer card already exist and are reused as-is, so nothing here draws a dialog. Every selector is prefixed .mu- and every rule is nested under #museum. That is not house style, it is the only thing keeping this file out of a fight: band.html already loads four global stylesheets and artist.html seven, and the obvious names are long gone — .hero carries 31 rules across three files, .honor 25 across four. bandworld.css settled this the same way (264 selectors, all .bw-) and so did artistroom.css with .ar-. No colour is defined here. Ground, rule, text and brass all resolve to the archive-system tokens, so this view is the same material as the rest of the site by construction rather than by matching hex by hand. Measure comes from the --arch-* tokens for the same reason. */ /* The old view has to be gone before the first paint, not after the data arrives. band.js and artist.js await five JSON files before they render, and until then the browser had nothing to show but #page and the room photograph behind it — so every visit opened on the previous design and swapped a second later. The answer is an attribute set by a two-line script in , before any of this is parsed: html[data-view] says which reading is being asked for, and the loser never paints. The modules keep it in step on hashchange. artistworld.css hangs the rehearsal-room photograph on body::before; under a wall of sleeves that is a second image competing with sixteen, so it stands down here too. Both rules live in this file, so deleting the museum deletes its overrides with it. */ html[data-view="museum"] #page { display: none !important; } html[data-view="museum"] body::before { display: none !important; } /* the class survives as the runtime signal for anything that needs it after render; the attribute above is what wins the race to the first frame */ body.museum-on::before { display: none !important; } /* a band that is gone, wherever the museum says so */ .mu-dead { color: var(--accent); } /* A night played outside Israel. The red already meant this before the museum existed — artistroom.css paints an abroad night red against a pale blue local one — and it is the most remarkable line in most show logs: an Israeli band on a foreign stage. The wall marks it with the same rule a band that is gone carries, so both readings of the accent stay legible against each other rather than competing. */ .mu-abroad { color: var(--accent); } /* .mu-foot b is the muted count style and outranks a lone class — name both */ .mu-foot .mu-abroad { color: var(--accent); } .mu-paper.mu-abroad { border-bottom: 1px solid rgb(224 69 62 / .5); } .mu-when .mu-abroad { font-style: normal; letter-spacing: .18em; } .mu-rest .mu-night.mu-abroad { color: var(--accent); } .mu-rest .mu-night.mu-abroad:hover { color: var(--archive-brass-hi); } #museum { --mu-name-gap: 26px; /* above the name heading and below it, equally */ max-width: calc(var(--arch-max) + var(--arch-gutter) * 2); margin: 0 auto; padding: 0 var(--arch-gutter) 110px; font-family: Georgia, "Times New Roman", serif; } #museum[hidden] { display: none; } .mu-sans { font-family: "Helvetica Neue", Arial, sans-serif; } /* ── the band's own photograph, as the ground ────────────────── Fixed rather than scrolled: it is atmosphere, not a hero image, so the page moves over it and it stays where it is. It rests at full strength — mono, but a photograph and not a stain — and the mask takes it to nothing well before the fold so the lower half of every screen is clean ground for the walls to sit on. The scroll still carries it away: museum.js drives the opacity down from its resting value over the first 62% of the viewport, so it is gone by the time the covers are on screen. The layer sits at -1, which needs to stop painting its own opaque background over it — archive-system.css gives the same colour to , so the page stays black and nothing else changes. Lifting the view's blocks above a z-index-0 layer was the other way to do it, and it broke the hero: position + z-index makes a stacking context, and the logo's mix-blend-mode can only blend inside its own. Left alone, screen(black, photo) = photo, so the scan's black ground shows the photograph through it and the lettering stays white — which is the effect, not a workaround. Only mounted when the archive holds a photograph — js sets .mu-has-photo. A plate, not a backdrop. Bled to all four edges the photograph had no dimensions of its own: it was the window, so the only thing left to look at was whatever the crop happened to keep, and the two people in this band sat cut in half against the screen's edges. Bounded and inset it becomes a photograph again — a frame the crest sits inside, with the page's black around it. Its width is stated as two limits rather than one number: never wider than 84% of the window, and never narrower than the measure everything else on the page is set to, so the covers below can never be broader than the photograph above them. Between 1120 and 1400 the second limit is the one that binds and the plate is exactly the measure; past that the first takes over. Under the measure the inset floors at zero and it bleeds, which is the right answer on a phone. Three of the four edges dissolve. Left and right feather over an eighth of the plate, and the long bottom fade is the one this layer always had — it is what leaves clean ground for the walls, and it now finishes at the plate's own edge instead of somewhere in open screen. The top is left hard against the nav: it is a cut, not an edge, and feathering it only made the bar look like it was floating. */ html[data-view="museum"] body { background: transparent; } #museum.mu-has-photo::before { content: ""; /* 100% and not 100vw: vw counts the scrollbar and the page's own measure does not, so on a machine with a classic 15px bar the "never narrower than the measure" limit came out 15px short of it and the covers were wider than the photograph by exactly the bar. A percentage here resolves against the same box the layer is placed in, which is the box the measure lives in. */ --mu-plate-x: clamp(0px, 8vw, calc((100% - var(--arch-max)) / 2)); --mu-plate-edge: 12%; /* how wide the sides dissolve */ position: fixed; inset: var(--nav-h, 62px) var(--mu-plate-x) 17vh; z-index: -1; pointer-events: none; background: var(--mu-photo) center 12% / cover no-repeat; filter: grayscale(1) contrast(1.05); /* js drives this from the scroll position; the fallback is what a page with no javascript running would show, and it is the resting value */ opacity: var(--mu-photo-o, 1); /* two masks, kept as the smaller of the two rather than the sum — added (the default) they cancel each other out and every edge comes back */ -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mu-plate-edge), #000 calc(100% - var(--mu-plate-edge)), transparent), linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%); mask-image: linear-gradient(to right, transparent, #000 var(--mu-plate-edge), #000 calc(100% - var(--mu-plate-edge)), transparent), linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } /* Under 900 the plate stops cropping and becomes the photograph. `cover` is right while the plate is wider than the picture is: it fills the top of the page and gives up the edges nobody was looking at. Narrow the window and the same rule keeps the plate's height and pays for it out of the width — a five-piece band shot arrives as two faces and a shoulder, and the missing three are the point of the photograph. So the box takes the picture's own proportions instead: full width, height derived from the ratio js measured off the file (3:2 until it lands, which is the archive's commonest shape), and the image laid across it at 100%. Nothing is stretched — one dimension is chosen and the other follows. The bottom fade now runs down the photograph's own height rather than a viewport fraction, so it finishes on the picture's edge instead of cutting it, and the side feather goes: at this width the plate bleeds, so it would be dissolving an edge that is already the screen's own. */ @media (max-width: 900px) { #museum.mu-has-photo::before { inset: var(--nav-h, 62px) 0 auto 0; aspect-ratio: var(--mu-photo-ar, 3 / 2); /* the second limit, and the reason this is not just a ratio: a portrait band shot at full width is 1.5× the window tall, and a picture running off the bottom of a fixed layer is as unseen as one cropped at the sides. Where the height binds, the box stops being the picture's rectangle and `contain` keeps the whole of it inside — letterboxed on the page's own black, which is the ground it would have shown anyway. */ max-height: calc(100vh - var(--nav-h, 62px) - 8vh); /* a ratio and a height cap together resolve the width from the height, so the box comes out narrower than the two zero insets asked for — and an over-constrained fixed box settles against its left edge. Centre it. */ margin-inline: auto; background-size: contain; background-position: center top; --mu-plate-edge: 0%; } } /* ── the logo is the name ────────────────────────────────────── A band's logo is the one piece of design it made about itself, and on the old hero it sat in a third of a row beside a heading repeating what it already said. Here it is the heading. Bands with no logo in the archive (13 of them) fall back to the name in blackletter, which is what band.js hands over — the class it sets is styled by band.css, so it is left alone. */ /* no bottom padding: on the artist page the name sits inside this header, so 6px here landed between the name and the meta line and nowhere else — making the gap under the name 32 against the 26 above it. The name's own margin is the only thing that spaces it, on both pages. */ .mu-hero { text-align: center; padding: 60px 0 0; } /* Where the archive has a photograph the first screen is the photograph: the logo sits low in it, the meta line under that, and the top of the covers just breaks the fold — so the page opens on the band and the work is the reason to scroll. Viewport-relative because the whole point is the fold, clamped so a short laptop is not pushed past its own logo and a tall monitor does not open on a field of nothing. */ #museum.mu-band-page.mu-has-photo .mu-hero { padding-top: clamp(96px, 31vh, 320px); } /* the crest is one short row rather than a tall stack, so it can sit lower in the photograph and still leave the covers breaking the fold. This number is the seat js computes, written out — not a design in its own right. seatCrest() measures the fold and the plate and overrides it on every render, so what is here only ever shows in the gap between the two, and 42vh was three times what the measurement comes back with: on a 1440×900 window the stylesheet put the crest at 440px and js moved it to 178, so the band's name landed halfway down the screen and then jumped 262px. It is a starting position, and a starting position should be where the thing is going. Two values because there are two seats and the window decides which one binds. Wide, the plate is a tall crop that fills the plate's box and the crest follows the photograph down into its last quarter — that is navH + .76 × plateH, and with the plate running from the nav to 17vh it solves to 63vh − 47px. Narrow, the plate becomes the photograph's own rectangle and ends high, so the fold's seat is the one that binds and the crest sits just under the picture instead. Same two seats seatCrest() chooses between; these are them written down. */ #museum.mu-band-page.mu-has-photo .mu-hero-crest { padding-top: clamp(120px, calc(63vh - 47px), 640px); } @media (max-width: 900px) { #museum.mu-band-page.mu-has-photo .mu-hero-crest { padding-top: clamp(96px, 13vh, 220px); } } /* ── the crest is held until it has a seat ──────────────────── The seat is measured off the logo, and the logo has no height until it decodes and a different height again once the mono bake swaps the file — so the crest moves two or three times before it settles no matter when the first measurement is taken. Held back for those frames it arrives once. js drops .mu-seating as soon as the logo has pixels, or at 650ms if the file never loads. Nothing below the crest is held: the covers, the walls and the nights are laid out and painted while this resolves. */ #museum.mu-seating .mu-crest { opacity: 0; } #museum .mu-crest { transition: opacity var(--mo-open) var(--ease-out); } @media (prefers-reduced-motion: reduce) { #museum .mu-crest { transition: opacity var(--mo-fade) linear; } } @media (max-width: 560px) { /* a phone fold is short and the logo would be the only thing above it */ #museum.mu-band-page.mu-has-photo .mu-hero { padding-top: clamp(70px, 17vh, 150px); } } /* scoped to the band: the artist hero is a photograph in the same slot, and screen blend plus a brightness lift would bleach a face */ #museum.mu-band-page .mu-hero img { max-width: min(560px, 86%); max-height: 220px; /* screen drops the scan's black ground; the mono bake happens in js */ mix-blend-mode: screen; filter: brightness(1.55); } .mu-hero .name-logo { font-size: clamp(34px, 7vw, 68px); color: var(--white); } /* ── the crest: mark, and what is said beside it ─────────────── One centred group. The logo keeps its own size and the two lines sit to its right, aligned to the left edge of their own column so the name and the archive's line share a margin rather than each finding its own centre. The rule that lays the head out is here; what the type looks like is the shared .mu-bandname / .mu-meta below, so a change to either follows both pages. */ .mu-crest { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 46px); /* centred, like everything else on these two pages. The two lines used to hang from their own left edge beside the logo; the site aligns to the centre line, and a block that does not is the one thing on the page that looks like it belongs to another layout. */ text-align: center; } .mu-crest-mark { flex: 0 1 auto; min-width: 0; display: flex; justify-content: center; } .mu-crest-said { flex: 0 1 auto; min-width: 0; } /* The lineup's combined honors, under the archive's line. Gold, because the honors are the one thing on this site that is gold and not chrome — the red above it is the band's name and the two must not be read as one voice. The count leads and the word follows it, so a glance gets the number. */ .mu-honcount { display: flex; align-items: center; gap: 8px; margin-top: 13px; font: 400 10px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); } .mu-honcount img { width: 19px; height: 19px; flex: none; } .mu-honcount b { font: 400 17px/1 var(--display-font); letter-spacing: 0; color: var(--gold); } /* inside the crest both lines share the same centre line */ .mu-crest .mu-bandname { margin: 0; text-align: center; } .mu-crest .mu-meta { margin-top: 12px; text-align: center; } .mu-crest .mu-honcount { justify-content: center; } @media (max-width: 760px) { /* a mark and two lines side by side is two narrow columns on a phone */ .mu-crest { flex-direction: column; gap: var(--mu-name-gap); text-align: center; } .mu-crest .mu-bandname, .mu-crest .mu-meta { text-align: center; } .mu-crest .mu-honcount { justify-content: center; } .mu-crest .mu-meta { margin-top: 10px; } } /* The name heading, on both pages. Blackletter because it is the archive's display face, and var(--accent) because that is the site's one red — the rule is one hue, not a budget of appearances, so a heading may spend it. No italic: Cloister Black has no oblique cut and the browser would slant it synthetically. --mu-name-gap sits above the name and below it, so the heading is not nudged toward either neighbour. */ .mu-bandname, .mu-name { /* the shorthand, not margin-top: both are

and the browser's own 0.67em bottom margin was making the gap below the name twice the one above it / margin: var(--mu-name-gap) 0 0; font-family: var(--display-font); font-weight: 400; font-style: normal; line-height: 1.18; letter-spacing: .5px; color: var(--accent); / the house rule: red blackletter is set in capitals, always — see CLAUDE.md. Caps in Cloister Black run about 60% wider than the mixed case they replace, so a long name wraps here where it used to hold one line. That is a heading wrapping, which is fine; what is not fine is a second treatment for the same three things. / text-transform: uppercase; text-align: center; } .mu-bandname { font-size: clamp(26px, 3.4vw, 40px); } .mu-name { font-size: clamp(32px, 5vw, 50px); } / Wide tracking is a label's device, not a sentence's. This line is a label on most bands — DEATH METAL · TEL AVIV-YAFO · 2016 — PRESENT · ACTIVE — and a sentence on the ones the archive knows the most about: Orphaned Land's runs "Doom/Death/Middle Eastern Folk Metal (early); Middle Eastern Folk/Progressive Metal (later)" before it reaches the city, and at .26em that broke into five lines of spaced capitals on a phone, which is a paragraph set as a monogram. .14em still reads as archival small caps and gives the long ones their line back. / .mu-meta { margin-top: var(--mu-name-gap); text-align: center; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .mu-meta .mu-sep { color: var(--border); padding: 0 9px; } .mu-meta .mu-live { color: var(--archive-brass); } / the one red the archive still spends on a band that is gone / .mu-meta .mu-dead { color: var(--accent); } / ── the head, when there is a photograph under it ───────────── The plate rests at full strength now, and the hero's copy sits between 61 and 89 per cent of its height — measured, not guessed — which on most band shots is exactly where the faces are. So this line was being read off somebody's cheek: 11.5px capitals tracked at .14em in --muted, over a grayscale photograph at full contrast. The fix is on the type and not on the picture. Darkening the plate under the words was the other way, and it would have taken the strength back out of the photograph in the one band of it worth looking at — which is the thing that was just asked for. A scrim is the right answer when the copy sits over dead sky; here it sits over the band. Two moves, both scoped to .mu-has-photo so a band with no photograph keeps the quieter head it always had: • One step up the grey ramp. --muted → --text for the line, --dim → --muted for the honors count. The three-level hierarchy is preserved, it just starts a step higher against a ground that is no longer black. • A shadow in the page's own --bg, in three passes rather than one: a tight pass for the letter edge, and two wide ones that knock the photograph back into shadow behind the glyph without reading as a halo. Small tracked capitals need the spread — a single tight shadow sharpens the letter but leaves the busy ground right up against it. The name carries it too. It is large and red and mostly holds on its own, but "mostly" over a lit studio shot is not a rule, and the shadow costs the hue nothing — this changes no colour, only what is behind one. / #museum.mu-has-photo .mu-meta { color: var(--text); } #museum.mu-has-photo .mu-honcount { color: var(--muted); } #museum.mu-has-photo .mu-meta, #museum.mu-has-photo .mu-honcount, #museum.mu-has-photo .mu-bandname, #museum.mu-has-photo .mu-name { text-shadow: 0 1px 2px rgb(7 8 8 / .95), 0 0 10px rgb(7 8 8 / .85), 0 0 24px rgb(7 8 8 / .65); } / the separator is structure, not text — lifting it with the rest would turn a hairline dot into a third voice on the line / #museum.mu-has-photo .mu-meta .mu-sep { color: var(--dim); } / ── section rules ──────────────────────────────────────────── Centred, with a rule reaching out to each margin and fading as it goes. The heading used to sit at the left with one rule running off to the right, which was the last thing on the page still hanging from a left edge after the crest, the covers, the faces and the honors all moved to the middle. Two pseudo-elements, each a gradient rather than a border, so the line arrives out of the dark instead of stopping against it. / .mu-sec { display: flex; align-items: center; justify-content: center; gap: 18px; margin: var(--arch-block) 0 22px; font: 400 11.5px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); text-align: center; } .mu-sec b { color: var(--muted); font-weight: 600; } .mu-sec::before, .mu-sec::after { content: ""; flex: 1; height: 1px; min-width: 0; } .mu-sec::before { background: linear-gradient(to right, transparent, var(--arch-rule)); } .mu-sec::after { background: linear-gradient(to left, transparent, var(--arch-rule)); } / ── releases ────────────────────────────────────────────────── Two sizes, and the count decides which. A short discography is a shelf and each sleeve is worth looking at; six and up is a wall, and a wall wants the whole of it in one screen — thirty-five covers at 320 is twelve rows of scrolling to learn what a band released. A capped tile rather than a share of the row, so a lone release is a sleeve and not a billboard, and the row centres at every count: one release sits in the middle, three fill a row, thirty-five wrap into six columns at 170 — the width the wall had before one size was tried. Flex rather than grid, and that is the whole of the difference: a grid's justify-content centres the track set, so the last row of a wrap still starts in column one — fourteen sleeves across six columns left two hanging at the left margin under a centred heading. Flex centres every line it lays, the short one included. The tiles carry the width the track used to, so nothing else about the wall moves. / .mu-shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--arch-gap-lg); } / not `> `: .mu-far-tail is display:contents, so the tiles it holds are the flex items and not the tail itself / .mu-shelf .mu-tile { width: min(var(--mu-cover, 320px), 100%); } /* 170 is not a free number: it is what six columns and five 20px gaps leave inside the 1120 measure, so the wall lands on exactly six across. / .mu-shelf.mu-dense { --mu-cover: 170px; } / A credit is a smaller thing than a record of your own — someone else's sleeve with your name inside it — and the wall says so before the heading does: 130 puts eight across where the player's own releases put six. / .mu-shelf.mu-credits { --mu-cover: 130px; } .mu-credits .mu-t { font-size: 12.5px; } .mu-credits .mu-b { font-size: 8.5px; } .mu-credits .mu-r { font-size: 10px; } / the plate scales with the sleeve — 18px italic under a 170px cover takes three lines for a title that took one under a 320 / .mu-dense .mu-t { font-size: 14px; } .mu-dense .mu-s { font-size: 8.5px; letter-spacing: .16em; } .mu-dense .mu-b { font-size: 9px; letter-spacing: .14em; } .mu-dense .mu-r { font-size: 11px; } .mu-dense .mu-cap { padding-top: 9px; } / The label is a plate under the frame, not a curtain over it. It used to fade up inside the sleeve on hover, which meant the wall named exactly one release at a time — the one the cursor happened to be on — and a visitor reading down the discography had to sweep every square to learn what any of them were. Every release states itself now, the way the crew below state their names. What hover still does is release the cover: colour comes back and the image moves inside its frame. / .mu-tile { position: relative; cursor: pointer; } / the frame, and the clip the cover moves inside. The border and the ground belong here rather than on the tile so the caption sits outside them. / .mu-art { position: relative; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--arch-rule); / the same lit sheet the flyer tiles hang while their scan is in flight — a sleeve waiting for its cover, not a hole in the shelf / background: linear-gradient(158deg, rgb(255 252 244 / .045), rgb(255 252 244 / .012) 46%, transparent 72%), var(--surface); } .mu-tile img:not([data-on]) { opacity: 0; } .mu-tile img[data-on] { opacity: 1; } .mu-tile img { width: 100%; height: 100%; object-fit: cover; display: block; / held back a quarter-step so the wall reads as one surface, and released on hover — the cover the visitor is actually looking at is the only one in full colour / filter: grayscale(.28) brightness(.94); transition: filter .45s var(--ease), transform .7s var(--ease), opacity var(--mo-open) var(--ease-out); } .mu-tile:hover img, .mu-tile:focus-visible img { filter: none; transform: scale(1.035); } .mu-tile:focus-visible { outline: 1px solid var(--archive-brass); outline-offset: 3px; } .mu-tile .mu-cap { padding: 11px 4px 0; text-align: center; } .mu-tile .mu-t { font-style: italic; font-size: 18px; line-height: 1.3; color: var(--white); } .mu-tile .mu-s { display: block; margin-top: 3px; font: 400 9.5px/1.6 "Helvetica Neue", Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--archive-brass); } / A release whose cover the archive does not hold keeps its square — the grid must not close over it, and the plate under it reads the same as any other. / .mu-tile.mu-empty .mu-art { background: var(--surface-raised); } .mu-tile.mu-empty:hover .mu-art { border-color: var(--archive-brass-dim); } / ── the press, one line at a time ───────────────────────────── Every quote here is a real sentence from a real review; there is no filler to pad the rotation with, so the block only mounts when the band has at least one, and holds still at one rather than blinking. / / min-height is a floor for the first paint only — js measures the tallest quote and sets the real one, because these are stacked for the crossfade and so the block has no height of its own / .mu-press { position: relative; max-width: 720px; margin: 38px auto 0; text-align: center; min-height: 118px; } .mu-quote { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease); pointer-events: none; } .mu-quote.mu-on { opacity: 1; pointer-events: auto; } .mu-quote q { font-style: italic; font-size: 17.5px; line-height: 1.65; color: var(--muted); quotes: "“" "”"; } .mu-src { margin-top: 8px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--archive-brass); } .mu-src a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; } .mu-src a:hover { border-bottom-color: currentColor; } .mu-dots { position: absolute; inset: auto 0 -22px 0; display: flex; gap: 8px; justify-content: center; } .mu-dots i { width: 4px; height: 4px; background: var(--border); transform: rotate(45deg); transition: background .5s var(--ease); } .mu-dots i.mu-on { background: var(--archive-brass); } / the same slot, counted rather than drawn — see DOT_MAX in museum.js for where the line is and why. It is one line of text, so it cannot push past the block the way a row of one pip per quote could. / .mu-tally { gap: 0; font: 400 9.5px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: .22em; color: var(--dim); } .mu-tally b { font-weight: 400; color: var(--archive-brass); } @media (prefers-reduced-motion: reduce) { .mu-quote { transition: none; } } / ── the people ──────────────────────────────────────────────── Faces, because a lineup is people. Where the archive has no portrait the band's own logo stands in at low opacity — an empty frame reads as a missing person, and the sigil reads as one we have no photograph of. / / One row, always. A lineup is a band standing together, and the moment it wraps it stops being one: six members under a four-across measure read as a group of four and a group of two, and nothing on the page says the split is the measure's doing rather than the band's. So the card is not a fixed width that wraps when it runs out — it is the measure divided by however many people there are, which is what makes a six-piece print smaller than a trio instead of printing longer. js writes the count to --n on the row; the arithmetic is all here. Two stops hold it in: - 232px, the width it had before, so a duo does not blow two faces up to 550px each under a centred head. - --mu-mem-min, below which a face stops being a face. Past a certain lineup no screen has the room — Switchblade has twenty past members, and twenty across a phone is 16px of nose each. There the row keeps its one line and scrolls, which is still one line and still the band standing together; it is a shelf you pan, like the crate. 80 and not a rounder number because the floor decides where the scroll starts, and it should not start over nothing: at 92 an eleven-person row came out 12px too wide and asked for a pan that revealed a sliver of the last card. 80 is what puts the boundary at twelve across the 1120 measure, which clears every past-members row in the archive but eight. The band's own lineup never reaches that: current members top out at six on all but six bands in the archive, and six across the 1120 measure is a 177px card. It is the past-members row that overflows, which is the right place for it — that one is a list of people, not a portrait of a band. / .mu-crew { --mu-mem-min: 80px; display: flex; flex-wrap: nowrap; / `safe` is the whole reason this can both centre and scroll: plain `center` on an overflowing row pushes the first card off the left edge into space no scrollbar can reach. Declared twice so a browser that does not know the keyword keeps the centring it always had. / justify-content: center; justify-content: safe center; gap: var(--arch-gap); / cards carry different numbers of honors — hang them from the top so the row of faces stays a straight line across / align-items: flex-start; overflow-x: auto; / the stagger starts each card 10px low, and on a scroll container that is vertical overflow — the padding gives it somewhere to be, and the margin gives the padding back to the layout / overflow-y: hidden; padding-bottom: 12px; margin-bottom: -12px; / the bar is the only thing saying the row goes on past the edge, so it is drawn rather than left to the platform's invisible overlay one / scrollbar-width: thin; scrollbar-color: #2b3038 transparent; -webkit-overflow-scrolling: touch; } .mu-crew::-webkit-scrollbar { height: 6px; } .mu-crew::-webkit-scrollbar-track { background: transparent; } .mu-crew::-webkit-scrollbar-thumb { background: #2b3038; } .mu-crew:hover::-webkit-scrollbar-thumb { background: #3b424c; } .mu-crew > .mu-mem { / flex: none, or nowrap would shrink the cards to fit and the floor would never hold / flex: 0 0 auto; width: clamp(var(--mu-mem-min), (100% - (var(--n, 4) - 1) var(--arch-gap)) / var(--n, 4), 232px); /* everything inside now measures against the card, not the viewport: at 92px the 58px initial and the 17px name were laid out for a card two and a half times wider, and the name took four lines to say one word / container-type: inline-size; } / A phone's measure is 327px, so the desktop floor puts four faces over the edge and asks for a pan to see the fourth of four. Drop it and the common lineups — three, four — land inside one screen again; five and up still scroll, and should. / @media (max-width: 560px) { .mu-crew { --mu-mem-min: 66px; } } .mu-mem { text-align: center; } .mu-mem.mu-linked { cursor: pointer; } / A raised plate, not --surface: at #0f1114 against the page's #08090a a frame holding no photograph was indistinguishable from the ground, and a row of them read as a gap where the members should be. / .mu-frame { position: relative; border: 1px solid #24282e; overflow: hidden; background: var(--surface-raised); } .mu-sigil { aspect-ratio: .86; display: grid; place-items: center; padding: 9.5cqi; } .mu-sigil img { width: 82%; opacity: .5; mix-blend-mode: screen; filter: brightness(1.2); } .mu-mem:hover .mu-sigil img { opacity: .72; } / the initial, band.css's standing answer to a member with no photograph / .mu-initial { font-family: var(--display-font); font-size: clamp(20px, 25cqi, 58px); line-height: 1; color: #3b434f; transition: color .3s var(--ease); } .mu-mem:hover .mu-initial { color: #566173; } / the portrait covers the sigil; if the file is missing js removes it and the sigil underneath becomes the frame's content with no reflow / .mu-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.92); transition: filter .5s var(--ease); } .mu-mem:hover .mu-face { filter: grayscale(.35); } / 17px at the widest card, 12 at the narrowest, straight between the two — the numbers are the line through (80px, 12) and (232px, 17), which is why they are not round. Same shape on the honor sigils below. / .mu-nm { font-size: clamp(12px, calc(9.37px + 3.29cqi), 17px); color: var(--white); margin-top: 11px; } .mu-ro { font: 400 10px/1.6 "Helvetica Neue", Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } .mu-yy { font: 400 9.5px/1.6 "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--archive-brass); } .mu-mem.mu-past .mu-face { filter: grayscale(1) brightness(.55); } .mu-mem.mu-past:hover .mu-face { filter: grayscale(1) brightness(.82); } .mu-mem.mu-past .mu-nm { color: var(--muted); } .mu-mem.mu-past .mu-yy { color: var(--dim); } / Honors come from Honors.html() and band.css already styles them. What does not survive the move is the labelled form: a musician can hold seven, and seven captioned rows under a face turn a wall of people into a wall of text — and leave every card in the row a different height. The icons alone read as "this one is decorated" at a glance, and the label is one hover away because Honors.html already puts it on the title attribute. / #museum .honors { display: flex; / band.css stacks these in a column so each honor can carry its caption — without a caption they are a row, and the column direction has to be named or it is inherited from there / flex-direction: row; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 9px; } #museum .honor { display: block; margin: 0; padding: 0; border: 0; background: none; cursor: help; } #museum .honor .hl, #museum .honor .n { display: none; } #museum .honor img { width: clamp(11px, 7.4cqi, 17px); height: clamp(11px, 7.4cqi, 17px); object-fit: contain; display: block; / not dimmed — see the honors row: at this size a thin badge loses more to opacity than a solid one, and the row stops looking like one metal / opacity: 1; } / ── the nights ──────────────────────────────────────────────── A masonry of the flyers, because the flyers are the evidence. Nights with no scan are not dropped: they collect in a plain list under the wall, since a night without paper is still a night the band played. The wall reads newest first, left to right, and that is why it is a grid and not `columns`. CSS columns fill top to bottom: with six of them the second flyer on the wall was the seventh-newest and the top row ran 2026, 2025, 2025, 2024, 2024, 2023 — every column its own little chronology and none of them the band's. A grid lays out in document order, which is the order the shows already arrive in. The masonry is bought back with a row unit: every tile spans as many 4px rows as its scan is tall, so the flyers keep their own heights and the columns still stagger. js writes the span — it is the one number that needs the rendered height. Until it does, --span holds a middling tile. The wall is also the one grid here that keeps 1fr tracks, because a full wall should reach both margins — and that is exactly what left a short one stranded: three flyers under a 1120px measure filled the first three of seven columns and sat against the left edge, with justify-content unable to help, since fr tracks leave no free space to centre. So the box is capped at what its own tiles need. --n is the number of scans, written into the markup and refreshed by js when a 404 takes a tile out; n × (140 + 10) − 10 is the width at which auto-fill resolves to exactly n columns of 140, and the capped box centres itself. A full wall's cap runs to thousands of pixels, so the measure binds first and nothing about it changes. / .mu-wall { --mu-flyer: 140px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mu-flyer), 1fr)); gap: 10px; grid-auto-rows: 4px; align-items: start; justify-content: center; max-width: calc(var(--n, 999) (var(--mu-flyer) + 10px) - 10px); margin-inline: auto; } .mu-paper { grid-row: span var(--span, 14); position: relative; cursor: pointer; border: 1px solid var(--arch-rule); overflow: hidden; } /* height:auto is not decoration. A tile whose carries width/height attributes — the flyer archive's do, so the masonry reserves the right box before the scan loads — would otherwise render at the attribute's pixel height while the width scaled to the column, and a 655×820 scan came out 176px wide and still 820 tall. With this, the attributes become an aspect-ratio and nothing else. / .mu-paper img { width: 100%; height: auto; display: block; filter: grayscale(.9) brightness(.72); transition: filter .4s var(--ease), opacity var(--mo-open) var(--ease-out); } .mu-paper:hover img, .mu-paper:focus-visible img { filter: none; } / ── an empty frame is not a museum ────────────────────────── These scans are loaded lazily and the wall reserves each one's box from the width and height in the markup, so for as long as a file is in flight its tile is a correctly-sized rectangle of nothing — and on the flyer wall there were six hundred of them at once, blinking in one after another as you scrolled. A gallery hangs an empty frame, not an empty wall. So the frame is the placeholder: a faint sheet in the paper's own tone under a hairline, drawn in css and costing no request. The scan fades up over it when it arrives and the frame stays put underneath, which is also what keeps a 404 from reading as a hole — the tile still looks like a place where a flyer belongs. The fade is driven by :not([data-on]) rather than a load class on the tile: js sets the attribute in one listener for the whole wall, and an image the browser had in cache is complete before any of that runs, so the attribute is set immediately there and nothing flickers. / .mu-paper::before { content: ""; position: absolute; inset: 0; background: linear-gradient(158deg, rgb(255 252 244 / .045), rgb(255 252 244 / .012) 46%, transparent 72%), var(--surface); pointer-events: none; } .mu-paper img:not([data-on]) { opacity: 0; } .mu-paper img[data-on] { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mu-paper img { transition: filter .4s var(--ease), opacity var(--mo-fade) linear; } } .mu-paper:focus-visible { outline: 1px solid var(--archive-brass); outline-offset: -1px; } .mu-paper .mu-when { position: absolute; inset: auto 0 0 0; padding: 22px 8px 7px; background: linear-gradient(transparent, rgb(2 3 3 / .9) 70%); opacity: 0; transition: opacity .35s var(--ease); font: 400 9.5px/1.5 "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text); } .mu-paper:hover .mu-when, .mu-paper:focus-visible .mu-when { opacity: 1; } .mu-paper .mu-when em { font-style: normal; color: var(--archive-brass); } .mu-rest { margin-top: 26px; / centred like every other block on these two pages — the toggle and the nights it unfolds hung off the left margin under a centred wall / text-align: center; font: 400 11px/2 "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); } .mu-rest button { background: none; border: 0; padding: 0; font: inherit; color: var(--archive-brass); cursor: pointer; letter-spacing: inherit; } .mu-rest button:hover { color: var(--archive-brass-hi); } .mu-rest .mu-night { cursor: pointer; } .mu-rest .mu-night:hover { color: var(--muted); } / ── the work done abroad ────────────────────────────────────── The same wall the credits get, at the same weight, because that is what these are. What is different is the fold: the tail's tiles belong to the head's grid or they open as one column under a seven-column wall, which is what display:contents is for — and it has to give the hidden attribute back, since an author rule outranks the UA's. / .mu-far-tail { display: contents; } .mu-far-tail[hidden] { display: none; } .mu-far-more { text-align: center; } .mu-foot { margin-top: 30px; text-align: center; font: 400 11.5px/1.8 "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); } .mu-foot b { color: var(--muted); font-weight: 400; } / ═══ the artist half ═════════════════════════════════════════ A musician has no logo to hang the page on, so the portrait takes that place and the name is set below it rather than beside. / .mu-portrait { width: min(300px, 68vw); margin: 0 auto; } .mu-portrait .mu-frame { border-color: var(--border); } .mu-portrait .mu-face { filter: grayscale(1) brightness(.95); } .mu-portrait:hover .mu-face { filter: grayscale(.3) brightness(1); } .mu-portrait .mu-sigil { padding: 40px; } / On their own page the honors are the subject, not a footnote on a face, so the labels stay — restrained to one quiet row, and only here. / / ── the honors, on the musician's own page ──────────────────── Name above, sigil, detail below. These are real drawings — a hooded prophet, a flame, a hand, a hydra — and at the size they were getting they were smudges. Here the sigil is the object and the words frame it. The name takes the accent; that is the author's call over my objection that it costs the person's own name its place at the top of the page. Every sigil gets the same fixed square and not one of them is stretched to fill it. That works because the files are already normalised: each viewBox is square and the ink fills the same fraction of its height across all ten (measured .904–.909), so `contain` in one box renders them at a single optical height while each keeps its own width — the ear and the flame are narrow, the hydra and the summoning hand are broad, and they should be. / / One line, at every count. A second row of honors reads as a second class of them — the eighth badge dropping under the seventh says nothing about the eighth badge, only about the width of the screen. So the row never wraps and the cells divide what the measure has instead. js writes the count into --hn, because the number of cells is the one thing CSS cannot see. Everything below is derived from it: --h-k is 1 up to the seven that already fit at full size, and shrinks past that (7/8 at eight, .7 at ten, floored at .68 so the name stays legible), and the gap, the sigil and both lines of type are multiplied by it so the cell shrinks as one thing rather than a badge rattling in a box. / .mu-honors-row { margin-top: 34px; --hn: 1; --h-k: clamp(.68, calc(7 / var(--hn)), 1); --h-gap: calc(24px var(--h-k)); } #museum .mu-honors-row .honors { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; /* 24 across and not the 40 it was: the cell had to widen for the capitals (below) and the gap gave the width back, so seven honors still stand on one line inside the 1120 measure — 7×136 + 6×24 = 1096. / gap: 28px var(--h-gap); } / A fixed cell rather than shrink-to-fit. Left to size themselves the cells came out as wide as their widest child and the short details ("×12") sat off the sigil's axis; with one width for all of them the name, the sigil and the count share a centre line, and the row reads as a set. 136 and not 116: the widest honor name in capitals is ANCIENT ONE at 131px, and a name that wraps takes its sigil down with it — the row loses the one line every sigil sits on, which is the whole reading of it. / #museum .mu-honors-row .honor { display: flex; flex-direction: column; align-items: center; gap: calc(9px var(--h-k)); cursor: default; /* 136 while the row still fits it, and the share of the measure once it does not. flex-shrink is left at its default as the backstop for a width the arithmetic did not foresee — a narrower page, a longer name. / width: min(136px, calc((100% - (var(--hn) - 1) var(--h-gap)) / var(--hn))); } #museum .mu-honors-row .honor .hl, #museum .mu-honors-row .honor .n { width: 100%; } /* the markup runs icon, label, detail — the label is lifted over the sigil / #museum .mu-honors-row .honor .hl { order: 1; } #museum .mu-honors-row .honor img { order: 2; } #museum .mu-honors-row .honor .n { order: 3; } #museum .mu-honors-row .honor img { width: calc(56px var(--h-k)); height: calc(56px * var(--h-k)); object-fit: contain; opacity: 1; } /* An honor's name is red blackletter, so it is set in capitals like the two names are. 17px and not the 19 it was: caps carry their weight on the cap height rather than the x-height, so the smaller size reads as the larger type, and it is what lets ANCIENT ONE — 146px at 19, 131 at 17 — stand on one line in the cell widened for it above. / #museum .mu-honors-row .honor .hl { display: block; font-family: var(--display-font); font-size: calc(17px var(--h-k)); font-weight: 400; line-height: 1; letter-spacing: .5px; color: var(--accent); text-transform: uppercase; text-align: center; } #museum .mu-honors-row .honor .n { display: block; /* band.css pushes this detail to the right of a horizontal row and opens an 8px gutter in front of it. Stacked under the sigil that gutter is a 4px lie: the text centres inside a 108px content box sitting 8px in, so every detail on the row sat 4px right of the sigil and the name above it — most visible on the short ones, "×5" and "×14", which have no width to hide it. / margin-left: 0; padding-left: 0; font: 400 calc(10px var(--h-k))/1.4 "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; /* band.css keeps this on one line under an ellipsis, which is right in a row where the detail sits beside its label. Here it sits under a 116px cell, and "Mortuus Umbra" overran it by a single pixel and came out as "MORTUUS UMB…" — an honor naming a band it will not name. Let it wrap. The pixel was the gutter above: with the padding gone the name fits on one line, and this stays for the next band whose name is genuinely longer. / white-space: normal; overflow: visible; text-overflow: clip; } #museum .mu-honors-row .honor .hl { white-space: normal; } / a work tile says more than a cover tile: the record, whose it is, and what this person did on it — four short lines on the plate under the sleeve / .mu-tile .mu-b { display: block; margin-top: 2px; font: 400 10px/1.5 "Helvetica Neue", Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--white); } .mu-tile .mu-r { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgb(185 155 102 / .28); font: italic 12px/1.45 Georgia, serif; color: var(--text); } / ── the bands ─────────────────────────────────────────────── / / .mu-kin is the room the vessels run in, and every number here is a lane they need rather than a margin the block wanted: - the head holds the hub and the stem down to the first gutter. The 22px .mu-sec already puts under its rule is given up rather than added to, so the section grows by the difference and not by the whole of it. It is given up with :has rather than a negative margin on .mu-kin — that was tried, and it does not do what it reads as: the margins collapse against each other, the block landed 14px above the rule's own box, and the hub came to rest three pixels under the words RELATED BANDS with an 11px halo around it. A browser without :has keeps the 22 and the head is 22px deeper, which is the whole of the degradation. - the side padding is the two lanes an artery turns down to reach the rows below the first. Half of it sits outside .mu-logos on each side, which is where the lane's centre line is. - the row gap opens from the archive's 12 to 26 because the trunk crossing a gutter and the stub dropping out of it both have to fit inside it. At 12 they were one 6px stroke on top of another. vessels.js reads all three off the computed style rather than holding its own copies, so the phone block below needs no second set of constants. / .mu-sec:has(+ .mu-kin) { margin-bottom: 0; } .mu-kin { position: relative; padding: 50px 26px 0; } .mu-kin .mu-logos { row-gap: 26px; } / Decorative, and behind everything: a tile is opaque, so a vessel can only ever be seen in the gutter it was drawn in. Nothing here is positioned to get the tiles on top, and that is load- bearing rather than an omission. .mu-band already carries position: relative and comes after the canvas in the tree, so tree order alone paints it over — whereas a position: relative on .mu-logos to force the stack made it the offsetParent, and every offsetTop vessels.js read came back measured from the wrong corner. The tiles were drawn one padding box up and to the left of where they actually were. / .mu-vessels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .7s var(--ease); } .mu-vessels.mu-on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .mu-vessels { transition: opacity var(--mo-fade) linear; } } / same reasoning as .mu-crew — a band with three related names should not sit hard left under a centred crest, and neither should the two names that are left over when six of them wrap under four columns / .mu-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--arch-gap); } .mu-logos > .mu-band { width: min(232px, 100%); } .mu-band { position: relative; border: 1px solid var(--arch-rule); background: var(--surface); cursor: pointer; overflow: hidden; transition: border-color .3s var(--ease); } .mu-band:hover, .mu-band:focus-visible { border-color: var(--archive-brass-dim); } .mu-band:focus-visible { outline: none; } .mu-badge { height: 108px; display: grid; place-items: center; padding: 16px; } / An explicit pixel cap, not a percentage: the row is auto-sized from its content and the content wanted its height from the row, which browsers resolve as indefinite — so max-height: 100% did nothing and a tall logo (Sonne Adam's) was cropped by the tile. 108 less the 16 padding each side. / .mu-badge img { max-width: 100%; max-height: 76px; object-fit: contain; mix-blend-mode: screen; filter: brightness(1.35); opacity: .84; transition: opacity .3s var(--ease); } .mu-band:hover .mu-badge img { opacity: 1; } .mu-bname { font: italic 17px/1.2 Georgia, serif; color: var(--muted); text-align: center; } / a band that is gone is the archive's one standing use of the red, and it is spent on the rule under its name rather than on the name itself / .mu-band.mu-gone { border-bottom: 1px solid rgb(224 69 62 / .45); } .mu-band.mu-gone .mu-badge img { opacity: .5; } .mu-band.mu-gone:hover .mu-badge img { opacity: .85; } .mu-when2 { position: absolute; inset: auto 0 0 0; padding: 20px 10px 8px; background: linear-gradient(transparent, rgb(2 3 3 / .9) 70%); opacity: 0; transition: opacity .35s var(--ease); font: 400 9.5px/1.6 "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text); text-align: center; } .mu-band:hover .mu-when2, .mu-band:focus-visible .mu-when2 { opacity: 1; } .mu-when2 em { font-style: normal; color: var(--archive-brass); } / ── the thread ─────────────────────────────────────────────── The argument about the record, under the record. Held to a reading measure rather than the page's full width: the walls above are objects and want all the room they can get, but this is prose and prose at 1120px is a chore. The comment engine renders in its own iframe and brings its own type, which is why there is so little here — nav.js injects the brass into that frame and the only thing this file owes it is a place to stand and a rule above it, so it reads as the last section of the page rather than a widget that arrived after the page had finished. / .mu-talk { max-width: 760px; margin: 0 auto; min-height: 90px; } .mu-talk .remark-holder { width: 100%; } / The button that led back to the view this replaced is gone. The museum is the band and artist page, not a reading of one — a door marked "the page this replaced" at the foot of every page says the opposite. ?view=classic still routes there for as long as that code stands; it is a query string now, not a piece of the design. / @media (max-width: 900px) { / one value now, because the cap is computed from it / .mu-wall { --mu-flyer: 104px; } .mu-hero { padding-top: 34px; } / the same one-line row against a narrower measure: five cells is what this width holds at full size, so the shrink starts at six instead of eight / .mu-honors-row { --h-k: clamp(.6, calc(5 / var(--hn)), 1); } } / A phone is 327px of content once the gutters are paid. At the desktop tile floor that is one cover per row, which turns a discography into a scroll and loses the one thing this view is for — seeing the body of work at once. Two across is the floor worth holding, so the tile minimum and both gaps come down together to buy it. / @media (max-width: 560px) { #museum { padding-inline: 16px; } / two across on a phone, filling the width — a capped tile would leave a gutter beside a 320px cover on a 343px screen / .mu-shelf { gap: var(--arch-gap); } / .mu-crew is not in this list any more: it is one row now, and a two-across rule would have wrapped it back into the thing it stopped being. Its own floor comes down instead, just above. / .mu-shelf .mu-tile, .mu-logos > .mu-band { width: calc((100% - var(--arch-gap)) / 2); } .mu-portrait { width: min(220px, 60vw); } / The lanes come out of the tiles' own width here — 26 a side off a 343px screen is 15% of the block — so they are cut to the narrowest a turn still reads at, and the gutter with them. / .mu-kin { padding: 42px 16px 0; } .mu-kin .mu-logos { row-gap: 20px; } .mu-badge { height: 84px; padding: 12px; } .mu-badge img { max-height: 60px; } #museum.mu-band-page .mu-hero img { max-height: 150px; } / the caption is four lines on a work tile and a phone tile is ~150px — hold the roles line back there and let the sleeve carry the wall, and set the title small enough that a long one takes two lines, not four / .mu-tile .mu-r { display: none; } .mu-tile .mu-t { font-size: 15px; } .mu-meta { letter-spacing: .1em; line-height: 1.9; } .mu-sec { margin-top: 40px; } .mu-quote q { font-size: 16px; } / The one place the single line is given up. Eight honors across 343px is 43px a cell — a sigil the size of the type beside it and a name nobody can read. The row wraps here and the badges keep their size; two across is the phone's answer to every other grid on this page, and it is this one's. / .mu-honors-row { --h-k: 1; --h-gap: 16px; } #museum .mu-honors-row .honors { flex-wrap: wrap; } #museum .mu-honors-row .honor { width: min(136px, calc((100% - var(--h-gap)) / 2)); } } / ── the way to correct this page ───────────────────────────── Deliberately the quietest line on the view. It is an invitation to the handful of people who can act on it — the band itself — and it must not read to everyone else as a disclaimer about the record above it. Brass on hover and nothing at rest. / .mu-fix { margin: var(--arch-block) 0 0; text-align: center; font: 400 11px/1.8 "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .mu-fix a { color: var(--muted); border-bottom: 1px solid var(--arch-rule); transition: color var(--mo-hover) linear, border-color var(--mo-hover) linear; } .mu-fix a:hover { color: var(--archive-brass-hi); border-bottom-color: var(--archive-brass-dim); } / A band the archive holds that Metal Archives does not — added through the portal, approved, and saying so. Brass rather than red: it is a note about provenance, not a warning, and the red on this line already means a band that is gone. */ .mu-local { color: var(--archive-brass-dim); border: 1px solid var(--arch-rule); padding: 2px 7px; font-size: .85em; letter-spacing: .1em; }