/* Rambutan — flesh, crimson skin, neon spine green, earth brown */

:root {
  --color-bg: #f7f0e8;
  --color-bg-quote: #efe6dc;
  --color-bg-dark: #4a3728;
  --color-surface: #fbf6f0;
  --color-text: #3a1a22;
  --color-text-muted: #6b5347;
  --color-text-faint: #947a68;
  --color-border: #4a3728;
  --color-border-light: #d4c4b0;
  --color-accent: #c8324a;
  --color-accent-pink-neon: #ff4d8a;
  --color-desert-purple: #481658;
  --color-desert-terracotta: #c4512d;
  --color-desert-turquoise: #14808f;
  --color-desert-ochre: #c9962e;
  --color-sage-green: #87967a;
  --color-charcoal: #3a3a3a;
  --color-sunset-blue: #2d3868;
  --color-sunset-bluegreen: #34666c;
  --color-sunset-purple: #5a3a72;
  --color-sunset-mauve: #8a5578;
  --color-sunset-orange: #c46842;
  --color-sunset-gold: #dca04a;
  --color-accent-green: #7dcc3a;
  --color-accent-green-neon: #9eee4a;
  --color-accent-brown: #6b4f3a;
  --color-accent-brown-dark: #4a3728;
  --color-focus: #5a9a28;
}

/* Hero — Oakland evening sky (cycles O1–O10) */

.theme-rambutan .hero__optics--rings,
.theme-rambutan .hero__optics--grid-a,
.theme-rambutan .hero__optics--grid-b,
.theme-rambutan .hero__optics--aura,
.theme-rambutan .hero__optics--orbit,
.theme-rambutan .hero__collage-paper {
  display: none;
}

.theme-rambutan .hero__collage {
  background-color: #080c1e;
}

.theme-rambutan .hero__sunset {
  position: absolute;
  inset: -14%;
  z-index: 0;
  opacity: 0;
  background-color: #050818;
  background-repeat: no-repeat;
  background-size: 140% 140%;
  transition: opacity 4.5s ease;
  will-change: opacity, transform;
  animation: sunset-drift 34s ease-in-out infinite;
  pointer-events: none;
  filter: saturate(1.18) contrast(1.12);
}

.theme-rambutan .hero__sunset--b {
  animation-name: sunset-drift-alt;
  animation-duration: 40s;
  filter: saturate(1.22) contrast(1.08) brightness(1.04);
}

.theme-rambutan .hero__sunset.is-visible {
  opacity: 1;
}

.theme-rambutan .hero__sunset-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  z-index: 1;
  height: 1px;
  background-color: rgba(148, 42, 38, 0.38);
  box-shadow: 0 1px 0 rgba(142, 162, 68, 0.22);
  pointer-events: none;
}

@keyframes sunset-drift {
  0% {
    transform: scale(1.12) translate(0, 0);
    background-position: 50% 42%;
  }
  33% {
    transform: scale(1.16) translate(-1.2%, 0.8%);
    background-position: 46% 46%;
  }
  66% {
    transform: scale(1.14) translate(0.8%, -0.6%);
    background-position: 54% 40%;
  }
  100% {
    transform: scale(1.12) translate(0, 0);
    background-position: 50% 42%;
  }
}

@keyframes sunset-drift-alt {
  0% {
    transform: scale(1.14) translate(0.4%, -0.4%);
    background-position: 52% 44%;
  }
  50% {
    transform: scale(1.18) translate(-0.8%, 1%);
    background-position: 48% 48%;
  }
  100% {
    transform: scale(1.14) translate(0.4%, -0.4%);
    background-position: 52% 44%;
  }
}

.theme-rambutan .hero__collage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    155deg,
    transparent 38%,
    rgba(247, 240, 232, 0.35) 58%,
    var(--color-bg) 82%
  );
  pointer-events: none;
}

.theme-rambutan .hero__collage-frame {
  z-index: 6;
  border: var(--grid-line-dark);
  box-shadow: none;
  background: #0d0d0d;
}

.theme-rambutan .hero__collage-overlay {
  background:
    linear-gradient(180deg, rgba(247, 240, 232, 0.04), transparent 40%);
}

.theme-rambutan .hero__collage-scan {
  opacity: 0;
}

.theme-rambutan .hero__collage:hover .hero__collage-image {
  filter: grayscale(35%) contrast(1.14) brightness(0.92) sepia(0.1) hue-rotate(5deg);
}

@media (prefers-reduced-motion: reduce) {
  .theme-rambutan .hero__sunset {
    inset: 0;
    animation: none;
    transition: none;
    background-size: 100% 100%;
    transform: none;
  }
}

/* Header & UI */

.theme-rambutan .dot-mark {
  background-color: var(--color-desert-purple);
  box-shadow:
    0 0 6px rgba(72, 22, 88, 0.55),
    0 0 12px rgba(72, 22, 88, 0.28);
}

.theme-rambutan a:not(.site-logo) {
  transition: color 0.18s ease, opacity 0.18s ease;
}

.theme-rambutan .site-nav a[aria-current="page"] {
  color: var(--color-accent-brown);
}

/* Practice & featured */

.theme-rambutan .circle-mark {
  border-color: var(--color-accent-brown);
}

.theme-rambutan .practice-card:hover {
  background-color: rgba(200, 50, 74, 0.04);
}

.theme-rambutan .practice-card__icon {
  color: var(--color-accent-brown);
}

.theme-rambutan .featured__cover {
  background: linear-gradient(165deg, #4a3728 0%, #3a2818 55%, #2e2014 100%);
}

.theme-rambutan .featured__cover-text {
  color: #f7f0e8;
  text-shadow: 0 1px 14px rgba(46, 32, 20, 0.8);
}

.theme-rambutan .featured__cover-image {
  opacity: 0.9;
  filter: contrast(1.05) saturate(1.1) sepia(0.08);
}

.theme-rambutan .featured__issue {
  color: var(--color-accent-brown);
}

.theme-rambutan .content-block__thumb {
  background: linear-gradient(145deg, #7a5c45 0%, #4a3728 100%);
}

.theme-rambutan .quote-block,
.theme-rambutan .content-block.quote-block {
  background: var(--color-bg-quote);
}

.theme-rambutan .crosshair-mark {
  color: var(--color-accent-brown);
  opacity: 0.88;
}

.theme-rambutan .newsletter__submit:hover {
  background: rgba(125, 204, 58, 0.1);
}
