/* =========================================================================
   Ludic Media Studio — v2 home page (v2/index.html)
   Loaded on v2/index.html and v2/about.html (the About page reuses the group
   block), after sections.css, audience.css and site.css.

   What lives here: the hero's six-studio mosaic, the outcome tabs' panel,
   the published figure on a work card, "a whole group behind every brief"
   and the voices block with its pull quote.

   Same rules as every stylesheet here: no ID selectors, only the documented
   breakpoints, every colour pair one checks.py measures, never white on
   yellow. The mosaic's entrance stops under prefers-reduced-motion (the
   global rule in foundation.css) and runs once, well under five seconds.
   ========================================================================= */

/* ---------- hero: six studios, six verbs ------------------------------- */
.hm-mosaic { position: relative; width: 100%; max-width: 40rem; padding-top: var(--space-sm); }
@media (min-width: 64rem) { .hm-mosaic { max-width: none; padding: var(--space-md) 0 var(--space-lg); } }
.hm-mosaic__badge { z-index: 3; }
.hm-mosaic__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); }
@media (min-width: 36rem) { .hm-mosaic__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .hm-mosaic__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); } }

.hm-tile {
  position: relative;
  transform: rotate(-1.5deg);
  animation: hm-deal 0.6s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.hm-tile:nth-child(even) { transform: rotate(1.5deg); }
@media (min-width: 64rem) {
  /* The right-hand column sits half a tile lower: a dealt hand, not a grid. */
  .hm-tile:nth-child(even) { transform: translateY(var(--space-lg)) rotate(1.5deg); }
}
@keyframes hm-deal { from { opacity: 0; translate: 0 1.5rem; } }

.hm-tile__link {
  position: relative;
  display: block;
  border: 3px solid var(--yellow);
  background: var(--black);
  color: var(--white);
  text-decoration: none;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.hm-tile__link:hover,
.hm-tile__link:focus-visible { transform: translate(-0.25rem, -0.25rem); box-shadow: 0.5rem 0.5rem 0 var(--white); color: var(--white); }
.hm-tile__media { display: block; overflow: hidden; }
.hm-tile__media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hm-tile__label {
  position: absolute;
  left: -0.5rem;
  bottom: -0.875rem;
  display: grid;
  max-width: calc(100% + 0.25rem);
  padding: 0.25rem 0.625rem 0.3125rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  line-height: 1.15;
}
.hm-tile__label strong { font-size: var(--text-md); font-weight: 900; letter-spacing: -0.01em; }
.hm-tile__studio { font-size: 0.75rem; font-weight: 700; }
@media (min-width: 64rem) { .hm-tile__label strong { font-size: var(--text-lg); } }

/* ---------- outcome tabs ----------------------------------------------- */
/* Six outcomes as a switchboard: every option in view, no scroller. */
.ax-tabs--outcomes.ax-tabs--ready .ax-tabs__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: var(--space-lg);
  padding-bottom: 0;
  overflow: visible;
}
@media (min-width: 48rem) { .ax-tabs--outcomes.ax-tabs--ready .ax-tabs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } }
.ax-tabs--outcomes .ax-tabs__tab { justify-content: flex-start; gap: 0.625rem; padding: 0.75rem 0.875rem; font-size: var(--text-base); line-height: var(--leading-snug); text-align: left; }
.ax-tabs--outcomes .ax-tabs__tab .ax-glyph { width: 1.25rem; height: 1.25rem; }
@media (min-width: 64rem) { .ax-tabs--outcomes .ax-tabs__tab { padding: 1rem 1.25rem; font-size: var(--text-md); } }

