/* Arcology brand art — restrained splash integration (2026-09-08 lookfeel3) */
/* Prefer opacity / mask fades; keep wordmark layout intact */

/* —— Header / footer mark (enhance existing .brand) —— */
a.brand {
  display: grid;
  grid-template-columns: 1.85rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.7rem;
  row-gap: 0.08rem;
  align-items: center;
}
a.brand::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 1.85rem;
  height: 1.85rem;
  background: url("/img/brand/arcology-project-gold-circular-city-emblem-128.png") center / contain no-repeat;
  opacity: 0.9;
  pointer-events: none;
}
a.brand .brand-mark,
a.brand .brand-sub {
  grid-column: 2;
}
.site-footer a.brand::before {
  width: 1.55rem;
  height: 1.55rem;
  opacity: 0.72;
}

/* —— Home hero: entry skyline with elegant fade into page bg —— */
.hero-has-world::before {
  background:
    radial-gradient(ellipse 68% 52% at 50% 34%, rgba(7, 9, 15, 0.28), rgba(7, 9, 15, 0.82) 72%),
    linear-gradient(180deg, rgba(7, 9, 15, 0.48) 0%, rgba(7, 9, 15, 0.72) 46%, var(--bg) 100%),
    url("/img/brand/arcology-project-entry-skyline-background-1600.jpg") center 42% / cover no-repeat;
  opacity: 0.82;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,0.55) 78%, transparent 100%);
}
@media (max-width: 720px) {
  .hero-has-world::before {
    opacity: 0.72;
    background:
      radial-gradient(ellipse 78% 52% at 50% 28%, rgba(7, 9, 15, 0.4), rgba(7, 9, 15, 0.88) 74%),
      linear-gradient(180deg, rgba(7, 9, 15, 0.55), var(--bg)),
      url("/img/brand/arcology-project-entry-skyline-background-960.webp") center 40% / cover no-repeat;
  }
}

.hero-art-note {
  position: relative;
  z-index: 2;
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  opacity: 0.8;
}

/* —— Inner pages: subtle emblem watermark —— */
main.page {
  position: relative;
  isolation: isolate;
}
main.page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background:
    url("/img/brand/arcology-project-gold-circular-city-emblem-256.png")
      center 10% / min(200px, 34vw) no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 48%, transparent 82%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 48%, transparent 82%);
}
main.page > * {
  position: relative;
  z-index: 1;
}

/* Optional soft landscape wash on select sections */
.brand-wash {
  position: relative;
}
.brand-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.07;
  background:
    url("/img/brand/arcology-project-night-lake-mountain-city-banner.jpg")
      center 20% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}
.brand-wash > * { position: relative; z-index: 1; }


/* —— Portal + wiki: same restrained emblem watermark as main.page —— */
main.portal::before,
.wiki-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background:
    url("/img/brand/arcology-project-gold-circular-city-emblem-256.png")
      center 8% / min(180px, 30vw) no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 46%, transparent 78%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 46%, transparent 78%);
}
main.portal > *,
.wiki-layout > * {
  position: relative;
  z-index: 1;
}

/* Soft top wash under header on inner shells */
main.page::after,
main.portal::after,
.wiki-layout::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 7rem;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  background:
    url("/img/brand/arcology-project-night-lake-mountain-city-banner.jpg")
      center top / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
}