/*
 * Street Barz, on the BeatX bones the site already ships.
 *
 * The theme is BeatX and already drives its accent from one variable, so the colour is set in one
 * place here rather than hunted through 100 kB of stylesheet. Everything else in this file is the
 * dark ground the template does not assume, the brand bar, and the streets banner.
 *
 * Loaded after the theme and before the listing stylesheet — see Website → Files.
 */

:root {
  /* The red already on the logo. BeatX ships green; this is what the site is. */
  --color-primary: #d4302f;
  --sb-ink: #0b0b0b;
  --sb-ink-raised: #141414;
  --sb-line: #262626;
  --sb-text: #e9e9e9;
  --sb-text-muted: #9a9a9a;
}

/* ---------------------------------------------------------------------------------------------
 * The dark ground.
 *
 * BeatX is a light template with dark sections; this site is the other way round, so the base is
 * inverted once here rather than by adding a class to every section an author writes.
 * ------------------------------------------------------------------------------------------- */

body {
  background-color: var(--sb-ink);
  color: var(--sb-text);
}

.wrapper,
section,
.block,
.intro {
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6 { color: #fff; }
p { color: var(--sb-text-muted); }
a { color: var(--sb-text); }
a:hover { color: var(--color-primary); }
hr { border-color: var(--sb-line); }

/* The template paints a few panels white outright. On black those are holes. */
.contact-page .get-touch,
.contact-page .map-sec,
.block > .container > .contact-page {
  background-color: var(--sb-ink-raised);
  color: var(--sb-text);
  border-radius: .75rem;
}

/* ---------------------------------------------------------------------------------------------
 * The bar: the red logo, top left, and nothing else competing with it.
 * ------------------------------------------------------------------------------------------- */

.sb-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: .65rem 0;
  background-color: rgba(11, 11, 11, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--sb-line);
}

.sb-brand { padding: 0; margin-right: 2rem; }

.sb-brand__logo {
  display: block;
  height: 46px;
  width: auto;
}

.sb-navbar .nav-link {
  color: var(--sb-text-muted);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .5rem .9rem;
  transition: color .2s ease;
}

.sb-navbar .nav-link:hover,
.sb-navbar .nav-link:focus { color: #fff; }

/* The current page, marked by the red the logo already uses. */
.sb-navbar .nav-link[aria-current="page"] { color: var(--color-primary); }

.sb-navbar .navbar-toggler {
  border-color: var(--sb-line);
  padding: .35rem .6rem;
}

.sb-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e9e9e9' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------------------------------------------------------------------------------------------
 * The banner: the site's own black-and-white street photograph.
 *
 * Desaturated in CSS rather than by keeping a second copy of the file — the picture is already
 * nearly monochrome, and `grayscale(1)` means a colour version can replace it later without
 * anybody having to re-edit an image.
 * ------------------------------------------------------------------------------------------- */

.sb-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(20rem, 46vw, 34rem);
  padding: 0;
  overflow: hidden;
  background: #000;
}

.sb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sb-hero-image);
  background-size: cover;
  background-position: center 40%;
  filter: grayscale(1) contrast(1.15) brightness(.85);
}

/* Black at the bottom so the text sits on ink rather than on brickwork. */
.sb-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 11, .35) 0%, rgba(11, 11, 11, .1) 40%, var(--sb-ink) 100%);
}

.sb-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 3rem 0 2.5rem;
}

.sb-hero__eyebrow {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.sb-hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.02em;
  color: #fff;
  text-transform: uppercase;
}

.sb-hero__lede {
  margin: 1rem 0 0;
  max-width: 40rem;
  color: #cfcfcf;
}

/* ---------------------------------------------------------------------------------------------
 * Section headings and the template's own button, in the site's red.
 * ------------------------------------------------------------------------------------------- */

.sb-section { padding: 3.5rem 0; }

.sb-section__title {
  position: relative;
  margin: 0 0 2rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

.sb-section__title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: .7rem;
  background: var(--color-primary);
}

.btn-default {
  display: inline-block;
  padding: .8rem 2.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}

.btn-default:hover { background: #b02524; color: #fff; }

/* ---------------------------------------------------------------------------------------------
 * The footer, matched to the bar at the top.
 * ------------------------------------------------------------------------------------------- */

.sb-footer {
  border-top: 1px solid var(--sb-line);
  background: var(--sb-ink-raised);
  padding: 3rem 0 2rem;
}

.sb-footer__logo { height: 40px; width: auto; }

.sb-footer h5 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
}

