/* The pages for each artist, neighborhood, genre and borough (pipeline/lib/pages.mjs), after
   styles.css: the record shop's insert, sleeve white under the same sign, and the same shop as the
   map's panel and card (the reference is mockups/looks/crates on the branch claude/looks). A person is
   the square record sleeve the map draws (styles.css, .sleeve); a neighborhood or a borough opens on its
   divider card, the borough on its tab; boxes are ink-edged with a hard shadow, their corners rounded a
   little, as the panel's are; and buttons are round-ended stickers, as the card's are. */

.sheet { max-width: 760px; margin: 0 auto; padding: calc(56px + 34px) 20px 40px; }
.sheet h1 { --most: 64px; margin: 0 0 12px; font-family: var(--display); font-weight: 900; font-size: var(--most); line-height: 0.92; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); overflow-wrap: break-word; }
.sheet h2 { margin: 0 0 10px; font-family: var(--display); font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
/* A neighborhood in a list of them looks the same at either level (grouped() in pages.mjs): the label
   of its stack on the map, a divider card's tab, round on top, the name lettered on it and the count on
   a dot in the borough's color (styles.css, .stack-tag). */
.sheet .hood-name { margin: 26px 0 12px; font-family: var(--display); font-weight: 900; font-size: 21px; line-height: 1.3; letter-spacing: 0.02em; text-transform: uppercase; }
.sheet .hood-name { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 3px 4px 2px 12px; border: 2px solid var(--ink); border-radius: 10px 10px 3px 3px; background: var(--sleeve); box-shadow: 3px 3px 0 var(--ink); }
.sheet .hood-name a { text-decoration: none; }
.sheet .hood-name small { min-width: 26px; padding: 1px 7px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--hue, var(--gold)); color: var(--on-hue, var(--ink)); font-size: 13px; font-weight: 800; line-height: 18px; text-align: center; }
/* At the top of its box, as on a page of one borough, or under the box's tab, it sits on the box's own padding. */
.sheet .hood-name:first-child, .sheet .tab + .hood-name { margin-top: 0; }
.sheet li small { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); }
.sheet .hood-name small { font-family: var(--body); letter-spacing: 0; }
.sheet p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.sheet a { color: inherit; text-underline-offset: 2px; }
.sheet section, .intro { margin: 0 0 24px; padding: 16px 18px 6px; background: var(--sleeve); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--ink); }
/* A neighborhood or a borough opens on its divider card, as an opened neighborhood heads its crate in the
   map's panel: in its borough's bin color, ink on all five. */
.intro[class*="b-"] { background: var(--hue); color: var(--on-hue); }
.intro[class*="b-"] h1 { color: inherit; }
/* A divider card's tab, round on top, with what the card is filed under in marker capitals: a
   neighborhood's borough, a genre's "Genres", a letter of all the artists. It stands on the card's top
   edge at its left, in the card's own color, or on a white card of a borough in the borough's. */
.sheet .tabbed { position: relative; margin-top: 46px; border-top-left-radius: 0; }
.sheet .tab {
  position: absolute; left: -3px; bottom: 100%; margin: 0; padding: 6px 16px 3px;
  background: inherit; border: 3px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0;
  font-family: var(--display); font-weight: 900; font-size: 17px; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase;
  /* The longest, "Manhattan · Stage & Screen", fits a 280 px phone's card on one line; a longer one wraps rather than run off it. */
  max-width: calc(100% + 6px);
}
.sheet .tab a { text-decoration: none; }
section.tabbed[class*="b-"] > .tab { background: var(--hue); color: var(--on-hue); }
/* A neighborhood's emblem, on a round white sticker slapped on askew, as on its divider card in the panel
   (styles.css, .place-title): on the borough's color its fill, the same color, would vanish. The name
   beside it is lettered to fit the room the sticker leaves. */
.intro .emblem-sticker {
  float: right; width: 120px; height: 120px; margin: -2px -2px 10px 16px; padding: 16px; overflow: hidden;
  background: var(--sleeve); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--ink); transform: rotate(-6deg);
}
.intro { container-type: inline-size; }
.with-emblem { --beside: 140px; }

