body.theme-hard-edge-painting {
  background:
    linear-gradient(118deg, #e7d7ad 0 54%, #2c7772 54% 69%, #e7d7ad 69% 100%);
  overflow-x: clip;
}

.theme-hard-edge-painting .topbar {
  border-bottom: 3px solid var(--line);
  background: #f4eddb;
}

.theme-hard-edge-painting .brand::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--accent);
}

.theme-hard-edge-painting .hero {
  min-height: min(760px, 84vh);
  margin-top: 32px;
  padding-inline: clamp(24px, 6vw, 72px);
  background: var(--card);
  border: 3px solid var(--line);
  box-shadow: 22px 22px 0 #2c7772;
}

.theme-hard-edge-painting .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 29%;
  background: var(--card-strong);
}

.theme-hard-edge-painting .hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 29%;
  bottom: 0;
  width: 16%;
  height: 32%;
  background: var(--accent);
}

.theme-hard-edge-painting h1 {
  max-width: 790px;
  font-weight: 900;
}

.theme-hard-edge-painting .hero-sub {
  max-width: 590px;
  padding: 16px;
  background: var(--card);
  border: 2px solid var(--line);
}

.theme-hard-edge-painting .section {
  border-top: 3px solid var(--line);
  overflow: clip;
}

.theme-hard-edge-painting .section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: -12vw;
  width: 42vw;
  height: 34%;
  background: var(--accent);
}

.theme-hard-edge-painting .section:nth-child(even)::before {
  right: auto;
  left: -12vw;
  width: 35vw;
  background: #2c7772;
}

.theme-hard-edge-painting .section-head {
  grid-template-columns: minmax(96px, .24fr) minmax(0, 1fr);
  padding: 24px;
  background: var(--card);
  border: 3px solid var(--line);
}

.theme-hard-edge-painting .section-index {
  color: var(--accent);
  font-weight: 800;
}

.theme-hard-edge-painting :is(.card, .timeline-item, .principle, .hero-card) {
  background: var(--card);
}

.theme-hard-edge-painting .cards .card:nth-child(even) {
  border-left: 18px solid #2c7772;
}

.theme-hard-edge-painting .tag,
.theme-hard-edge-painting .skill-pill {
  border-radius: 0;
  border-width: 2px;
  background: var(--card-strong);
  color: var(--fg);
}

.theme-hard-edge-painting .contact-panel,
.theme-hard-edge-painting .reveal {
  border: 3px solid var(--line);
  background: var(--card-strong);
  box-shadow: 18px 18px 0 #2c7772;
}

.theme-hard-edge-painting .reveal::before {
  content: "";
  inset: 0 0 0 auto;
  width: 22%;
  background: var(--accent);
}

@media (max-width: 720px) {
  body.theme-hard-edge-painting {
    background: linear-gradient(102deg, #e7d7ad 0 78%, #2c7772 78% 100%);
  }

  .theme-hard-edge-painting .hero {
    min-height: auto;
    margin-top: 20px;
    padding-inline: 20px;
    box-shadow: 10px 10px 0 #2c7772;
  }

  .theme-hard-edge-painting .hero::before { width: 16%; opacity: .55; }
  .theme-hard-edge-painting .hero::after { display: none; }
  .theme-hard-edge-painting .section-head { grid-template-columns: 1fr; }
  .theme-hard-edge-painting .contact-panel,
  .theme-hard-edge-painting .reveal { box-shadow: 8px 8px 0 #2c7772; }
}

/* Crisp adjoining planes replace the page without gradients or soft edges. */
.theme-hard-edge-painting .regenerating {
  color: var(--fg);
  background:
    linear-gradient(118deg, var(--bg) 0 52%, #2c7772 52% 68%, var(--bg) 68% 100%);
}

.theme-hard-edge-painting .regen-box {
  position: relative;
  isolation: isolate;
  width: min(610px, 100%);
  padding: clamp(28px, 7vw, 54px);
  overflow: hidden;
  border: 3px solid var(--line);
  border-radius: 0;
  background: var(--card);
  color: var(--fg);
  box-shadow: 14px 14px 0 #2c7772;
  font-family: var(--sans);
}

.theme-hard-edge-painting .regen-box::before,
.theme-hard-edge-painting .regen-box::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.theme-hard-edge-painting .regen-box::before {
  inset: 0 0 0 auto;
  width: 22%;
  background: var(--card-strong);
}

.theme-hard-edge-painting .regen-box::after {
  right: 22%;
  bottom: 0;
  width: 14%;
  height: 34%;
  background: var(--accent);
}

.theme-hard-edge-painting .regen-line {
  position: relative;
  z-index: 1;
  width: calc(100% - 12px);
  margin: 6px 0;
  padding: 4px 9px;
  padding-inline-start: 29px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--fg);
  opacity: .78;
}

.theme-hard-edge-painting .regen-line.active {
  border-left: 14px solid var(--accent);
  background: var(--card-strong);
  color: var(--fg);
  opacity: 1;
}

.theme-hard-edge-painting .regen-line:nth-child(even).active {
  border-left-color: #2c7772;
}