/* =========================================================================
   Ludic Media Studio — v2 About page (v2/about.html)
   Loaded after sections.css, audience.css, site.css and home.css (whose
   group block and compact studio cards this page reuses).

   What lives here: "who we are" with its strip of the people who make the
   work, the global network's postcards, and the positioning angles on a
   yellow band.

   Same rules as every stylesheet here: no ID selectors, only the documented
   breakpoints, every colour pair one checks.py measures, never white on
   yellow.
   ========================================================================= */

/* ---------- hero -------------------------------------------------------- */
.v2-hero--about .vx-hero__title { font-size: clamp(2.5rem, 6vw, 4.75rem); }

/* ---------- who we are --------------------------------------------------- */
.ab-story { display: grid; gap: var(--space-md) var(--space-xl); }
@media (min-width: 64rem) { .ab-story { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; } }
.ab-story__lead { margin-top: var(--space-sm); max-width: 40rem; font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 600; line-height: 1.4; }
.ab-story__body { display: grid; gap: var(--space-xs); line-height: var(--leading-body); color: var(--ink-muted); }
.ab-motto {
  justify-self: start;
  margin-top: var(--space-xs);
  padding: 0.375rem 0.75rem;
  background: var(--black);
  color: var(--yellow);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  font-weight: 900;
  line-height: var(--leading-snug);
  transform: rotate(-1.5deg);
}
.ab-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); margin-top: var(--space-xl); }
@media (min-width: 64rem) { .ab-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); } }
.ab-strip__item figure { position: relative; }
.ab-strip__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 3px solid var(--black); box-shadow: 0.375rem 0.375rem 0 var(--yellow); }
.ab-strip__cap {
  position: absolute;
  left: -0.375rem;
  bottom: -0.75rem;
  padding: 0.125rem 0.625rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-size: var(--text-sm);
  font-weight: 900;
}

/* ---------- angles on a yellow band: the number box turns black ---------- */
.section[data-tone="yellow"] .v2-angle__n { background: var(--black); color: var(--yellow); }

/* ---------- a global network: postcards from the work -------------------- */
.ab-cards { display: grid; gap: var(--space-lg) var(--space-md); }
@media (min-width: 36rem) { .ab-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .ab-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ab-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem var(--space-sm);
  background: var(--white);
  border: 2px solid var(--black);
  box-shadow: 0.375rem 0.375rem 0 var(--black);
  transform: rotate(-1deg);
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.ab-card:nth-child(even) { transform: rotate(1deg); }
.ab-card:hover,
.ab-card:focus-within { transform: translate(-0.25rem, -0.25rem); box-shadow: 0.625rem 0.625rem 0 var(--black); }
.ab-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--black); }
.ab-card__place {
  position: absolute;
  top: -0.875rem;
  right: 0.75rem;
  padding: 0.125rem 0.625rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px dashed var(--black);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(3deg);
}
.ab-card__title { margin-top: 0.25rem; font-size: var(--text-md); font-weight: 800; line-height: var(--leading-snug); }
.ab-card__link { color: inherit; text-decoration: none; }
.ab-card__link::after { content: ""; position: absolute; inset: 0; }
.ab-card__link:hover { color: inherit; }
.ab-card__body { font-size: var(--text-sm); line-height: var(--leading-mid); color: var(--ink-muted); }
.ab-card__go { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.25rem; font-size: var(--text-sm); font-weight: 700; }

.ab-base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-sm);
  border-top: 3px solid var(--black);
  font-size: var(--text-sm);
  font-weight: 600;
}
.ab-base__label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ab-base a { color: var(--black); }

/* ---------- the group line's link, on a black band ----------------------- */
.ab-line-link { display: inline-block; margin-left: 0.25rem; color: var(--yellow); font-size: var(--text-base); font-weight: 700; text-decoration: underline; }
.ab-line-link:hover { color: var(--white); }