/* The original TN artwork uses native alpha transparency, including on mobile. */
@font-face {
  font-family: Plex;
  src: url('/assets/fonts/ibm-plex-mono-semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

.brand-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 104px;
  height: 78px;
  transition: width .35s, height .35s, transform .35s;
}
.brand-emblem {
  display: block;
  width: 100%;
  aspect-ratio: 1260 / 930;
  background: url('/assets/tn-mark-transparent.webp') center / contain no-repeat;
  filter: drop-shadow(0 0 7px rgba(255,16,40,.18));
  animation: brand-drift 7s ease-in-out infinite;
}
.brand-link::after {
  content: '';
  position: absolute;
  right: 15%;
  bottom: 9px;
  width: 35%;
  height: 1px;
  background: linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity: 0;
  pointer-events: none;
  animation: brand-signal 7s ease-in-out infinite;
}
.brand-link:hover, .brand-link:focus-visible { transform: translateY(-2px); }
.brand-link:hover .brand-emblem, .brand-link:focus-visible .brand-emblem {
  filter: drop-shadow(0 0 10px rgba(255,16,40,.4));
}
.site-header.is-scrolled .brand-link { width: 88px; height: 66px; }

@keyframes brand-drift {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(2px,-2px); }
}
@keyframes brand-signal {
  0%,65%,100% { opacity: 0; transform: translateX(-25px); }
  78% { opacity: .9; }
  91% { opacity: 0; transform: translateX(12px); }
}

.learning-heading { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.learning-heading .learning-name { display: block; }
.module-tag {
  font: 600 12px/1.6 var(--mono);
  color: var(--accent-text);
  letter-spacing: .2px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .learning-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 600px) {
  .brand-link { width: 88px; height: 66px; }
  .learning-heading { gap: 8px; }
  .module-tag { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-emblem, .brand-link::after { animation: none; }
  .brand-link:hover, .brand-link:focus-visible { transform: none; }
}
@media print { .brand-link { display: none; } }