/* Who's visiting (/traffic/who/) and each bot's own page (/traffic/who/<kind>/), since 2026-10-31 (the artist: clicking
   a bot opens its mark large with its description, a page each instead of one long page). On the lime / pink animated
   background (/js/luva-bg.js): no black boxes, black text, lime bands with hard black drops for titles, longer text on
   blurred glass, lime buttons */
html { background: #FBAED2; scroll-behavior: smooth; }
body { font-family: "Courier New", Courier, monospace; font-size: 14px; line-height: 1.6; color: #000; background: transparent; margin: 0; padding: 12px 14px; }
a { color: #000; }
a:hover { background: rgb(183,255,0); color: #000; }
.top { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.back { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; color: #000; background: rgb(183,255,0); border: 2px solid #FBAED2; box-shadow: 3px 3px 0 #FBAED2; }
.back:hover, .back:focus-visible { background: #FBAED2; color: #000; outline: none; }
h1 { display: table; font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: clamp(28px, 5vw, 48px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.1; color: #000; background: rgb(183,255,0); padding: 6px 16px 4px; box-shadow: 5px 5px 0 #000; margin: 0 0 16px; }
.subtitle { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 24px; }
.glass { background: rgba(255,255,255,0.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sig { display: inline-block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #000; background: rgb(183,255,0); border: 2px solid #000; padding: 3px 8px; margin: 0 0 12px; }
.text p { margin: 0 0 10px; }
.text p:last-child { margin-bottom: 0; }
.fact b, .scans b { color: #000; }
.scans { margin: 0 0 10px; padding-left: 1.2em; }
.scans li { margin: 0 0 4px; }
/* Under each collection: why these programs visit at all */
.why { max-width: 800px; margin: 0 0 22px; padding: 12px 16px; background: rgb(183,255,0); box-shadow: 4px 4px 0 #000; }
.why b { font-family: Impact, "Arial Narrow", Arial, sans-serif; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }
/* A collection's name */
.group { display: inline-block; font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 16px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #000; background: #c4a0ff; border: 2px solid #9970e0; padding: 5px 12px; margin: 36px 0 18px; scroll-margin-top: 20px; }

/* A bot's page: its mark as big as the screen allows, the artwork being the point (2026-10-31, the artist); beside its
   name and description on a computer, above them on a phone */
.collection { display: inline-block; font-family: Impact, "Arial Narrow", Arial, sans-serif; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #000; background: #c4a0ff; border: 2px solid #9970e0; padding: 3px 10px; margin: 0 0 14px; text-decoration: none; }
a.collection:hover, a.collection:focus-visible { background: rgb(183,255,0); outline: none; }
.bot { max-width: 1000px; margin: 0 0 28px; }
.mark { margin: 0 0 20px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px; box-sizing: border-box; }
.mark img { display: block; max-width: 100%; height: auto; max-height: 320px; }
/* A kind whose mark isn't painted yet: the head's grey stand-in, labelled (who.js keeps this in step with marks.json) */
.mark.waiting img { filter: grayscale(1); }
.placeholder { display: none; margin: 16px 0 0; padding: 3px 10px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; color: #000; background: rgb(183,255,0); border: 2px solid #000; text-align: center; }
.mark.waiting .placeholder { display: block; }
.about .text { padding: 14px 16px; }
.pager { max-width: 1000px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 0 24px; }
.pager a { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; color: #000; background: rgb(183,255,0); border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.pager a:hover, .pager a:focus-visible { background: #FBAED2; outline: none; }
.pager .next { margin-left: auto; }

/* The index: each collection's bots as cards with their marks (drawn from the head's sheet, ../marks/marks.json) */
.intro { max-width: 800px; margin: 0 0 8px; padding: 14px 16px; }
.cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.card { flex: 0 0 120px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; padding: 10px 6px 8px; text-align: center; text-decoration: none; color: #000; line-height: 1.25; font-size: 12px; font-weight: 700; scroll-margin-top: 20px; }
.card .pic { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.card .m { display: block; background-repeat: no-repeat; }
.card .m.grey { filter: grayscale(1); }
.card .nm { overflow-wrap: break-word; }
.card.waiting .m { filter: grayscale(1); }
.card.waiting .nm::after { content: "placeholder"; display: block; margin: 4px auto 0; width: max-content; padding: 1px 6px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; background: rgb(183,255,0); border: 1px solid #000; }
.card:hover, .card:focus-visible, .card:target { background: rgb(183,255,0); color: #000; outline: none; }

@media (min-width: 768px) {
  body { font-size: 17px; padding: 60px; }
  .back, .subtitle, .sig, .pager a { font-size: 14px; }
  .group { font-size: 22px; }
  .collection { font-size: 15px; }
  /* the mark takes most of the width and the screen's height under the links, staying put while the text scrolls */
  .bot { max-width: 1600px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 0 36px; align-items: start; }
  .mark { margin: 0; padding: 32px; height: max(420px, calc(100vh - 210px)); position: sticky; top: 24px; }
  .mark img { flex: 1 1 auto; min-height: 0; width: 100%; max-height: none; object-fit: contain; }
  .pager { max-width: 1600px; }
  .card { flex-basis: 132px; font-size: 13px; }
}