/* /about/ (about.php): layout on top of format.css, which gives the hero, sections, splits and cards. */

.wl-fonts-pending :is(.about-needs h3, .about-status h3) { visibility: hidden; }

.about-page .fmt-split > div > p:last-child { margin-bottom: 0; }
.about-sign { color: var(--slate); font-weight: 600; }
.about-sign::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--amber); }

.about-needs, .about-status {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2);
  padding: 22px 24px 20px;
}
.about-needs h3, .about-status h3 {
  --display: "Anybody", "Anybody 700 105", "Instrument Sans", system-ui, sans-serif;
  font: 700 1.15rem/1.2 var(--display);
  font-variation-settings: "wdth" 105;
  margin: 0 0 10px;
}
.about-status h3 + ul { margin-bottom: 20px; }
.about-status ul:last-child { margin-bottom: 0; }
.about-needs ol, .about-status ul { margin: 0; padding-left: 1.3em; }
.about-needs li, .about-status li { margin: 8px 0; color: var(--slate); }
.about-needs li strong { color: var(--ink); }

.about-daws { margin-top: 20px; }
.about-daws td { font-size: 0.95rem; }
.about-daws td:first-child { width: 17%; min-width: 150px; }
.about-daws td:nth-child(2) { width: 33%; color: var(--slate); }
.about-daws td:first-child a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }
.about-daws td:first-child a:hover { color: var(--cobalt); text-decoration-color: currentColor; }
.about-note { color: var(--slate); font-size: 0.92rem; margin: 16px 0 0; }
.about-after { margin: 24px 0 0; }

@media (max-width: 720px) {
  /* the table becomes one card per DAW */
  .about-daws thead { display: none; }
  .about-daws, .about-daws tbody, .about-daws tr, .about-daws td { display: block; width: auto; }
  .about-daws tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .about-daws td, .about-daws td:first-child, .about-daws td:nth-child(2) { padding: 3px 0; border: 0; white-space: normal; width: auto; min-width: 0; }
  .about-daws td:first-child { font-size: 1.05rem; }
  .about-daws td[data-label]::before { content: attr(data-label) ": "; color: var(--ink); font-weight: 600; }
}