/* Approved black palette: 75% glass fill, 25% transparency; existing animations remain unchanged. */
:root { --mr-body-color: #eae6dc; }
:root, body, #mr-root, #cs-root, #career-story {
  --body: var(--mr-body-color);
  --career-body: var(--mr-body-color);
  --bg: #000000;
  --surface: var(--mr-glass-surface);
  --line: #343434;
  --mr-card-surface: #181818; /* Also used for dark text on light status badges. */
  --career-bg: #000000;
  --career-surface: var(--mr-glass-surface);
  --project-bg: #000000;
  --mr-glass-surface: rgba(35, 35, 35, .75);
  --mr-glass-blur: 3px;
}
html, body, #mr-root, #cs-root, #career-story {
  background-color: #000000 !important;
}
#mr-root .editorial-home-hero { background: transparent !important; }
.mr-galaxy-page > .mr-galaxy-canvas { background: transparent !important; }

/* One shared glass surface on every public page and at every breakpoint. */
#mr-root .editorial-home-hero .editorial-stat,
#mr-root #career-timeline .career-card,
#mr-root #feedback .mr-feedback-card,
#mr-root .mr-project-fact,
#mr-root .cf-card,
#mr-root #other .mr-card,
#cs-root .about-page .about-story-card,
#cs-root .about-page .about-recommendation,
#cs-root .about-page .mr-cert-card,
#cs-root .about-page .mr-cert-desktop-card,
#career-story .cs-small-panel,
#career-story .cs-thought,
#career-story .cs-roadmap-note,
#career-story .cs-outcome-copy,
#career-story .cs-reflection,
#career-story .cs-outline:not(#career-dialog-close):not([aria-pressed="true"]),
body main#story .media-label,
body main#story .findings,
body main#story .structure > div,
body main#story .tradeoff,
body main#story .impact:not(.crd-impact),
body main#story .ownership,
body main#story .audience-grid article,
body main#story .attempts article,
body main#story .zone-grid > div,
body main#story .crd-metrics,
body main#story .reflection,
body main#story .flow-details .flow-list li,
body main#story .frog-thought,
body main#story .frog-alignment > div,
body main#story .frog-reflection,
body .dialog button:not(#close-dialog),
body .frog-dialog button:not(#frog-close),
#graphic-work .graphic-work__item:not(.graphic-work__item--colosseum,.graphic-work__item--elgrad-label,.graphic-work__item--panathinaikos,.graphic-work__item--zagreb),
#graphic-work .graphic-work__lightbox,
#mr-floating-header.is-scrolled .mr-floating-inner {
  background: var(--mr-glass-surface) !important;
  border: 0;
  -webkit-backdrop-filter: blur(var(--mr-glass-blur));
  backdrop-filter: blur(var(--mr-glass-blur));
}

/* Darker inner panels remain fully opaque for readability. */
#mr-root #career-timeline .career-card-body {
  background: #101010;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#cs-root .about-portrait { background: #252525; }
#cs-root .mr-cert-desktop-card:hover { background: var(--mr-glass-surface); }
#graphic-work .graphic-work__item,
#graphic-work .graphic-work__lightbox { background-color: #181818; }
/* Artwork backings are part of the artwork, including the green shirt and certificate. */
#graphic-work .graphic-work__item--colosseum,
#graphic-work .graphic-work__item--elgrad-label { background-color: #fff; }
#graphic-work .graphic-work__item--panathinaikos { background-color: #0c2117; }
#graphic-work .graphic-work__item--zagreb { background-color: #d3e3f0; }

/* Navigation behavior is unchanged; its gray surface shares the glass token above. */
.mr-page-header { background-color: #000000 !important; }

/* Fade certificate edges into the black base. */
#cs-root #certs .mr-certs-slider::before {
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.96) 24%, rgba(0,0,0,.68) 54%, rgba(0,0,0,0) 100%);
}
#cs-root #certs .mr-certs-slider::after {
  background: linear-gradient(270deg, #000 0%, rgba(0,0,0,.96) 24%, rgba(0,0,0,.68) 54%, rgba(0,0,0,0) 100%);
}
#mr-root .cf-nav { background: rgba(23,23,23,.88); }
#mr-root .cf-nav:hover { background: #272727; }
#mr-root .cf-pagination-dot:not(.is-active) { background: #4b4b4b; }
#mr-root #career-timeline .career-track { background: #313131; }
#mr-root #career-timeline .career-dot { border-color: #000; }
#mr-root #career-timeline .career-milestone:not(.is-complete):not([aria-current="step"]) .career-dot {
  background: #4b4b4b;
  box-shadow: 0 0 0 1px #4b4b4b;
}
#graphic-work .graphic-work__arrow:hover:not(:disabled) { background: #272727; }
#graphic-work .graphic-work__caption { background: linear-gradient(transparent,rgba(0,0,0,.9)); }
#graphic-work .graphic-work__close { background: rgba(0,0,0,.88); }

/* Short project stories and image viewers use the same black base. */
#mr-root .mr-project-dialog { --project-bg:#000000; background:#000000; }
#mr-root .mr-project-close,
#mr-root .mr-project-enlarge { background: rgba(14,14,14,.8); }
#mr-root .mr-project-close:hover,
#mr-root .mr-project-enlarge:hover { background: #232323; }
#mr-root .mr-project-image-dialog,
#mr-root .mr-project-image-head { background: #000000; }
#mr-root .mr-project-image-dialog::backdrop { background: rgba(0,0,0,.92); }
#cs-root [role="dialog"][aria-label="Certificate preview"] { background: rgba(0,0,0,.92) !important; }
#cs-root .mr-cert-nav { background: rgba(8,8,8,.4) !important; }