:host {
  display: block;
  background: var(--ar-panel);
}

.context-panel {
  min-block-size: 100%;
  padding: var(--ar-space-5);
  border-inline-start: 1px solid var(--ar-border);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 16%), var(--ar-panel);
}

.context-panel h2 {
  margin: var(--ar-space-2) 0 var(--ar-space-3);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.55rem;
  font-weight: 400;
  line-height: 1.15;
}

.context-panel__eyebrow {
  display: block;
  padding-block-end: var(--ar-space-3);
  border-block-end: 1px solid var(--ar-border);
  color: var(--ar-gold);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.25rem;
}

.context-panel__hint {
  color: var(--ar-text-muted);
  font-size: var(--ar-font-sm);
  line-height: 1.55;
}

.context-panel__selection {
  margin: 0 0 var(--ar-space-3);
  color: var(--ar-gold);
  font-size: var(--ar-font-sm);
}

.context-panel__artwork {
  display: block;
  inline-size: 100%;
  margin-block-end: var(--ar-space-3);
}

.context-panel__artwork img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ar-border);
  object-fit: cover;
}

.context-panel__description {
  margin: 0 0 var(--ar-space-4);
  color: var(--ar-text-muted);
  font-size: var(--ar-font-sm);
  line-height: 1.55;
}

.context-panel__facts {
  display: grid;
  gap: var(--ar-space-3);
  margin: 0;
  padding-block-start: var(--ar-space-3);
  border-block-start: 1px solid var(--ar-border);
}

.context-panel__facts div {
  display: flex;
  justify-content: space-between;
  gap: var(--ar-space-3);
}

.context-panel__facts dt {
  color: var(--ar-text-muted);
  font-size: var(--ar-font-sm);
}

.context-panel__facts dd {
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
}

.context-panel__safe {
  color: var(--ar-success);
}