/* A name is lettered as large as its longest word allows, as on the card (js/format.js, longestWord):
   it breaks between words, never inside one. A page cannot set a size in its own markup (its policy
   refuses inline styles), so the longest word is an attribute, and here a variable. Up to 6 letters
   never needs a smaller size; a word longer than 20 is written as 20 (LONGEST in pipeline/lib/pages.mjs)
   and breaks. */
[data-longest="7"] { --longest: 7; } [data-longest="8"] { --longest: 8; } [data-longest="9"] { --longest: 9; }
[data-longest="10"] { --longest: 10; } [data-longest="11"] { --longest: 11; } [data-longest="12"] { --longest: 12; }
[data-longest="13"] { --longest: 13; } [data-longest="14"] { --longest: 14; } [data-longest="15"] { --longest: 15; }
[data-longest="16"] { --longest: 16; } [data-longest="17"] { --longest: 17; } [data-longest="18"] { --longest: 18; }
[data-longest="19"] { --longest: 19; } [data-longest="20"] { --longest: 20; }
/* The fitted size only where the browser has container units: without them, the plain size above. */
@supports (width: 1cqi) {
  .sheet h1[data-longest] { font-size: max(24px, min(var(--most), (100cqi - var(--beside, 0px)) / var(--longest, 6) / 0.54)); }
}

/* Genres, as price labels; a way somewhere, a round-ended hype sticker, as the card's buttons are. */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { padding: 4px 7px; border: 2px solid var(--ink); border-radius: 3px; background: var(--sleeve); color: var(--ink) !important; font-size: 11px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
/* A genre in a borough is priced in the borough's bin color, as the shop codes its bins. */
.tag[class*="b-"] { background: var(--hue); color: var(--on-hue) !important; }
.links { display: flex; flex-wrap: wrap; gap: 8px; }
.links .chip { display: inline-block; padding: 7px 12px; border-radius: 999px; color: var(--ink); text-decoration: none; }
/* A chip keeps to one line on the map. This one carries a name, and a long one ran off a phone's screen. */
.go {
  display: inline-block; margin-top: 4px; padding: 9px 16px; border: 2px solid var(--ink); border-radius: 999px; background: var(--red); box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink); font-size: 12.5px; font-weight: 750; letter-spacing: 0.05em; line-height: 1.25; text-decoration: none; text-transform: uppercase;
}
/* On a divider card in a bin color, Manhattan's red among them, it is the white of a sleeve. */
.intro[class*="b-"] .go { background: var(--sleeve); }
/* Beside it, where a neighborhood has two artists or more to play, "Put on" it (pipeline/lib/pages.mjs): the
   map's own black sticker with its record (styles.css), as large as the way to the map. */
.goes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.goes .go { margin-top: 0; }
.goes .put-on { margin-top: 0; padding: 5px 16px 5px 6px; color: var(--sleeve); font-size: 12.5px; letter-spacing: 0.05em; line-height: 1.25; box-shadow: 3px 3px 0 var(--ink); }
.goes .put-on .record { width: 26px; height: 26px; }

/* A photo that fails to load (a filter, a blocked host, a Commons rate limit): the map's script takes it
   away and the plain sleeve under it shows (js/sleeve.js). A page runs no script for that, so where the
   browser draws a broken picture (Chrome; Safari is unchecked), the plain sleeve covers it, with the
   initials on its label: the layers of styles.css's .sleeve-photo, as the photo itself is clear. While
   it loads, and in a browser that draws nothing over a broken one, the plain sleeve under it shows. */
.sheet .sleeve-photo img::after {
  content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.45) 0 12%, transparent 12.5%),
    radial-gradient(circle closest-side, var(--hue, var(--red)) 0 62%, #0B0908 63% 67%, #221D19 68% 85%, #0B0908 86% 89%, transparent 90%),
    #3A332D;
  font-family: var(--display); font-weight: 900; font-size: calc(var(--side, 46px) * 0.3); line-height: 1; letter-spacing: 0.02em; color: var(--ink);
}

