/* ==========================================================================
   The Brand Universe — "The Credits" with museum-style exhibits
   template-parts/home/brand-universe.php · ships to WordPress
   Desktop (≥900px): credits block + sticky exhibit plate.
   Touch/narrow (<900px): credits block + compact bottom sheet.
   ========================================================================== */

.bu {
  --bu-name-size: clamp(2.2rem, 3.75vw, 4.6rem);
  position: relative; isolation: isolate;
  padding-block: var(--space-section);
  background: var(--cm-black);
  border-block-start: var(--border-hair);
  overflow: clip;
}
/* A single soft overhead light on the exhibition wall */
.bu::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -10%; inset-inline-end: -10%; inline-size: 70%; block-size: 80%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}

.bu__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap); row-gap: var(--space-7);
  align-items: start;
}

/* ---------- Head ---------- */
.bu__head { grid-column: 1 / 8; display: grid; gap: var(--space-5); }
.bu__title {
  font-size: clamp(3rem, 6.6vw, 8rem); line-height: 0.92; letter-spacing: -0.05em;
  margin-block-start: var(--space-3);
}
.bu__title .t-thin { display: block; padding-inline-start: 1.15em; color: var(--cm-ink-100); }
.bu__intro { font-size: var(--text-lead); font-weight: 300; line-height: 1.5; color: var(--cm-ink-200); max-inline-size: 40ch; }
.bu__intro-touch { display: none; }

/* ---------- Filter bar ---------- */
.bu__bar {
  grid-column: 1 / 9;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4) var(--space-6);
  padding-block: var(--space-4); border-block: var(--border-hair);
}
.bu__filters { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.bu__filter {
  position: relative; padding: var(--space-2) 0; min-block-size: 40px;
  background: none; border: 0;
  font-size: 14px; font-weight: 500; color: var(--cm-ink-300);
  transition: color var(--dur-micro) var(--ease-standard);
}
:lang(ar) .bu__filter { font-size: 15px; }
.bu__filter sup { margin-inline-start: 3px; font-size: 10px; font-weight: 500; color: var(--cm-ink-400); font-family: var(--font-latin); }
.bu__filter::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 4px; block-size: 1px;
  background: var(--cm-orange); transform: scaleX(0); transform-origin: var(--origin-start, 0) 50%;
  transition: transform var(--dur-ui) var(--ease-out);
}
[dir="rtl"] .bu__filter::after { --origin-start: 100%; }
.bu__filter:hover { color: var(--cm-white); }
.bu__filter[aria-pressed="true"] { color: var(--cm-white); }
.bu__filter[aria-pressed="true"]::after { transform: scaleX(1); }
.bu__filter[aria-pressed="true"] sup { color: var(--cm-orange); }


