.talks {
  --accent: #6dff4f;
  --accent-2: #3dffb0;
}
.screen {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  aspect-ratio: 16/10;
  box-shadow: 0 20px 60px -20px
    color-mix(in oklab, var(--accent) 45%, transparent);
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgb(255 255 255/0.12), transparent 35%);
  pointer-events: none;
}
.screen.sketch {
  background:
    radial-gradient(
      120% 95% at 16% 0%,
      color-mix(in oklab, var(--accent) 10%, transparent),
      transparent 62%
    ),
    radial-gradient(
      90% 80% at 100% 100%,
      color-mix(in oklab, var(--accent-2) 8%, transparent),
      transparent 62%
    ),
    #09090d;
}
.screen > .art {
  position: absolute;
  inset: 0;
}
.timeline {
  position: relative;
  padding-left: clamp(26px, 5vw, 56px);
}
.timeline::before {
  content: "";
  position: absolute;
  left: clamp(6px, 1.6vw, 18px);
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent-2) 50%, transparent);
  box-shadow: 0 0 12px var(--accent);
}
.t-year {
  position: relative;
  font: 400 2.4rem/1 var(--serif);
  color: #fff;
  margin: 36px 0 18px;
}
.t-group:first-child .t-year {
  margin-top: 0;
}
.t-year::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(26px, 5vw, 56px) + clamp(6px, 1.6vw, 18px) - 5px);
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.talk {
  display: grid;
  grid-template-columns: clamp(150px, 22vw, 240px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  margin-bottom: 22px;
}
.talk h4 {
  font: 400 clamp(1.35rem, 2.2vw, 1.75rem)/1.12 var(--serif);
  color: #fff;
  margin: 8px 0 6px;
}
.venue {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0;
}
.talk p:not(.venue) {
  margin: 10px 0 14px;
  color: var(--soft);
  font-size: 0.98rem;
  max-width: var(--measure);
}
.talk .meta {
  margin-bottom: 0;
}
.date {
  font: 500 12px/1 var(--mono);
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 4px;
}
@media (prefers-reduced-motion: no-preference) {
  .live .dot {
    animation: pulse 1.8s ease-in-out infinite;
  }
}
@keyframes pulse {
  50% {
    opacity: 0.35;
    box-shadow: 0 0 2px currentColor;
  }
}
@media (max-width: 640px) {
  .talk {
    grid-template-columns: minmax(0, 1fr);
  }
  .talk .screen {
    max-width: 420px;
  }
}