/* THE COVER'S MASTHEAD, SMALLER, WITH THE ICON STICKERS (James, 2026-10-16: "lets shrink bruhfoons name and avatar and put
   an icons for tips and for sublevel"; "lets make those custom icons for the tip jar on the cover, as well"). The jester
   and BRUH / FOONS a size down; TIPS and SUB LEVEL leave their cyan and yellow boxes for the feed shelf's 3D objects
   (deploy/nb_chip_icons.py: the tip jar, img/icon-tips.png; the padlock, img/icon-sub.png = the shelf's Sub Level lock),
   side by side in the top-right corner, each over its name on a small ink tag so it reads on any plate. The jar keeps
   its wiggle. Loaded by the cover only, after style.css. */
.cover .avatar { width: clamp(46px, 12vw, 58px); border-width: 3px; box-shadow: 3px 3px 0 var(--ink); }
.cover .wordmark { font-size: clamp(1.625rem, 7.4vw, 2.125rem); }
.cover .mast:not(.mast-small) .mast-in { column-gap: var(--space-md); }

.mast-stickers { display: flex; align-items: flex-start; gap: 4px; }
.mast-stickers .feed-btn, .mast-stickers .sub-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px; max-width: none;
  margin: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; transform: none;
  font-family: var(--display); font-size: 0.625rem; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mast-stickers .feed-btn-art { display: none; }
.mast-stickers .feed-btn::before, .mast-stickers .sub-btn::before {
  content: ""; display: block; width: 50px; height: 50px; background: center / contain no-repeat;
  filter: drop-shadow(2px 3px 0 var(--ink)); transition: transform 180ms var(--ease-out);
}
.mast-stickers .feed-btn::before { background-image: url("/img/icon-tips.png"); }
.mast-stickers .sub-btn::before { background-image: url("/img/icon-sub.png"); transform: rotate(4deg); }
.mast-stickers .feed-btn-k, .mast-stickers .sub-btn > span:first-child {
  padding: 0.3em 0.45em 0.25em; background: var(--ink); color: var(--cream); box-shadow: 2px 2px 0 oklch(0.08 0.02 262 / 0.5);
}
.mast-stickers .sub-btn { display: grid; grid-template-columns: auto; justify-items: center; }
.mast-stickers .sub-btn::before { grid-column: 1; }
.mast-stickers .sub-btn > span { display: none; }
.mast-stickers .sub-btn::after {           /* "Sub Level" on one tag (the markup splits it in two spans for the old box) */
  content: "Sub Level"; padding: 0.3em 0.45em 0.25em; background: var(--ink); color: var(--cream); white-space: nowrap;
  box-shadow: 2px 2px 0 oklch(0.08 0.02 262 / 0.5);
}
.mast-stickers .feed-btn:active, .mast-stickers .sub-btn:active { transform: none; box-shadow: none; }
.mast-stickers .feed-btn:active::before, .mast-stickers .sub-btn:active::before { transform: translateY(2px) scale(0.95); }
@media (hover: hover) {
  .mast-stickers .feed-btn:hover, .mast-stickers .sub-btn:hover { transform: none; box-shadow: none; }
  .mast-stickers .feed-btn:hover::before { transform: translateY(-2px) rotate(-6deg); }
  .mast-stickers .sub-btn:hover::before { transform: translateY(-2px) rotate(8deg); }
}
.mast-stickers .feed-btn:focus-visible, .mast-stickers .sub-btn:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* on a desk (the cover's column beside the plate) */
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  .cover .avatar { width: min(80px, 14cqi); border-width: 4px; box-shadow: 4px 4px 0 var(--ink); }
  .cover .wordmark { font-size: min(3.75rem, 8.2cqi); }
  .mast-stickers { gap: 8px; }
  .mast-stickers .feed-btn::before, .mast-stickers .sub-btn::before { width: 60px; height: 60px; }
  .mast-stickers .feed-btn, .mast-stickers .sub-btn { font-size: 0.6875rem; }
}

/* a small phone: the two icons a size down so SUB LEVEL clears the tagline */
@media (max-width: 359px) {
  .mast-stickers { gap: 2px; }
  .mast-stickers .feed-btn::before, .mast-stickers .sub-btn::before { width: 40px; height: 40px; }
  .mast-stickers .feed-btn, .mast-stickers .sub-btn { font-size: 0.5625rem; }
}
/* NO TAGLINE ON THE COVER (James, 10-16: "lets just drop the description of bruhfoons on the cover") */
.cover .tagline { display: none; }

/* THE BAND FADE ON THE COVER TOO (James, 10-16: "can we apply that same fade to the cover backgroudn as we did to the series
   page"): the plate wears the series page's left-to-right tint (hub.css --band-fade: .82 → .55 → .7) in place of its
   top-down shade. On a desk the ground is the plate blurred: it was dimmed to 0.6 under a .22 tint; with the fade on it
   the blur comes back up to 0.85 so the two together sit where the hub's ground does. */
.cover { --band-fade: linear-gradient(90deg, oklch(0.16 0.045 262 / 0.82) 0%, oklch(0.16 0.045 262 / 0.55) 55%, oklch(0.16 0.045 262 / 0.7) 100%); }
.cover .cover-ground::after { background: var(--band-fade); }
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  .cover .cover-ground .cover-img { filter: blur(32px) saturate(1.15) brightness(0.85); }
}

/* NO LABELS (James, 10-16: "drop both labels for now"): the jar and the padlock alone. The words stay for screen readers —
   the TIPS span visually hidden, SUB LEVEL put back into the link's own spans, hidden the same way, the ::after tag off. */
.mast-stickers .feed-btn-k, .mast-stickers .sub-btn > span {
  display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; background: none; box-shadow: none;
}
.mast-stickers .sub-btn::after { content: none; }
.mast-stickers .feed-btn, .mast-stickers .sub-btn { position: relative; top: auto; right: auto; }

/* AFTERGLOW'S CARD under Good Boy's (2026-10-16, the second series; markup hand-written after the generated Good Boy card):
   the same construction, the dance-floor banner behind (Party Boy at about 38 % across), the name as his neon sign
   (img/afterglow-title.png, an image like Good Boy's paint), the tagline in the same pink. Its NEW poster
   stands up out of its top edge like Good Boy's, so the card starts that far below the one above. */
.ag-card { --neon: oklch(0.72 0.26 350); --neon-soft: oklch(0.72 0.26 350 / 0.55); margin-top: calc(var(--gb-rise) + var(--space-xl)); transform: rotate(0.8deg); }
.ag-card .gb-ground img { object-position: 38% 40%; }
.ag-card .gb-title-img { filter: none; }   /* the neon sign carries its own glow */
.ag-card .gb-title { margin-top: 2px; transform: rotate(-2deg); }
.ag-card .gb-tag.ag-tag {
  width: auto; line-height: 1; margin-top: 8px; font-family: var(--display); font-size: clamp(0.5625rem, 2.9cqi, 0.9375rem); white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--neon); text-shadow: 0 0 8px var(--neon-soft), 2px 2px 0 var(--ink);
}