.topbar nav { gap: 22px; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13,13,14,.98) 0%, rgba(13,13,14,.91) 38%, rgba(13,13,14,.56) 68%, rgba(13,13,14,.32) 100%),
    url("/hero-unitec.png") center / cover no-repeat;
}

.hero .circuit-lines { z-index: 1; opacity: .1; }
.hero .hero-copy,
.hero .hero-panel { z-index: 2; }

.live-strip {
  min-height: 92px;
  padding: 16px 5vw;
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(230px, 1fr) auto;
  gap: 42px;
  align-items: center;
  background: #1a1a1b;
  color: #fff;
  border-bottom: 3px solid var(--wine);
}

.live-strip > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: baseline;
}

.live-strip small {
  grid-column: 1 / -1;
  color: #999;
  font: 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
}

.live-strip strong { font-size: 25px; letter-spacing: -.03em; }
.live-strip span { color: #bbb; font-size: 12px; }
.live-strip > a { color: #999; font-size: 10px; text-decoration: underline; text-underline-offset: 4px; }

.project-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: #ccc;
}

.project-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.48));
  pointer-events: none;
}

.project-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.portfolio-grid article:hover .project-photo img { transform: scale(1.035); filter: contrast(1.04); }
.project-photo span {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font: 10px var(--font-geist-mono);
  letter-spacing: .12em;
}

.portfolio-grid small { display: block; line-height: 1.5; }

.news { background: #f4f2ef; }
.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #bbb;
  border-left: 1px solid #bbb;
}

.news-card,
.news-status {
  min-height: 245px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  background: rgba(255,255,255,.42);
}

.news-card { transition: background .2s ease, transform .2s ease; }
.news-card:hover { background: #fff; transform: translateY(-2px); }
.news-card small,
.news-status small {
  color: var(--wine);
  font: 9px var(--font-geist-mono);
  text-transform: uppercase;
  letter-spacing: .11em;
}

.news-card h3,
.news-status h3 {
  margin: 35px 0 16px;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.news-card p,
.news-status p { margin: auto 0 0; color: #666; font-size: 12px; line-height: 1.5; }
.news-card span { margin-top: auto; padding-top: 22px; color: var(--wine); font-size: 12px; }
.news-source { display: flex; justify-content: space-between; gap: 20px; margin-top: 22px; color: #777; font-size: 11px; }
.news-source a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 1050px) {
  .topbar nav { gap: 15px; }
  .news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 850px) {
  .live-strip { grid-template-columns: 1fr 1fr; gap: 22px; }
  .live-strip > a { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .hero::before {
    background:
      linear-gradient(180deg, rgba(13,13,14,.93), rgba(13,13,14,.76)),
      url("/hero-unitec.png") 68% center / cover no-repeat;
  }
  .live-strip { grid-template-columns: 1fr; padding-top: 22px; padding-bottom: 22px; }
  .live-strip > a { grid-column: auto; }
  .news-grid { grid-template-columns: 1fr; }
  .news-card, .news-status { min-height: 210px; }
  .news-source { flex-direction: column; }
}