/* Static brand surfaces: botanical growth and precise circuit routes.
   All decoration is painted behind content; no extra nodes or hit targets. */

/* Dark sections keep their original colours beneath olive light and routes. */
.home-page main > .hero {
  background-color: var(--forest);
  background-image:
    linear-gradient(90deg, #102c1ff5 0%, #102c1fe6 35%, #102c1f1a 82%),
    url("/assets/brand/raiz-circuit-pattern-v1.svg"),
    radial-gradient(ellipse at 84% 20%, #6c803a50, transparent 62%),
    radial-gradient(ellipse at 48% 108%, #2c684340, transparent 60%);
  background-repeat: no-repeat;
  background-position: center, right top, center, center;
  background-size: cover, 640px 600px, cover, cover;
}

.home-page main > :is(.home-contact, .contact) {
  background-color: var(--surface);
  background-image:
    linear-gradient(90deg, #183c29d9 0%, #183c29b3 45%, #183c2926 100%),
    url("/assets/brand/raiz-circuit-pattern-v1.svg"),
    radial-gradient(ellipse at 94% 10%, #6c803a45, transparent 64%),
    linear-gradient(135deg, #183c29, #102c1f);
  background-repeat: no-repeat;
  background-position: center, right center, center, center;
  background-size: cover, 560px 525px, cover, cover;
}

/* Light sections have a quiet branch in the margin and a measured dot grid.
   The first gradient creates a clear central reading area. */
.home-page main > :is(.capabilities, .statement, .method, .architecture) {
  --raiz-light-base: var(--paper);
  --raiz-light-rgb: 248, 250, 245;
  background-color: var(--raiz-light-base);
  background-image:
    linear-gradient(90deg, transparent, rgba(var(--raiz-light-rgb), .88) 16%, rgba(var(--raiz-light-rgb), .88) 68%, transparent),
    url("/assets/brand/raiz-botanical-pattern-v1.svg"),
    radial-gradient(circle at 1px 1px, #526b2c24 1px, transparent 1.5px),
    radial-gradient(ellipse at 96% 5%, #e0e8d5, transparent 55%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-position: center, right top, 12px 12px, center;
  background-size: cover, 390px 443px, 28px 28px, cover;
}

.home-page main > :is(.statement, .method) {
  --raiz-light-base: var(--soft);
  --raiz-light-rgb: 237, 241, 228;
}

.home-page main > .method {
  background-position: center, right bottom, 12px 12px, center;
}

/* Dark project and plan collections retain a calm centre and designed edges. */
.home-page main > :is(.projects, .plans, .technologies) {
  background-color: var(--forest);
  background-image:
    linear-gradient(90deg, transparent, #102c1ff5 18%, #102c1ff5 82%, transparent),
    radial-gradient(circle at 1px 1px, #9bac6340 1px, transparent 1.6px),
    radial-gradient(ellipse at 5% 0%, #36553355, transparent 52%),
    linear-gradient(160deg, #102c1f, #122f21);
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  background-position: center, 12px 12px, center, center;
  background-size: cover, 26px 26px, cover, cover;
}

/* Learning uses the same language, with its established editorial palette. */
.editorial-page .learning-hero {
  background-color: var(--editorial-dark);
  background-image:
    linear-gradient(90deg, #09271bf2 0%, #09271be6 38%, #09271b26 85%),
    url("/assets/brand/raiz-circuit-pattern-v1.svg"),
    radial-gradient(ellipse at 92% 12%, #6c803a40, transparent 62%);
  background-repeat: no-repeat;
  background-position: center, right top, center;
  background-size: cover, 640px 600px, cover;
}

.editorial-page :is(.learning-section, .editorial-bridge) {
  --raiz-light-base: var(--editorial-paper);
  --raiz-light-rgb: 244, 246, 238;
  background-color: var(--raiz-light-base);
  background-image:
    linear-gradient(90deg, transparent, rgba(var(--raiz-light-rgb), .9) 16%, rgba(var(--raiz-light-rgb), .9) 75%, transparent),
    url("/assets/brand/raiz-botanical-pattern-v1.svg"),
    radial-gradient(circle at 1px 1px, #526b2c24 1px, transparent 1.5px);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: center, right top, 12px 12px;
  background-size: cover, 330px 375px, 28px 28px;
}

.editorial-page :is(.editorial-bridge, .learning-section--light) {
  --raiz-light-base: var(--editorial-wash);
  --raiz-light-rgb: 231, 238, 223;
}

/* Fine olive traces ground shared navigation; case studies stay independent. */
:is(.home-page, .editorial-page):not(.project-page) .site-header {
  background-color: #fff;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 48px, #6c803a66 48px 92px, transparent 92px 148px, #102c1f3b 148px 172px, transparent 172px 230px),
    linear-gradient(110deg, #fff 55%, #f4f6ee);
  background-repeat: no-repeat;
  background-position: bottom center, center;
  background-size: 100% 2px, cover;
}

:is(.home-page, .editorial-page):not(.project-page) .site-footer {
  background-color: #fff;
  background-image:
    linear-gradient(90deg, #fff 0%, #fffffff2 55%, #ffffff73 100%),
    url("/assets/brand/raiz-botanical-pattern-v1.svg"),
    linear-gradient(115deg, #fff 60%, #edf1e4);
  background-repeat: no-repeat;
  background-position: center, right 40%, center;
  background-size: cover, 280px 318px, cover;
}

@media (max-width: 620px) {
  .home-page main > .hero,
  .editorial-page .learning-hero {
    background-size: cover, 400px 375px, cover, cover;
    background-position: center, right bottom, center, center;
  }
  .home-page main > :is(.home-contact, .contact) {
    background-size: cover, 420px 394px, cover, cover;
    background-position: center, right bottom, center, center;
  }
  .home-page main > :is(.capabilities, .statement, .method, .architecture) {
    background-size: cover, 230px 261px, 28px 28px, cover;
    background-position: center, right bottom, 12px 12px, center;
  }
  .editorial-page :is(.learning-section, .editorial-bridge) {
    background-size: cover, 230px 261px, 28px 28px;
    background-position: center, right bottom, 12px 12px;
  }
}