/* Barbershop site — Street skin: charcoal, electric orange, condensed uppercase, tilted stickers, grain, b&w photos. */
:root {
  --bg: #121212;
  --bg-rgb: 18, 18, 18;
  --surface: #1b1b1b;
  --surface-2: #222222;
  --art: #2a1a12;
  --accent-surface: #2a1a12;
  --line: rgba(242, 242, 242, 0.16);
  --ink: #f2f2f2;
  --ink-rgb: 242, 242, 242;
  --muted: #a6a6a6;
  --accent: #ff5a1f;
  --accent-2: #ffffff;
  --accent-rgb: 255, 90, 31;
  --accent-ink: #111111;
  --ok: #5bd38a;
  --closed: #ff6b5b;
  --radius: 4px;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --display-text: 'Archivo', system-ui, sans-serif;
  --display-weight: 400;
  --display-case: uppercase;
  --display-tracking: .01em;
  --body: 'Archivo', system-ui, sans-serif;
  --wrap: 1180px;
  --bw: grayscale(1) contrast(1.12);
}

/* Grain over the whole page */
body.bb--street::before {
  content: ''; position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bb--street .bb-eyebrow { color: var(--ink); letter-spacing: .3em; }
.bb--street .bb-h3 { font-size: 1.7rem; color: var(--accent); }

/* Buttons: hard-edged, slightly tilted */
.bb--street .bb-btn { border-radius: 2px; font: 400 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.bb--street .bb-btn--primary { background: var(--accent); color: var(--accent-ink); transform: rotate(-1deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, .6); }
.bb--street .bb-btn--primary:hover { background: #ff7440; }
.bb--street .bb-btn--ghost { border: 2px solid var(--ink); background: rgba(var(--bg-rgb), .5); transform: rotate(.6deg); }
.bb--street .bb-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.bb--street .bb-sticky .bb-btn { transform: none; box-shadow: none; }

/* Header */
.bb--street .bb-logo__pole { border-radius: 2px; background: repeating-linear-gradient(135deg, var(--accent) 0 6px, var(--bg) 6px 12px); box-shadow: 0 0 0 2px var(--accent); }
.bb--street .bb-logo__text { font: 400 1.45rem/1 var(--display); letter-spacing: .02em; color: var(--ink); }
.bb--street .bb-nav a { font: 400 1.05rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; border-bottom-width: 3px; }
.bb--street .bb-nav a:hover, .bb--street .bb-nav a.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Hero: black-and-white photo under a dark gradient */
.bb--street .bb-hero::before { filter: var(--bw); }
.bb--street .bb-hero::after { background: linear-gradient(90deg, rgba(var(--bg-rgb), .95) 0%, rgba(var(--bg-rgb), .75) 45%, rgba(var(--bg-rgb), .25) 100%); }
.bb--street .bb-hero--art::before {
  filter: none;
  background:
    radial-gradient(ellipse 50% 60% at 75% 40%, rgba(var(--accent-rgb), .25), transparent 70%),
    repeating-linear-gradient(-12deg, rgba(255, 255, 255, .03) 0 3px, transparent 3px 22px),
    linear-gradient(160deg, var(--art), var(--bg) 60%);
}
.bb--street .bb-hero__title { font-size: clamp(3rem, 7.5vw, 6.2rem); line-height: .95; max-width: 14ch; text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.bb--street .bb-rating { border-radius: 2px; border-width: 2px; border-color: rgba(var(--ink-rgb), .6); }
.bb--street .bb-rating__star { color: var(--accent); }

/* Highlights as tilted stickers */
.bb--street .bb-highlights__list li { border: 2px solid rgba(var(--ink-rgb), .7); font: 400 1.35rem/1.15 var(--display); text-transform: uppercase; }
.bb--street .bb-highlights__num { color: var(--accent); }

/* Tiles: b&w photo, orange sticker title */
.bb--street .bb-tile { border: 2px solid rgba(var(--ink-rgb), .75); }
.bb--street .bb-tile::before { filter: var(--bw); opacity: .6; }
.bb--street .bb-tile__title {
  align-self: flex-start; padding: .25em .45em .15em; background: var(--accent); color: var(--accent-ink);
  font-size: 2rem; line-height: 1; transform: rotate(-3deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
}
.bb--street .bb-tile__list > span { border-bottom-style: dotted; }
.bb--street .bb-tile__list > span > span:last-child { color: var(--ink); font-weight: 700; }
.bb--street .bb-tile__more { color: var(--accent); font: 400 1rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.bb--street .bb-tile:hover { border-color: var(--accent); }

/* Inner pages */
.bb--street .bb-h1 { font-size: clamp(2.8rem, 7vw, 4.6rem); color: var(--ink); }
.bb--street .bb-h1::after { content: '.'; color: var(--accent); }
.bb--street .bb-page-head { border-bottom: 3px solid var(--accent); }
.bb--street .bb-menu__price { color: var(--accent); font-size: 1.35rem; }
.bb--street .bb-cta { border: 2px solid rgba(var(--ink-rgb), .7); }
.bb--street .bb-member { border: 2px solid rgba(var(--ink-rgb), .7); }
.bb--street .bb-member__initial { border: 0; border-radius: 2px; background: var(--accent); color: var(--accent-ink); transform: rotate(-4deg); }
.bb--street .bb-member__name { font-size: 1.9rem; }
.bb--street .bb-gallery img { border-radius: 2px; filter: var(--bw); transition: filter .3s; }
.bb--street .bb-gallery a:hover img { filter: none; }
.bb--street .bb-card { border: 2px solid rgba(var(--ink-rgb), .7); }
.bb--street .bb-reviews__score { color: var(--ink); font-size: 7rem; }
.bb--street .bb-footer { border-top: 3px solid var(--accent); }
.bb--street .bb-footer__name { color: var(--ink); font-size: 1.6rem; }

/* Wide screens only: cards sit slightly crooked, like stickers on a wall */
@media (min-width: 1001px) {
  .bb--street .bb-highlights__list li:nth-child(odd), .bb--street .bb-tile:nth-child(odd) { transform: rotate(-.8deg); }
  .bb--street .bb-highlights__list li:nth-child(even), .bb--street .bb-tile:nth-child(even) { transform: rotate(.7deg); }
  .bb--street .bb-tile:hover { transform: rotate(0) translateY(-3px); }
}

@media (max-width: 1000px) {
  .bb--street .bb-nav a { font-size: 1.6rem; padding: .8rem 0; }
}

@media (max-width: 640px) {
  .bb--street .bb-hero__title { font-size: clamp(2.8rem, 13vw, 3.6rem); }
  .bb--street .bb-logo__text { font-size: 1.2rem; }
  .bb--street .bb-tile__title { font-size: 1.7rem; }
}
.bb--street .bb-tile__title, .bb--street .bb-member__name, .bb--street .bb-footer__name { text-transform: uppercase; }