.language-family-page .project-page {
  padding: 28px 0 80px;
}

.language-shell {
  display: grid;
  gap: 22px;
}

.language-hero,
.language-section {
  border: 1px solid var(--line);
  background: var(--panel);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-strong);
  border-radius: 30px;
}

.language-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap: 24px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.language-hero::before {
  content: "";
  position: absolute;
  inset: auto -80px -80px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 164, 62, 0.22), transparent 66%);
  pointer-events: none;
}

html[data-theme="dark"] .language-hero::before {
  background: radial-gradient(circle, rgba(255, 186, 92, 0.16), transparent 70%);
}

.language-hero-copy {
  position: relative;
  z-index: 1;
}

.language-hero-copy h1 {
  margin: 0;
  font: 700 clamp(2.8rem, 6vw, 5rem)/0.96 var(--font-display);
  letter-spacing: -0.05em;
}

.language-lead {
  margin: 22px 0 0;
  font: 500 clamp(1.16rem, 2vw, 1.5rem)/1.7 var(--font-body);
}

.language-summary {
  margin: 16px 0 0;
  max-width: 48rem;
  line-height: 1.85;
}

.language-hero-side {
  display: grid;
  gap: 14px;
  align-content: end;
}

.language-stat-card {
  padding: 18px 18px 16px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(155deg, rgba(255, 252, 241, 0.82), rgba(255, 248, 234, 0.42)),
    var(--surface);
}

html[data-theme="dark"] .language-stat-card {
  background:
    linear-gradient(155deg, rgba(57, 43, 16, 0.7), rgba(29, 23, 18, 0.32)),
    var(--surface);
}

.language-stat-card strong {
  display: block;
  margin-top: 10px;
  font: 700 1.1rem/1.5 var(--font-display);
}

.language-section {
  padding: 28px;
}

.section-heading-block {
  display: grid;
  gap: 10px;
}

.history-grid,
.direction-grid {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.history-grid,
.direction-grid,
.language-subgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.history-column,
.direction-card,
.language-project-card {
  border-radius: 24px;
  border: 1px solid var(--line);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
    var(--surface);
}

html[data-theme="dark"] .history-column,
html[data-theme="dark"] .direction-card,
html[data-theme="dark"] .language-project-card {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    var(--surface);
}

.history-column,
.direction-card {
  padding: 22px;
}

.history-list {
  display: grid;
  gap: 16px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.history-list.compact {
  padding-left: 18px;
}

.history-list strong,
.language-project-head h3,
.history-column h3,
.direction-card h3,
.language-subgrid h4 {
  font-family: var(--font-display);
}

.history-column h3,
.direction-card h3,
.language-project-head h3,
.language-subgrid h4 {
  margin: 0;
}

.history-list p,
.direction-card p,
.language-project-card p,
.language-subgrid li {
  line-height: 1.8;
}

.language-project-card {
  margin-top: 18px;
  padding: 24px;
}

.language-project-card.project-main {
  background:
    linear-gradient(160deg, rgba(236, 210, 118, 0.22), rgba(255, 255, 255, 0.12)),
    var(--surface);
}

html[data-theme="dark"] .language-project-card.project-main {
  background:
    linear-gradient(160deg, rgba(132, 92, 25, 0.32), rgba(255, 255, 255, 0.03)),
    var(--surface);
}

.language-project-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.language-subgrid {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.language-subgrid section {
  padding: 16px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 84%, white 16%);
  border: 1px solid color-mix(in srgb, var(--line) 88%, white 12%);
}

html[data-theme="dark"] .language-subgrid section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

.language-subgrid ul {
  margin: 12px 0 0;
  padding-left: 18px;
}

@media (max-width: 980px) {
  .language-hero,
  .history-grid,
  .direction-grid,
  .language-subgrid {
    grid-template-columns: 1fr;
  }

  .language-project-head {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .language-family-page .project-page {
    padding: 18px 0 64px;
  }

  .language-hero,
  .language-section,
  .language-project-card {
    padding: 18px;
  }

  .language-hero-copy h1 {
    font-size: clamp(2.2rem, 12vw, 3.2rem);
  }
}