/* An artist: their record sleeve, as on their card (styles.css, .card-head), with the record half out of
   it and pulled out turning as the page opens, and their name beside it like a title on a sleeve. The
   record reaches 30% of the sleeve past its side, which the sleeve's margin leaves room for. */
.lead { display: flex; gap: 26px; align-items: flex-start; margin: 0 0 30px; }
.portrait { flex: none; width: 250px; margin: 0 76px 0 0; }
.portrait .sleeve { width: 100%; height: auto; aspect-ratio: 1; --side: 250px; --peek: 30%; }
.portrait .sleeve::before { animation: pull 0.9s cubic-bezier(.2, .8, .25, 1) both; }
.portrait .sleeve-photo { border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }
/* A sleeve that has been played: a worn corner, the record's ring rubbed into the cover, and the
   shrink-wrap's glare across it. */
.portrait .sleeve-photo::after {
  background:
    linear-gradient(135deg, rgba(255, 253, 248, 0.55) 0 9px, transparent 9.5px),
    linear-gradient(118deg, transparent 0 34%, rgba(255, 253, 248, 0.16) 40%, rgba(255, 253, 248, 0.05) 47%, transparent 52%),
    radial-gradient(circle closest-side, transparent 0 84%, rgba(255, 253, 248, 0.3) 87%, rgba(255, 253, 248, 0.1) 91%, transparent 94%);
  mix-blend-mode: screen;
}
.portrait figcaption { margin-top: 12px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.portrait figcaption a { color: inherit; }
/* The name is lettered as large as its longest word allows in this column (data-longest, above). The
   column is stretched across: a container's width does not come from what is in it, and in the one
   column of a phone it was squeezed to nothing, a letter to a line. */
.lead-words { flex: 1; align-self: stretch; min-width: 0; container-type: inline-size; }
.about { font-size: 17px !important; font-weight: 750; }
/* The staff pick, as on the card (styles.css, .card-tie): how they are tied to the city, handwritten on
   a gold card stuck on askew, with the page it was read from. A little larger on a page. */
.sheet .card-tie { margin: 4px 0 18px; font-size: 13px; line-height: 1.2; }
.sheet .card-tie span:not(.card-tie-star) { font-size: 22px; }
.source { font-size: 13px !important; }
/* The strip at the foot of the card (styles.css, .card-strip, js/social.js), under the name: Share at one
   end, the artist's own accounts at the other, on the card's rule. */
.page-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 0; padding-top: 14px; border-top: 3px solid var(--ink); }
.page-strip .socials { margin-left: auto; }
/* Where a script runs, the strip and its Share keep their room, unseen, until js/share.js shows them: for
   an artist with no account the strip opened under the name once the script had run, and the rest of the
   page moved down. Without a script they take none, as Share would do nothing. (styles.css hides [hidden]
   with !important.) */
@media (scripting: enabled) {
  .page-strip[hidden] { display: flex !important; visibility: hidden; }
  .page-strip .share-sticker[hidden] { display: inline-flex !important; visibility: hidden; }
}

/* People: a wall of sleeves, as an opened neighborhood's people stand in its crate on the map (styles.css,
   .popup .crate): side by side, each with its name under it and what they do. Each record stands in its
   sleeve; under the pointer a sleeve lifts and its record rises out of the top, and the keyboard's focus
   lifts it too, inside an ink ring, its record left in. A name is never cut short nor broken inside a
   word: one whose longest word is too long for the sleeve's width is lettered smaller, by that word, as
   in the crate, down to 10 px. What they do is lettered by its longest word too, down to 9.5 px: in a
   column of 78 px one word of it (instrumentalist, Percussionist) ran across the gutter to the next. */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.sheet section .people { margin-bottom: 16px; }
