/* Browsing the archive by its subjects (docs/public-browse.md).
   `br-` = browse; the markup is built by js/browse.js.

   Its own stylesheet on purpose. The surface is new and self-contained, so
   nothing here can drift against another page's rules — and the same warm text
   ramp as the gallery index is restated rather than imported, because base.css's
   --color-muted is a *cold* grey that reads as a different material on a page
   that is mostly photographs.

   THE GEOMETRY IS /gallery's. The two pages index one archive two ways, and
   until this pass they did not look like they came from the same site: /gallery
   opens with a gold kicker over a compact masthead and runs its photographs off
   the right edge of the window, while /browse opened with a grey kicker over a
   1200px centred column of text. The column is gone — text keeps a measure, but
   photographs run edge to edge, because this is the surface whose whole subject
   is photographs. */

:root {
  --br-t2: rgba(240, 234, 216, 0.94);   /* the subject          14.5:1 */
  --br-t3: rgba(240, 234, 216, 0.56);   /* facts, gallery names  5.6:1 */
  --br-t4: rgba(240, 234, 216, 0.50);   /* counts, dates         4.6:1 */
  --br-gap: 4px;                        /* between frames within a row */
  /* 60px at 1440, which is where /gallery starts its own text. */
  --br-pad: clamp(1.25rem, 4.2vw, 3.75rem);
}

/* The quiet step was 0.32, which is 2.53:1 on this ground — below WCAG AA's
   4.5:1 for normal text and below even the 3:1 large-text bar. It reads as
   delicate on a good monitor in a dark room and as absent everywhere else, and
   search made that expensive: the placeholder is the only thing telling a
   sighted reader what the field takes, and the designation under a result is
   the fact that turns a registration into an aeroplane.
   0.50 is the smallest alpha that clears 4.5:1 here, measured, not guessed.
   It puts t3 and t4 close together — but the ramp never carried the hierarchy
   on its own: size, case and letter-spacing do, and they still differ by more
   than the colour ever did. The two roles that are FACTS rather than counts
   moved up to t3 outright, which is the part of this that is a semantic fix
   rather than a numeric one. */

/* ── The head ─────────────────────────────────────────────── */

.br-head {
  padding: 7.5rem var(--br-pad) 0;
}

/* Gold, as /gallery's "PORTFOLIO" is. It was a grey kicker here, which is the
   one house pattern this page had quietly declined to follow — and the kicker
   is the page's cheapest piece of identity: four small letters that say which
   site you are on before anything else has loaded. */
.br-kind {
  margin: 0 0 0.55rem;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.br-title {
  margin: 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--br-t2);
}

/* The facts that finish naming the subject — and the way out of it. Gold is
   spent on hover alone: these read at the weight of the page's other facts, as
   the social credits do, because a row of gold links would compete with the
   photographs the page exists to show. */
.br-facts {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--br-t3);
}

.br-link {
  color: var(--br-t3);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 234, 216, 0.22);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.br-link:hover,
.br-link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.br-sep { margin: 0 0.5rem; color: var(--br-t4); }
.br-plain { color: var(--br-t3); }

/* ── The other index ───────────────────────────────────────────
   The route to /gallery, and its mirror image is /gallery's route to here
   (.gx-door). Both are the only link to the other half of the archive, so both
   read at body ink rather than at the weight of the metadata they sit beside,
   and both carry the arrow that says the link leaves the page. Neither is a
   filled control: the site's one of those is the home page's Contact block, and
   a rival would flatten the ranking the pages are built on. The fix a quiet
   link needs is placement and legibility, not paint. */
.br-door {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
}

.br-tally .br-door { margin: 0; font-size: 0.85rem; }

.br-door-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--br-t2);
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 234, 216, 0.28);
  padding-bottom: 0.2rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.br-door-link:hover,
.br-door-link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.br-door-arrow {
  flex: 0 0 auto;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-door-link:hover .br-door-arrow,
.br-door-link:focus-visible .br-door-arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .br-door-arrow,
  .br-door-link:hover .br-door-arrow,
  .br-door-link:focus-visible .br-door-arrow { transition: none; transform: none; }
}

.br-note,
.br-sub {
  margin: 0.8rem 0 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--br-t3);
  max-width: 34rem;
}

.br-count {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-t4);
}

/* The figure inside the tally reads a step brighter than the noun it counts:
   "288 aircraft" is a fact about the archive's size, and the size is the part
   worth reading. */
