.op .scene-bg { opacity: .38; }

.op-inner {
  display: grid;
  gap: clamp(14px, 1.7vh, 30px);
  align-content: center;
  height: 100%;
  padding-bottom: 2vh;
}

.op-brand { display: flex; align-items: center; gap: clamp(10px, 1vw, 20px); }
.op-brand-logo {
  height: clamp(26px, 2.5vw, 50px);
  width: auto;
  object-fit: contain;
}
.op-brand-tag {
  font-size: clamp(13px, .78vw, 14px);
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--paper-faint);
  border-left: 1px solid var(--line-2);
  padding-left: clamp(10px, 1vw, 20px);
}

.op-title { max-width: 20ch; }
.op-line { display: block; }
.op-line span {
  background: linear-gradient(100deg, #FFFFFF 0%, #F2E4C0 55%, #D9B45A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.op-sub { max-width: 46ch; }

.op-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 60px);
  margin-top: clamp(6px, 1.4vh, 22px);
  flex-wrap: wrap;
}
.op-venue { display: grid; gap: .7em; }
.op-callout { text-align: right; }

.op-badge-hint {
  position: absolute;
  right: clamp(24px, 4vw, 90px);
  top: 50%;
  transform: translateY(-50%) scale(.86);
  display: grid;
  justify-items: center;
  gap: .9em;
  opacity: 0;
}
.op-badge-hint.on { transform: translateY(-50%) scale(1); opacity: 1; }

.op-badge-card {
  width: clamp(150px, 13vw, 230px);
  aspect-ratio: 0.66;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(228,193,105,.4);
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  animation: floatCard 6s ease-in-out infinite alternate;
}
@keyframes floatCard {
  from { transform: translateY(-6px) rotate(-2deg); }
  to   { transform: translateY(6px) rotate(2deg); }
}
.op-badge-strip { height: 26%; background: var(--grad-gold); opacity: .85; }
.op-badge-body { padding: 12% 10%; display: grid; align-content: center; gap: .35em; }
.op-badge-name { font-weight: 700; font-size: clamp(13px, 1vw, 19px); }
.op-badge-id { font-size: clamp(13px, .8vw, 15px); color: var(--paper-faint); letter-spacing: .1em; }
.op-badge-label {
  font-size: clamp(13px, .76vw, 14px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  max-width: 16ch;
  text-align: center;
}

@media (max-width: 1100px) {
  .op-badge-hint { display: none; }
}