.people li { min-width: 0; }
.people a { display: flex; flex-direction: column; gap: 8px; height: 100%; color: inherit; text-decoration: none; transition: transform 0.15s; container-type: inline-size; }
.people .sleeve { width: 100%; height: auto; aspect-ratio: 1; --side: 140px; --peek: -5%; }
.people .sleeve-photo { box-shadow: 3px 3px 0 var(--ink); }
.people strong { display: block; font-size: 14px; font-weight: 750; line-height: 1.2; overflow-wrap: break-word; }
.people small { display: block; margin-top: -5px; color: var(--ink-soft); font-size: 12px; line-height: 1.3; }
@supports (width: 1cqi) {
  .people strong { font-size: max(10px, min(14px, 100cqi / var(--longest, 6) / 0.63)); }
  .people small[data-longest] { font-size: max(9.5px, min(12px, 100cqi / var(--longest, 6) / 0.52)); }
}
.people a:focus-visible { outline-offset: 4px; transform: translateY(-3px); }
/* The lists of a genre or a borough are long, grouped by neighborhood: their sleeves are smaller. */
.borough .people { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 20px 12px; }
.borough .people .sleeve { --side: 112px; }
.names { columns: 2 220px; margin: 0 0 12px; padding: 0; list-style: none; }
.names li { break-inside: avoid; padding: 3px 0; font-size: 15px; }
.hoods { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.genres { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.genres li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 14px; background: var(--sleeve); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink); }
.genre { margin-right: auto; font-family: var(--display); font-weight: 900; font-size: 28px; letter-spacing: 0.02em; text-decoration: none; text-transform: uppercase; }
/* A letter's link lands with its tab below the bar, not under it: the page's scroll padding clears the
   bar (styles.css), and this the tab over the letter's card. */
.letter { scroll-margin-top: 44px; }

.sheet-foot { max-width: 760px; margin: 0 auto; padding: 0 20px 48px; font-size: 13px; color: var(--ink-soft); }
.sheet-foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.sheet-foot a { color: var(--ink); text-underline-offset: 2px; }

@media (hover: hover) {
  /* Its record rises some 20 px out of the top, as in the crate (styles.css), and the wall keeps that
     room above its first row. A quarter of a record this size, as the crate's rises, came 34 px out:
     into the heading, the tab or the card over the wall, and the names of the row above. */
  .people { padding-top: 18px; }
  .people a:hover { transform: translateY(-3px); }
  .people a:hover .sleeve::before { transform: translateY(-18%); }
  .people a:focus-visible:hover .sleeve::before { transform: none; }
  .tag:hover, .links .chip:hover { background: var(--gold); }
  .tag[class*="b-"]:hover { background: var(--sleeve); }
  .sheet .hood-name:has(a:hover) { background: var(--gold); }
  .go:hover, .intro[class*="b-"] .go:hover { background: var(--ink); color: var(--sleeve); }
  /* Gold, as on the map; on Brooklyn's gold, white. */
  .goes .put-on:hover { background: var(--gold); color: var(--ink); }
  .intro.b-brooklyn .goes .put-on:hover { background: var(--sleeve); }
  /* Under the pointer the sleeve's record slides a little further out, turning, as on the map. */
  .portrait .sleeve:hover::before { transform: translateX(8%) rotate(50deg); }
  .sheet-foot a:hover, .names a:hover { color: var(--red-text); }
}

