/* PROTOTYPE variant A: full-width black band, filled red star right after
   the name, menu on the right of the band; list = rows (image left, text right). */

.site-header { background: #000; color: #fff; position: relative; }
.site-header__inner {
  max-width: 72rem; margin: 0 auto; padding: .9rem 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 48em) { .site-header__inner { padding: 1.4rem 2rem; } }

.brand { display: inline-flex; align-items: center; gap: .3em; text-decoration: none; color: #fff;
  font-size: clamp(1.45rem, 6.2vw, 2.9rem); }
.brand__name {
  font-family: "Arial Black", Arial, Helvetica, sans-serif; font-weight: 900;
  letter-spacing: .03em; line-height: 1; white-space: nowrap;
}
.star { width: .82em; height: .82em; fill: #e10600; }

/* desktop menu */
.nav--desktop ul { display: flex; gap: 2rem; }
.nav--desktop a {
  text-decoration: none; text-transform: uppercase; font-weight: bold; letter-spacing: .08em;
  font-size: .95rem; padding: .4rem 0; border-bottom: 3px solid transparent;
}
.nav--desktop a:hover { border-bottom-color: #fff; }
.nav--desktop a[aria-current] { border-bottom-color: #e10600; }

/* mobile menu: burger right, panel drops below the band, full width */
.nav--mobile summary { padding: .4rem; margin: -.4rem; color: #fff; }
.nav--mobile[open] summary { color: #e10600; }
.nav--mobile nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10;
  background: #000; border-top: 1px solid #333;
}
.nav--mobile a {
  display: block; padding: 1rem; text-decoration: none; text-transform: uppercase;
  font-weight: bold; letter-spacing: .08em; border-bottom: 1px solid #222;
}
.nav--mobile a[aria-current] { box-shadow: inset 4px 0 0 #e10600; }

/* list: rows */
.listing { max-width: 56rem; margin: 0 auto; padding: 1.5rem 1rem; }
@media (min-width: 48em) { .listing { padding: 2.5rem 2rem; } }
.section-title { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 1rem;
  padding-bottom: .5rem; border-bottom: 3px solid #000; }
.item { padding: 1.25rem 0; border-bottom: 1px solid #ccc; }
.item__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.item__text { margin-top: .6rem; }
@media (min-width: 30em) {
  /* small tablets / big phones: small thumbnail beside the text */
  .item { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; }
  .item__text { margin-top: 0; }
  .item__title { font-size: 1.1rem; }
}
@media (min-width: 48em) {
  .item { grid-template-columns: 15rem 1fr; gap: 1.5rem; }
  .item__title { font-size: 1.45rem; }
}