/* Shawarma House (CX logo): black ground, flame orange and amber; tall condensed caps
   like the logo, geometric sans for body; gold rules. */
@font-face { font-family: "Bebas Neue"; src: url("../../assets/fonts/bebas-neue-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --sh-red: #191919; --sh-red-dk: #c8551a; --sh-gold: #f7941d; --sh-brown: #191919;
}
.brand--shawarma h1, .brand--shawarma h2, .brand--shawarma h3, .brand--shawarma .wm,
.brand--shawarma .bullets--steps li { font-family: var(--font-display); font-weight: 400; }
.brand--shawarma h2, .brand--shawarma h3 { letter-spacing: 0.02em; line-height: 0.95; }
.brand--shawarma .h-rule, .brand--shawarma .manifesto__h { font-size: calc(var(--step-2) * 1.25); }
.brand--shawarma .manifesto__h { font-size: calc(var(--step-3) * 1.2); }
.brand--shawarma .badge__arc { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.12em; }
.brand--shawarma body, .brand--shawarma p { font-weight: 400; }

/* Cover: black ground, the flame oversized and cropped, wordmark right. */
.brand--shawarma .cover { background: var(--sh-red); color: #fff; }
.brand--shawarma .cover__mark { --mw: min(70vw, calc(var(--vh) * 46)); left: calc(var(--mw) * -0.12); bottom: calc(var(--mw) * -0.3); }
.brand--shawarma .cover__logo { right: calc(var(--gutter) * 1.5); top: calc(var(--vh) * 20); width: min(68vw, 40rem); }
@media (min-width: 1024px) {
  .brand--shawarma .cover__mark { width: min(44vw, calc(var(--vh) * 80)); left: 4vw; bottom: calc(var(--vh) * -26); }
  .brand--shawarma .cover__logo { top: auto; bottom: calc(var(--vh) * 46); width: min(40vw, 40rem); right: max(6vw, var(--gutter)); }
}

.brand--shawarma .manifesto__h { color: var(--sh-gold); }
.brand--shawarma .manifesto__badge { width: min(46vw, 240px); }
.brand--shawarma .h-rule { color: var(--b-heading); }
.brand--shawarma .h-rule::after { height: 3px; opacity: 1; background: var(--sh-gold); }
.brand--shawarma .caps { font-family: var(--font-display); font-weight: 400; font-size: calc(var(--step-1) * 1.3); color: var(--b-heading); letter-spacing: 0.06em; }
.brand--shawarma .bullets--steps li { background: var(--sh-red-dk); color: #fff; font-size: 1.5rem; letter-spacing: 0.04em; }
.brand--shawarma .bullets--steps li::before { color: #fbe3b8; font-size: 0.7em; }
.brand--shawarma .ext__badge { color: var(--sh-red-dk); }
.brand--shawarma .exts { border-top: 0; background: #f6e9d6; }

.brand--shawarma .close { background: var(--sh-red); }
.brand--shawarma .close__logo { width: min(82vw, 30rem); }
.brand--shawarma .close__tagline { color: #fff; font-family: var(--font); font-weight: 600; }
.brand--shawarma .close__contact, .brand--shawarma .foot { color: #fff; }

/* Intro sits a shade darker than the cover so the flame reads as bleeding off the cover edge. */
.brand--shawarma .manifesto { background: #0d0d0d; }
.brand--shawarma .cover { background: #1e1e1e; }