/* About is a mixed route: calm native scrolling with one static belief moment. */
.zikhara-about__pattern {
  margin: 0;
}

.zikhara-about__pattern > * {
  margin-block-start: 0;
}

.zikhara-about__pattern > section {
  border-bottom: 1px solid var(--zikhara-steel-700);
  padding-block: clamp(64px, 9vw, 128px);
}

.zikhara-about__hero {
  min-height: min(720px, 82svh);
  position: relative;
}

.zikhara-about__hero::after {
  background: var(--zikhara-molten);
  bottom: 0;
  content: "";
  height: 1px;
  left: max(16px, calc((100% - 1280px) / 2));
  position: absolute;
  width: min(180px, 32vw);
}

.zikhara-about__hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(560px, 66svh);
}

.zikhara-about__hero-inner h1 {
  max-width: 14ch;
}

.zikhara-about__hero-inner > p:not(.zikhara-eyebrow) {
  max-width: 64ch;
}

.zikhara-about__section-heading {
  margin-left: 0 !important;
}

.zikhara-about__split {
  align-items: start;
  display: grid;
  gap: clamp(40px, 7vw, 96px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.zikhara-about__prose > * + *,
.zikhara-about__name-copy > * + *,
.zikhara-about__background-copy > * + * {
  margin-block-start: 24px;
}

.zikhara-about__model {
  background: var(--zikhara-paper);
  color: var(--zikhara-ink);
}

.zikhara-about__model :where(h2, h3),
.zikhara-about__model .zikhara-about__index {
  color: var(--zikhara-ink);
}

.zikhara-about__model p {
  color: var(--zikhara-steel-500);
}

.zikhara-about__model-rail {
  gap: 0;
  margin-top: clamp(48px, 7vw, 88px);
}

.zikhara-about__model-step {
  border-left: 1px solid var(--zikhara-steel-500);
  min-height: 230px;
  padding: 24px clamp(20px, 3vw, 36px);
}

.zikhara-about__index {
  color: var(--zikhara-steel-300);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  margin: 0 0 48px;
}

.zikhara-about__verify {
  border-left: 2px solid var(--zikhara-molten);
  color: inherit;
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.35;
  padding-left: 8px;
}

.zikhara-about__name {
  background: var(--zikhara-ink-raised);
  overflow: hidden;
}

.zikhara-about__name-grid {
  align-items: center;
  display: grid;
  gap: clamp(48px, 8vw, 112px);
  grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
}

.zikhara-about__name-mark {
  align-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--zikhara-steel-700);
  display: flex;
  justify-content: center;
  max-width: 520px;
  overflow: hidden;
  position: relative;
}

.zikhara-about__name-mark::before,
.zikhara-about__name-mark::after {
  background: var(--zikhara-steel-700);
  content: "";
  position: absolute;
}

.zikhara-about__name-mark::before {
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
}

.zikhara-about__name-mark::after {
  bottom: 0;
  left: 50%;
  top: 0;
  width: 1px;
}

.zikhara-about__peak {
  height: 84%;
  position: relative;
  width: 84%;
  z-index: 1;
}

.zikhara-about__peak-line {
  fill: none;
  stroke: var(--zikhara-paper);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.zikhara-about__peak-apex {
  fill: var(--zikhara-molten);
}

.zikhara-about__name-word {
  bottom: clamp(16px, 3vw, 28px);
  color: var(--zikhara-steel-300) !important;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6875rem;
  left: clamp(16px, 3vw, 28px);
  letter-spacing: 0.2em;
  margin: 0;
  position: absolute;
  z-index: 2;
}

.zikhara-about__name-copy {
  margin-left: 0 !important;
}

.zikhara-about__operations {
  background: var(--zikhara-ink);
}

.zikhara-about__principles {
  border-top: 1px solid var(--zikhara-steel-700);
  margin-top: clamp(48px, 7vw, 88px);
}

.zikhara-about__principle {
  align-items: start;
  border-bottom: 1px solid var(--zikhara-steel-700);
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 48px minmax(180px, 3fr) minmax(0, 5fr);
  padding-block: 28px;
}

.zikhara-about__principle .zikhara-about__index,
.zikhara-about__principle :where(h3, p) {
  margin: 0;
}

.zikhara-about__caveat {
  border-left: 2px solid var(--zikhara-molten);
  color: var(--zikhara-steel-300);
  margin-top: clamp(40px, 6vw, 72px);
  max-width: 920px;
  padding-left: clamp(20px, 3vw, 36px);
}

.zikhara-about__background {
  background: var(--zikhara-paper);
  color: var(--zikhara-ink);
}

.zikhara-about__background :where(h2, strong) {
  color: var(--zikhara-ink);
}

.zikhara-about__background p,
.zikhara-about__background li {
  color: var(--zikhara-steel-500);
}

.zikhara-about__verification-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.zikhara-about__verification-list li {
  border-top: 1px solid var(--zikhara-paper-dim);
  padding-block: 18px;
}

@media (max-width: 900px) {
  .zikhara-about__split,
  .zikhara-about__name-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .zikhara-about__name-mark {
    max-width: 440px;
  }
}

@media (max-width: 720px) {
  .zikhara-about__model-step {
    border-left: 0;
    border-top: 1px solid var(--zikhara-steel-500);
    min-height: 0;
  }

  .zikhara-about__principle {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .zikhara-about__principle > p:last-child {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zikhara-about__peak-line,
  .zikhara-about__peak-apex {
    animation: none;
  }
}