.notebook-panel,
.notebook-page {
  position: relative;
  overflow: hidden;
}

.notebook-panel::before,
.notebook-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2rem - 1px),
    rgba(120, 150, 255, 0.20) calc(2rem - 1px),
    rgba(120, 150, 255, 0.20) 2rem
  );
  opacity: 0.8;
}

.notebook-panel > *,
.notebook-page > * {
  position: relative;
  z-index: 1;
}

.hero-panel h1,
.article h1,
.section-heading h2,
.article h2,
.panel h2 {
  padding: 0;
  border-radius: 16px;
  background: linear-gradient(90deg, var(--color-highlight), transparent 72%);
}

.section-heading h2{
  font-family: var(--font-display);
}

.article {
  border-left: 1px solid var(--color-border-strong);
}