.page-experimental {
  --accent: #ff5b3d;
}
.page-experimental .hero h1 {
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: -0.075em;
}
.page-minimal {
  --accent: #8b2f25;
}
.page-minimal .hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: none;
  max-width: 11ch;
}
.page-minimal .project-card-media {
  border-radius: 0;
}
.page-motion {
  --accent: #ffd164;
  --bg: #08090a;
}
.page-motion .cinema-frame {
  position: absolute;
  inset: 5.2rem 2vw 2vw;
  border: 1px solid var(--line-strong);
  overflow: hidden;
  background: radial-gradient(circle at 60% 45%, #35404d, #0a0b0c 58%);
}
.page-motion .cinema-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
}
.page-motion .hero-copy {
  margin-bottom: 2vw;
}
.page-portfolio {
  --accent: #47d7ac;
}
.page-portfolio .hero {
  min-height: 88svh;
}
.page-portfolio .modular {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 3vw, 2.5rem);
}
.preview-page {
  --accent: #8df071;
}
.preview-hero {
  min-height: 100svh;
  display: grid;
  place-items: end;
  padding: 9rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.preview-hero:before {
  content: "";
  position: absolute;
  width: 70vw;
  height: 70vw;
  border: 1px solid var(--line);
  border-radius: 50%;
  right: -28vw;
  top: -22vw;
  box-shadow:
    0 0 0 7vw rgba(255, 255, 255, 0.02),
    0 0 0 14vw rgba(255, 255, 255, 0.018);
}
.preview-hero h1 {
  font-size: clamp(5rem, 17vw, 16rem);
  line-height: 0.72;
  margin: 0;
  letter-spacing: -0.09em;
}
.preview-card {
  min-height: 33rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.preview-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.43;
  transition:
    transform 0.8s var(--ease),
    opacity 0.4s;
}
.preview-card:hover img {
  transform: scale(1.04);
  opacity: 0.62;
}
.preview-card > * {
  position: relative;
  z-index: 2;
}

/* Concept demos with intentionally fixed art direction. */
.page-experimental,
.page-motion {
  color-scheme: dark;
  --bg: #101112;
  --surface: #17191a;
  --surface-2: #222527;
  --text: #f5f1ea;
  --muted: #a6aaac;
  --line: rgba(255, 255, 255, 0.15);
  --line-strong: rgba(255, 255, 255, 0.32);
}

.page-motion {
  --bg: #08090a;
}

.page-minimal {
  color-scheme: light;
  --bg: #f1ede4;
  --surface: #f9f6ef;
  --surface-2: #e6e0d5;
  --text: #171817;
  --muted: #61635f;
  --line: rgba(20, 20, 20, 0.15);
  --line-strong: rgba(20, 20, 20, 0.32);
}