.br-tally-n { color: var(--br-t3); }
.br-tally-item { white-space: nowrap; }

/* PLACES is the one count on this line that goes somewhere — /map, the chart of
   where the archive was made. A FACT CARRYING A ROUTE, which is the grammar
   /latest established and what keeps this from being a third door: no new row,
   no new gold, no new ink. `--br-t4` already clears AA, so the underline is not
   a legibility rescue but the mark that says this figure is pressable; it is
   held below full strength at rest so the hover has somewhere to go. */
.br-tally-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 234, 216, 0.26);
  padding-bottom: 0.12rem;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.br-tally-link:hover,
.br-tally-link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.br-tally-link:hover .br-tally-n,
.br-tally-link:focus-visible .br-tally-n { color: var(--color-accent); }

.br-tally-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* What the archive holds, and the other way to look at it, on one line. They
   wrap onto two only when the window cannot hold both. */
.br-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.6rem;
  margin-top: 1.2rem;
}

/* A flex row so the four counts can WRAP. As plain inline text they could not:
   each `.br-tally-item` is `nowrap` and the separators are appended with no
   whitespace between them, so the browser saw one unbreakable run and the hub
   scrolled sideways on every phone (441px of line in a 390px window). Flex
   items break between themselves without needing whitespace to do it. */
.br-tally .br-count {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.br-tally .br-facts { margin: 0; font-size: 0.85rem; }

/* ── The facet's gutter ───────────────────────────────────── */

/* The subject's name, its facts, its count and the search field, in the page's
   left gutter with the photographs beginning under them.

   It used to be a SPREAD: one of the subject's own frames bleeding off the
   right edge beside the words, the geometry the home page's Contact section
   makes. That went when the layer moved to one masonry — the photographs are
   now the same size here as everywhere else in the archive, and a single one of
   them blown up to a half-fold hero was the exception. Two things the lede
   carried, the gallery the frame came from and the way onward to it, are
   carried by every group's own heading now rather than by the first alone.

   The class names survive the change on purpose: `renderSearch` moves the
   field into `.br-lede-text` by selector, and it is still the gutter. */

.br-lede {
  max-width: var(--measure);
}


/* ── The photographs ──────────────────────────────────────── */

.br-body {
  padding: 2rem var(--br-pad) 6rem;
}

/* The hub's own padding is on its parts: the mosaic runs edge to edge and the
   index below it keeps the text gutter. */
.br-body--hub { padding: 0 0 6rem; }

.br-group { margin-top: 2.6rem; }
.br-group:first-child { margin-top: 1.4rem; }

/* The gallery a run of frames came from — a fact about the subject ("it appears
   in these four galleries") and the way onward if the frame was not the one
   wanted. */
.br-gallery {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.6rem;
  text-decoration: none;
  color: var(--br-t3);
  transition: color 0.2s ease;
}

.br-gallery:hover,
.br-gallery:focus-visible { color: var(--color-accent); }

.br-gallery-title {
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.br-gallery-date {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--br-t4);
}


/* ── The mosaic ───────────────────────────────────────────── */

/* The hub's answer to being an index of photographs that showed none of them.
   Every subject the archive holds, ordered by how much of the archive it is,
   each drawn as one of its own photographs.

   The tile is a masonry cell (`.ms-cell`, base.css) carrying a caption; only
   the caption and the hover are this file's. It used to be a cell of a row
   whose height was that ordering — see `mosaicTiles` in browse.js for why the
   size went and the order stayed. */

.br-mosaic { margin: 2.6rem 0 3.5rem; }

/* Overrides `.ms-cell img`'s plain brightness lift: a slow push in, not a
   zoom-and-crop. The frame is already at its own aspect, so the scale reads as
   the picture leaning forward rather than as a crop tightening. It is the
   hub's alone, because a tile here stands for a whole subject. */
.br-tile img {
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.35s ease;
}

.br-tile:hover img,
.br-tile:focus-visible img { transform: scale(1.035); filter: brightness(1.06); }

/* The label's ground.

   A FLAT-BOTTOMED RAMP, nine stops, smootherstep — not a two-stop gradient.
   Both lessons come from the home hero, which had this exact argument at full
   scale: a two-stop ramp bands visibly when it crosses open sky (which half of
   these frames are), and darkness with a visible SHAPE reads as a smudge over
   the photograph while the same amount spread evenly does not.
   0.82 at the foot is the worst case measured against a WHITE photograph:
   cream on that composite is 9.8:1, and the meta line at 0.72 alpha is 6.0:1.
   Anything darker in the frame only improves both. */
.br-tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  height: clamp(4.25rem, 55%, 8.5rem);
  padding: 0 clamp(0.6rem, 1.1vw, 1rem) clamp(0.55rem, 1vw, 0.9rem);
  background: linear-gradient(to bottom,
    rgba(12, 11, 8, 0)     0%,
    rgba(12, 11, 8, 0.013) 12.5%,
    rgba(12, 11, 8, 0.085) 25%,
    rgba(12, 11, 8, 0.226) 37.5%,
    rgba(12, 11, 8, 0.410) 50%,
    rgba(12, 11, 8, 0.594) 62.5%,
    rgba(12, 11, 8, 0.735) 75%,
    rgba(12, 11, 8, 0.807) 87.5%,
    rgba(12, 11, 8, 0.820) 100%);
  pointer-events: none;
}

