/* ==========================================================================
   FRONTLINE21 — FIELD SUPPLY, 8 September 2026.

   The catalog page: three shelves, each item a plate and three lines of type,
   and the truth about availability in the same place on every card. Carried
   over from the store implementation's own stylesheet with the cart, the
   product pages, the option pickers and the checkout removed, because none
   of that exists here and none of it ships.

   Nothing on this page transacts. When ordering opens, a card's availability
   line becomes a route; until then it is a sentence.
   ========================================================================== */

.supply-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(120px, 18vh, 210px);
  padding-bottom: var(--stack-xl);
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink);
}

.supply-hero__title { margin-top: var(--stack-md); }
.supply-hero__title em { font-style: normal; color: var(--f21-red); }
.supply-hero__body { margin-top: var(--stack-lg); max-width: 74ch; }

.supply-hero__mark {
  position: absolute;
  right: calc(var(--margin) * 0.4);
  top: 50%;
  transform: translateY(-46%);
  width: clamp(180px, 26vw, 420px);
  opacity: 0.11;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .supply-hero__mark { display: none; }
}

/* --- Shelf navigation -------------------------------------------------------- */

.shelf-nav {
  position: sticky;
  top: var(--masthead-h, 72px);
  z-index: 40;
  background: rgba(12, 15, 15, 0.94);
  border-bottom: 1px solid var(--ink-line);
}

.shelf-nav__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  overflow-x: auto;
  padding-block: 14px;
}

.shelf-nav a {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.shelf-nav a b { color: var(--f21-red-hi); margin-right: 6px; }
.shelf-nav a:hover, .shelf-nav a:focus-visible { color: var(--paper); }

/* --- A shelf ----------------------------------------------------------------- */

.collection { padding-block: var(--movement-pad); }
.collection + .collection { border-top: 1px solid var(--ink-line); }

.collection__head { max-width: 72ch; margin-bottom: var(--stack-lg); }
.collection__head .eyebrow b { color: var(--f21-red-hi); margin-right: 6px; }
.collection__head .h2 { margin-top: var(--stack-sm); }
.collection__blurb { margin-top: var(--stack-md); color: var(--paper-dim); }

/* --- Cards -------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--stack-lg) var(--gutter);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 560px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 16px;
  border-top: 1px solid var(--ink-line);
}

.card__media {
  display: block;
  overflow: hidden;
  background: var(--ink-raised);
}

.card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--paper);
}

.card__line {
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--paper-dim);
}

/* The availability line. The one thing every card must say plainly. */
.card__state {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

.card__state[data-state='free'] { color: var(--paper); }
.card__price { color: var(--paper); }

.card__actions { margin-top: 6px; }

/* --- The band, featured ---------------------------------------------------- */

.supply-feature {
  display: grid;
  gap: var(--stack-lg) var(--gutter);
  align-items: start;
}

@media (min-width: 900px) {
  .supply-feature { grid-template-columns: 3fr 5fr; }
}

.supply-feature .band-order { margin-top: var(--stack-md); }