body.theme-suprematism { background: var(--bg); }

.theme-suprematism .topbar {
  border-bottom-color: color-mix(in srgb, var(--line), transparent 72%);
  background: color-mix(in srgb, var(--bg), transparent 8%);
}

.theme-suprematism .hero {
  min-height: min(840px, 92vh);
  overflow: visible;
  isolation: isolate;
  background: var(--bg);
}

.theme-suprematism .hero-grid {
  position: relative;
  animation: none;
  opacity: 1;
}

.theme-suprematism .hero-grid > :first-child > *,
.theme-suprematism .hero-card {
  animation: rise .56s ease both;
}

.theme-suprematism .hero::before,
.theme-suprematism .hero::after {
  z-index: 0;
  pointer-events: none;
}

.theme-suprematism .hero::before {
  content: "";
  position: absolute;
  top: 10%;
  right: -5%;
  width: clamp(90px, 18vw, 210px);
  height: clamp(130px, 28vw, 320px);
  background: #1a1a18;
  transform: rotate(18deg);
}

.theme-suprematism .hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 12%;
  width: clamp(78px, 12vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #bd3425;
}

.theme-suprematism .hero-grid::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -5%;
  bottom: 7%;
  width: clamp(120px, 26vw, 300px);
  height: 18px;
  background: #d0a52e;
  transform: rotate(-12deg);
}

.theme-suprematism h1 {
  position: relative;
  z-index: 1;
  max-width: 770px;
  font-weight: 760;
  color: #fff;
  mix-blend-mode: difference;
}

.theme-suprematism .hero-card { z-index: 1; }

.theme-suprematism .hero-sub { max-width: 570px; }

.theme-suprematism .section {
  border-top-color: color-mix(in srgb, var(--line), transparent 78%);
}

.theme-suprematism .section:nth-child(even)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 14%;
  right: -4%;
  width: 44px;
  height: 130px;
  background: #2a5276;
  transform: rotate(11deg);
  opacity: .72;
}

.theme-suprematism .section-head {
  grid-template-columns: minmax(86px, .2fr) minmax(0, 1fr);
  gap: clamp(24px, 6vw, 80px);
}

.theme-suprematism .section-index {
  color: var(--fg);
  border-top: 8px solid var(--accent);
  padding-top: 12px;
}

.theme-suprematism .cards,
.theme-suprematism .principles,
.theme-suprematism .timeline { gap: 40px; }

.theme-suprematism :is(.card, .hero-card, .principle, .timeline-item) {
  background: color-mix(in srgb, var(--card), transparent 8%);
}

.theme-suprematism .cards .card:nth-child(odd) { margin-right: clamp(0px, 5vw, 72px); }
.theme-suprematism .cards .card:nth-child(even) { margin-left: clamp(0px, 5vw, 72px); }

.theme-suprematism .tag,
.theme-suprematism .skill-pill,
.theme-suprematism .button { border-radius: 0; }

.theme-suprematism .contact-panel {
  outline-width: 2px;
  box-shadow: 28px 28px 0 color-mix(in srgb, #d0a52e, transparent 18%);
}

.theme-suprematism .reveal {
  outline: 0;
  border: 1px solid color-mix(in srgb, var(--line), transparent 72%);
  background:
    linear-gradient(16deg, transparent 0 78%, color-mix(in srgb, var(--accent), transparent 20%) 78% 83%, transparent 83%),
    var(--card-strong);
}

.theme-suprematism .regenerating {
  background:
    linear-gradient(15deg, transparent 0 18%, color-mix(in srgb, #d0a52e, transparent 12%) 18% 20%, transparent 20%),
    var(--bg);
  color: var(--fg);
}

.theme-suprematism .regenerating::before,
.theme-suprematism .regenerating::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.theme-suprematism .regenerating::before {
  top: -5%;
  right: 8%;
  width: clamp(92px, 17vw, 210px);
  height: clamp(150px, 29vw, 340px);
  background: var(--fg);
  transform: rotate(18deg);
}

.theme-suprematism .regenerating::after {
  right: -20px;
  bottom: 7%;
  width: clamp(82px, 14vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
}

.theme-suprematism .regen-box {
  border: 1px solid color-mix(in srgb, var(--line), transparent 22%);
  background: color-mix(in srgb, var(--card), transparent 4%);
  color: var(--fg);
  box-shadow: 18px 18px 0 #d0a52e;
}

.theme-suprematism .regen-box::before,
.theme-suprematism .regen-box::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.theme-suprematism .regen-box::before {
  top: 15px;
  right: 16px;
  width: 24px;
  height: 72px;
  background: #2a5276;
  transform: rotate(9deg);
}

.theme-suprematism .regen-box::after {
  right: 58px;
  bottom: 18px;
  width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  opacity: .88;
}

.theme-suprematism .regen-line {
  padding-inline-start: 34px;
  overflow-wrap: anywhere;
}

.theme-suprematism .regen-line::before,
.theme-suprematism .regen-line.active::before {
  top: .48em;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
  background: var(--fg);
  transform: rotate(13deg) scale(.72);
}

.theme-suprematism .regen-line.active::before { transform: rotate(13deg) scale(1); }
.theme-suprematism .regen-line:nth-child(2)::before { border-radius: 50%; background: var(--accent); }
.theme-suprematism .regen-line:nth-child(3)::before { width: 20px; height: 7px; background: #d0a52e; }
.theme-suprematism .regen-line:nth-child(4)::before { background: #2a5276; transform: rotate(-12deg) scale(.72); }
.theme-suprematism .regen-line:nth-child(4).active::before { transform: rotate(-12deg) scale(1); }

@media (max-width: 720px) {
  .theme-suprematism .hero { min-height: 690px; }
  .theme-suprematism .hero::before { opacity: .12; }
  .theme-suprematism .hero::after { opacity: .22; }
  .theme-suprematism .section-head { grid-template-columns: 1fr; gap: 18px; }
  .theme-suprematism .cards .card { margin-inline: 0; }
  .theme-suprematism .contact-panel { box-shadow: 12px 12px 0 color-mix(in srgb, #d0a52e, transparent 18%); }
}