/*
 * Directions B ("Spec Wall") and C ("Ask First").
 *
 * B inverts the ground to near-black; it is the only place in the storefront
 * that does, and it stays scoped to .roam-wall so the global chrome above and
 * below it is untouched by a direction swap.
 */

/* B - Spec Wall ----------------------------------------------------------- */

.roam-wall {
  background: var(--roam-ink);
  color: var(--roam-paper);
  padding: 52px var(--roam-gutter) 64px;
}

.roam-wall__head {
  max-width: var(--roam-max);
  margin: 0 auto 28px;
}

.roam-wall__eyebrow {
  display: block;
  font: 500 11px/1 var(--roam-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roam-accent-bright);
}

.roam-wall__headline {
  margin: 14px 0 0;
  font: 600 clamp(30px, 4.4vw, 46px) / 1.05 var(--roam-sans);
  letter-spacing: -0.03em;
  color: var(--roam-paper);
}

.roam-wall__headline-soft {
  color: rgba(239, 236, 229, 0.55);
}

.roam-wall__standfirst {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(239, 236, 229, 0.72);
}

.roam-wall__rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: var(--roam-max);
  margin: 0 auto 26px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(239, 236, 229, 0.14);
}

.roam-wall__rail-label {
  margin-right: 6px;
  font: 500 10px/1 var(--roam-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239, 236, 229, 0.45);
}

.roam-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(239, 236, 229, 0.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(239, 236, 229, 0.85);
  font: 500 12.5px/1 var(--roam-sans);
  cursor: pointer;
}

.roam-chip:hover {
  border-color: var(--roam-accent-bright);
  color: var(--roam-paper);
}

.roam-chip__count {
  font-family: var(--roam-mono);
  font-size: 11px;
  color: rgba(239, 236, 229, 0.5);
}

.roam-chip--more {
  border-style: dashed;
  color: rgba(239, 236, 229, 0.55);
}

.roam-ask--wall {
  height: auto;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--roam-accent-bright);
  font: 500 13px/1.4 var(--roam-sans);
  text-align: left;
}

.roam-ask--wall:hover {
  border: 0;
  color: var(--roam-paper);
}

.roam-wall__toolbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--roam-max);
  margin: 0 auto 20px;
  font: 500 11px/1 var(--roam-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(239, 236, 229, 0.5);
}

.roam-wall__toolbar a {
  color: var(--roam-accent-bright);
}

.roam-wall__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px 18px;
  max-width: var(--roam-max);
  margin: 0 auto;
}

/* The card inverts inside the wall. */
.roam-wall .roam-card__media {
  background: #24221c;
}

.roam-wall .roam-card__name a,
.roam-wall .roam-card__price {
  color: var(--roam-paper);
}

.roam-wall .roam-card__cat,
.roam-wall .roam-card__spec,
.roam-wall .roam-card__stock {
  color: rgba(239, 236, 229, 0.5);
}

.roam-wall .roam-card__stock.is-out {
  color: #e39a76;
}

.roam-wall .roam-card__stock.is-low,
.roam-wall .roam-card__stock.is-backorder {
  color: #e0b45f;
}

/* C - Ask First ----------------------------------------------------------- */

.roam-ask-first {
  padding: 64px var(--roam-gutter) 8px;
}

.roam-ask-first__head {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.roam-ask-first__eyebrow {
  display: block;
  font: 500 11px/1 var(--roam-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--roam-accent);
}

.roam-ask-first__headline {
  margin: 16px 0 0;
  font: 600 clamp(30px, 4.4vw, 48px) / 1.06 var(--roam-sans);
  letter-spacing: -0.03em;
  color: var(--roam-ink);
  text-wrap: balance;
}

.roam-askbox {
  display: flex;
  gap: 10px;
  margin: 30px 0 0;
}

.roam-askbox__input {
  flex: 1;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--roam-rule-strong);
  border-radius: var(--roam-radius);
  background: var(--roam-paper-raised);
  font-size: 15px;
}

.roam-askbox__input::placeholder {
  color: var(--roam-text-faint);
}

.roam-askbox__submit {
  height: 54px;
  padding: 0 28px;
}

.roam-askbox__prompts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.roam-chip--prompt {
  border-color: var(--roam-rule-strong);
  color: var(--roam-text-muted);
  background: var(--roam-paper-raised);
}

.roam-chip--prompt:hover {
  border-color: var(--roam-ink);
  color: var(--roam-ink);
}

.roam-ask-first__alt {
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--roam-text-faint);
}

/* The worked answer */

.roam-picks {
  max-width: var(--roam-max);
  margin: 56px auto 0;
  padding: 30px var(--roam-gutter) 34px;
  background: var(--roam-paper-raised);
  border: 1px solid var(--roam-rule);
  border-radius: var(--roam-radius);
}

.roam-picks__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--roam-rule);
}

.roam-picks__title {
  margin: 0;
  font: 600 22px/1.2 var(--roam-sans);
  letter-spacing: -0.02em;
  color: var(--roam-ink);
}

.roam-picks__filters {
  font: 400 12.5px/1.4 var(--roam-mono);
  color: var(--roam-text-faint);
}

.roam-picks__badge {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--roam-accent);
  color: var(--roam-paper);
  font: 500 10.5px/1 var(--roam-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.roam-picks__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
  margin: 24px 0 0;
}

.roam-pick {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.roam-pick__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--roam-radius);
  background: var(--roam-paper-sunk);
}

.roam-pick__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.roam-pick__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.roam-pick__name {
  margin: 0;
  font: 600 16px/1.3 var(--roam-sans);
}

.roam-pick__name a {
  color: var(--roam-ink);
}

.roam-pick__reason {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--roam-text-muted);
}

.roam-pick__spec {
  margin: 0;
  font: 400 12px/1.4 var(--roam-mono);
  color: var(--roam-text-faint);
}

.roam-picks__total {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--roam-rule);
  font-size: 14px;
  color: var(--roam-text-muted);
}

.roam-picks__total strong {
  font-family: var(--roam-mono);
  font-weight: 500;
  color: var(--roam-ink);
}

@media (max-width: 640px) {
  .roam-askbox {
    flex-direction: column;
  }

  .roam-picks__badge {
    margin-left: 0;
  }
}