.surface {
  
  --pale:   oklch(from var(--c) calc(l + 0.105) calc(c * 0.90) calc(h - 7));
  --light:  oklch(from var(--c) calc(l + 0.052) calc(c * 0.95) calc(h - 4));
  --mid:    var(--c);
  --warmed: oklch(from var(--c) calc(l - 0.022) calc(c * 1.10) calc(h + 7));
  --dark:   oklch(from var(--c) calc(l - 0.072) calc(c * 1.05) calc(h + 4));
  --deep:   oklch(from var(--c) calc(l - 0.130) calc(c * 1.02) calc(h + 2));

  --pale-0:   oklch(from var(--pale)   l c h / 0);
  --light-0:  oklch(from var(--light)  l c h / 0);
  --warmed-0: oklch(from var(--warmed) l c h / 0);
  --dark-0:   oklch(from var(--dark)   l c h / 0);
  --deep-0:   oklch(from var(--deep)   l c h / 0);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--mid);
  background-image:
    
    radial-gradient(112% 104% at 44% 38%, var(--deep-0) 30%, var(--deep) 100%),
    
    radial-gradient(42% 40% at 8% 2%,     var(--pale),   var(--pale-0)   72%),
    radial-gradient(50% 46% at 76% 6%,    var(--light),  var(--light-0)  84%),
    radial-gradient(54% 50% at 10% 78%,   var(--warmed), var(--warmed-0) 78%),
    radial-gradient(70% 64% at 100% 100%, var(--dark),   var(--dark-0)   70%),
    
    linear-gradient(133deg,
      var(--pale)   0%,
      var(--light)  17%,
      var(--mid)    38%,
      var(--warmed) 56%,
      var(--dark)   78%,
      var(--mid)    100%);
}

.surface::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--grain);
  background-size: 240px 240px;
  mix-blend-mode: soft-light;
  opacity: var(--grain-alpha);
}

.surface > * { position: relative; z-index: 1; }

.surface.s-ink   { --c: #042839; }
.surface.s-slate { --c: #364349; }
.surface.s-muted { --c: #7C868C; }
.surface.s-mist  { --c: #E0ECE8; }

.expanse {
  --expanse-img: url("../assets/textures/expanse.png");
  --expanse-base: #0D7DA6;      
  --lattice: rgba(249, 248, 245, 0.17);
  --lattice-cell: 44px;
  --lattice-dot: 22px;
  --grain-alpha: 0.34;          

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--expanse-base);
  background-image: var(--expanse-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.expanse::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right,  var(--lattice) 0 1px, transparent 1px var(--lattice-cell)),
    repeating-linear-gradient(to bottom, var(--lattice) 0 1px, transparent 1px var(--lattice-cell));
}

.expanse::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain);
  background-size: 240px 240px;
  mix-blend-mode: soft-light;
  opacity: var(--grain-alpha);
}

.expanse > * { position: relative; z-index: 1; }

.expanse.e-grid-left::before {
  -webkit-mask-image: linear-gradient(107deg, #000 0%, rgba(0,0,0,.82) 26%, transparent 64%);
          mask-image: linear-gradient(107deg, #000 0%, rgba(0,0,0,.82) 26%, transparent 64%);
}

.expanse.e-grid-right::before {
  -webkit-mask-image: linear-gradient(253deg, #000 0%, rgba(0,0,0,.82) 26%, transparent 64%);
          mask-image: linear-gradient(253deg, #000 0%, rgba(0,0,0,.82) 26%, transparent 64%);
}

.expanse.e-bare::before { content: none; }

.expanse.e-ink {
  --expanse-img: url("../assets/textures/expanse-ink.png");
  --expanse-base: #042839;
  --lattice: rgba(249, 248, 245, 0.13);   
}

.expanse { --dot-field:
    radial-gradient(circle at center, var(--lattice) 0 1.1px, transparent 1.2px); }

.expanse.e-dots::before {
  background-image: var(--dot-field);
  background-size: var(--lattice-dot) var(--lattice-dot);
  -webkit-mask-image: radial-gradient(128% 108% at 50% 104%, #000 18%, rgba(0,0,0,.55) 58%, transparent 92%);
          mask-image: radial-gradient(128% 108% at 50% 104%, #000 18%, rgba(0,0,0,.55) 58%, transparent 92%);
}

.expanse.e-hero { --lattice: rgba(249, 248, 245, 0.065); --lattice-dot: 26px; }

.expanse.e-hero::before,
.expanse.e-dots.e-hero::before {
  background-image: var(--dot-field);
  background-size: var(--lattice-dot) var(--lattice-dot);
  -webkit-mask-image: radial-gradient(132% 124% at 50% 116%,
      #000 4%, rgba(0,0,0,.42) 20%, rgba(0,0,0,.88) 38%,
      rgba(0,0,0,.18) 54%, rgba(0,0,0,.62) 68%,
      rgba(0,0,0,.12) 82%, transparent 96%);
          mask-image: radial-gradient(132% 124% at 50% 116%,
      #000 4%, rgba(0,0,0,.42) 20%, rgba(0,0,0,.88) 38%,
      rgba(0,0,0,.18) 54%, rgba(0,0,0,.62) 68%,
      rgba(0,0,0,.12) 82%, transparent 96%);
}