.hm-mix__title { margin-top: var(--space-sm); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hm-mix { margin-top: 0.5rem; }
@media (min-width: 36rem) { .hm-mix .ax-use { grid-template-columns: 12rem minmax(0, 1fr); } }
.hm-mix__link { color: var(--black); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.hm-mix__link:hover { color: var(--black); background: var(--yellow); }
.hm-proof {
  display: grid;
  gap: 0.375rem;
  justify-items: start;
  margin-top: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: var(--black);
  color: var(--white);
  box-shadow: 0.375rem 0.375rem 0 var(--yellow);
}
.hm-proof__label { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.hm-proof__line { font-weight: 600; line-height: var(--leading-mid); }
.hm-proof .arrow-link,
.hm-proof .arrow-link:hover { color: var(--yellow); }
.hm-proof :focus-visible { outline-color: var(--white); }
@media (min-width: 64rem) { .hm-out .ax-panel__media { position: sticky; top: calc(var(--header-h) + var(--space-md)); } }

/* ---------- studios: a shorter card on a phone ------------------------- */
@media (max-width: 47.999rem) {
  .hm-studios-wrap .v2-studio__media img { aspect-ratio: 5 / 2; }
  .hm-studios-wrap .v2-studio__text { gap: 0.5rem; padding-bottom: var(--space-sm); }
}

/* ---------- work: the published figure on each card -------------------- */
.hm-work .v2-card__media { position: relative; }
/* ---------- a whole group behind every brief ---------------------------- */
.hm-since { display: flex; align-items: flex-end; gap: 0.75rem; margin-top: var(--space-sm); }
.hm-since__year { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; }
.hm-since__label { max-width: 9rem; font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; line-height: var(--leading-snug); text-transform: uppercase; }

.hm-group { display: grid; gap: var(--space-lg) var(--space-md); margin-top: var(--space-sm); }
@media (min-width: 64rem) { .hm-group { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hm-co {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background: var(--white);
  color: var(--black);
  border: 3px solid var(--black);
  box-shadow: 0.5rem 0.5rem 0 var(--black);
}
.hm-co--here { background: var(--black); color: var(--white); }
.hm-co__tag {
  position: absolute;
  top: -0.875rem;
  left: var(--space-sm);
  padding: 0.125rem 0.625rem;
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hm-co__role { font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.hm-co__name { font-size: var(--text-xl); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.hm-co__body { line-height: var(--leading-mid); }
.hm-co__links { display: grid; gap: 0.375rem; margin-top: auto; padding-top: var(--space-xs); border-top: 2px solid currentColor; }
.hm-co--here .hm-co__role { color: var(--yellow); }
.hm-co--here .arrow-link,
.hm-co--here .arrow-link:hover { color: var(--yellow); }
.hm-co--here :focus-visible { outline-color: var(--white); }
.hm-group__line { margin-top: var(--space-xl); max-width: 48rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 800; line-height: 1.3; }

/* The same block on a black band (About): white cards, a yellow "here". */
.section[data-tone="black"] .hm-co { border-color: var(--yellow); box-shadow: 0.5rem 0.5rem 0 var(--yellow); }
.section[data-tone="black"] .hm-co--here { background: var(--yellow); color: var(--black); }
.section[data-tone="black"] .hm-co--here .hm-co__role,
.section[data-tone="black"] .hm-co--here .arrow-link,
.section[data-tone="black"] .hm-co--here .arrow-link:hover { color: var(--black); }
.section[data-tone="black"] .hm-co--here .arrow-link__icon { background: var(--black); color: var(--yellow); }
.section[data-tone="black"] .hm-co--here :focus-visible { outline-color: var(--black); }
.section[data-tone="black"] .hm-co__tag { background: var(--white); }
.section[data-tone="black"] .hm-since__year { color: var(--yellow); }

/* ---------- voices ------------------------------------------------------- */
.hm-voices { display: grid; gap: var(--space-md); }
.hm-voices > .vx-eyebrow { justify-self: start; margin-bottom: 0; }
.hm-pull { display: grid; gap: var(--space-sm); max-width: 62rem; }
.hm-pull__quote p { font-size: clamp(1.75rem, 3.8vw, 3.25rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; }
.hm-mark { background: linear-gradient(transparent 58%, var(--yellow) 58%); }
.hm-pull__who { display: grid; padding-left: var(--space-xs); border-left: 6px solid var(--yellow); line-height: var(--leading-mid); }
.hm-pull__who span { color: var(--ink-muted); font-size: var(--text-sm); }
.hm-quotes { margin-top: var(--space-lg); }