/*
  Canonical Marked Matter Operations asset placement.
  007 PEARL / NACRE = primary material.
  006 SCALE / SEGMENTED STONE = structural companion.
  This file places authored assets only; it never redraws pattern geometry in CSS.
*/
:root{
  --ops-pearl-asset:url('/assets/canonical/MM_PATTERN_007_PEARL_NACRE_MASTER.webp');
  --ops-scale-asset:url('/assets/canonical/MM_PATTERN_006_SCALE_SEGMENTED_STONE_MASTER.webp');
}

/* Desktop rail: visible nacre specimen at the masthead, graphite below for dense navigation. */
@media(min-width:901px){
  .side{position:fixed;isolation:isolate;overflow-x:hidden!important;overflow-y:auto!important;background:#11171a!important;padding-bottom:34px!important;scrollbar-gutter:stable}
  .side::before{content:"";display:block!important;position:absolute;z-index:0;pointer-events:none;left:0;right:0;top:0;height:150px;opacity:.98;background-image:linear-gradient(180deg,rgba(255,255,252,.08),rgba(17,23,26,.10) 58%,#11171a 100%),var(--ops-pearl-asset);background-repeat:no-repeat;background-size:100% 100%,cover;background-position:center,42% 44%;filter:saturate(1.12) contrast(1.02) brightness(1.10)}
  .side::after{content:"";display:block!important;position:absolute;z-index:0;pointer-events:none;left:52px;right:-38px;bottom:-22px;height:205px;opacity:.20;background-image:linear-gradient(180deg,#11171a 0%,rgba(17,23,26,.12) 45%,rgba(17,23,26,.02)),var(--ops-scale-asset);background-repeat:no-repeat;background-size:100% 100%,auto 210px;background-position:center,54% bottom;filter:saturate(.74) contrast(1.08)}
  .side>*{position:relative;z-index:1}
}

/* Mobile masthead gets one real PEARL crop. */
@media(max-width:900px){
  .side::before,.side::after{display:none!important}.mobile-side-head{isolation:isolate;overflow:hidden;background:#f4f3ef!important}
  .mobile-side-head::after{content:"";position:absolute;z-index:-1;pointer-events:none;right:-18px;top:-48px;width:280px;height:176px;opacity:.98;background-image:linear-gradient(90deg,rgba(246,246,241,.22),rgba(246,246,241,.02)),var(--ops-pearl-asset);background-repeat:no-repeat;background-size:100% 100%,cover;background-position:center,44% center;filter:saturate(1.12) contrast(1.02) brightness(1.10)}
  .side .nav{background:#11181b!important;background-image:none!important}.side .nav::before,.side .nav::after{display:none!important}
}

/* Sign-in is low density and visibly nacre, not slate. */
.auth{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,#f7f6f1,#e8eceb)!important}
.auth::before{content:"";position:absolute;z-index:-1;pointer-events:none;right:max(-80px,-4vw);top:50%;width:min(720px,78vw);height:min(720px,78vw);transform:translateY(-50%);border-radius:38% 62% 54% 46%/49% 37% 63% 51%;background-image:linear-gradient(120deg,rgba(250,249,244,.06),rgba(250,249,244,.32)),var(--ops-pearl-asset);background-repeat:no-repeat;background-size:100% 100%,cover;background-position:center,44% center;opacity:.96;filter:saturate(1.12) contrast(1.02) brightness(1.08)}
.login{position:relative;z-index:1;background:rgba(252,252,248,.94)!important}
@media(max-width:620px){.auth::before{right:-170px;width:560px;height:560px;opacity:.82}}