body.theme-deconstructivism {
  background:
    linear-gradient(104deg, transparent 0 13%, color-mix(in srgb, var(--accent), transparent 88%) 13.2% 16%, transparent 16.2% 100%),
    linear-gradient(90deg, transparent 0 61%, color-mix(in srgb, var(--decon-blue), transparent 94%) 61.2% 76%, transparent 76.2%),
    var(--bg);
}

body.theme-deconstructivism.layout-single .site {
  max-width: var(--style-site-width);
}

.theme-deconstructivism .topbar {
  border-bottom: 0;
  background: color-mix(in srgb, var(--bg), transparent 3%);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--decon-blue), transparent 73%);
}

.theme-deconstructivism .topbar-inner {
  border-left: 0;
  box-shadow: inset 12px 0 0 var(--accent);
  padding: 9px 10px 9px 16px;
}

.theme-deconstructivism .brand {
  font-family: var(--mono);
  font-weight: 900;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.theme-deconstructivism .brand::after {
  content: "PLAN / 42";
  margin-left: 4px;
  padding: 3px 6px;
  color: var(--bg);
  background: var(--line);
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
}

.theme-deconstructivism nav {
  font-family: var(--mono);
  letter-spacing: .02em;
}

.theme-deconstructivism nav a.current {
  color: var(--bg);
  background: var(--line);
  text-decoration: none;
}

.theme-deconstructivism .hero {
  min-height: min(860px, 92vh);
  margin-top: 18px;
  padding: clamp(72px, 7vw, 96px) clamp(34px, 7vw, 96px) clamp(72px, 7vw, 96px);
  border: 0;
  overflow: visible;
}

.theme-deconstructivism .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 5% -4% 9% 20%;
  background:
    linear-gradient(98deg, transparent 0 28%, color-mix(in srgb, var(--bg), transparent 38%) 28.2% 28.7%, transparent 28.9%),
    var(--card-strong);
  clip-path: polygon(5% 0, 74% 3%, 76% 0, 100% 9%, 94% 48%, 100% 72%, 91% 100%, 37% 94%, 35% 100%, 0 88%, 8% 39%);
  transform: rotate(-1.4deg);
  transform-origin: center;
}

.theme-deconstructivism .hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 13% 4% 18% 8%;
  pointer-events: none;
  background:
    linear-gradient(172deg, transparent 0 49%, color-mix(in srgb, var(--accent), transparent 22%) 49.2% 52%, transparent 52.2%),
    linear-gradient(90deg, transparent 0 63%, color-mix(in srgb, var(--decon-blue), transparent 84%) 63.2% 78%, transparent 78.2%);
  clip-path: polygon(0 0, 100% 5%, 95% 95%, 8% 100%);
}

.theme-deconstructivism .hero-grid {
  position: relative;
  z-index: 2;
  width: min(92%, 950px);
}

.theme-deconstructivism h1 {
  max-width: 900px;
  font-weight: 920;
  line-height: .82;
}

.theme-deconstructivism .kicker {
  display: inline-block;
  max-width: min(100%, 660px);
  margin-bottom: 22px;
  padding: 9px 18px 8px;
  color: var(--bg);
  background: var(--accent);
  clip-path: polygon(0 8%, 96% 0, 100% 82%, 3% 100%);
  font-weight: 800;
}

.theme-deconstructivism .hero-sub {
  max-width: 650px;
  margin-left: clamp(0px, 6vw, 72px);
  padding: 20px 24px 18px 30px;
  border: 0;
  color: var(--fg);
  background: color-mix(in srgb, var(--card), transparent 3%);
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--decon-blue), transparent 55%);
  clip-path: polygon(0 0, 95% 0, 100% 12%, 98% 100%, 0 96%);
}

.theme-deconstructivism .hero-actions {
  margin-left: clamp(0px, 3vw, 36px);
}

.theme-deconstructivism .hero-card {
  max-width: 620px;
  margin-left: clamp(0px, 8vw, 90px);
  border: 0;
  outline: 0;
  background: color-mix(in srgb, var(--card), var(--decon-blue) 10%);
  clip-path: polygon(0 5px, 62% 5px, 64% 0, 100% 0, 98% 93%, 45% 100%, 0 96%);
}

.theme-deconstructivism .hero-card .stat:nth-child(even) {
  margin-left: clamp(0px, 4vw, 40px);
  padding: 14px;
  background: color-mix(in srgb, var(--card), var(--accent) 8%);
}