/* ---------- The credits ---------- */
.bu__credits { grid-column: 1 / 9; position: relative; }
.bu__featuring {
  margin: 0 0 var(--space-3);
  font-size: clamp(1rem, 1.3vw, 1.35rem); font-weight: 200; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--cm-ink-300);
}
:lang(ar) .bu__featuring { letter-spacing: 0; text-transform: none; font-weight: 300; font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
.bu__list {
  margin: 0; padding: 0;
  font-size: var(--bu-name-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.04em;
  text-indent: clamp(3rem, 9vw, 10rem);         /* the programme's hanging first line */
  text-wrap: pretty;
}
:lang(ar) .bu__list { letter-spacing: 0; line-height: 1.42; font-weight: 600; }
.credit { display: inline; white-space: nowrap; }   /* name + meta + separator never split */
.credit__link {
  position: relative; display: inline; text-decoration: none; color: var(--cm-white);
  border-radius: 2px; outline-offset: 6px;
  -webkit-tap-highlight-color: transparent;
}
/* Each name rises from beneath its own baseline (the credits roll) */
.credit__mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-block-end: 0.14em; margin-block-end: -0.14em; text-indent: 0; }
:lang(ar) .credit__mask { padding-block: 0.06em 0.22em; margin-block: -0.06em -0.22em; }
.credit__name {
  display: inline-block; position: relative;
  transition: color var(--dur-ui) var(--ease-standard);
}
/* Active underline: an orange rule drawn from the start edge */
.credit__name::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.02em; block-size: max(2px, 0.045em);
  background: var(--cm-orange); transform: scaleX(0); transform-origin: var(--origin-start, 0) 50%;
  transition: transform var(--dur-reveal) var(--ease-out);
}
[dir="rtl"] .credit__name::after { --origin-start: 100%; }
.credit__cs {
  display: inline-block; inline-size: 0.32em; block-size: 0.32em; margin-inline-start: 0.08em;
  vertical-align: 0.62em; fill: none; stroke: var(--cm-orange); stroke-width: 2.5;
}
[dir="rtl"] .credit__cs { transform: scaleX(-1); }
.credit__meta {
  display: inline-flex; gap: 0.5em; align-items: baseline;
  margin-inline-start: 0.4em; vertical-align: 1.55em;
  font-size: max(11px, 0.19em); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
  color: var(--cm-ink-300); white-space: nowrap; text-indent: 0;
  transition: color var(--dur-ui) var(--ease-standard), opacity var(--dur-ui) var(--ease-standard);
}
:lang(ar) .credit__meta { letter-spacing: 0; text-transform: none; font-size: max(12px, 0.24em); vertical-align: 1.35em; }
.credit__n { font-family: var(--font-latin); color: var(--cm-orange); letter-spacing: 0.08em; }
.credit__sep { margin-inline: 0.22em 0.3em; font-weight: 200; color: var(--cm-ink-500); }
.credit__join { margin-inline-end: 0.3em; font-weight: 200; color: var(--cm-ink-300); }

/* States: something is being looked at → the rest of the cast steps back */
.bu__list.is-looking .credit__name { color: var(--cm-ink-400); }   /* ≥3:1 at these sizes */
.bu__list.is-looking .credit__meta { opacity: 0.45; }
.bu__list .credit__link.is-active .credit__name,
.bu__list .credit__link:hover .credit__name,
.bu__list .credit__link:focus-visible .credit__name { color: var(--cm-white); }
.credit__link.is-active .credit__name::after,
.credit__link:focus-visible .credit__name::after { transform: scaleX(1); }
.credit__link.is-active .credit__meta { opacity: 1; color: var(--cm-ink-100); }
.credit__link:focus-visible { outline: none; }
.credit__go {
  display: inline-block; inline-size: 0.3em; block-size: 0.3em; margin-inline-start: 0.06em; vertical-align: 0.62em;
  fill: none; stroke: var(--cm-orange); stroke-width: 2.4;
  opacity: 0; transform: translate(calc(-0.15em * var(--dir)), 0.1em) scaleX(var(--dir));
  transition: opacity var(--dur-ui) var(--ease-standard), transform var(--dur-ui) var(--ease-out);
}
.credit__link:hover .credit__go, .credit__link:focus-visible .credit__go { opacity: 1; transform: scaleX(var(--dir)); }
.credit__link:focus-visible .credit__mask { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* Filtered out: outlined, still in place, still reachable */
.credit.is-out .credit__name { color: transparent !important; -webkit-text-stroke: 1px var(--cm-ink-500); }
.credit.is-out .credit__meta { opacity: 0.25; }
.credit.is-out .credit__cs { opacity: 0.3; }

/* ==========================================================================
   The plate (exhibit panel)
   ========================================================================== */
.bu__plate {
  grid-column: 9 / -1; grid-row: 1 / span 3;
  position: sticky; inset-block-start: calc(var(--header-h) + clamp(3.5rem, 5vw, 5rem));   /* room for the numeral */
  margin-block-start: clamp(4rem, 9vw, 10rem);     /* hangs lower than the title: asymmetry */
}
.plate__bar { display: none; }

.plate__numeral {
  position: absolute; z-index: 2; pointer-events: none;
  inset-block-start: -0.5em; inset-inline-end: -0.12em;   /* outer corner: never collides with the credits or filters */
  font-family: var(--font-latin); font-size: clamp(4.5rem, 6.6vw, 7.75rem); font-weight: 200; line-height: 1; letter-spacing: -0.06em;
  color: var(--cm-white); mix-blend-mode: difference;
  font-variant-numeric: tabular-nums;
}
.plate__numeral:empty { display: none; }

/* Empty frame before any selection */
.plate__intro { display: grid; gap: var(--space-4); }
.plate__intro[hidden] { display: none; }
.plate__intro-frame {
  position: relative; aspect-ratio: 5 / 4; display: grid; place-items: center;
  border: 1px solid var(--color-line); background:
    radial-gradient(60% 60% at 50% 40%, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 70%),
    var(--cm-ink-900);
}
.plate__intro-c { inline-size: 26%; aspect-ratio: 1; fill: var(--cm-ink-700); }
.plate__intro-title { font-size: var(--text-lead); font-weight: 300; color: var(--cm-ink-200); max-inline-size: 24ch; }
.plate__intro-title strong { font-weight: 600; color: var(--cm-white); }
.plate__intro-count { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cm-ink-300); }
:lang(ar) .plate__intro-count { letter-spacing: 0; text-transform: none; font-size: 14px; }

