html { background: #fff; }

body {
  font-family: Arial, sans-serif;
  margin: 2rem;
  background: #fff;
  color: #2601cb;
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.item {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

.item img {
  width: 100%;
  display: block;
}

.item p {
  max-width: none;
  width: 100%;
  margin: 0.5rem 0 1rem;
}

.grid p {
  font-size: 0.7rem;
  font-weight: bold;
  max-width: none;
  width: 100%;
}

a {
  color: white;
  background-color: #2601cb;
  text-decoration: none;
}

/* visible focus everywhere, in palette */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #ffff00;
  outline-offset: 2px;
}

/* real text for screen readers where the logo carries the title */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.back {
  display: inline-block;
  margin-bottom: 1rem;
}

.home-centered {
  max-width: 700px;
  margin: 0 auto;
}

img {
  width: 100%;
  display: block;
}

h1 {
  text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 35px);
  text-align: center;
  padding-bottom: 1rem;
}

h2 {
  text-transform: uppercase;
  /* font-size: clamp(16px, 60vw, 24px); */
  font-size: clamp(20px, 3vw, 48px);
}

h3 {
  /* padding-top: 1rem; */
}

h4 {
  padding-top: 0;
  margin-top: 0;
  font-size: clamp(15px, 1.5vw, 35px);
}

li {
  max-width: 700px;
  list-style-type: none;
}
ul {
  padding-left: 0;
}

.page-layout {
  /* display: grid; 
   grid-template-columns: minmax(0, 700px) 260px;
  gap: 2rem;
  align-items: start;*/
  display: block;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  body {
    font-size: 0.85rem;
  }

  .page-layout {
    grid-template-columns: 1fr;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.highlight {
  background-color: #ffff00;
  color: #2601cb;
  padding: 0.15em 0.4em;
  font-weight: bold;
  text-decoration: none;
}
a.highlight:hover {
  background-color: #2601cb;
  color: #ffff00;
}

.guys-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 2rem;
  margin: 1rem auto;
  max-width: 700px;
}
.guys-row img {
  width: auto;
  height: 90px;
  /* the guys are grayscale PNGs with no alpha; multiply drops their white boxes */
  mix-blend-mode: multiply;
}
/* hand-placed, not aligned */
.rail-guys img:nth-child(1) { transform: rotate(-6deg); }
.rail-guys img:nth-child(2) { transform: rotate(4deg); }
.rail-guys img:nth-child(3) { transform: rotate(-3deg); }
.rail-guys img:nth-child(4) { transform: rotate(7deg); }
.guy-hero {
  max-width: 260px;
}

.market-break {
  border: none;
  border-top: 2px solid #2601cb;
  margin: 3rem auto;
  max-width: 700px;
}

/* dataset detail pages */
.dpage { max-width: 700px; margin: 0 auto; text-align: left; }
/* arriving from a search result, you should know whose site this is */
.dhome { display: block; background: none; width: max-content; margin: 1.4rem 0 0.9rem; }
.dhome img { width: 168px; max-width: 55vw; height: auto; display: block; }
.dpage .back { margin: 0 0 1rem; }
.dtitle { text-transform: none; font-size: clamp(22px, 3vw, 34px); margin: 1rem 0 1.2rem; }
.dmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 2rem;
  border-top: 1.5px solid #2601cb; border-bottom: 1.5px solid #2601cb; padding: 1rem 0; margin-bottom: 1.8rem; }
.mlabel { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55; margin-bottom: 0.25rem; }
.mval { font-size: 0.85rem; line-height: 1.4; }
.dimg { width: 100%; max-width: 700px; margin: 0 0 1rem; display: block; }
.dimg.guy-hero { max-width: 200px; margin: 0 auto 1rem; }
.ddesc p { max-width: none; font-size: 0.95rem; line-height: 1.55; margin: 0 0 0.9rem; text-align: left; }
/* stands in for an image pulled for privacy, in the same block-character
   language as the redacted oral interview entry */
.dredact { border: 1.5px solid #2601cb; padding: 2.4rem 1rem; margin: 0 0 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.dredact-blocks { font-family: "Courier New", Courier, monospace; font-size: 1.15rem;
  letter-spacing: -0.06em; line-height: 1; }
.dredact-label { font-family: "Courier New", Courier, monospace; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }

.dfine { border-top: 1px dashed #2601cb; margin-top: 1.6rem; padding-top: 1rem; }
.dfine p { max-width: none; font-size: 0.75rem; line-height: 1.5; text-align: left; white-space: pre-wrap; }

/* uniform inventory tiles */
.grid .item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: white;
}
.grid .item img.guy-tile {
  object-fit: contain;
  padding: 12%;
  box-sizing: border-box;
  background: white;
}
/* the grid answers back on hover, in the yellow the site already uses */
.grid .item:hover { background: #ffff00; color: #2601cb; }
.grid .item p {
  min-height: 3.9em;
  margin: 0;
  /* width:100% comes from .grid p; without border-box the padding pushes the
     label wider than its own tile and the text wraps past the edge */
  box-sizing: border-box;
  padding: 0.6rem 0.5rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.35;
  overflow: visible;
  overflow-wrap: break-word;
}

/* vendor index: old-web directory listing */
.vindex { max-width: 760px; margin: 3rem auto 2rem; text-align: left;
  font-family: "Courier New", Courier, monospace; font-size: 0.78rem; }
.vindex h3 { text-align: center; margin-bottom: 1rem; font-family: Arial, sans-serif; }
.vrow { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.22rem 0; }
.vname { white-space: nowrap; font-weight: bold; min-width: 11em; }
.vlead { flex: 1; border-bottom: 1px dotted #2601cb; transform: translateY(-0.28em); min-width: 1.5rem; }
.vrow a { background: none; color: #2601cb; text-decoration: underline; }
.vrow a:hover { background: #ffff00; }
.vnote { opacity: 0.75; }
.vmkt { white-space: nowrap; opacity: 0.6; min-width: 3.2em; text-align: right; }
.vheadrow { border-bottom: 1.5px solid #2601cb; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.68rem; }
.vheadrow .vlead { border-bottom: none; }
/* narrow screens: the three columns cannot fit, and a nowrap vendor name
   overflows its box and paints over the dataset link. Stack instead:
   vendor on its own line, dataset indented under it with the market tag. */
@media (max-width: 600px) {
  .vindex { font-size: 0.72rem; }
  .vrow { display: grid; grid-template-columns: 1fr auto; gap: 0 0.6rem; padding: 0.35rem 0; }
  .vname { grid-column: 1 / -1; white-space: normal; min-width: 0; margin-bottom: 0.1rem; }
  .vname:empty { display: none; }
  .vrow a, .vrow .vnote { grid-column: 1; padding-left: 1.1em; }
  .vmkt { grid-column: 2; min-width: 0; }
  .vlead { display: none; }
  .vheadrow { display: none; }
}

.grid .item { min-width: 0; }
.grid .item p { overflow-wrap: anywhere; }

.anchor-nav a { background: none; color: #2601cb; text-decoration: underline; padding: 0; }
.anchor-nav a:hover { background: #ffff00; }
section { scroll-margin-top: 1.5rem; }
.invtag { max-width: 700px; margin: 0.4rem auto 1rem; }
/* the logo's own "Small Batch:" lettering, set in front of DATA INVENTORY.
   overrides the global img { width:100%; display:block } */
.sb-mark { display: inline-block; width: auto; height: 1.55em;
  vertical-align: -0.34em; margin-right: 0.4em; }
/* view toggle */
.viewtoggle { margin: 0.8rem 0 1.6rem; }
.vt { font-family: "Courier New", Courier, monospace; font-size: 0.8rem; border: 1.5px solid #2601cb;
  background: white; color: #2601cb; padding: 0.3rem 1rem; cursor: pointer; }
.vt + .vt { border-left: none; }
.vt.on { background: #2601cb; color: #ffff00; }
@media (max-width: 700px) { .anchor-nav { position: static; flex-direction: row; gap: 1rem; justify-content: center; margin: 0.8rem 0; } }

.host-note p { max-width: 560px; margin: 0 auto 2rem; font-size: 0.85rem; text-align: center; }
@media (max-width: 900px) { .host-note p { text-align: center; margin: 0 auto 2rem; } }

.credit-line { font-size: 0.72rem; opacity: 0.65; text-align: center; margin: 0 auto 2rem; }

/* open call signup */
.ebx-ask { font-family: inherit; font-size: 0.72rem; line-height: 1.45; text-align: left;
  background: none; border: none; padding: 0; color: #2601cb; text-decoration: underline;
  cursor: pointer; }
.ebx-ask:hover { background: #ffff00; }
.sbdlg { border: 3px double #2601cb; background: #fff; color: #2601cb;
  box-sizing: border-box; max-width: min(30rem, calc(100vw - 2.5rem));
  padding: 1.6rem 1.6rem 1.3rem; font-family: Arial, sans-serif; text-align: left; }
.sbdlg::backdrop { background: rgba(38, 1, 203, 0.25); }
.sbdlg h2 { font-size: 1rem; margin: 0 0 0.7rem; text-transform: uppercase; }
.sbdlg p { max-width: none; font-size: 0.82rem; line-height: 1.5; text-align: left; margin: 0 0 1rem; }
.sbdlg-x { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: none;
  color: #2601cb; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.sbdlg-label { display: block; font-family: "Courier New", Courier, monospace;
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.55;
  margin-bottom: 0.3rem; }
.sbdlg input { width: 100%; box-sizing: border-box; font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem; padding: 0.5rem 0.6rem; border: 1px solid #2601cb; background: #fff;
  color: #2601cb; }
.sbdlg button[type="submit"] { margin-top: 0.8rem; font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem; border: 1.5px solid #2601cb; background: #2601cb; color: #ffff00;
  padding: 0.4rem 1.1rem; cursor: pointer; }
.sbdlg button[type="submit"]:hover { background: #ffff00; color: #2601cb; }
.sbdlg-msg { font-family: "Courier New", Courier, monospace; font-size: 0.72rem;
  margin: 0.8rem 0 0 !important; }




/* homepage headings: real h1/h2/h3 order, sized like the old h4s */
body.home h2, body.home h3 {
  font-size: clamp(15px, 1.5vw, 35px);
  margin: 0 0 1rem;
  padding-top: 0;
  text-transform: uppercase;
}

/* the market board: one moving element, the produce ticker */
.ticker { border-top: 1.5px solid #2601cb; border-bottom: 1.5px solid #2601cb;
  overflow: hidden; margin: 0 0 1.8rem; padding: 0.32rem 0; }
/* pinned across the top of the page: no top rule, it sits on the viewport edge */
.ticker-top { border-top: none; margin: 0; flex: 0 0 auto; }
.ticker-track { display: flex; width: max-content; animation: sbroll 70s linear infinite; }
.ticker-track span { font-family: "Courier New", Courier, monospace; font-size: 0.72rem;
  letter-spacing: 0.04em; white-space: nowrap; padding-right: 1.6rem; }
@keyframes sbroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* seams: counts and a last-watered line */
.stamp { font-family: "Courier New", Courier, monospace; font-size: 0.68rem;
  letter-spacing: 0.04em; opacity: 0.65; margin: 0.2rem auto 1.2rem; }

/* split: fixed left third, scrolling right two-thirds, under the top banner */
body.home { margin: 0; overflow: hidden; display: flex; flex-direction: column; height: 100vh; }
.split-layout { display: grid; grid-template-columns: minmax(320px, 1.2fr) 2.3fr;
  flex: 1 1 auto; min-height: 0; }
.rail { height: 100%; overflow-y: auto; display: flex; flex-direction: column;
  align-items: center; padding: 2rem 1.6rem 1.2rem; box-sizing: border-box;
  background: #fff; }
/* top-aligned so the logo sits high; the slack falls above the events box */
.rail-main { margin: 0; display: flex; flex-direction: column; align-items: center; }
.rail-logo { width: 100%; max-width: 560px; margin-bottom: 1.9rem; }
/* the guys and the text scale with the page, like the logo does */
.rail-guys { gap: clamp(0.6rem, 1.1vw, 1.4rem); margin: 0 0 1.4rem; }
.rail-guys img { height: clamp(38px, 3.4vw, 68px); }
.rail-text { max-width: 100%; }
.rail-text p { max-width: none; margin: 0; text-align: center; text-wrap: balance; }

/* the voice: the market describing itself */
.rail-text .rail-desc { font-size: clamp(0.8rem, 1vw, 1.05rem); line-height: 1.6; margin-bottom: 1.2rem; }

/* the stock lists: what is on the table, in the machine voice */
.stock { font-family: "Courier New", Courier, monospace; letter-spacing: 0.01em;
  border-top: 1px solid #2601cb; border-bottom: 1px solid #2601cb;
  text-wrap: balance; }
.rail-text .stock { font-size: clamp(0.66rem, 0.82vw, 0.86rem); line-height: 1.85;
  padding: 0.8rem 0.15rem; margin: 0; }
.stamp.stamp-wide { max-width: 640px; text-wrap: balance; line-height: 1.9; }
.events-box { margin-top: auto; width: 100%; max-width: 100%; border: 1px solid #2601cb;
  padding: 0.8rem 1rem; box-sizing: border-box; text-align: left; }

.events-box h2 { margin: 0 0 0.5rem; font-size: 0.85rem; text-align: left; }
.events-box p a { background: none; color: #2601cb; text-decoration: underline; }
.events-box p a:hover { background: #ffff00; }
.events-box .ebx-label { font-family: "Courier New", Courier, monospace; font-size: 0.62rem;
  letter-spacing: 0.1em; opacity: 0.55; margin: 0.6rem 0 0.2rem; }
.events-box p { max-width: none; font-size: 0.72rem; line-height: 1.45; margin: 0 0 0.3rem; text-align: left; }
.events-box ul { margin: 0; }
.events-box li { font-size: 0.72rem; line-height: 1.5; text-align: left; max-width: none; }

/* Desktop only: the events box grows into the white space under the stock
   list instead of hugging the bottom, and its type scales with it.
   Must sit AFTER the .events-box detail rules above, which would otherwise
   win on source order. The h2 needs `body.home` in the selector to outrank
   `body.home h2`, which was quietly sizing this heading all along. */
@media (min-width: 901px) and (min-height: 820px) {
  body.home .events-box { margin-top: 1.4rem; flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(0.8rem, 1.5vh, 1.7rem) clamp(1rem, 1.7vh, 2rem); }
  body.home .events-box h2 { font-size: clamp(0.85rem, 1.85vh, 1.5rem); margin: 0 0 0.7rem; }
  body.home .events-box .ebx-label { font-size: clamp(0.62rem, 1.05vh, 0.9rem);
    margin: clamp(0.6rem, 1.3vh, 1.1rem) 0 0.35rem; }
  body.home .events-box p,
  body.home .events-box li,
  body.home .events-box .ebx-ask { font-size: clamp(0.72rem, 1.35vh, 1.1rem); line-height: 1.6; }
  body.home .events-box li { line-height: 1.7; }
}
.content-col { min-width: 0; height: 100%; overflow-y: auto; padding: 2rem 1.8rem 3rem;
  box-sizing: border-box; border-left: 1.5px solid #2601cb; }
/* smaller tiles: FEATURED fits one row, so WINTER 2024 is visible on landing */
.content-col .grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.8rem; }
/* the six featured always span the full column, however wide it gets.
   step the column count down on narrow screens so the tiles stay square
   instead of becoming 48px slivers with one letter per line. */
.content-col .grid-featured { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .content-col .grid-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .content-col .grid-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.content-col .grid .item p { font-size: 0.66rem; line-height: 1.3; min-height: 3.4em;
  padding: 0.45rem 0.35rem 0.6rem; }
/* dataset name at the top of the blue box, artist always the same distance
   off the bottom: the item is a flex column so the label fills the leftover
   height, and space-between pushes the two apart.
   align-items must be stretch, not center: as flex children the spans would
   otherwise take their max-content width and overflow the tile horizontally. */
.grid .item { display: flex; flex-direction: column; }
.grid .item img { flex: 0 0 auto; }
.grid .item p { flex: 1 1 auto; flex-direction: column; align-items: stretch;
  justify-content: space-between; }
.grid .item .ti,
.grid .item .vn { display: block; width: 100%; min-width: 0; overflow-wrap: break-word; }
/* artist names in the blue tiles take the machine voice, like the stock lists */
.grid .item .vn { font-family: "Courier New", Courier, monospace;
  font-size: 0.9em; opacity: 0.75; margin-top: 0.35em; }
.content-col .market-break { margin: 1.8rem auto; }
.content-col .vindex { font-size: 0.74rem; }
@media (max-width: 900px) {
  body.home { overflow: auto; margin: 2rem; display: block; height: auto; }
  .ticker-top { margin: -2rem -2rem 1.6rem; }
  .split-layout { grid-template-columns: 1fr; height: auto; }
  .rail { height: auto; overflow: visible; padding: 0 0 1rem; }
  .rail-main { margin: 0; }
  .events-box { margin: 1rem auto 0; }
  .content-col { height: auto; overflow: visible; border-left: none; padding: 0; }
}