/* Styles for about.hbs — the about page.

   Ported from the legacy `components/pages/about/AboutStory.vue`, whose scoped
   block styles both of the sections below it; the 1000 breakpoint and every
   value are the legacy's, read off the live site.

   What lives here is what `partials/story.hbs` and `partials/permissions.hbs`
   both render — a section heading, the white panel under it, the panel's own
   heading, its body text, and the frame around the small cards inside it.
   Rules shared by sibling partials belong to the parent (agents/ui.md →
   Component Stylesheets). */

.about-title {
  padding-top: 70px;
  color: var(--gray-900);
  font-size: 21px;
  font-weight: 700;
  text-align: center;
}

.about-panel {
  margin-top: 24px;
  padding: 16px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background-color: var(--gray-0);
}

.about-panel-title {
  color: var(--gray-900);
  font-size: 18px;
  font-weight: 700;
}

.about-text {
  margin-top: 8px;
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* The gap the legacy drew with a pair of `<br>`s: one blank line at the body
   text's own line height. */
.about-text + .about-text {
  margin-top: 20px;
}

/* `position: relative` is here rather than beside the accent bar that needs it,
   because it is the frame's job to be the thing an accent is positioned
   against. */
.about-card {
  position: relative;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
}

@media (min-width: 1000px) {
  .about-title {
    padding-top: 40px;
    font-size: 36px;
  }

  .about-panel {
    margin-top: 40px;
    padding: 24px;
  }

  .about-text {
    font-size: 16px;
    line-height: 26px;
  }

  .about-text + .about-text {
    margin-top: 26px;
  }
}