.sb-footer a { color: var(--sb-text-muted); text-decoration: none; }
.sb-footer a:hover { color: var(--color-primary); }
.sb-footer__legal { color: #6f6f6f; font-size: .8rem; }

/*
 * The links sit to the right of the logo, not beside it.
 *
 * Bootstrap's `ms-auto` does that on its own; BeatX ships `header nav ul` rules with enough
 * specificity to cancel it, and the result was a navigation huddled against the brand with the
 * rest of the bar empty. Stated here rather than by adding utilities to the markup, so the
 * component stays plain Bootstrap.
 */
.sb-navbar .navbar-collapse { flex-grow: 1; }

.sb-navbar .navbar-nav {
  margin-left: auto;
  align-items: center;
}

@media (max-width: 991.98px) {
  /* Stacked under the bar, where "to the right" means nothing. */
  .sb-navbar .navbar-nav { margin-left: 0; align-items: flex-start; padding: .75rem 0; }
  .sb-navbar .nav-link { padding-left: 0; }
}

/*
 * The renderer wraps a header component in `<header class="site-header">`, which puts this bar
 * inside the theme's own `header nav …` selectors. Two of them have to be undone by name:
 *
 *   header nav ul > li { padding: 46px 16px 48px }   a 140px-tall bar
 *   header nav          { margin-left: auto }        fights the brand for the left edge
 *
 * Undone here rather than by renaming the classes, because those selectors are the theme's and a
 * page written against it elsewhere still wants them.
 */
.site-header .sb-navbar { margin-left: 0; }

.site-header .sb-navbar .navbar-nav > li {
  display: block;
  padding: 0;
}

/* Decisive rather than relying on auto margins, which the theme's rules were cancelling. */
.site-header .sb-navbar .navbar-collapse {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 991.98px) {
  .site-header .sb-navbar .navbar-collapse { justify-content: flex-start; }
}

/* =============================================================================================
 * The bar, following the BeatX layout: logo left, navigation right of it, one filled pill at the
 * far right. The template's is green; this site's is the red already on the logo.
 * ========================================================================================== */

.site-header .sb-navbar .navbar-collapse {
  display: flex;
  align-items: center;
  /* The links take the space and the call to action is pushed to the end by its own margin. */
  justify-content: flex-start;
}

.site-header .sb-navbar .sb-nav {
  margin-left: auto;
  align-items: center;
  gap: .35rem;
}

.sb-navbar .sb-nav .nav-link {
  color: #d8d8d8;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: .5rem 1rem;
}

.sb-navbar .sb-nav .nav-link:hover,
.sb-navbar .sb-nav .nav-link[aria-current="page"] { color: var(--color-primary); }

/*
 * The one filled control in the bar.
 *
 * BeatX puts "Donate now" here; the equivalent on this site is the thing every page is trying to
 * get somebody to do, which is apply to perform. It goes to the page that already asks.
 */
.sb-cta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-left: 1.75rem;
  padding: .8rem 1.85rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.sb-cta:hover {
  background: #b02524;
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 991.98px) {
  .site-header .sb-navbar .navbar-collapse {
    display: block;
    padding-bottom: 1rem;
  }

  .site-header .sb-navbar .sb-nav { margin-left: 0; }
  .sb-navbar .sb-nav .nav-link { padding-left: 0; }
  .sb-cta { margin-left: 0; margin-top: .75rem; }
}

/* =============================================================================================
 * The footer, following the same example: the mark on the left, one row of links on the right
 * separated by rules, and the copyright line under them.
 * ========================================================================================== */

.sb-footer {
  border-top: 1px solid var(--sb-line);
  background: var(--sb-ink);
  padding: 2.75rem 0 2.25rem;
}

.sb-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.sb-footer__logo { height: 62px; width: auto; display: block; }

.sb-footer__right { margin-left: auto; text-align: right; }

.sb-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 1.35rem;
  margin: 0 0 .85rem;
  padding: 0;
  list-style: none;
}

/* The rule between items, drawn rather than typed, so the last one has none. */
.sb-footer__links li { position: relative; }

.sb-footer__links li + li::before {
  content: "";
  position: absolute;
  left: -.7rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1rem;
  background: #3a3a3a;
}

.sb-footer__links a {
  color: #d8d8d8;
  font-size: .95rem;
  text-decoration: none;
}

.sb-footer__links a:hover { color: var(--color-primary); }

.sb-footer__legal {
  margin: 0;
  color: #8f8f8f;
  font-size: .95rem;
}

.sb-footer__mark {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 767.98px) {
  .sb-footer__top { justify-content: flex-start; }
  .sb-footer__right { margin-left: 0; text-align: left; }
  .sb-footer__links { justify-content: flex-start; }
}

