/* Spatial layering with the Wonderla_b Egyptian whites. */
:root {
  --wl-calcite: #FCFCF9;
  --wl-calcite-soft: #F9F9F5;
  --wl-gypsum: #F5F5F0;
  --wl-gypsum-layer: #F1F1EB;
  --wl-gypsum-shadow: #EAEAE4;
  --wl-gypsum-edge: #E3E3DC;
  --wl-huntite: #FEFEFC;
  --wl-huntite-light: #FFFFFF;
}

html:not([data-theme="dark"]) #projects-inner {
  background:
    radial-gradient(ellipse 78% 28% at 50% 0%, var(--wl-huntite-light) 0%, transparent 100%),
    linear-gradient(180deg, var(--wl-calcite) 0%, var(--wl-calcite-soft) 54%, var(--wl-calcite) 100%);
}
html:not([data-theme="dark"]) #projects-inner details.project > .project-body {
  background:
    radial-gradient(ellipse 70% 32% at 50% 0%, var(--wl-huntite-glow, #FEFEFC) 0%, transparent 100%),
    linear-gradient(160deg, var(--wl-calcite) 0%, var(--wl-calcite-soft) 56%, var(--wl-calcite) 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 92%), inset 0 -1px 0 rgb(227 227 220 / 38%);
}
html:not([data-theme="dark"]) #projects-inner details.project > .project-body > .wl-case-intro {
  position: relative;
  background:
    radial-gradient(ellipse 58% 120% at 8% 0%, var(--wl-huntite-light) 0%, transparent 76%),
    linear-gradient(118deg, var(--wl-gypsum) 0%, var(--wl-calcite-soft) 47%, var(--wl-gypsum-layer) 100%) !important;
  padding: clamp(18px, 1.6vw, 22px) clamp(20px, 2.3vw, 32px) !important;
  margin-bottom: 8px !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 95%),
    inset 0 -1px 0 rgb(227 227 220 / 72%),
    0 6px 18px -18px rgb(23 24 19 / 26%);
}
html:not([data-theme="dark"]) #projects-inner .nimer-site-viewport,
html:not([data-theme="dark"]) #projects-inner .dc-live-browser,
html:not([data-theme="dark"]) #projects-inner .viva-site-viewport {
  box-sizing: border-box;
  padding: clamp(8px, 1.2vw, 16px);
  background:
    radial-gradient(ellipse 85% 42% at 50% 0%, var(--wl-gypsum) 0%, transparent 100%),
    linear-gradient(155deg, var(--wl-gypsum-layer) 0%, var(--wl-gypsum-shadow) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 92%),
    inset 0 0 0 1px rgb(227 227 220 / 74%),
    0 14px 34px -30px rgb(23 24 19 / 42%);
}
html:not([data-theme="dark"]) #projects-inner .nimer-site-viewport iframe,
html:not([data-theme="dark"]) #projects-inner .dc-live-browser iframe,
html:not([data-theme="dark"]) #projects-inner .viva-site-viewport iframe {
  display: block;
  box-shadow: 0 1px 3px rgb(23 24 19 / 12%);
}
html[data-theme="dark"] #projects-inner details.project > .project-body > .wl-case-intro {
  background: linear-gradient(120deg, #24251F 0%, #1B1C18 52%, #171813 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%), inset 0 -1px 0 rgb(0 0 0 / 35%);
}
html[data-theme="dark"] #projects-inner .nimer-site-viewport,
html[data-theme="dark"] #projects-inner .dc-live-browser,
html[data-theme="dark"] #projects-inner .viva-site-viewport {
  background: linear-gradient(155deg, #24251F 0%, #11120F 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), inset 0 0 0 1px rgb(0 0 0 / 35%);
}
@media (max-width: 600px) {
  html:not([data-theme="dark"]) #projects-inner details.project > .project-body > .wl-case-intro {
    padding: 18px 18px !important;
    margin-bottom: 4px !important;
  }
}