/* Shared visual treatment for every page and institution. Original logo colors stay intact. */
:root {
  --ink: #06080b;
  --panel: #10141a;
  --panel2: #151b23;
  --panel-2: #151b23;
  --text: #f7f3eb;
  --soft: #dce2eb;
  --muted: #aeb6c0;
  --copper: #4169e1;
  --copper2: #8aa7ff;
  --copper-light: #8aa7ff;
  --royal: #4169e1;
  --royal2: #6f8fff;
  --royal-light: #6f8fff;
  --brand-border: rgba(65, 105, 225, .85);
  --brand-radius: 1rem;
  --brand-surface: #000;
  --max: 1180px;
}

body {
  min-width: 0;
  background: radial-gradient(circle at 84% 4%, rgba(65,105,225,.18), transparent 28rem), linear-gradient(180deg, #090c10, var(--ink) 38%, #090d12);
}
.wrap { width: min(var(--max), calc(100% - 2.5rem)); }
.nav { min-height: 4.75rem; }
.nav-links > .nav-priority, .wordmark, .site-menu summary { font-size: .77rem; font-weight: 850; letter-spacing: .06em; }
.wordmark::before { content: none; }
.brand-wall, .education-grid, .education-credentials { grid-auto-rows: 1fr; }
.brand-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.brand-wall .brand-card,
.brand-wall .brand-card:nth-child(n+5),
.brand-wall .brand-card.current {
  grid-column: auto;
  min-width: 0;
  min-height: 22rem;
  padding: 1.25rem;
  border: 2px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background: var(--brand-surface);
  box-shadow: 0 1rem 2.5rem rgba(0,0,0,.2);
}
.brand-card .brand-logo {
  height: 12rem;
  min-height: 12rem;
  flex: 0 0 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem 1.25rem;
  background: transparent;
}
.brand-card .brand-logo img {
  width: 100%;
  height: 100%;
  max-width: 15rem;
  max-height: 8.5rem;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 1;
  mix-blend-mode: normal;
}
.brand-card .brand-caption { display: block; min-height: 4.75rem; padding-top: 1rem; }
.brand-card .brand-caption strong { display: block; max-width: none; font-size: 1.05rem; line-height: 1.3; }
.brand-card .brand-caption span { display: block; margin-top: .45rem; color: var(--muted); font-size: .875rem; font-weight: 550; line-height: 1.4; text-align: left; text-transform: none; }
.brand-card .brand-actions { margin-top: auto; padding-top: .85rem; }
.brand-actions a { min-height: 2.75rem; font-size: .875rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.brand-index { color: var(--copper2); }
.logo-plate { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 15rem; height: 8rem; padding: 1.35rem; border-radius: .45rem; }
.logo-plate--ucla { background: #2774ae; }
.logo-plate--columbia { background: #b9d9eb; }
.logo-plate--fox { background: #dfc378; max-width: 11rem; padding: .8rem 1.1rem; }
.brand-card--sony .brand-logo img, .brand-mark--sony img { border-radius: .25rem; }
.logo-plate img { width: 100%; height: 100%; object-fit: contain; }

.brand-rail { padding: 1.5rem 0; border-block: 1px solid rgba(65,105,225,.3); background: #080b10; }
.brand-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; min-height: 0; padding-block: 0; }
.brand-mark { display: flex; align-items: center; justify-content: center; min-width: 0; height: 7.5rem; padding: 1rem .7rem; border: 1px solid var(--brand-border); border-radius: .75rem; background: var(--brand-surface); text-decoration: none; }
.brand-row .brand-mark img { width: 100%; height: 100%; max-width: 10rem; max-height: 5rem; object-fit: contain; filter: none; opacity: 1; mix-blend-mode: normal; }
.brand-mark .logo-plate { height: 100%; max-width: 100%; padding: .4rem; }
.brand-row--single .logo-plate { width: 12rem; height: 9rem; padding: .9rem; }
.brand-row--single { display: flex; justify-content: center; }
.brand-row--single .brand-mark { width: 19rem; height: 12rem; padding: 1.5rem; }
.brand-row--single .brand-mark img { max-width: 15rem; max-height: 9rem; }
.brand-row--productions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brand-row--productions .brand-mark { height: 9rem; }
.brand-mark--text { color: #fff; font-size: 1.1rem; font-weight: 900; letter-spacing: .08em; text-align: center; }
.brand-mark:focus-visible { outline: 3px solid var(--copper2); outline-offset: 4px; }

.education-grid,
.education-credentials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.education-card,
.education-credential,
.teaching-grid .institution-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background: var(--brand-surface);
  color: var(--text);
  text-decoration: none;
}
.education-card .education-logo,
.education-credential .credential-logo,
.institution-card .institution-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12rem;
  height: 12rem;
  min-height: 12rem;
  padding: 1.75rem;
  border-bottom: 1px solid rgba(65,105,225,.3);
  background: var(--brand-surface);
}
.education-card .education-logo img,
.education-credential .credential-logo img,
.institution-card .institution-logo img {
  width: 100%;
  height: 100%;
  max-width: 16rem;
  max-height: 8.5rem;
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 1;
}
.education-copy, .credential-copy, .institution-copy { padding: 1.5rem; }
.education-copy > span, .credential-copy > span { display: block; margin: 0 0 .6rem; color: var(--copper2); font-size: .875rem; font-weight: 700; letter-spacing: .04em; line-height: 1.35; text-transform: uppercase; }
.education-copy h3, .credential-copy h3, .institution-copy h3 { margin: 0 0 .75rem; color: var(--text); font: 600 1.2rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: 0; }
.education-copy p, .credential-copy p, .institution-copy p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.education-credential .credential-copy strong { padding: 0; font: 600 1.2rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif; }
.teaching-grid .institution-card .teaching-photo { margin: 0; padding: 1.25rem 1.25rem 0; }
.teaching-photo img { border-radius: .5rem; }
.institution-card .institution-copy { flex: 1; }
.institution-marks { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.institution-marks .brand-mark { width: 12rem; height: 8rem; padding: 1.25rem; }
.institution-marks img { width: 100%; height: 100%; max-width: 10rem; max-height: 5rem; object-fit: contain; }

.card, .career-card, .production-card, .coverage-card, .video-card, .related > a, .hero-aside, .callout {
  border-color: rgba(65,105,225,.55);
  border-radius: var(--brand-radius);
  background: #090c11;
}
.button { min-height: 2.75rem; border-radius: .55rem; font-size: .875rem; line-height: 1.35; }
.site-footer, body > footer { background: #06080b; }

@media (max-width: 960px) {
  .brand-wall, .education-grid, .education-credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-row--single { display: flex; }
  .brand-row--productions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .wrap { width: min(var(--max), calc(100% - 1.5rem)); }
  .brand-wall, .education-grid, .education-credentials { grid-template-columns: 1fr; gap: 1rem; }
  .brand-wall .brand-card { min-height: 21rem; }
  .brand-row { gap: .5rem; }
  .brand-mark { height: 6.5rem; padding: .8rem .55rem; }
  .brand-row--single .brand-mark { width: min(100%, 19rem); }
  .brand-row--productions .brand-mark { height: 7.5rem; }
  .institution-marks .brand-mark { flex: 1 1 8rem; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-card, .brand-logo, .education-card, .education-credential { transition: none; }
  .brand-card:hover, .education-card:hover { transform: none; }
}
@media (max-width: 380px) {
  .nav, .nav-links--guided { gap: .3rem; }
  .nav-links > .nav-priority, .wordmark, .site-menu summary { gap: .35rem; padding-inline: .55rem; font-size: .72rem; letter-spacing: .04em; }
}

.brand-actions > a:last-child:nth-child(odd) { grid-column: 1 / -1; }