/* =============================================================================================
 * An article page.
 *
 * `/blog/<slug>` is served by the application, not by a page somebody wrote, so its markup has no
 * `.container` around it and nothing here styled its class names — the result was a column of text
 * running the full width of the screen. The width is set here, in the site's own stylesheet, for
 * the same reason everything else is: the platform returns structure and the site dresses it.
 * ========================================================================================== */

.blog-article {
  display: block;
  max-width: 52rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4.5rem;
}

.blog-article__title {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: #fff;
}

.blog-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-top: 1rem;
}

.blog-article__date {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8f8f8f;
}

.blog-article__category {
  padding: .25rem .7rem;
  border-radius: 999px;
  background: rgba(212, 48, 47, .14);
  color: var(--color-primary);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* The excerpt repeats the opening of the body, so it reads as a standfirst rather than as copy. */
.blog-article__excerpt {
  margin: 1.35rem 0 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #c9c9c9;
}

.blog-article__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.25rem 0;
  border-radius: .75rem;
}

.blog-article__body { font-size: 1.05rem; line-height: 1.75; color: #c2c2c2; }
.blog-article__body p { margin: 0 0 1.35rem; color: inherit; }
.blog-article__body strong { color: #fff; }
.blog-article__body a { color: var(--color-primary); }

.blog-article__body h2,
.blog-article__body h3 {
  margin: 2.5rem 0 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.blog-article__body h2 { font-size: 1.6rem; }
.blog-article__body h3 { font-size: 1.3rem; }

.blog-article__body img,
.blog-article__body iframe {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem auto;
  border-radius: .5rem;
}

.blog-article__body iframe { aspect-ratio: 16 / 9; width: 100%; }

.blog-article__body ul,
.blog-article__body ol { margin: 0 0 1.35rem 1.25rem; }

.blog-article__body blockquote {
  margin: 2rem 0;
  padding: 1rem 0 1rem 1.5rem;
  border-left: 3px solid var(--color-primary);
  color: #ddd;
  font-size: 1.1rem;
}

/* =============================================================================================
 * One face for the whole site.
 *
 * Barlow, which is what the stylesheet this site came with sets on `body` and therefore what an
 * article's title is already in. The bar and the footer say the same thing in the same voice
 * rather than in a second one.
 *
 * Driven from a single variable, and the article title is pointed at it too — so "the header
 * matches the article title" is true by construction rather than because two places happen to
 * name the same font today. Changing the site's face is this one line.
 * ========================================================================================== */

:root {
  --sb-font-display: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.sb-navbar,
.sb-footer,
.sb-navbar .sb-nav .nav-link,
.sb-cta,
.sb-footer__links a,
.sb-footer__legal,
.sb-hero__eyebrow,
.sb-hero__title,
.sb-section__title,
.blog-article__title {
  font-family: var(--sb-font-display);
}

/*
 * Weights and sizes matched to the article title, which is the reference.
 *
 * Barlow is a little narrower than a geometric sans, so it takes slightly more size and tracking
 * to read at the same confidence in a navigation bar.
 */
.sb-navbar .sb-nav .nav-link {
  font-size: 1.02rem;
  font-weight: 500;
  padding: .5rem 1.15rem;
}

.sb-cta {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .85rem 1.9rem;
}

.sb-footer__links a { font-size: 1.02rem; font-weight: 500; }
.sb-footer__legal { font-size: .98rem; font-weight: 400; }
.sb-footer__mark { font-weight: 700; }

/* =============================================================================================
 * Media players in an article.
 *
 * A link standing alone in a paragraph is replaced by one of these when the article renders —
 * see ArticleEmbeds. The shape lives on the wrapper because an iframe cannot hold an aspect ratio
 * on its own, and the provider gets a class of its own so an audio player can be a different
 * height from a video without either needing inline styles.
 * ========================================================================================== */

.blog-embed {
  position: relative;
  margin: 2.25rem 0;
  overflow: hidden;
  border-radius: .75rem;
  background: #000;
}

.blog-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Video keeps the frame's own shape; audio is a fixed bar whatever the width. */
.blog-embed--video { aspect-ratio: 16 / 9; }
.blog-embed--audio { height: 152px; border-radius: .75rem; }
.blog-embed--audio-tall { height: 352px; }

.blog-embed--audio iframe,
.blog-embed--audio-tall iframe { height: 100%; }

/* The one on a performance is the point of the page, so it is not squeezed into the text column. */
.blog-article__body > .blog-embed:first-child { margin-top: 0; }