/* intro.css — hero (opener) + interior page heads */

.opener {
  position: relative;
  background:
    radial-gradient(900px 500px at 78% -10%, rgba(123,47,247,.35), transparent 60%),
    radial-gradient(600px 400px at 8% 110%, rgba(255,61,174,.22), transparent 55%),
    var(--bg);
  padding: 56px 0 64px;
  overflow: hidden;
}
.opener__grid {
  display: grid;
  gap: 36px;
  align-items: center;
}
.opener__title { margin-bottom: 18px; }
.opener__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand) 10%, var(--accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.opener__lede { font-size: 1.2rem; color: var(--fg-soft); margin-bottom: 28px; max-width: 54ch; }
.opener__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.opener__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: .92rem;
  color: var(--fg-soft);
}
.opener__meta strong { color: var(--brand-deep); font-family: var(--ff-display); font-size: 1.1rem; display: block; }
.opener__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-glow);
}
.opener__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

@media (min-width: 900px) {
  .opener { padding: 80px 0 96px; }
  .opener__grid { grid-template-columns: 1.05fr 1fr; gap: 56px; }
}

/* interior page head */
.pagehd {
  background:
    radial-gradient(700px 360px at 90% -30%, rgba(123,47,247,.28), transparent 60%),
    var(--brand-deep);
  color: #fff;
  padding: 54px 0 58px;
}
.pagehd .crumbs { font-size: .85rem; color: #c9b8ec; margin-bottom: 16px; }
.pagehd .crumbs a { color: #e7dbff; text-decoration: none; }
.pagehd .crumbs a:hover { color: var(--accent); }
.pagehd h1 { color: #fff; max-width: 18ch; }
.pagehd p { color: #d8caf3; max-width: 60ch; margin-bottom: 0; }