.theme-deconstructivism .hero-card .stat {
  border-bottom: 0;
}

.theme-deconstructivism .section {
  border-top: 0;
  padding-top: calc(var(--style-section-padding-y) + 18px);
}

.theme-deconstructivism .section::before {
  content: "";
  position: absolute;
  top: 8px;
  left: -2%;
  width: clamp(108px, 18vw, 210px);
  height: 16px;
  background: var(--accent);
  clip-path: polygon(5% 0, 100% 16%, 94% 100%, 0 76%);
  transform: rotate(-1.15deg);
  transform-origin: left center;
}

.theme-deconstructivism .section::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 7%;
  width: clamp(52px, 8vw, 94px);
  height: 11px;
  background: var(--decon-blue);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 74%);
}

.theme-deconstructivism .section:nth-child(even)::before {
  transform: rotate(1.15deg);
}

.theme-deconstructivism .section:nth-child(even)::after {
  right: auto;
  left: 9%;
  background: var(--accent);
  clip-path: polygon(0 0, 91% 15%, 100% 100%, 7% 79%);
}

.theme-deconstructivism .section-head {
  grid-template-columns: minmax(132px, .22fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
  align-items: start;
}

.theme-deconstructivism .section-index,
.theme-deconstructivism .complete-head .section-index {
  width: max-content;
  max-width: 100%;
  padding: 10px 14px;
  border: 0;
  color: var(--bg);
  background: var(--line);
  box-shadow: 7px 7px 0 var(--accent);
  transform: translate(8px, 10px) rotate(-3deg);
}

.theme-deconstructivism h2 {
  position: relative;
  font-size: clamp(42px, 7vw, 82px);
  font-weight: 900;
  line-height: .84;
}

.theme-deconstructivism h2::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: .14em;
  margin-left: .12em;
  background: var(--accent);
  clip-path: polygon(8% 0, 100% 20%, 92% 100%, 0 78%);
  transform: translateY(-.08em) rotate(-8deg);
}

.theme-deconstructivism .section-lead {
  max-width: 720px;
  padding: 14px 18px;
  border: 0;
  background: color-mix(in srgb, var(--decon-blue), transparent 88%);
  clip-path: polygon(0 0, 98% 0, 100% 18%, 98% 100%, 0 94%);
}

.theme-deconstructivism :is(.card, .principle, .timeline-item) {
  border: 0;
  outline: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--decon-blue), transparent 78%) 0 12px, transparent 12.5px) top right / 64px 64px no-repeat,
    var(--card);
  clip-path: polygon(0 0, 72% 0, 73% 9px, calc(100% - 28px) 9px, 100% 35px, 100% 100%, 42% 100%, 40% calc(100% - 9px), 0 calc(100% - 9px));
}

.theme-deconstructivism :is(.card, .principle, .timeline-item)::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 16px;
  width: clamp(54px, 9vw, 112px);
  height: 10px;
  z-index: 3;
  background: var(--accent);
  pointer-events: none;
  clip-path: polygon(6% 0, 100% 18%, 92% 100%, 0 76%);
}

.theme-deconstructivism .cards .card:nth-child(even),
.theme-deconstructivism .principle:nth-child(even) {
  background:
    linear-gradient(225deg, color-mix(in srgb, var(--accent), transparent 78%) 0 12px, transparent 12.5px) top left / 64px 64px no-repeat,
    color-mix(in srgb, var(--card), var(--decon-blue) 8%);
  clip-path: polygon(0 28px, 24px 6px, 37% 6px, 39% 0, 100% 0, 100% calc(100% - 10px), 66% calc(100% - 10px), 64% 100%, 0 100%);
}

.theme-deconstructivism .cards .card:nth-child(3n),
.theme-deconstructivism .principle:nth-child(3n) {
  box-shadow: inset 12px 0 0 color-mix(in srgb, var(--decon-blue), transparent 44%);
}

.theme-deconstructivism .card-title-row {
  margin-right: clamp(0px, 3vw, 32px);
  padding: 16px 20px;
  border: 0;
  background: color-mix(in srgb, var(--decon-blue), transparent 88%);
  clip-path: polygon(0 0, 97% 0, 100% 16%, 98% 100%, 0 94%);
}

.theme-deconstructivism .card-title-row h3 {
  max-width: 760px;
  font-size: clamp(23px, 3vw, 31px);
  font-weight: 850;
}