/* Up to TWO lines, then an ellipsis — not one line and a cut.

   A subject the reader cannot finish reading is not an index entry, and the
   longest name in the archive is not a fixed quantity: the wall is bilingual,
   so "Leszno Adela Dankowska Airfield" is "Lotnisko Leszno im. Adeli
   Dankowskiej" one language over, six characters longer than any size the
   caption could reasonably shrink to would hold. A second line answers that
   for every language and every column width at once, where a font size only
   ever answers it for the names somebody measured.

   The caption is bottom-anchored, so the line grows UP into the ground and the
   meta line under it stays on the same baseline across the whole wall. Its
   ground is 55% of a tile and two lines plus the meta come to about 63px of
   it, so there is room. In practice one name in 44 uses it. */
.br-tile-name {
  font-size: clamp(0.9rem, 1.15vw, 1.15rem);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(240, 234, 216, 0.97);
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-tile:hover .br-tile-name,
.br-tile:focus-visible .br-tile-name { color: var(--color-accent); }

/* The name is sized off ITS OWN TILE, not off the viewport.

   The wall is one wall at one size everywhere now (js/masonry.js), so the hub
   gave up the wider column it used to ask for — and `1.15vw` is a measurement
   of the WINDOW, which since the cap landed no longer says anything about how
   wide a tile is: between 1650px and 2560px the viewport grows 55% and the
   tile grows with it, while a name sized off the window stops at its ceiling
   a third of the way along. Sizing off the container states the relationship
   the caption actually has. 4.9cqw is ~13.9px in the 283px tile a 1440px
   laptop draws, which is what takes 43 of the archive's 44 subjects onto one
   line there, and it reaches the same 1.15rem ceiling from about a 375px tile
   up. The 44th wraps, which is what the two-line clamp above is for.

   `1.15vw` stays as the declaration above so a browser without container
   queries keeps exactly what it has today; this only refines it. It must also
   stay ABOVE the 560px block, which takes the size back up — a tile there is
   most of the window and has all the room it needs. */
@supports (container-type: inline-size) {
  .br-tile { container-type: inline-size; }
  .br-tile-name { font-size: clamp(0.85rem, 4.9cqw, 1.15rem); }
}

.br-tile-meta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(240, 234, 216, 0.72);
}

/* The count is the one number on this page that is also the tile's size, so it
   is stated quietly: the picture has already said it. 0.60 is as quiet as it
   can be got — measured against the worst case this ground can face, a pure
   white photograph behind the scrim's 0.82, it lands at 4.66:1 where 0.58 came
   out at 4.49 and missed AA. */
.br-tile-n { letter-spacing: 0.08em; color: rgba(240, 234, 216, 0.60); }

/* ── Reveal ───────────────────────────────────────────────── */

/* base.css's prefers-reduced-motion block clamps `animation-duration` on `*`,
   which governs CSS ANIMATIONS and does nothing whatsoever to a transition —
   so this one carries its own guard, next to the rule it guards. */
.br-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.br-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .br-reveal { opacity: 1; transform: none; transition: none; }
  .br-tile img { transition: opacity 0.5s ease; }
  .br-tile:hover img,
  .br-tile:focus-visible img { transform: none; }
}

/* ── The hub's index ──────────────────────────────────────── */

/* The four lists, whole and unchanged. They are the only internal links to the
   ~500 subject pages, so nothing here is dropped or folded behind a control —
   the phone book was never wrong in itself, it was wrong as the entire page. */

.br-index {
  padding: 0 var(--br-pad);
  border-top: 1px solid var(--color-border);
  padding-top: 3rem;
}

