.page--subject {
  background-color: color-mix(in srgb, var(--accent) 13%, #d6e4e9 87%);
  background-image:
    radial-gradient(ellipse 66rem 36rem at 96% 2%, color-mix(in srgb, var(--accent-2) 28%, transparent) 0%, transparent 72%),
    radial-gradient(ellipse 58rem 34rem at -7% 20%, color-mix(in srgb, var(--accent) 19%, transparent) 0%, transparent 72%),
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--accent) 10%, #d8e5e9 90%) 0%,
      color-mix(in srgb, var(--accent-2) 8%, #d7e5e9 92%) 52%,
      color-mix(in srgb, var(--accent-2) 16%, #d4e2e6 84%) 100%
    );
  background-blend-mode: normal;
  background-position: 0 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Kazakhstan History: clean subject gradient, with artwork kept as alpha layers. */
.page--subject[data-subject="kazakhstan-history"] {
  background-color: #dde2d7;
  background-image:
    radial-gradient(ellipse 58rem 32rem at 8% 8%, rgba(209, 154, 52, 0.24) 0%, rgba(209, 154, 52, 0.1) 46%, rgba(209, 154, 52, 0) 72%),
    radial-gradient(ellipse 64rem 34rem at 94% 7%, rgba(73, 163, 164, 0.28) 0%, rgba(73, 163, 164, 0.11) 50%, rgba(73, 163, 164, 0) 76%),
    linear-gradient(128deg, #e8dec7 0%, #dde2d7 48%, #c8e0de 100%);
  background-blend-mode: normal;
  background-position: 0 0;
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.page--subject::before,
.page--subject .page-scene-backdrop {
  display: none;
}

.subject-main {
  padding-top: 18px;
}

.subject-hero {
  position: relative;
  height: 390px;
  isolation: isolate;
}

.subject-hero::after {
  position: absolute;
  z-index: 0;
  top: 24px;
  right: 1%;
  width: min(760px, 48vw);
  height: 330px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 62% 48%, color-mix(in srgb, var(--accent-2) 21%, transparent) 0%, transparent 61%),
    radial-gradient(ellipse at 43% 57%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 69%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.subject-hero--art-missing::after {
  opacity: 0.72;
}

.subject-hero__scene {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: -8px;
  display: block;
  width: min(930px, 55vw);
  height: 320px;
  object-fit: contain;
  object-position: right center;
  opacity: 0;
  filter: drop-shadow(0 24px 23px rgba(var(--accent-rgb), 0.14));
  pointer-events: none;
  user-select: none;
  transition: opacity 180ms ease;
}

.subject-hero__scene.is-ready {
  opacity: 1;
}

.page--subject[data-subject="kazakhstan-history"] .subject-hero__scene {
  top: 14px;
  right: -8px;
  width: min(930px, 55vw);
  height: 320px;
  filter: drop-shadow(0 25px 24px rgba(61, 76, 58, 0.14));
}

.page--subject[data-subject="kazakhstan-history"] .kz-history-atmosphere__item--petroglyph {
  top: 630px;
  left: -92px;
  width: clamp(190px, 15vw, 286px);
  opacity: 0.085;
  transform: rotate(-7deg);
}

.page--subject[data-subject="kazakhstan-history"] .kz-history-atmosphere__item--archive {
  top: 790px;
  right: -78px;
  width: clamp(210px, 17vw, 324px);
  opacity: 0.075;
  transform: rotate(7deg);
}

.subject-hero__copy {
  position: absolute;
  z-index: 2;
  top: 62px;
  left: 22px;
  width: min(640px, 45%);
}

.subject-hero__copy h1 {
  min-height: 92px;
  margin: 0;
  font-size: clamp(66px, 6.1vw, 104px);
  font-weight: 640;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.subject-hero__copy > p:last-child {
  display: -webkit-box;
  min-height: 62px;
  max-width: 560px;
  margin: 23px 0 0;
  color: #233d86;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.48;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.sections-block {
  margin-top: 0;
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 17px;
}

.section-card {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 216px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(236, 247, 255, 0.4)),
    rgba(218, 238, 255, 0.36);
  box-shadow: 0 18px 48px rgba(46, 79, 143, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--ink);
  overflow: hidden;
  text-align: left;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

a.section-card {
  cursor: pointer;
}

.section-card:disabled {
  cursor: default;
}

.section-card:not(:disabled):hover {
  border-color: #fff;
  box-shadow: 0 27px 62px rgba(46, 79, 143, 0.2), inset 0 1px 0 #fff;
  transform: translateY(-5px);
}

.section-card__art-wrap {
  position: absolute;
  z-index: 1;
  right: -7px;
  bottom: -6px;
  display: block;
  width: 59%;
  aspect-ratio: 512 / 344;
  pointer-events: none;
  transform: translate(var(--section-art-x, 0%), var(--section-art-y, 0%));
}

.section-card__art {
  position: absolute;
  inset: 0;
  background-image: var(--section-sheet);
  background-position: var(--sheet-x, 0%) var(--sheet-y, 0%);
  background-repeat: no-repeat;
  /* A tiny overlap prevents bilinear sampling from leaking an adjacent sprite cell. */
  background-size: calc(200% + 2px) calc(200% + 2px);
  filter: drop-shadow(0 14px 13px rgba(32, 63, 117, 0.19));
  opacity: 1;
  transition: opacity 160ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.section-card__art-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  filter: drop-shadow(0 14px 13px rgba(32, 63, 117, 0.19));
  pointer-events: none;
  transition: opacity 160ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.section-card__art-wrap--image {
  right: 8px;
  bottom: 10px;
  width: 56%;
  height: calc(100% - 20px);
  aspect-ratio: auto;
  transform: none;
}

.section-card__art-wrap.is-image-ready .section-card__art--sprite {
  opacity: 0;
}

.section-card__art-wrap.is-image-ready .section-card__art-image {
  opacity: 1;
}

.section-card:not(:disabled):hover :is(.section-card__art, .section-card__art-image) {
  transform: translateY(-4px) scale(1.025);
}

.section-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  box-sizing: border-box;
  width: 57%;
  height: 100%;
  padding: 24px 0 18px 24px;
  flex-direction: column;
}

.section-card__topline {
  display: block;
  min-height: 50px;
  margin: 0;
}

.section-card :is(h2, h3) {
  display: -webkit-box;
  min-height: 50px;
  margin: 0;
  font-size: clamp(18px, 1.18vw, 22px);
  font-weight: 720;
  letter-spacing: -0.028em;
  line-height: 1.12;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.section-card p {
  display: -webkit-box;
  margin: 8px 0 0;
  color: #40578f;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.46;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.section-card__state {
  display: inline-flex;
  min-height: 26px;
  margin-top: auto;
  padding: 0 10px;
  align-items: center;
  align-self: flex-start;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: color-mix(in srgb, var(--accent) 45%, #53647f 55%);
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topics-block {
  margin-top: 31px;
}

.topics-block > h2 {
  margin: 0 0 16px;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.028em;
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.topic-card {
  position: relative;
  display: flex;
  min-width: 0;
  height: 82px;
  padding: 14px 15px;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.53);
  box-shadow: 0 12px 31px rgba(48, 78, 137, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: var(--ink-soft);
  cursor: default;
  overflow: hidden;
  text-align: left;
}

.topic-card__number {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 830;
  font-variant-numeric: tabular-nums;
  place-items: center;
}

.topic-card strong {
  display: -webkit-box;
  min-width: 0;
  font-size: 13px;
  font-weight: 710;
  line-height: 1.3;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page--subject[data-subject="kazakhstan-history"] .section-card,
.page--subject[data-subject="kazakhstan-history"] .topic-card {
  border-color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(249, 249, 243, 0.54)),
    rgba(242, 244, 237, 0.2);
  box-shadow: 0 14px 34px rgba(16, 32, 78, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.06);
}

@media (max-width: 1320px) {
  .subject-hero { height: 350px; }
  .subject-hero__scene {
    top: 15px;
    right: -14px;
    width: 55vw;
    height: 300px;
  }
  .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .page--subject[data-subject="kazakhstan-history"] .subject-hero__scene {
    top: 15px;
    right: -14px;
    width: 55vw;
    height: 300px;
  }

  .page--subject[data-subject="kazakhstan-history"] .kz-history-atmosphere__item--archive {
    display: none;
  }
}

@media (max-width: 760px) {
  .subject-hero { height: 360px; }
  .subject-hero__copy { top: 52px; right: 10px; left: 10px; width: auto; }
  .subject-hero__copy h1 { min-height: 70px; font-size: 54px; }
  .subject-hero__copy > p:last-child { font-size: 15px; }
  .section-grid, .topic-grid { grid-template-columns: 1fr; }
  .subject-hero__scene {
    top: auto;
    right: -8px;
    bottom: 0;
    width: calc(100% + 16px);
    height: 205px;
    object-position: center bottom;
  }

  .page--subject[data-subject="kazakhstan-history"] {
    background-image:
      radial-gradient(ellipse 28rem 19rem at -12% 4%, rgba(209, 154, 52, 0.22) 0%, rgba(209, 154, 52, 0.08) 50%, transparent 76%),
      radial-gradient(ellipse 30rem 22rem at 112% 20%, rgba(73, 163, 164, 0.24) 0%, rgba(73, 163, 164, 0.08) 52%, transparent 76%),
      linear-gradient(165deg, #e8dec7 0%, #dde2d7 48%, #c8e0de 100%);
    background-attachment: scroll;
  }

  .page--subject[data-subject="kazakhstan-history"] .subject-hero {
    height: 500px;
  }

  .page--subject[data-subject="kazakhstan-history"] .subject-hero__scene {
    top: auto;
    right: -8px;
    bottom: 0;
    width: calc(100% + 16px);
    height: 205px;
    object-position: center bottom;
    filter: drop-shadow(0 16px 16px rgba(61, 76, 58, 0.13));
  }

  .page--subject[data-subject="kazakhstan-history"] .kz-history-atmosphere__item {
    display: none;
  }
}