#designed-for {
  background: var(--light);
  color: var(--ink);
}
#designed-for .audience-intro p { max-width: 56ch; }
#designed-for .audience-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: audience;
}
#designed-for .audience-list li {
  counter-increment: audience;
  margin: 0;
  min-width: 0;
}
#designed-for .audience-list strong { font-weight: 500; }
#designed-for .audience-list li::before {
  content: counter(audience, decimal-leading-zero);
  content: counter(audience, decimal-leading-zero) / "";
  font: 500 .78rem/1.25 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--bronze);
}

/* A question in the left margin, with seven entries in a ruled folio opposite. */
#designed-for[data-version="1"] {
  background: var(--paper);
  border-block: 1px solid var(--rule);
}
#designed-for[data-version="1"] .wrap {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 7.5rem);
}
#designed-for[data-version="1"] .audience-intro p { margin-top: 1.5rem; }
#designed-for[data-version="1"] h2 { font-size: clamp(38px, 4.1vw, 69px); }
#designed-for[data-version="1"] .audience-list { border-top: 2px solid var(--bronze); }
#designed-for[data-version="1"] li {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: .75rem;
  align-items: baseline;
  padding: clamp(.85rem, 1.55vw, 1.4rem) 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.42;
}

/* A dark exhibition wall. The two rows fit four plates, then three. */
#designed-for[data-version="2"] {
  background: var(--deep);
  color: var(--light);
}
#designed-for[data-version="2"] .audience-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: clamp(2rem, 5vw, 6rem);
}
#designed-for[data-version="2"] h2 { font-size: clamp(36px, 4.4vw, 75px); }
#designed-for[data-version="2"] h2 em,
#designed-for[data-version="2"] li::before { color: var(--gold); }
#designed-for[data-version="2"] .rule-title::before { background: var(--gold); }
#designed-for[data-version="2"] .audience-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  margin-top: clamp(2rem, 4vw, 4rem);
  background: #617363;
}
#designed-for[data-version="2"] li {
  grid-column: span 3;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 2.3rem);
  background: #0d382e;
  font: 500 clamp(20px, 1.7vw, 28px)/1.26 var(--serif);
}
#designed-for[data-version="2"] li:nth-child(n+5) { grid-column: span 4; }

/* An open, centered invitation followed by a two-column directory. */
#designed-for[data-version="3"] .wrap { max-width: 1160px; }
#designed-for[data-version="3"] .audience-intro { text-align: center; }
#designed-for[data-version="3"] .rule-title::before { margin-inline: auto; }
#designed-for[data-version="3"] h2 { max-width: 24ch; margin-inline: auto; }
#designed-for[data-version="3"] .audience-intro p { margin: 1.5rem auto 0; max-width: 66ch; }
#designed-for[data-version="3"] .audience-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  margin: clamp(2rem, 4vw, 4rem) auto 0;
  padding: clamp(.75rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem);
  background: var(--paper);
  border-block: 1px solid var(--rule);
}
#designed-for[data-version="3"] li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.45;
}
#designed-for[data-version="3"] li:nth-last-child(-n+2) { border-bottom: 0; }
#designed-for[data-version="3"] li::before { content: "◆" / ""; color: var(--bronze); font-size: .57rem; }
@media (max-width: 800px) {
  #designed-for[data-version="1"] .wrap,
  #designed-for[data-version="2"] .audience-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  #designed-for[data-version="2"] .audience-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #designed-for[data-version="2"] .audience-list li { grid-column: auto; }
  #designed-for[data-version="2"] li:last-child { grid-column: 1/-1; }
}
@media (max-width: 540px) {
  #designed-for[data-version="2"] .audience-list,
  #designed-for[data-version="3"] .audience-list { grid-template-columns: 1fr; }
  #designed-for[data-version="2"] .audience-list li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: baseline;
  }
  #designed-for[data-version="3"] li:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
}