/* Data-driven immersive band archive, approved at 1440 x 900. */
#band-world {
  --bw-gold: #8b939d;   /* not gold any more: the room chrome is steel */
  /* the sheet was picked to read against a dark photograph; with the built
     room behind it the same value reads as a slab of light, so it steps back */
  --bw-paper: #a99e8b;
  --bw-green: #718b72;
  --bw-unknown: #b7a64e;
  --bw-ease: cubic-bezier(.2, .82, .2, 1);
  position: relative;
  height: calc(100dvh - var(--nav-h));
  min-height: 700px;
  overflow: hidden;
  /* The room used to be a photograph of a room, with our shelf and our board
     drawn on top of the shelf and the board already in the picture. Two of
     everything, and the drawn one always lost. The photograph is gone: this
     is a built space — depth, a warm pool where the centre stands, a floor
     that falls away, and nothing in it but the furniture we draw. */
  background: #0e1013;
  color: #ece8df;
  isolation: isolate;
}
#band-world[hidden] { display: none; }
@media (min-width: 861px) { body.bandworld-ready #page { display: none; } }

.bw-room-scrim {
  position: absolute; inset: 0; pointer-events: none;
  /* No lamp. The light in here is the grey that falls through a window at the
     wrong end of the night — the room is read by contrast, not by warmth. */
  background: none;
  transition: opacity .5s;
}
/* one hairline where the planes meet — the only thing standing in for a room */

.bw-meta {
  position: absolute; z-index: 12; left: 24px; top: 17px;
  display: grid; gap: 7px;
  font-family: var(--nav-font);
}
.bw-meta a, .bw-zone > button, .bw-return, .bw-focus-nav button,
.bw-person button, .bw-record button {
  width: max-content;
  border: 1px solid #3c4046;
  border-radius: 0;
  background: rgb(8 9 8 / .92);
  color: #c8ced6;
  padding: 8px 10px;
  font: 700 11.5px var(--nav-font);
  letter-spacing: .12em;
  white-space: nowrap;
  cursor: pointer;
}
.bw-meta span { color: #aaa49b; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; }
.bw-meta b { color: #878d96; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; }

.bw-zone {
  position: absolute; z-index: 10;
  cursor: pointer; outline: 0;
  transition: transform .82s var(--bw-ease), opacity .45s, filter .45s;
}
/* the zone used to draw a frame on hover; it announced nothing the click did
   not already do, on a zone whose click often goes nowhere at all */
.bw-zone:focus-visible { outline: 1px solid #4a4f56; outline-offset: 6px; }
.bw-zone > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 8px; }
.bw-zone > header b { font-size: 12.5px; letter-spacing: .16em; color: var(--accent); }
.bw-zone > header span { color: #91887c; font-size: 10.5px; letter-spacing: .08em; }
.bw-zone > button { position: absolute; z-index: 8; box-shadow: 0 8px 18px #000; }

/* The initial show wall reaches the floor. Each paper represents one show. */
/* The room was authored in fixed pixels against one 1440x900 screen, so on
   anything wider the wall, the shelf and the board stayed their exact size and
   drifted into the corners with a widening floor of nothing between them. The
   three furniture zones take a share of the width now, with a floor and a
   ceiling so the composition holds from a laptop to an ultrawide. */
.bw-wall {
  left: 1.1%; top: 108px; bottom: 10px;
  width: clamp(330px, 23%, 520px);
  perspective: 900px;
}
.bw-wall > header > div { display: grid; gap: 3px; }
.bw-wall > header strong { color: var(--accent); font-size: 42px; line-height: .8; }
.bw-paper-wall {
  position: absolute; top: 49px; bottom: 34px; left: 0; right: 3px;
  /* The flyer wall page already solved this: CSS multi-column, break-inside
     avoid, and the image at height auto — every scan keeps the proportion it
     was printed at instead of being cropped into a uniform tile. A grid cannot
     do that; a column flow can, and it packs them without gaps. */
  columns: 3 auto; column-gap: 5px;
  overflow: hidden;
}
.bw-paper-wall.density-high { columns: 5 auto; column-gap: 4px; }
.bw-paper-wall.density-extreme { columns: 8 auto; column-gap: 2px; }
.bw-paper {
  position: relative; min-width: 0; overflow: hidden;
  break-inside: avoid; margin: 0 0 5px;
  color: #15120f; background: var(--bw-paper);
  border: 1px solid #4a4f56;
  box-shadow: 0 5px 14px rgb(0 0 0 / .6);
  transform: rotate(calc((var(--paper-index) % 7 - 3) * .45deg));
  transform-origin: 50% 3%;
}
.bw-paper:nth-child(3n) { transform: translate(2px, -2px) rotate(-2deg); }
.bw-paper:nth-child(5n) { transform: translate(-2px, 2px) rotate(2.5deg); z-index: 2; }
.bw-paper > div {
  padding: 4px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background:
    radial-gradient(circle at 50% 35%, transparent, rgb(0 0 0 / .25)),
    repeating-linear-gradient(12deg, #b0a591 0 2px, #9c9280 3px 4px);
}
.bw-paper small { font-size: 9px; letter-spacing: .12em; }
.bw-paper b { margin: auto 0; font: 400 13px/.78 var(--display-font); }
.bw-paper span { font-size: 9px; font-weight: 800; }
.bw-paper em { max-width: 100%; margin-top: 2px; overflow: hidden; font: 400 8.5px/1.1 var(--nav-font); white-space: nowrap; text-overflow: ellipsis; }
.bw-paper.has-scan img { display: block; width: 100%; height: auto; }
/* A night with no surviving scan has no shape of its own — give the drawn
   sheet a poster's proportion so it sits in the run without a hole. */
.bw-paper > div { aspect-ratio: 3 / 4; }
.bw-wall > button { right: 4px; bottom: 0; }

/* Logo and people hold the center. */
/* the centre keeps clear of both zones, whatever share they took */
.bw-identity {
  left: calc(1.1% + clamp(330px, 23%, 520px) + 26px);
  right: calc(1.1% + clamp(430px, 26%, 580px) + 26px);
  top: 52px; text-align: center;
}
.bw-logo { height: 165px; display: grid; place-items: center; }
.bw-logo img { width: 440px; height: 165px; object-fit: contain; mix-blend-mode: screen; filter: var(--logo-filter) drop-shadow(0 8px 14px #000); }
.bw-logo > span { font: 400 58px/1 var(--display-font); }
.bw-years {
  width: max-content; min-height: 39px; margin: -11px auto 17px; padding: 7px 11px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #383c42; background: rgb(9 10 9 / .88);
}
.bw-years b { font-size: 17px; }
.bw-years small { font-size: 10.5px; letter-spacing: .14em; }
.bw-years-active b { color: var(--bw-green); }
.bw-years-active small { color: #8b988c; }
.bw-years-dead { color: #9c9b98; }
.bw-years-dead img { width: 25px; height: 25px; opacity: .78; filter: grayscale(1); }
.bw-years-unknown em { color: var(--bw-unknown); font-style: normal; }
.bw-years-unknown small { color: #8b857a; }
/* A band that became another band did not die: brass, no tombstone, and the
   name it became is a link when that band is on the map. */
.bw-years-renamed { color: #a8aeb6; }
.bw-years-renamed small { color: #8b939d; }
.bw-years-renamed small a { color: #c9d0d9; border-bottom: 1px solid #41464d; }
.bw-years-renamed small a:hover { color: var(--white); border-bottom-color: #c9d0d9; }
.bw-years-hold { color: #a8aeb6; }
.bw-years-hold small { color: #8b857a; }
.bw-years-hold em { color: var(--bw-unknown); font-style: normal; }
.bw-identity > header { display: block; font-size: 12px; letter-spacing: .18em; }
.bw-identity > header span { margin-left: 8px; color: #949aa3; }
/* The room preview hid every musician's honors outright — the badges are the
   one thing on the card that took work to earn. Bigger cards, and the badges
   sit under the role where they read as a row of awards, not as debris. */
/* One row, always. Wrapping put a second row of 372px cards straight through
   the timeline below — the zone has no height to give. The cards share
   whatever the centre column is instead. */
.bw-people-preview { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; overflow: hidden; }
.bw-people-preview .bw-person { height: 372px; display: block; background: rgb(8 9 9 / .92); border: 1px solid #383c42; box-shadow: 0 12px 22px #000; text-align: left; }
.bw-people-preview .bw-person-photo { width: 100%; height: 258px; }
.bw-people-preview .bw-person-copy { padding: 11px 12px; }
.bw-people-preview .bw-person-copy small, .bw-people-preview .bw-person-copy p, .bw-people-preview .bw-person-copy button { display: none; }
.bw-people-preview .bw-person-copy .honors { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bw-people-preview .bw-person-copy .honors img,
.bw-people-preview .bw-person-copy .honors svg { width: 25px; height: 25px; }
.bw-people-preview .bw-person-copy h3 { margin: 0 0 4px; font-size: 23px; }
.bw-people-preview .bw-person-copy > b { font-size: 11.5px; color: #a3a9b2; }
.bw-identity > button { left: 50%; bottom: -41px; transform: translateX(-50%); }
.bw-empty { margin: auto; color: #8e857b; font-size: 12px; letter-spacing: .12em; }

/* The rack, covers and wooden ledge move as one physical object. */
/* Three shelves need the height, and the board sits under this — the rack
   climbs to make room rather than growing down through it. */
.bw-rack {
  right: 1.1%; top: 148px;
  width: clamp(430px, 26%, 580px);
  height: clamp(520px, 54%, 660px);
}
.bw-rack > header { display: block; text-align: right; }
.bw-rack > header span { margin-left: 8px; }
.bw-rack-object {
  position: relative; height: min(500px, calc(100% - 62px));
  display: flex; flex-direction: column; gap: 10px; padding: 8px 0;
  background: linear-gradient(160deg, rgb(20 22 25 / .5), rgb(8 9 10 / .86));
  border: 1px solid #2d3137;
  box-shadow: inset 0 1px 0 rgb(198 210 222 / .045), 0 22px 40px rgb(0 0 0 / .72);
  border-radius: 3px;
}
/* One ledge. The sleeves stand on it, the plank is drawn under them, and the
   next ledge starts below — the object stacks instead of stretching. */
.bw-shelf { position: relative; flex: 1; min-height: 0; }
.bw-release-preview { position: absolute; z-index: 4; left: 12px; right: 8px; bottom: 16px; display: flex; align-items: end; justify-content: flex-end; }
.bw-record { position: relative; min-width: 0; cursor: pointer; transition: transform .18s var(--bw-ease), filter .18s; }
.bw-release-preview .bw-record:hover { z-index: 6; filter: brightness(1.08); }
.bw-release-preview .bw-record {
  width: min(176px, calc(100% / 2.7)); margin-left: -3px; min-width: 0;
  transform-origin: 50% 100%;
}
.bw-vinyl {
  position: absolute; width: 88%; aspect-ratio: 1; height: auto; left: 26%; top: 6%;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #080808 0 4px, #191919 5px 6px);
  box-shadow: 4px 7px 12px #000;
}
.bw-release-preview .bw-record > img, .bw-cover-missing {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 112px; max-width: 100%; aspect-ratio: 1; object-fit: cover;
  border: 1px solid #4c525a; background: #151515; color: #777;
  box-shadow: 0 8px 16px rgb(0 0 0 / .72);
}
.bw-release-preview .bw-record-copy h3 { min-height: 0; margin: 6px 0 0; font: 400 14.5px/.9 var(--display-font); }
.bw-release-preview .bw-record-copy small { color: #98a0a9; font-size: 10.5px; }
.bw-release-preview .bw-record-copy > b { display: none; }
.bw-shelf-edge {
  position: absolute; z-index: 3; left: 4px; right: 4px; bottom: 0; height: 12px;
  background: linear-gradient(#6d6b66, #2e2e2c 48%, #070708);
  border-top: 1px solid #8e8b83; box-shadow: 0 11px 18px rgb(0 0 0 / .7);
}
.bw-shelf::after { content: ''; position: absolute; z-index: 1; left: 4px; right: 4px; bottom: -10px; height: 10px; background: linear-gradient(rgb(0 0 0 / .5), transparent); }
.bw-rack > button { right: 0; bottom: 17px; }

.bw-timeline {
  position: absolute; z-index: 11; bottom: 20px; height: 196px;
  left: calc(1.1% + clamp(330px, 23%, 520px) + 26px);
  right: calc(1.1% + clamp(430px, 26%, 580px) + 26px);
  /* the rail was sitting on a slab with a rule across the top; a timeline is
     a line on the floor, not a panel bolted to it */
  padding: 12px;
}
.bw-timeline header b { color: var(--accent); font-size: 13px; }
.bw-timeline header span { margin-left: 7px; color: #8b9099; font-size: 10.5px; }
.bw-timeline-rail { position: relative; margin-top: 62px; border-top: 2px solid #454a51; }
/* A year on the rail is a target: it carries the covers, the count and the
   tooltip. It never answered the pointer, so the whole rail read as decoration
   printed on the floor. Hovering lifts the year and its covers clear of the
   line and lets the label off its one-line leash. */
.bw-timeline-rail > div {
  position: absolute; top: -14px; transform: translateX(-50%);
  text-align: center; cursor: default;
  transition: transform .18s var(--bw-ease), filter .18s;
}
.bw-timeline-rail > div:hover { z-index: 12; transform: translateX(-50%) translateY(-7px); filter: brightness(1.18); }
.bw-timeline-rail > div:hover span {
  position: relative; z-index: 13; opacity: 1;
  max-width: 200px; white-space: normal; color: #dde1e7;
  margin-top: 3px; padding: 4px 6px;
  background: rgb(8 9 8 / .95); border: 1px solid #3d4249;
}
.bw-timeline-rail > div:hover::before { border-color: #c9d0d9; background: #242830; }
.bw-timeline-rail > div:hover img { transform: translateX(calc(-50% + var(--cover-depth) * 15px)) translateY(calc(var(--cover-depth) * -9px)) scale(1.12); }
.bw-timeline-rail > div::before { content: ''; display: block; width: 14px; height: 14px; margin: 5px auto; border: 2px solid #8b939d; transition: border-color .18s, background .18s; border-radius: 50%; background: #0b0c0c; }
/* Several releases in one year fan out rather than stack invisibly — the
   count is the point, so the year has to look busier than its neighbours. */
.bw-timeline-rail img {
  position: absolute; width: 46px; height: 46px; bottom: 34px;
  left: 50%; object-fit: cover; border: 1px solid #454a51;
  transform: translateX(calc(-50% + var(--cover-depth) * 11px)) translateY(calc(var(--cover-depth) * -7px));
  transition: transform .18s var(--bw-ease);
  z-index: calc(9 - var(--cover-depth));
  box-shadow: -3px 3px 6px rgb(2 3 3 / .6);
}
.bw-timeline-rail.is-dense > div:not(.has-release):not(.is-formed) b { display: none; }
.bw-timeline-rail b {
  font-size: 11.5px; color: #8b9099;
  opacity: 0; transition: opacity .18s, color .18s;
}
.bw-timeline-rail > div:hover b { opacity: 1; }
/* Every year looked identical, so a debut and a single support slot carried
   the same weight. A year that shipped a record is brass and larger; a year
   that only played is dimmer and keeps a hollow tick. */
.bw-timeline-rail > div.has-release b { font-size: 15px; color: #c9d0d9; }
.bw-timeline-rail > div.has-release::before { width: 17px; height: 17px; border-color: #aeb6c0; background: #2b3038; }
.bw-timeline-rail > div.is-formed b { color: var(--bw-green); }
.bw-timeline-rail > div.is-formed::before { border-color: var(--bw-green); background: #16241a; }
.bw-timeline-rail > div:not(.has-release)::before { width: 10px; height: 10px; border-color: #585e66; }
/* the hover label only — scoped to the year divs, because the artist rail
   also carries direct span children (.bw-night ticks, .bw-rail-year ends)
   that this opacity:0 was silently swallowing */
.bw-timeline-rail > div span { display: block; max-width: 112px; opacity: 0; transition: opacity .18s, max-width .18s, color .18s; overflow: hidden; color: #8d867d; font-size: 9.5px; white-space: nowrap; text-overflow: ellipsis; }

/* Full-focus states consume the complete room viewport. */
.bw-return, .bw-focus-nav { position: absolute; z-index: 90; top: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.bw-return { left: 24px; }
.bw-focus-nav { right: 24px; display: flex; gap: 6px; }
.bw-focus-nav button { outline: 0; }
.bw-focus-nav button:focus-visible { box-shadow: 0 0 0 1px #98a0a9; }
.bw-focus-nav button.active { color: #dfe4ea; border-color: #98a0a9; background: #17130d; }
.bw-focus-panel {
  position: absolute; z-index: 60; inset: 0; padding: 25px 38px 30px;
  overflow: hidden; opacity: 0; pointer-events: none;
  transform: scale(.72) translateY(80px);
  transition: opacity .42s, transform .92s var(--bw-ease);
}
.bw-focus-panel > header { height: 90px; text-align: center; }
.bw-focus-panel > header small { color: var(--accent); font-size: 10.5px; letter-spacing: .24em; }
.bw-focus-panel > header h1 { margin: 5px 0; color: #e9edf1; font: 400 39px/.9 var(--display-font); letter-spacing: .04em; }
.bw-focus-panel > header p { margin: 8px 0 0; color: #89827a; font-size: 11.5px; letter-spacing: .11em; }
/* The identity section stopped being a .bw-zone when its click was removed,
   and .bw-zone is what this rule hid — so the player's name, record and
   honors stayed lit under every focus panel. The panels have no background of
   their own by design; what makes them readable is the room going dark. */
#band-world:not([data-focus='none']) .bw-meta,
#band-world:not([data-focus='none']) .bw-zone,
#band-world:not([data-focus='none']) .bw-identity,
#band-world:not([data-focus='none']) .bw-timeline { opacity: 0; pointer-events: none; }
#band-world:not([data-focus='none']) .bw-room-bg { transform: scale(1.2); filter: saturate(.3) contrast(1.18) brightness(.34); }
#band-world:not([data-focus='none']) .bw-room-scrim { opacity: .86; }
#band-world:not([data-focus='none']) .bw-return,
#band-world:not([data-focus='none']) .bw-focus-nav { opacity: 1; pointer-events: auto; }
#band-world[data-focus='posters'] .bw-posters-focus,
#band-world[data-focus='members'] .bw-members-focus,
#band-world[data-focus='releases'] .bw-releases-focus,
#band-world[data-focus='connections'] .bw-connections-focus { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); }

/* The board by the door: shared members pinned up, and the thread behind it.
   Sits under the shelf and right of the timeline, the one corner the room
   leaves open at 1440. */
/* the board tracks the shelf above it, or the two stop lining up */
.bw-board { right: 1.1%; bottom: 20px; width: clamp(430px, 26%, 580px); height: 224px; }
.bw-board > header { display: block; text-align: right; }
.bw-board > header b { font-size: 12.5px; }
.bw-board > header span { margin-left: 8px; color: #8b9099; font-size: 10.5px; }
.bw-board-pins {
  position: absolute; left: 0; right: 0; top: 30px; height: 130px;
  display: flex; gap: 8px; align-items: flex-start; justify-content: flex-end;
  overflow: hidden;
}
.bw-pin {
  position: relative; flex: 0 1 92px; min-width: 76px; height: 104px; padding: 9px 5px 6px;
  display: grid; align-content: center; justify-items: center; gap: 3px;
  border: 1px solid #33373d; background: rgb(11 12 11 / .86);
  transform: rotate(calc((var(--pin-index) - 4.5) * .45deg));
  box-shadow: 0 5px 12px rgb(2 3 3 / .6);
}
.bw-pin::before {
  content: ''; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px;
  margin-left: -2.5px; border-radius: 50%; background: #4c525a;
  box-shadow: 0 1px 2px #000;
}
.bw-pin img { width: 100%; max-width: 76px; height: 44px; object-fit: contain; mix-blend-mode: screen; filter: var(--logo-filter); }
.bw-pin b { max-width: 100%; overflow: hidden; color: #e4e8ed; font-size: 12px; line-height: 1.15; text-align: center; }
.bw-pin span { max-width: 100%; overflow: hidden; color: #a09786; font-size: 10px; letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; }
.bw-pin-more { color: #c2c7ce; font-family: var(--nav-font); cursor: pointer; }
.bw-pin-more b { font-size: 26px; color: #c9d0d9; }
.bw-pin { transition: transform .18s var(--bw-ease), border-color .18s, box-shadow .18s; }
.bw-pin:hover, .bw-pin:focus-visible {
  z-index: 4; border-color: #8b939d;
  transform: rotate(0deg) translateY(-6px) scale(1.05);
  box-shadow: 0 14px 24px rgb(0 0 0 / .75);
}
.bw-board > button { right: 0; bottom: 0; }

/* The panel hands its two columns straight back to band.js — the map is the
   same Leaflet instance and the thread the same iframe, only re-parented. Both
   arrive carrying the old page's grid placement, its sticky viewport-height
   map column and its negative gutter margin, none of which mean anything here;
   they are unwound rather than fought with !important. The related list keeps
   floating over the map, which is how it reads on the old page too. */
.bw-connections-focus { display: grid; grid-template-rows: 90px minmax(0, 1fr); }
.bw-connections-body {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 30px;
  min-height: 0; overflow-y: auto; padding: 2px 4px 16px;
}
.bw-connections-body .col { min-width: 0; grid-column: auto; grid-row: auto; padding: 0; margin: 0; }
.bw-connections-body .col-related {
  position: static; height: auto; align-self: stretch;
  display: flex; flex-direction: column;
}
.bw-connections-body .mapwrap { flex: 1; min-height: 420px; }
.bw-connections-body .col-comments { min-width: 0; }
.bw-connections-body .col h2 {
  margin: 0 0 12px;
  color: #8b939d; font: 700 12.5px/1.2 var(--nav-font);
  letter-spacing: .19em; text-transform: uppercase;
}
.bw-connections-body .remark-holder { border: 1px solid #2a2620; background: rgb(9 10 9 / .5); }

.bw-posters-focus { display: grid; grid-template-columns: 1fr 130px; grid-template-rows: 90px 1fr; gap: 6px 20px; }
.bw-posters-focus > header { grid-column: 1 / 3; }
/* The atlas was locked to 12 columns however many nights the band played, so
   a band with twenty shows got twenty slivers, and the single implicit row
   stretched them to the panel's full height — tall, narrow, unreadable. Tiles
   claim a real minimum width now and the column count follows from it, so
   twenty nights lay out as twenty flyers and six hundred still fit. The paper
   keeps a poster's proportion instead of taking whatever the row leaves. */
.bw-poster-atlas {
  /* A multi-column flow in a height-constrained box does not overflow
     downward — it keeps making columns sideways, and overflow-x: hidden threw
     them away. 87 papers rendered and 20 were reachable; scrollWidth was 8691
     against a 1694 client. The columns live in an auto-height child now and
     the scroll belongs to the wrapper. */
  columns: clamp(140px, 10vw, 210px); column-gap: 13px;
  height: auto;
}
.bw-atlas-scroll {
  min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 6px 6px 18px;
}
.bw-poster-atlas.density-high { columns: clamp(104px, 7vw, 150px); column-gap: 9px; }
.bw-poster-atlas.density-high .bw-paper { margin-bottom: 9px; }
.bw-poster-atlas.density-extreme { columns: clamp(68px, 4.8vw, 100px); column-gap: 5px; }
.bw-poster-atlas.density-extreme .bw-paper { margin-bottom: 5px; }
.bw-poster-atlas .bw-paper { margin: 0 0 13px; }
.bw-poster-atlas .bw-paper > div { padding: 4px; }
.bw-poster-atlas .bw-paper b { font-size: 13px; }
.bw-poster-atlas .bw-paper.is-tiny b, .bw-poster-atlas .bw-paper.is-tiny em, .bw-poster-atlas .bw-paper.is-tiny span { font-size: 0; }
.bw-poster-atlas .bw-paper.is-tiny small { font-size: 8px; }

/* Nothing on the wall ever answered the pointer, so a clickable flyer read as
   wallpaper. The paper lifts off the pile, straightens out of its pinned tilt
   and comes forward — the tilt is per-paper, so the hover has to out-specify
   the nth-child rules that set it rather than merely follow them. */
.bw-paper { transition: transform .2s var(--bw-ease), box-shadow .2s, filter .2s; }
.bw-poster-atlas .bw-paper:hover,
.bw-poster-atlas .bw-paper:focus-visible {
  z-index: 6;
  transform: translateY(-7px) scale(1.09) rotate(0deg);
  box-shadow: 0 18px 30px rgb(0 0 0 / .8);
  filter: brightness(1.06) contrast(1.04);
  outline: 1px solid rgb(196 206 218 / .55);
  outline-offset: 2px;
}
/* On the room wall the paper is furniture, not a target — it only glints. */
.bw-paper-wall .bw-paper:hover,
.bw-paper-wall .bw-paper:focus-visible {
  z-index: 6; filter: brightness(1.12);
  box-shadow: 0 10px 20px rgb(0 0 0 / .75);
}
@media (prefers-reduced-motion: reduce) {
  .bw-paper { transition: none; }
  .bw-poster-atlas .bw-paper:hover, .bw-poster-atlas .bw-paper:focus-visible { transform: none; }
}
.bw-posters-focus aside { display: flex; flex-direction: column; padding: 22px 0 0 18px; border-left: 1px solid #383c42; }
.bw-posters-focus aside b { margin-top: 14px; color: #c2c9d2; font: 400 34px var(--display-font); }
.bw-posters-focus aside span { color: #827b72; font-size: 10.5px; letter-spacing: .13em; }

.bw-members-focus > header { height: 82px; }
/* The tile minimums were set against 4px captions. With a legible ramp the
   copy column has to be wider or the role, the tenure and the button all
   clip — the lineup read "OPEN CREDITS & CONI". Wider tiles, fewer per row,
   and the panel is allowed the width the room now has. */
.bw-current-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; max-width: min(1600px, 94%); margin: 0 auto; }
.bw-person { min-width: 0; height: 322px; display: grid; grid-template-columns: 38% 62%; overflow: hidden; background: linear-gradient(135deg, rgb(23 22 19 / .95), rgb(5 6 6 / .98)); border: 1px solid #454a51; box-shadow: 0 15px 25px #000; }
.bw-person[data-aid] { cursor: pointer; }
.bw-person-photo { min-width: 0; height: 100%; display: grid; place-items: center; overflow: hidden; background: #151514; }
.bw-person-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.52) grayscale(.35); }
.bw-person-photo > span { font: 400 44px var(--display-font); color: #7f7566; }
.bw-person-copy { min-width: 0; padding: 15px 12px; overflow: hidden; text-align: left; }
.bw-person-copy small { color: #8c8479; font-size: 10.5px; }
.bw-person-copy h3 { margin: 7px 0 5px; font: 400 28px/.9 var(--display-font); }
.bw-person-copy > b { color: #b3bac3; font-size: 10.5px; letter-spacing: .11em; }
.bw-person-copy p { margin: 12px 0; color: #8d867d; font-size: 11.5px; line-height: 1.45; }
.bw-person-copy .honors { flex-direction: row; flex-wrap: wrap; gap: 5px; }
.bw-person-copy .honor .hl, .bw-person-copy .honor .n { display: none; }
.bw-person-copy button { margin-top: 11px; padding-left: 0; border-width: 1px 0 0; background: transparent; }
.bw-former-label { max-width: min(1600px, 94%); margin: 14px auto 7px; padding-top: 8px; border-top: 1px solid #32363c; }
.bw-former-label b { color: #9f9a92; font: 400 17px var(--display-font); }
.bw-former-label span { margin-left: 8px; color: #666; font-size: 10.5px; }
.bw-former-lineup { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 9px; max-width: min(1600px, 94%); margin: 0 auto; }
.bw-person.is-former { height: 148px; grid-template-columns: 43% 57%; background: linear-gradient(135deg, rgb(70 70 70 / .68), rgb(17 17 17 / .92)); border-color: #555; filter: grayscale(1); }
.bw-person.is-former .bw-person-copy { padding: 8px 7px; }
.bw-person.is-former h3 { margin: 5px 0 3px; font-size: 17px; }
.bw-person.is-former p { margin: 7px 0; font-size: 10px; }

.bw-releases-focus > header { height: 106px; }
.bw-full-shelf { position: relative; height: calc(100% - 106px); max-width: 1320px; margin: 0 auto; perspective: 1200px; }
.bw-full-releases { position: relative; z-index: 4; height: calc(100% - 140px); display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); align-items: end; gap: 12px; padding: 0 26px 25px; overflow: hidden; }
.bw-record.is-full { height: min(440px, 100%); display: grid; grid-template-rows: minmax(150px, 62%) 1fr; background: #0a0a09; border: 1px solid #3f444a; box-shadow: 0 18px 34px rgb(0 0 0 / .62); transform-origin: 50% 100%; }
.bw-record.is-full .bw-vinyl { width: min(190px, 88%); height: auto; aspect-ratio: 1; left: 18%; top: 18px; }
.bw-record.is-full > img, .bw-record.is-full > .bw-cover-missing { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border: 0; border-bottom: 1px solid #3f444a; }
.bw-record.is-full .bw-record-copy { min-width: 0; padding: 12px; overflow: hidden; }
.bw-record.is-full small { color: #9aa2ac; font-size: 12px; }
.bw-record.is-full h3 { margin: 5px 0; font: 400 clamp(15px, 1.35vw, 23px)/.92 var(--display-font); }
.bw-record.is-full b, .bw-record.is-full span { display: block; color: #a88755; font-size: 10px; letter-spacing: .09em; }
.bw-record.is-full span { margin-top: 4px; color: #777; }
.bw-record-open {
  width: max-content; margin-top: 10px !important; padding: 8px 0 0;
  border-top: 1px solid #3c4046; color: #c8ced6 !important;
  font: 700 10.5px var(--nav-font); letter-spacing: .12em;
}
.bw-record:hover .bw-record-open, .bw-record:focus-visible .bw-record-open { color: #f2d59c !important; }
.bw-full-shelf-edge { position: absolute; z-index: 3; left: 15px; right: 15px; bottom: 118px; height: 22px; background: linear-gradient(#7b7872, #333331 48%, #08080a); border-top: 1px solid #9b978e; box-shadow: 0 17px 28px rgb(0 0 0 / .66); }
.bw-full-shelf-base { position: absolute; left: 30px; right: 30px; bottom: 0; height: 120px; background: linear-gradient(#372b1d, #110d09); border: 1px solid #5b4730; box-shadow: inset 0 0 35px #000, 0 25px 35px #000; }

/* A selected record is physically pulled out of the shelf into a complete
   archive view. This stays inside the room instead of becoming a generic UI modal. */
.bw-release-detail {
  position: absolute; z-index: 160; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.is-release-open .bw-release-detail { opacity: 1; pointer-events: auto; }
.bw-release-detail-backdrop {
  position: absolute; inset: 0;
  background: rgb(2 3 3 / .9);
  backdrop-filter: blur(7px) saturate(.45);
}
.bw-release-detail-card {
  position: absolute; inset: 28px 38px 32px;
  display: grid; grid-template-columns: minmax(330px, 39%) minmax(0, 61%);
  overflow: hidden;
  background:
    linear-gradient(110deg, rgb(22 19 15 / .98), rgb(5 6 6 / .99) 46%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgb(175 144 92 / .025) 32px);
  border: 1px solid #796547;
  box-shadow: 0 34px 80px #000, inset 0 0 70px rgb(0 0 0 / .75);
  transform: translateY(34px) scale(.94);
  transition: transform .7s var(--bw-ease);
}
.is-release-open .bw-release-detail-card { transform: translateY(0) scale(1); }
.bw-release-detail-close {
  position: absolute; z-index: 8; top: 16px; right: 18px;
  padding: 8px 10px; border: 1px solid #3c4046; border-radius: 0;
  background: #090a09; color: #c6ccd4; cursor: pointer;
  font: 700 11.5px var(--nav-font); letter-spacing: .14em;
}
.bw-release-object {
  position: relative; min-width: 0;
  display: grid; place-items: center; align-content: center; gap: 18px;
  overflow: hidden; perspective: 1100px;
  background:
    radial-gradient(circle at 46% 45%, rgb(147 119 72 / .2), transparent 48%),
    linear-gradient(90deg, #090807, #1e1912 48%, #080807);
  border-right: 1px solid #564933;
}
.bw-release-object::after {
  content: ''; position: absolute; left: 8%; right: 6%; bottom: 82px; height: 22px;
  background: linear-gradient(#a08660, #392c1e 52%, #090705);
  box-shadow: 0 18px 28px rgb(0 0 0 / .62);
}
.bw-release-object > img {
  position: relative; z-index: 3; width: min(72%, 420px); aspect-ratio: 1; object-fit: cover;
  border: 1px solid #aa8e5e; box-shadow: 22px 30px 38px #000;
  box-shadow: 0 24px 44px rgb(0 0 0 / .7);
}
.bw-release-object > img.is-missing { visibility: hidden; }
.bw-release-disc {
  position: absolute; z-index: 2; width: min(67%, 390px); aspect-ratio: 1;
  left: 34%; top: 19%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #090909 0 8px, #222 9px 10px);
  box-shadow: 22px 30px 38px #000;
}
.bw-release-object > small {
  position: relative; z-index: 4; color: #98a0a9;
  font-size: 11.5px; letter-spacing: .2em;
}
/* A release rarely fills a 1080px column, and top-aligning it left half the
   panel as dead black under the tracklist. Centre the block and cap its
   measure — long records still scroll, short ones sit where the eye lands. */
.bw-release-copy {
  min-width: 0; padding: 46px 42px 26px;
  display: flex; flex-direction: column; justify-content: safe center;
  overflow-y: auto;
}
.bw-release-copy > * { flex: none; max-width: 1080px; width: 100%; }
.bw-release-copy > header { padding-right: 50px; border-bottom: 1px solid #4d4232; }
.bw-release-copy > header > small { color: #8b939d; font-size: 11.5px; letter-spacing: .22em; }
.bw-release-copy h2 {
  max-width: 16ch; margin: 8px 0 5px;
  color: #e9edf1; font: 400 clamp(34px, 4.2vw, 66px)/.84 var(--display-font);
  letter-spacing: .01em;
}
.bw-release-copy > header p { margin: 12px 0 18px; color: #8f877d; font-size: 12px; letter-spacing: .1em; }
.bw-release-copy > header p b { color: #9aa2ac; }
.bw-release-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px;
  margin: 18px 0 0;
}
.bw-release-facts > div { display: grid; grid-template-columns: 90px 1fr; padding: 6px 0; border-bottom: 1px solid #25231f; }
.bw-release-facts dt { color: #706a62; font-size: 10.5px; text-transform: uppercase; }
.bw-release-facts dd { min-width: 0; margin: 0; color: #c7bca9; font-size: 11.5px; }
.bw-release-editions { margin-top: 18px; }
.bw-release-editions h3, .bw-release-tracks h3, .bw-release-people h3 { margin: 0 0 8px; color: #c9a86d; font-size: 11.5px; letter-spacing: .16em; }
.bw-release-editions ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bw-release-editions li { min-width: 150px; padding: 8px; border: 1px solid #363a40; background: #11100d; }
.bw-release-editions li > * { display: block; }
.bw-release-editions li b { color: #ddd2bf; font-size: 11.5px; }
.bw-release-editions li span, .bw-release-editions li small { margin-top: 3px; color: #7d766d; font-size: 10.5px; }
.bw-release-archive { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(180px, .75fr); gap: 28px; margin-top: 22px; }
.bw-release-tracks h3 span { margin-left: 8px; color: #69645d; }
.bw-release-tracks ol { margin: 0; padding: 0; list-style: none; }
.bw-release-tracks li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 7px 0; border-top: 1px solid #292620; }
.bw-release-tracks li small, .bw-release-tracks li span { color: #726c63; font-size: 10.5px; }
.bw-release-tracks li b { color: #c7c0b5; font-size: 11.5px; font-weight: 600; }
.bw-release-tracks > p { color: #6f6961; font-size: 11.5px; }
.bw-release-people { margin-bottom: 18px; }
.bw-release-people > div { display: grid; gap: 2px; padding: 5px 0; border-top: 1px solid #292620; }
.bw-release-people > div[data-aid] { cursor: pointer; }
.bw-release-people > div[data-aid]:hover b { color: #e2c58e; }
.bw-release-people b { color: #bab2a6; font-size: 11.5px; }
.bw-release-people span { color: #6f6961; font-size: 10.5px; }
.bw-release-source {
  display: block; width: max-content; margin-top: 18px; padding-top: 10px;
  border-top: 1px solid #3c4046; color: #d8bd88;
  font-size: 11.5px; letter-spacing: .14em;
}

@media (max-width: 1180px) and (min-width: 861px) {
  .bw-wall { width: 315px; }
  .bw-identity { left: 335px; right: 365px; }
  .bw-rack { width: 335px; }
  .bw-timeline { left: 340px; right: 365px; }
  .bw-logo img { width: 330px; }
  .bw-people-preview { grid-template-columns: repeat(3, 1fr); }
}

/* The legacy document remains the mobile layout until the room gets its own
   touch-first composition. This avoids shipping a desktop miniature. */
@media (max-width: 860px) { #band-world { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  .bw-room-bg, .bw-zone, .bw-focus-panel, .bw-release-detail, .bw-release-detail-card { transition-duration: .01ms !important; }
}

/* The shared button chrome is nowrap, which suits a one-word zone button but
   clipped "OPEN CREDITS & CONNECTIONS" inside a person tile. */
.bw-person button { white-space: normal; line-height: 1.35; }

/* every logo the room draws is a white-on-black mark — screen is what makes it
   sit in the dark instead of on a grey card of its own */
.bw-logo img, .bw-pin img, .bw-join img,
.bw-connections-focus .bw-person-photo img[src*="logo"] { mix-blend-mode: screen; }