.theme-deconstructivism .stack,
.theme-deconstructivism .generated-desc-meta,
.theme-deconstructivism .time-label {
  font-weight: 750;
}

.theme-deconstructivism .tag,
.theme-deconstructivism .skill-pill {
  border: 0;
  border-radius: 0;
  color: var(--fg);
  background: color-mix(in srgb, var(--decon-blue), transparent 72%);
  box-shadow: none;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 6px) 100%, 0 calc(100% - 4px));
}

.theme-deconstructivism .skill-pill:nth-child(3n + 2) {
  background: color-mix(in srgb, var(--accent), transparent 74%);
  box-shadow: none;
}

.theme-deconstructivism .button {
  border: 0;
  box-shadow: none;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 calc(100% - 3px));
}

.theme-deconstructivism .button.secondary {
  border: 0;
  color: var(--bg);
  background: var(--decon-blue);
  box-shadow: none;
}

.theme-deconstructivism .button:hover,
.theme-deconstructivism .button:focus-visible {
  background: var(--accent);
  color: var(--bg);
}

.theme-deconstructivism .button.secondary:hover,
.theme-deconstructivism .button.secondary:focus-visible {
  background: var(--decon-blue);
  color: var(--bg);
}

.theme-deconstructivism .contact-panel,
.theme-deconstructivism .reveal {
  border: 0;
  outline: 0;
  clip-path: polygon(0 4%, 67% 0, 69% 3%, 100% 1%, 98% 81%, 100% 100%, 31% 97%, 29% 100%, 1% 95%);
}

.theme-deconstructivism .contact-panel {
  grid-template-columns: minmax(0, 1.3fr) auto;
  align-items: end;
  color: var(--bg);
  background:
    linear-gradient(110deg, transparent 0 71%, color-mix(in srgb, var(--decon-blue), transparent 28%) 71.2% 100%),
    var(--line);
}

.theme-deconstructivism .contact-panel .section-lead {
  color: color-mix(in srgb, var(--bg), transparent 20%);
  border: 0;
  background: color-mix(in srgb, var(--accent), transparent 78%);
}

.theme-deconstructivism .contact-panel .button {
  background: var(--bg);
  color: var(--fg);
}

.theme-deconstructivism .reveal {
  padding: clamp(36px, 6vw, 72px);
  color: var(--bg);
  background:
    linear-gradient(165deg, transparent 0 58%, color-mix(in srgb, var(--decon-blue), transparent 48%) 58.2% 100%),
    var(--line);
}

.theme-deconstructivism .reveal::before {
  content: "";
  position: absolute;
  right: -8%;
  top: 13%;
  width: 58%;
  height: 16px;
  background: var(--accent);
  clip-path: polygon(4% 0, 100% 18%, 93% 100%, 0 74%);
  transform: rotate(-8deg);
}

.theme-deconstructivism .reveal .kicker {
  color: var(--bg);
}

.theme-deconstructivism .reveal p {
  color: color-mix(in srgb, var(--bg), transparent 20%);
}

.theme-deconstructivism .reveal-stat {
  border: 0;
  border-radius: 0;
  background: var(--card);
  color: var(--fg);
  box-shadow: 9px 9px 0 var(--accent);
  clip-path: polygon(0 0, 94% 0, 100% 12%, 98% 100%, 4% 97%, 0 82%);
}

.theme-deconstructivism .reveal-stat-section + .reveal-stat-section {
  border-top: 0;
  background: color-mix(in srgb, var(--decon-blue), transparent 88%);
}

.theme-deconstructivism .reveal-stat .style-introduction {
  color: var(--muted);
}

.theme-deconstructivism .reveal .button {
  background: var(--bg);
  color: var(--fg);
}

.theme-deconstructivism .complete-version {
  border-top: 0;
}

.theme-deconstructivism .complete-project .intro-list p {
  border: 0;
  background: color-mix(in srgb, var(--decon-blue), transparent 88%);
}

.theme-deconstructivism .complete-head {
  grid-template-columns: minmax(132px, .22fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 54px);
}