.exhibits { margin: 0; padding: 0; list-style: none; display: grid; }
.js .exhibit { display: none; grid-area: 1 / 1; }                 /* stacked; one visible */
.js .exhibit.is-current, .js .exhibit.is-leaving { display: block; }
.exhibit.is-leaving { pointer-events: none; animation: bu-leave 260ms var(--ease-standard) forwards; }
.exhibit__in { display: grid; gap: var(--space-5); }

/* Museum frame: passe-partout mat around the work */
.exhibit__frame { margin: 0; display: grid; gap: var(--space-3); }
.exhibit__mat {
  position: relative; overflow: hidden;
  padding: clamp(10px, 0.9vw, 16px);
  background: var(--cm-ink-850);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-lift);
}
.exhibit__mat img { inline-size: 100%; aspect-ratio: 5 / 4; object-fit: cover; background: var(--cm-ink-800); }
.exhibit__caption {
  display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap;
  font-size: 12px; color: var(--cm-ink-300);
}
.exhibit__caption span { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; color: var(--cm-ink-200); }
:lang(ar) .exhibit__caption { font-size: 13px; }
:lang(ar) .exhibit__caption span { letter-spacing: 0; text-transform: none; font-size: 12px; }

/* The wall label */
.exhibit__label { display: grid; gap: var(--space-3); padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--cm-orange); }
.exhibit__head { display: grid; gap: var(--space-3); }
.exhibit__no { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cm-ink-300); }
:lang(ar) .exhibit__no { letter-spacing: 0; text-transform: none; font-size: 13px; }
.exhibit__of { color: var(--cm-ink-400); }
.exhibit__name { font-size: clamp(1.75rem, 2.3vw, 2.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; outline: none; }
:lang(ar) .exhibit__name { letter-spacing: 0; line-height: 1.3; }
.exhibit__desc { font-size: 15px; line-height: 1.6; color: var(--cm-ink-200); max-inline-size: 42ch; }
:lang(ar) .exhibit__desc { font-size: 16px; line-height: 1.85; }
.exhibit__meta { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-5); margin: var(--space-2) 0 0; font-size: 13px; }
.exhibit__meta > div { display: contents; }
.exhibit__meta dt { color: var(--cm-ink-300); }
.exhibit__meta dd { margin: 0; color: var(--cm-white); }
.exhibit__cta {
  justify-self: start; margin-block-start: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-block-size: 44px;
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--cm-white);
  border-block-end: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-micro) var(--ease-standard), color var(--dur-micro) var(--ease-standard);
}
.exhibit__cta svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: scaleX(var(--dir)); transition: transform var(--dur-ui) var(--ease-out); }
.exhibit__cta:hover { border-color: var(--cm-orange); }
.exhibit__cta:hover svg { transform: scaleX(var(--dir)) translateX(4px); }
.exhibit__cta--case { padding-inline: var(--space-5); border: 0; border-radius: var(--radius-pill); background: var(--cm-orange); color: var(--cm-black); }
.exhibit__cta--case:hover { background: var(--cm-orange-glow); }
.exhibit__cta--case:hover svg { transform: scaleX(var(--dir)) translate(3px, -3px); }