.br-index-title {
  margin: 0 0 2rem;
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--br-t3);
}

.br-hub { margin-top: 2.6rem; }
.br-hub:first-of-type { margin-top: 0; }

.br-hub-title {
  margin: 0 0 0.9rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--br-t4);
}

/* Text, not pills — the gallery page's filters made the same call, and for the
   same reason: a bordered box per entry turns an index into a card grid. */
.br-hub-list {
  display: flex;
  flex-wrap: wrap;
  /* 1.5rem is 24px: the horizontal spacing WCAG 2.2 asks for between adjacent
     targets, which is what lets a 24px-tall link qualify under the exception. */
  gap: 0.15rem 1.5rem;
}

/* 18px tall on a phone, which is under WCAG 2.2's 24x24 minimum and misses the
   spacing exception by a whisker. The padding is vertical only, so the marks
   still read as a run of text rather than becoming a row of buttons. */
.br-hub-item {
  font-size: 0.9rem;
  color: var(--br-t3);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  padding: 0.2rem 0;
  min-height: 24px;
}

.br-hub-item:hover,
.br-hub-item:focus-visible { color: var(--color-accent); }

/* ── Search ───────────────────────────────────────────────── */

/* The page's one job, sized to say so: about half the h1, full measure, with a
   rule under it rather than a box around it. A bordered input would read as
   chrome on a page whose whole argument is that the interface recedes; a rule
   that brightens on focus says "field" with one line. */

.br-search {
  padding: 1.6rem var(--br-pad) 0;
}

/* The field's label. Hidden from sight, not from a screen reader: the
   placeholder tells a sighted reader what this is, and a placeholder is not a
   label. (base.css has no visually-hidden utility, so it is defined here with
   the rest of this surface's rules.) */
.br-search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.br-field {
  position: relative;
  /* A measure, not the window. Full-bleed photographs are the point of this
     page; a 1400px-wide rule under a search field is not. */
  max-width: 52rem;
  border-bottom: 1px solid rgba(240, 234, 216, 0.18);
  transition: border-color 0.25s ease;
}

.br-field:focus-within { border-bottom-color: var(--color-accent); }

.br-input {
  width: 100%;
  border: 0;
  background: none;
  padding: 0.3rem 0 0.7rem;
  font-family: inherit;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 300;
  line-height: 1.3;
  color: var(--br-t2);
  /* The magnifier is drawn rather than fetched: one icon is not worth a request,
     and an SVG data URI keeps it in the stylesheet with the rule it belongs to. */
  padding-left: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0ead8' stroke-opacity='0.42' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 0.35rem;
  background-size: 1.35rem 1.35rem;
}

/* The facet variant: a utility on a page that already has a subject, not the
   headline it is on the hub. browse.js moves the element itself into the lede's
   gutter, so the page padding it carries on the hub has to come back off — it
   is inside the padded column now, not beside it. */
.br-search--facet { padding-top: 1.4rem; }

.br-lede-text .br-search { padding-left: 0; padding-right: 0; }

.br-search--facet .br-field { max-width: 30rem; }

.br-search--facet .br-input {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  padding-left: 1.8rem;
  padding-bottom: 0.55rem;
  background-size: 1.05rem 1.05rem;
  background-position: 0 0.3rem;
}

.br-input::placeholder { color: var(--br-t3); }
.br-input:focus { outline: none; }
.br-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ── Results ──────────────────────────────────────────────── */

/* The bottom padding is on the results rather than on `.br-body`, because the
   two swap places: on the hub the lists give way to the results, so whichever
   is showing has to hold the footer off the last row itself. */
.br-results {
  padding: 2.2rem var(--br-pad) 0;
}

.br-results:not([hidden]) { padding-bottom: 6rem; }

.br-rgroup + .br-rgroup { margin-top: 2.2rem; }

.br-rgroup-title {
  margin: 0 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--br-t4);
}

.br-rgroup-n {
  margin-left: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--br-t4);
}

/* A result is a photograph and the two facts that name it. In an archive of
   photographs, a row that SHOWS the aeroplane beats one that spells it. */
.br-r {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0;
  max-width: 52rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(240, 234, 216, 0.07);
}

.br-r:last-of-type { border-bottom: 0; }

