:root {
  --brand: #ed6b06;
  --brand-dark: #3c3c3b;
  --grey: #878787;
  --ink: #242321;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell-grid {
  background-image:
    linear-gradient(rgba(60, 60, 59, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 60, 59, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
}

.video-placeholder {
  background:
    linear-gradient(135deg, rgba(237, 107, 6, 0.18), rgba(60, 60, 59, 0.07)),
    repeating-linear-gradient(45deg, rgba(60, 60, 59, 0.08) 0 1px, transparent 1px 12px);
}

.video-play-button {
  align-items: center;
  background: rgba(36, 35, 33, 0.68);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.42);
  display: flex;
  height: 72px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  width: 72px;
}

.video-play-button::before {
  border-bottom: 13px solid transparent;
  border-left: 20px solid #fff;
  border-top: 13px solid transparent;
  content: "";
  display: block;
  margin-left: 5px;
}

.youtube-facade:hover .video-play-button {
  background: var(--brand);
  border-color: rgba(255, 255, 255, 0.68);
  transform: translate(-50%, -50%) scale(1.04);
}

.brand-rule {
  background: linear-gradient(90deg, #ed6b06 0 42%, #878787 42% 70%, #3c3c3b 70% 100%);
}