.worldview-energy-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.energy-page {
  display: grid;
  width: min(1080px, 94vw);
  margin: clamp(2rem, 6vw, 4rem) auto clamp(3rem, 8vw, 5rem);
  gap: clamp(2.4rem, 4vw, 3.6rem);
}

.energy-hero {
  display: grid;
  text-align: left;
  gap: clamp(0.8rem, 1.8vw, 1.4rem);
}

.energy-hero__eyebrow {
  color: var(--accent-azure);
  font-family: Cinzel, serif;
  letter-spacing: .28rem;
  text-transform: uppercase;
}

.energy-hero__title {
  color: var(--accent-gold);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-family: Cinzel, serif;
  letter-spacing: .24rem;
  text-transform: uppercase;
}

.energy-hero__subtitle {
  max-width: 72ch;
  color: rgb(214 222 255 / 86%);
  line-height: 1.8;
}

.energy-content-shell {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}

.energy-tabs {
  position: sticky;
  top: clamp(1rem, 4vw, 2.2rem);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(0.8rem, 2vw, 1.4rem);
}

.energy-tab {
  display: inline-flex;
  align-items: center;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid rgb(135 168 255 / 28%);
  border-radius: 22px;
  background: rgb(14 18 35 / 82%);
  color: var(--text-primary);
  text-align: left;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
  font-family: "Noto Serif SC", serif;
  gap: 1rem;
}

.energy-tab:hover,
.energy-tab:focus-visible {
  border-color: rgb(230 200 139 / 52%);
  box-shadow: 0 14px 32px rgb(8 0 42 / 42%);
  transform: translateY(-4px);
}

.energy-tab.is-active {
  border-color: rgb(230 200 139 / 65%);
  background: rgb(10 14 30 / 90%);
  box-shadow: 0 18px 38px rgb(10 0 45 / 55%);
}

.energy-tab__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(135 168 255 / 32%);
  border-radius: 16px;
  background: rgb(13 18 33 / 85%);
}

.energy-tab__content {
  display: grid;
  gap: .35rem;
}

.energy-tab__label {
  color: rgb(232 229 255 / 94%);
  font-size: 1.05rem;
  font-family: Cinzel, serif;
  letter-spacing: .14rem;
  text-transform: uppercase;
}

.energy-tab__meta {
  color: rgb(198 212 255 / 70%);
  font-size: .85rem;
  letter-spacing: .06rem;
}

.energy-diagram {
  display: grid;
  min-height: 620px;
}

.energy-diagram__placeholder {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  border: 1px dashed rgb(135 168 255 / 32%);
  border-radius: 22px;
  background: rgb(10 14 30 / 68%);
  color: rgb(198 212 255 / 72%);
  font-size: .95rem;
  text-align: center;
  letter-spacing: .08rem;
}

.energy-diagram__wrapper {
  display: grid;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgb(135 168 255 / 28%);
  border-radius: 24px;
  background: rgb(14 18 35 / 85%);
  box-shadow: inset 0 0 32px rgb(6 0 35 / 35%);
  gap: clamp(1.8rem, 3vw, 2.6rem);
}

.energy-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: 20px;
  background: radial-gradient(
    circle at 50% 50%,
    rgb(135 168 255 / 16%),
    transparent 70%
  );
}

.energy-diagram__info {
  display: grid;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid rgb(135 168 255 / 28%);
  border-radius: 18px;
  background: rgb(10 14 28 / 78%);
  gap: 1.4rem;
}

.energy-diagram__info h3 {
  color: var(--accent-azure);
  font-size: 1.6rem;
  font-family: Cinzel, serif;
  letter-spacing: .1rem;
}

.energy-diagram__info p {
  color: var(--text-secondary);
  line-height: 1.7;
}

.energy-diagram__details {
  display: grid;
  color: rgb(232 229 255 / 82%);
  line-height: 1.7;
  gap: .8rem;
  list-style: none;
}

.energy-diagram__details li::before {
  color: var(--accent-gold);
  content: "•";
  margin-right: .6rem;
}

.energy-diagram__relations {
  border-top: 1px solid rgb(135 168 255 / 18%);
  padding-top: .6rem;
}

.energy-panel__header {
  display: grid;
  gap: .6rem;
}

.energy-panel__title {
  color: var(--accent-azure);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-family: Cinzel, serif;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

.energy-panel__summary {
  max-width: 68ch;
  color: rgb(214 222 255 / 78%);
  line-height: 1.7;
}

.energy-panel__body {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.6rem, 3vw, 2.4rem);
}

.energy-diagram img {
  display: block;
  width: 100%;
  height: auto;
}

.energy-diagram figcaption {
  padding: 1rem 1.4rem;
  color: rgb(198 212 255 / 72%);
  font-size: .9rem;
  letter-spacing: .04rem;
}

.energy-content {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
}

.energy-content h3 {
  color: rgb(230 200 139 / 92%);
  font-size: 1.2rem;
  letter-spacing: .14rem;
  text-transform: uppercase;
}

.energy-content p,
.energy-content ul {
  max-width: 68ch;
  color: rgb(214 222 255 / 78%);
  line-height: 1.7;
}

.energy-content ul {
  display: grid;
  gap: .6rem;
  list-style: none;
}

.energy-content ul li::before {
  color: var(--accent-gold);
  content: "•";
  margin-right: .6rem;
}

.energy-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1rem, 2.4vw, 1.6rem);
}

.energy-detail-grid h4 {
  color: rgb(232 229 255 / 90%);
  font-size: 1rem;
  letter-spacing: .08rem;
}

.energy-articles {
  display: grid;
  padding: clamp(1.8rem, 3vw, 2.6rem);
  border: 1px dashed rgb(135 168 255 / 35%);
  border-radius: 24px;
  background: rgb(10 14 30 / 72%);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.energy-articles__header {
  display: grid;
  gap: .6rem;
}

.energy-articles__title {
  color: var(--accent-azure);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-family: Cinzel, serif;
  letter-spacing: .18rem;
  text-transform: uppercase;
}

.energy-articles__subtitle {
  color: rgb(198 212 255 / 72%);
  line-height: 1.65;
}

.energy-articles__placeholder {
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
  border: 1px solid rgb(135 168 255 / 22%);
  border-radius: 18px;
  background: rgb(12 18 34 / 86%);
  color: rgb(214 222 255 / 78%);
  line-height: 1.7;
}

@media (width <= 960px) {
  .energy-panel__body {
    grid-template-columns: 1fr;
  }

  .energy-tabs {
    top: clamp(0.6rem, 3vw, 1.4rem);
  }

  .energy-diagram__wrapper {
    order: -1;
  }
}

@media (width <= 640px) {
  .energy-tabs {
    grid-template-columns: 1fr;
  }

  .energy-tab {
    justify-content: flex-start;
  }

  .energy-content ul li::before {
    margin-right: .4rem;
  }
}