/* A SQUARE SLOT holding the frame at its own aspect, never cropped.
   It was a fixed 84x56 with `object-fit: cover`, which is the card-grid
   instinct and the one thing on this page that broke the site's own rule:
   every other surface here sizes the container to the frame and crops nothing.
   Ten of the archive's 288 first-posting thumbnails are portrait, and a 3:2
   centre-band crop took 47-55% of them — HA-JAV, a vertical Yak-52 shot,
   rendered as a horizontal smear of empty sky.
   The slot stays a fixed square so the text column still aligns and the rows
   stay a constant height; only the picture inside it varies. The aspect comes
   from `SHOOTS.dims` via `frameOf`, which the page already had. */
.br-r-thumb {
  flex: 0 0 auto;
  width: 84px;
  /* Shorter than it is wide: the slot has to hold a portrait whole, but sizing
     it square to do that would spend 28px of row height on every landscape
     frame, and 278 of the 288 are landscape. At 64 a 2:3 portrait comes out
     43x64 and a 3:2 landscape stays 84x56 — nothing is cropped and the common
     case pays nothing. */
  height: 64px;
  display: flex;
  align-items: center;
  /* Left, not centred: a centred portrait sits 20px in from a landscape's edge
     and the column of pictures goes ragged down its left side, which is the
     side the eye reads. The slack falls on the right, inside the slot, where
     the text column starts at a fixed offset anyway. */
  justify-content: flex-start;
  overflow: hidden;
}

.br-r-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  background: var(--color-surface);
  transition: filter 0.3s ease;
}

.br-r:hover .br-r-thumb img,
.br-r:focus-visible .br-r-thumb img { filter: brightness(1.12); }

.br-r-text { min-width: 0; }

.br-r-name {
  display: block;
  font-size: 1rem;
  color: var(--br-t2);
  transition: color 0.2s ease;
}

.br-r:hover .br-r-name,
.br-r:focus-visible .br-r-name { color: var(--color-accent); }

/* The designation is a FACT about the aeroplane, which is what t3 is for. It
   was the quiet step, where it failed AA and where it also said the wrong thing
   about its own importance. */
.br-r-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--br-t3);
}

/* The one place gold sits at rest rather than on hover: it marks WHY a row is
   here, which is attention being directed rather than decorated. */
.br-hit {
  background: none;
  color: var(--color-accent);
}

.br-r-via { color: var(--br-t4); }

.br-more {
  margin-top: 0.7rem;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--br-t4);
  cursor: pointer;
  transition: color 0.2s ease;
}

.br-more:hover, .br-more:focus-visible { color: var(--color-accent); }

.br-empty {
  margin: 0;
  font-size: 0.92rem;
  color: var(--br-t3);
}

/* ── The hub's lists ──────────────────────────────────────── */

.br-hub-n {
  margin-left: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--br-t4);
}

/* One run of 288 registrations is a phone book. The prefix is the nationality,
   which a spotter reads at a glance, so it hangs in its own column and the marks
   flow beside it. */
.br-cluster {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1rem;
  align-items: baseline;
  padding: 0.32rem 0;
}

.br-cluster-key {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--br-t4);
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .br-head { padding-top: 6.5rem; }
  .br-body { padding-bottom: 4rem; }
  .br-results:not([hidden]) { padding-bottom: 4rem; }
  .br-group { margin-top: 2rem; }
  .br-r-thumb { width: 64px; }

  .br-search--facet .br-field { max-width: none; }

  .br-index { padding-top: 2.4rem; }
  .br-index-title { margin-bottom: 1.5rem; }
  .br-mosaic { margin-bottom: 2.5rem; }

  /* The key stops being a column and becomes a line of its own: at this width
     a 3.2rem gutter costs more than the marks it labels. */
  .br-cluster {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    padding: 0.5rem 0;
  }
  .br-cluster-key { text-align: left; }
}

/* At this width the wall is one or two columns, so a tile is most of the
   window and its caption can afford to be read at full size rather than sized
   to a fifth of one. */
@media (max-width: 560px) {
  .br-tile-name { font-size: 1rem; }
  .br-tile-cap { height: clamp(4.25rem, 45%, 7rem); }
}

/* ── The locator, in a /place/<slug> gutter ────────────────────────────────
   A place is the only subject in this layer that is SOMEWHERE, so its page
   says where: the archive's own chart at a third of the size, this place lit
   against the twelve others, each of them a press away. A sideways move rather
   than a destination — which is this layer's whole thesis — and a fact about
   the subject like the count beneath it, not a heading over the work. */

.br-locator {
  margin-top: 2.25rem;
  max-width: 17rem;
}

.br-locator-t {
  margin: 0 0 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--br-t4);
}

.br-locator .pm-host { padding: 0; }