@media (max-width: 860px) {
  .theme-deconstructivism .hero {
    min-height: auto;
    padding-inline: clamp(24px, 7vw, 56px);
  }

  .theme-deconstructivism .hero-grid {
    width: 100%;
  }

  .theme-deconstructivism .section-head,
  .theme-deconstructivism .complete-head,
  .theme-deconstructivism .contact-panel {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .theme-deconstructivism .contact-panel {
    align-items: start;
  }
}

@media (max-width: 600px) {
  body.theme-deconstructivism {
    background:
      linear-gradient(104deg, transparent 0 9%, color-mix(in srgb, var(--accent), transparent 91%) 9.1% 9.35%, transparent 9.45%),
      var(--bg);
  }

  .theme-deconstructivism .topbar-inner {
    box-shadow: inset 9px 0 0 var(--accent);
    padding-left: 9px;
  }

  .theme-deconstructivism .brand::after {
    content: "/ 42";
  }

  .theme-deconstructivism .hero {
    margin-top: 0;
    padding: 64px 28px 84px;
  }

  .theme-deconstructivism .hero::before {
    inset: 5% 0 8% 32%;
    opacity: .48;
    transform: rotate(-1deg);
  }

  .theme-deconstructivism .hero::after {
    inset: 11% 2% 18% 4%;
    opacity: .72;
  }

  .theme-deconstructivism .kicker {
    padding-inline: 12px;
    font-size: 10px;
  }

  .theme-deconstructivism .hero-sub,
  .theme-deconstructivism .hero-actions,
  .theme-deconstructivism .hero-card {
    margin-left: 0;
  }

  .theme-deconstructivism .hero-sub {
    padding: 18px 18px 17px 22px;
    box-shadow: 7px 7px 0 color-mix(in srgb, var(--decon-blue), transparent 55%);
  }

  .theme-deconstructivism .section::before,
  .theme-deconstructivism .section:nth-child(even)::before {
    left: 0;
    width: 100%;
    transform: none;
  }

  .theme-deconstructivism .section::after,
  .theme-deconstructivism .section:nth-child(even)::after {
    right: 5%;
    left: auto;
    width: 54px;
  }

  .theme-deconstructivism .section-index,
  .theme-deconstructivism .complete-head .section-index {
    transform: rotate(-2deg);
  }

  .theme-deconstructivism h2 {
    font-size: clamp(40px, 13vw, 58px);
  }

  .theme-deconstructivism :is(.card, .principle, .timeline-item) {
    clip-path: polygon(0 0, 78% 0, 80% 7px, calc(100% - 20px) 7px, 100% 27px, 100% 100%, 0 calc(100% - 7px));
  }

  .theme-deconstructivism .cards .card:nth-child(even),
  .theme-deconstructivism .principle:nth-child(even) {
    clip-path: polygon(0 22px, 18px 5px, 42% 5px, 44% 0, 100% 0, 100% calc(100% - 7px), 0 100%);
  }

  .theme-deconstructivism .card-title-row {
    margin-right: 0;
  }

  .theme-deconstructivism .contact-panel,
  .theme-deconstructivism .reveal {
    clip-path: polygon(0 2%, 72% 0, 74% 2%, 100% 1%, 99% 98%, 34% 97%, 32% 100%, 1% 98%);
  }

  .theme-deconstructivism .reveal {
    padding: 34px 24px 42px;
  }
}

.theme-deconstructivism .regenerating {
  background:
    linear-gradient(101deg, transparent 0 12%, color-mix(in srgb, var(--accent), transparent 18%) 12.2% 17%, transparent 17.2% 100%),
    linear-gradient(171deg, transparent 0 63%, color-mix(in srgb, var(--decon-blue), transparent 36%) 63.2% 72%, transparent 72.2%),
    var(--fg);
  color: var(--fg);
}

.theme-deconstructivism .regen-box {
  border: 0;
  background: var(--card);
  box-shadow: 16px 12px 0 var(--accent), -11px -9px 0 var(--decon-blue);
  clip-path: polygon(3% 0, 78% 3%, 81% 0, 100% 8%, 96% 87%, 100% 94%, 71% 100%, 29% 96%, 26% 100%, 0 91%, 4% 38%);
  font-family: var(--mono);
  font-weight: 760;
  transform: rotate(-.7deg);
}

.theme-deconstructivism .regen-box::after {
  content: "";
  position: absolute;
  inset: 17% -4% auto 38%;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 21px 0 color-mix(in srgb, var(--decon-blue), transparent 10%);
  transform: rotate(-7deg);
}

.theme-deconstructivism .regen-line::before {
  border: 0;
  background: var(--decon-blue);
  clip-path: polygon(50% 0, 100% 32%, 68% 100%, 0 72%);
}

.theme-deconstructivism .regen-line.active::before { background: var(--accent); }