/* Crispy Coop: red and cream checkerboard, sunshine yellow, black;
   heavy condensed caps like the order sign; speech-bubble voice. */
@font-face { font-family: "Oswald"; src: url("../../assets/fonts/oswald-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../../assets/fonts/oswald-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
:root {
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --cc-red: #e3343e; --cc-red-dk: #b8232c; --cc-cream: #fddfb5; --cc-yellow: #f0c850; --cc-black: #1d1b1b;
  --cc-check: conic-gradient(var(--cc-red) 25%, var(--cc-cream) 0 50%, var(--cc-red) 0 75%, var(--cc-cream) 0);
}
.brand--crispy-coop h1, .brand--crispy-coop h2, .brand--crispy-coop h3, .brand--crispy-coop .wm,
.brand--crispy-coop .cover__back, .brand--crispy-coop .bullets--steps li, .brand--crispy-coop .close__tagline { font-family: var(--font-display); }
.brand--crispy-coop h2, .brand--crispy-coop h3 { text-transform: uppercase; letter-spacing: 0.01em; }
.brand--crispy-coop .badge__arc { font-family: var(--font-display); font-weight: 700; }

/* Cover: same format as the other brands. Yellow ground, the chicken face
   oversized and cropped bottom left, the logo on the right. */
.brand--crispy-coop .cover { background: var(--cc-yellow); color: var(--cc-black); }
.brand--crispy-coop .cover__mark { --mw: min(62vw, calc(var(--vh) * 40)); left: calc(var(--mw) * -0.08); bottom: calc(var(--mw) * -0.12); }
.brand--crispy-coop .cover__logo { right: var(--gutter); top: calc(var(--vh) * 16); width: min(66vw, 30rem); }
@media (min-width: 1024px) {
  .brand--crispy-coop .cover__mark { width: min(36vw, calc(var(--vh) * 62)); left: 4vw; bottom: calc(var(--vh) * -6); }
  .brand--crispy-coop .cover__logo { top: auto; bottom: calc(var(--vh) * 40); width: min(40vw, 38rem); }
}

/* Manifesto on cream with the full-colour logo. */
.brand--crispy-coop .manifesto { background: var(--cc-cream); color: var(--cc-black); }
.brand--crispy-coop .manifesto__h { color: var(--cc-black); text-transform: uppercase; }
.brand--crispy-coop .manifesto__text p { color: var(--cc-black); }
.brand--crispy-coop .manifesto__badge { width: min(72vw, 400px); }

/* Headings followed by a checkerboard strip instead of a hairline. */
.brand--crispy-coop .h-rule::after { height: 14px; opacity: 1; background: var(--cc-check) 0 0 / 14px 14px; }
.brand--crispy-coop .caps { font-family: var(--font-display); font-size: var(--step-1); color: var(--cc-red-dk); letter-spacing: 0.08em; }

.brand--crispy-coop .bullets--steps li { background: var(--cc-red-dk); color: #fff; font-size: 1.25rem; }
.brand--crispy-coop .bullets--steps li::before { color: var(--cc-cream); }
.brand--crispy-coop .ext__badge { color: var(--cc-red-dk); }
.brand--crispy-coop .exts { border-top: 0; }

/* Close: yellow, logo, and the order-sign question in a speech bubble. */
.brand--crispy-coop .close { background: var(--cc-yellow); color: var(--cc-black); }
.brand--crispy-coop .close__contact, .brand--crispy-coop .foot { color: var(--cc-black); }
.brand--crispy-coop .foot { border-top-color: rgba(0,0,0,0.25); }
.brand--crispy-coop .foot a { color: var(--cc-black); }
.brand--crispy-coop .foot img { filter: brightness(0); }
/* Brand speech bubble (round, thick outline, tail bottom left), as on the
   brand's own "Crispy Goodness" / "Always Fresh N' Crispy" art. */
.brand--crispy-coop .bubble { display: block; height: auto; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; overflow: visible; }
/* Cover: the bubble talks for the chicken, up and to its right. */
.brand--crispy-coop .cover__bubble { position: absolute; z-index: 1; width: clamp(8rem, 30vw, 10rem); left: calc(var(--gutter) + 50vw); bottom: calc(var(--vh) * 22); }
@media (min-width: 1024px) {
  .brand--crispy-coop .cover__bubble { width: clamp(11rem, 14vw, 15rem); left: calc(4vw + min(36vw, calc(var(--vh) * 62)) * 0.98); bottom: calc(var(--vh) * 22); }
}
/* Close: logo on the left, the tagline in a round bubble on the right. */
.brand--crispy-coop .close__logo { width: min(66vw, 22rem); }
.brand--crispy-coop .close__bubble { width: min(64vw, 17rem); }
@media (min-width: 760px) {
  .brand--crispy-coop .close__logo-wrap { grid-auto-flow: column; align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 5rem); }
  .brand--crispy-coop .close__logo { width: min(36vw, 26rem); }
}