/* ============================================================
   BANDIT LORE — BASE / FOUNDATION HELPERS
   Type primitives + the worn-print texture utilities.
   These are conveniences; tokens above are the source of truth.
   ============================================================ */

/* ---- Display headline: Anton, caps, condensed ---- */
.bl-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-ink);
}

/* ---- Tagline: Oswald, spaced caps, burnt orange ---- */
.bl-tagline {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-tagline);
  color: var(--text-accent);
  font-size: var(--type-caption);
}

/* ---- Eyebrow: small spaced-caps label ---- */
.bl-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--type-micro);
  color: var(--text-muted);
}

/* ---- Body copy ---- */
.bl-body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--type-body-m);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-ink);
}

/* ============================================================
   DISTRESS / WORN TEXTURE
   .bl-distress speckles a headline so the ink looks worn off
   the page. It is a mask, so it works over any fill color.
   Keep it LIGHT — apply on big display type only.
   ============================================================ */
.bl-distress {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0.5 1 1 1 0.65 1 1 1 0.55 1 1 1 0.7 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0.5 1 1 1 0.65 1 1 1 0.55 1 1 1 0.7 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  -webkit-mask-size: 150px 150px;
  mask-size: 150px 150px;
}

/* ---- Grit: finer, denser speckle (a worn poster left in the sun) ---- */
.bl-distress-grit {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1 0 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1 0 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 200px 200px; mask-size: 200px 200px;
}

/* ---- Rough: blotchy ink-bleed that eats whole chunks of the letters ---- */
.bl-distress-rough {
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 1 0 1 1 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 300px 300px, 160px 160px;
  mask-size: 300px 300px, 160px 160px;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* ============================================================
   PAPER GRAIN
   .bl-paper lays a faint warm grain over a surface. Use on
   page backgrounds and posters; subtle by design.
   ============================================================ */
.bl-paper {
  position: relative;
}
.bl-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---- Signature hairline rule with a notched orange tick ---- */
.bl-rule {
  border: none;
  border-top: var(--border-rule) solid var(--border-strong);
  position: relative;
}
.bl-rule::before {
  content: "";
  position: absolute;
  left: 0; top: calc(-1 * var(--border-rule));
  width: 56px;
  border-top: var(--border-rule) solid var(--accent);
}