/* Generated from blahblah/content.css by tools/build-web.mjs. Fonts, tokens and the tape label. */
@font-face {
  font-family: 'Blah Tape';
  src: url('./fonts/RobotoMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Blah Anton';
  src: url('./fonts/Anton.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


:root {
  --blah-ink: #111111;
  --blah-paper: #ffffff;
  --blah-1: #fff8a8;
  --blah-2: #fff03b;
  --blah-3: #ffc233;
  --blah-4: #ff7a2e;
  --blah-5: #ff6b63;
  --blah-face: 'Blah Anton', 'Arial Narrow', Impact, 'Helvetica Neue', sans-serif;
  --blah-tape: 'Blah Tape', 'Roboto Mono', Menlo, Consolas, monospace;
}


/* ---- The label: two strips of embossed tape ----
   The 80s label maker: a matte black strip with a slight sheen, raised white
   capitals in an even-width gothic, punched with a dark line under each
   letter and a faint highlight on top. The second strip is the level, on
   tape in the level's colour, shifted a few pixels like a second press. */
.blahblah-flag-badge {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  font-family: var(--blah-tape) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
}
.blahblah-flag-badge:nth-child(1) { transform: rotate(1.4deg); }
.blahblah-flag-badge:nth-child(2) { transform: rotate(-1.1deg); }
.blahblah-flag-badge:nth-child(3) { transform: rotate(0.9deg); }
.blahblah-sticker-top,
.blahblah-sticker-bot {
  display: block !important;
  padding: 5px 9px 4px !important;
  border-radius: 1px !important;
  letter-spacing: 0.16em !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.blahblah-sticker-top {
  font-size: 12px !important;
  color: #ededed !important;
  background: linear-gradient(180deg, #303030 0%, #171717 38%, #0c0c0c 100%) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.95), 0 -1px 0 rgba(255, 255, 255, 0.22) !important;
  transform: rotate(-0.4deg);
}
.blahblah-sticker-bot {
  margin-top: 0 !important;
  margin-left: 4px !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  color: #111 !important;
  opacity: 1 !important;
  background: var(--blah-tape-tint) !important;   /* flat tape; a gradient made it read as a pillow (Matt, 2026-09-24) */
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.6), 0 1px 0 rgba(0, 0, 0, 0.3) !important;   /* raised: light above, dark below, same as the black strip */
  transform: rotate(0.5deg);
  --blah-tape-tint: var(--blah-2);
}
.blahblah-why-read { font-size: 14px !important; font-weight: 700 !important; color: var(--blah-paper) !important; margin-bottom: 10px !important; line-height: 1.35 !important; }