@media (max-width: 720px) {
  .sheet { padding: calc(50px + 24px) 14px 32px; }
  .sheet h1 { --most: 48px; }
  .lead { flex-direction: column; gap: 18px; }
  /* The sleeve over the name, its record still half out, inside the screen. */
  .portrait { width: min(220px, 58vw); margin: 0; }
  .portrait .sleeve { --side: 200px; }
  .sheet section, .intro { padding: 14px 14px 4px; }
  /* Beside a sticker as large as a laptop's, a long name such as Williamsburg had 120 px of a 320 px
     phone: the sticker is slapped on the card's top corner instead, beside its tab, and the name has
     the card's whole width. */
  .sheet .with-emblem { --beside: 0px; margin-top: 64px; }
  .intro .emblem-sticker { position: absolute; top: -58px; right: 14px; width: 76px; height: 76px; margin: 0; padding: 10px; float: none; box-shadow: 3px 3px 0 var(--ink); }
  /* Three to a row on a phone, and more on a wider one. */
  .people, .borough .people { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 20px 12px; }
  .people .sleeve, .borough .people .sleeve { --side: 100px; }
  /* Under 360 px still three, as in the crate, inside a box from 314 px: there three columns of 88 px did
     not fit, and the wall was two sleeves a row, larger than on a wider phone. The names are lettered no
     larger than the crate's, so that the widest (Muhammad, MISSPSTAR) stay whole in a column of 76 px,
     and what they do no larger than the crate's 11 px, where Countertenor ran over at 12. */
  @media (max-width: 359px) {
    .people, .borough .people { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .people .sleeve, .borough .people .sleeve { --side: 80px; }
    @supports (width: 1cqi) {
      .people strong { font-size: max(10px, min(12.5px, 100cqi / var(--longest, 6) / 0.63)); }
      .people small[data-longest] { font-size: max(9.5px, min(11px, 100cqi / var(--longest, 6) / 0.52)); }
    }
  }
  .sheet-foot { padding: 0 14px 40px; }
}

/* Music spots (pipeline/lib/pages.mjs). At the front, a neighborhood's under its divider card and an artist's
   in their Places, as the map lists them in a crate's front and a card's Places row: small signs (placeSigns),
   each leading to the spot in full. In full after what the page is about, a neighborhood's people or an
   artist's Listen and read, as the map opens a spot only when it is pressed (spotItem): as it opens in the
   map's panel (styles.css, .spot-sign, js/spotpanel.js), its kind in red handwriting, its street sign with
   the glyph on its round white sticker, its note in full, the pages it cites, Watch for footage, and its
   people. One under another, the track list's dashed rule between them. A sign is as long as its name, as
   a street's is, not the box's width. */
.spot-list { margin: 0; padding: 0; list-style: none; }
.spot { min-width: 0; padding: 0 0 18px; }
.spot + .spot { padding-top: 18px; border-top: 1.5px dashed rgba(21, 17, 14, 0.3); }
.sheet .spot .kind { margin: 0 0 2px; font-family: var(--marker); font-size: 18px; line-height: 1.1; color: var(--red-text); }
.sheet .spot-sign { width: fit-content; max-width: calc(100% - 24px); margin: 6px 0 16px 24px; }
.sheet .spot-sign h3 { margin: 0; font-family: var(--display); font-weight: 900; font-size: 30px; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; overflow-wrap: break-word; }
/* A sign fitted to its name has no width of its own to letter the name by, as the panel's has: the name is
   lettered by the box it stands in, less the sign's margin, sticker and edges. */
.spots { container-type: inline-size; }
.sheet .spot-sign .sign-words { flex: 0 1 auto; container-type: normal; }
@supports (width: 1cqi) {
  .sheet .spot-sign h3 { font-size: max(14px, min(30px, (100cqi - 84px) / var(--longest, 6) / 0.52)); }
}
.sheet .spot-note { margin-bottom: 10px; }
.sheet .spot-sources { margin: 0 0 4px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
/* The panel keeps each source on one line; at a page's size "NYC Landmarks Preservation Commission" is wider
   than a 320 px phone's box, and wraps between its words, its ↗ kept with the last. */
.sheet .spot-sources a { white-space: normal; }
.sheet .spot-watching { margin: 0 0 4px; }
.spot-watching .card-link { margin-top: 8px; }
/* Its people, as the panel's lists draw a person: their sleeve, small, its record peeking out toward their
   name beside it. */
.spot-people { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 14px 0 0; padding: 0; list-style: none; }
.spot-people li { min-width: 0; max-width: 100%; }
.spot-people a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.spot-people .sleeve { flex: none; width: 40px; height: 40px; --side: 40px; --peek: 14%; }
.spot-people strong { font-size: 14px; font-weight: 750; line-height: 1.2; overflow-wrap: break-word; }
.spot-people a:focus-visible { outline-offset: 4px; }

/* The small signs (styles.css, .place-sign), a little larger on a page, with room between them for each
   sticker, and a long name wrapping rather than losing its end, as in a card's narrow column. A spot's
   leads to it in full; a school's, development's or street's tag leads nowhere, and lights under no pointer.
   A neighborhood's stand under its divider card, the track list's dashed rule between them and its people,
   as at the front of the crate. */
.sheet .crate-signs { margin: 0 0 24px; padding: 2px 0 20px; }
.sheet .place-signs { gap: 12px 20px; padding: 4px 0 4px 13px; }
.sheet .place-sign { height: auto; min-height: 30px; padding: 5px 10px 4px 25px; font-size: 14px; line-height: 1.05; text-align: left; text-decoration: none; white-space: normal; }
.sheet .place-sign .sign-text { overflow: visible; overflow-wrap: break-word; min-width: 0; }
.sheet .place-sign .sign-sticker { left: -13px; width: 32px; height: 32px; margin-top: -16px; }
.sheet .place-sign .sign-sticker .emblem-holder { width: 22px; height: 22px; }
.sheet .place-sign.other { gap: 6px; padding: 5px 9px 4px 8px; margin-left: -13px; font-size: 11px; line-height: 1.2; cursor: default; }
/* "+N", its round-ended sticker: pressed, it unfolds the rest of the row where it stood and goes, as on the
   map. It is a <details>, and the rest are the row's own items after it, shown while it is open. It goes from
   sight only, keeping the keyboard's place, and only once the keyboard has left it: taken from sight with the
   focus on it, the focus was on nothing to be seen, and Enter again folded the row away unseen. Shift+Tab
   brings it back in sight, to fold the row. Where the browser cannot tell that (:has), the rest are all
   shown and "+N" is not. */
.sheet .place-sign.more { padding: 0 12px; margin-left: -13px; font-size: 15px; list-style: none; }
.place-sign.more::-webkit-details-marker { display: none; }
.place-signs > .folded { display: none; }
.place-signs:has(> .more-places > details[open]) > .folded { display: flex; }
.place-signs:has(> .more-places > details[open]) > .more-places:not(:has(summary:focus-visible)) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@supports not selector(:has(*)) {
  .place-signs > .folded { display: flex; }
  .place-signs > .more-places { display: none; }
}

@media (hover: hover) {
  .spot-people a:hover strong { color: var(--red-text); }
  .spot-people a:hover .sleeve::before { transform: translateX(14%) rotate(30deg); }
  .sheet .place-sign.other:hover { background: var(--sleeve); }
}
@media (max-width: 720px) {
  .sheet .spot .kind { font-size: 16px; }
  .sheet .spot-sign { max-width: calc(100% - 20px); margin: 4px 0 14px 20px; }
  .sheet .spot-sign h3 { font-size: 26px; }
  @supports (width: 1cqi) { .sheet .spot-sign h3 { font-size: max(13px, min(26px, (100cqi - 70px) / var(--longest, 6) / 0.52)); } }
  .spot-people { gap: 10px 16px; }
}
@media (max-width: 359px) {
  .sheet .spot-sign { max-width: calc(100% - 16px); margin-left: 16px; }
  .sheet .spot-sign h3 { font-size: 19px; }
  @supports (width: 1cqi) { .sheet .spot-sign h3 { font-size: max(12px, min(19px, (100cqi - 60px) / var(--longest, 6) / 0.52)); } }
}

/* The month's sponsor, when there is one (pipeline/lib/sponsor.mjs): a strip apart from the
   artists, labelled, in the plainest of the site's colors so it never reads as an artist's. */
.sponsor { max-width: 760px; margin: 0 auto 24px; padding: 0 20px; }
.sponsor p:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; padding: 12px 16px; background: var(--sleeve); border: 3px dashed var(--ink); font-size: 15px; }
.sponsor-label { padding: 3px 7px; background: var(--ink); color: var(--sleeve); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.sponsor a { color: var(--ink); font-weight: 700; text-underline-offset: 2px; }
.sponsor-note { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 720px) { .sponsor { padding: 0 14px; } }