/* ---------- Exhibit entrance: curtain rises on the work, label follows ---------- */
@media (prefers-reduced-motion: no-preference) {
  .exhibit.is-entering .exhibit__mat { animation: bu-curtain 900ms var(--ease-curtain) both; }
  .exhibit.is-entering .exhibit__mat img { animation: bu-settle 1300ms var(--ease-out) both; }
  .exhibit.is-entering .exhibit__caption,
  .exhibit.is-entering .exhibit__label > * { animation: bu-rise 700ms var(--ease-out) both; }
  .exhibit.is-entering .exhibit__caption { animation-delay: 380ms; }
  .exhibit.is-entering .exhibit__label > :nth-child(1) { animation-delay: 160ms; }
  .exhibit.is-entering .exhibit__label > :nth-child(2) { animation-delay: 220ms; }
  .exhibit.is-entering .exhibit__label > :nth-child(3) { animation-delay: 280ms; }
  .exhibit.is-entering .exhibit__label > :nth-child(4) { animation-delay: 340ms; }
  .exhibit.is-entering .exhibit__label > :nth-child(5) { animation-delay: 400ms; }
  .plate__numeral.is-ticking { animation: bu-rise 600ms var(--ease-out) both; }
}
@keyframes bu-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bu-settle { from { transform: scale(1.14); filter: brightness(0.55); } to { transform: none; filter: none; } }
@keyframes bu-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bu-leave { to { opacity: 0; } }

/* No-JS: the plate is a plain, readable catalogue under the credits */
html.no-js .bu__plate { grid-column: 1 / -1; grid-row: auto; position: static; margin: 0; }
html.no-js .plate__intro, html.no-js .plate__numeral { display: none; }
html.no-js .exhibits { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-8) var(--grid-gap); }

/* ==========================================================================
   Narrow screens and touch: compact bottom sheet
   ========================================================================== */
@media (max-width: 899px) {
  .bu { --bu-name-size: clamp(1.85rem, 8.2vw, 2.9rem); }
  .bu__grid { row-gap: var(--space-6); }
  .bu__head, .bu__bar, .bu__credits { grid-column: 1 / -1; }
  .bu__title .t-thin { padding-inline-start: 0.6em; }
  .bu__intro-pointer { display: none; }
  .bu__intro-touch { display: inline; }

  .bu__bar { flex-direction: column; align-items: stretch; gap: var(--space-2); padding-block: var(--space-2) var(--space-3); }
  .bu__filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: var(--space-5);
    margin-inline: calc(var(--page-gutter) * -1); padding-inline: var(--page-gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--page-gutter), #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--page-gutter), #000 calc(100% - 2.5rem), transparent);
  }
  [dir="rtl"] .bu__filters {
    -webkit-mask-image: linear-gradient(-90deg, transparent 0, #000 var(--page-gutter), #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(-90deg, transparent 0, #000 var(--page-gutter), #000 calc(100% - 2.5rem), transparent);
  }
  .bu__filters::-webkit-scrollbar { display: none; }
  .bu__filter { flex: none; min-block-size: 44px; }
  .bu__list { text-indent: 0; line-height: 1.24; }
  :lang(ar) .bu__list { line-height: 1.5; }
  .credit__meta { display: none; }               /* keep the type clean at phone sizes; the sheet carries the detail */
  .credit__sep { margin-inline: 0.16em 0.22em; }
  .credit__mask { max-inline-size: 100%; }
  .credit__name { white-space: normal; }        /* a long name may wrap inside its own mask */
  .credit:last-child { white-space: normal; }   /* lets "and" break away from the final name */

  /* On narrow screens the names open their project pages directly: no preview panel */
  .bu__plate, .bu__backdrop { display: none !important; }
}

/* Short desktop windows: keep the sticky plate within the viewport */
@media (min-width: 900px) and (max-height: 820px) {
  .exhibit__mat img { aspect-ratio: 16 / 11; }
  .exhibit__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .bu__plate { transition: none !important; }
  .exhibit.is-leaving { animation: none; display: none !important; }
}

/* Touch: instant pressed feedback on a name before its project page opens */
@media (hover: none) {
  .credit__link:active .credit__name::after { transform: scaleX(1); transition-duration: 0s; }
  .bu__filter:active { color: var(--cm-white); }
}