/* =====================================================================
   Bloop: about page additions (loaded after site.css, about.html only)
   ===================================================================== */

/* Intro + studio frame */
.about-intro__badges { --cluster-gap: 10px; margin-bottom: 28px; }
.about-studio { margin-top: clamp(40px, 6vw, 56px); }
@media (max-width: 640px) {
  .about-studio .frame { --frame-ratio: 4 / 3; border-radius: var(--radius-lg); }
}

/* Short note beside a section heading */

/* Story: heading on one side, two short paragraphs on the other */
.about-story { display: grid; gap: clamp(20px, 4vw, 64px); align-items: start; }
.about-story__body { display: grid; gap: var(--space-4); justify-items: start; }
.about-story__body p { max-width: 34em; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-muted); }
.about-story__body .btn { margin-top: var(--space-2); }
@media (min-width: 820px) {
  .about-story { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* Optically align the ghost button's label with the paragraphs (safe here: far from the page edge) */
  .about-story__body .btn { margin-left: calc(-1 * var(--space-5)); }
}

/* Values: calm flat cards with big mono numbers */
.about-values { --grid-min: 240px; }
.about-values > li { display: flex; }
.about-value { flex: 1; display: grid; align-content: start; gap: var(--space-2); }
.about-value__num {
  display: block; margin-bottom: var(--space-6);
  font-size: clamp(28px, 3vw, 36px); font-weight: var(--weight-bold); line-height: 1; letter-spacing: 0;
  color: var(--pink-900);
}
.about-value__body { color: var(--text-muted); }

/* Crew: max three columns on wide screens, compact rows on phones */
.about-crew { --grid-gap: 28px; --grid-min: max(220px, calc((100% - 2 * var(--grid-gap)) / 3)); }
.about-member { display: grid; gap: var(--space-4); align-content: start; }
.about-member .frame { box-shadow: var(--shadow-pop); }
.about-member__text { display: grid; gap: var(--space-1); }
.about-member__name { color: var(--text-subtle); }
.about-member__body { margin-top: var(--space-1); color: var(--text-muted); }
@media (max-width: 559px) {
  .about-crew { --grid-gap: var(--space-6); --grid-min: 100%; }
  .about-member { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
}

/* Join the house */
.about-join { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-8); }
.about-join__text { display: grid; gap: var(--space-5); justify-items: start; max-width: 40em; }
.about-join__text p { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-800); }