:root {
  --fixed-announcement-height: 0px;
  --fixed-header-height: 72px;
  --fixed-shell-height: 72px;
  --content-fade-start: 0px;
  --content-fade-distance: 150px;
}

body {
  padding-top: var(--fixed-shell-height);
}

.announcement-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 31;
}

.site-header {
  position: fixed;
  top: var(--fixed-announcement-height);
  right: 0;
  left: 0;
  z-index: 30;
  background: var(--bg);
}

.page-shell {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--content-fade-start),
    rgba(0, 0, 0, 0.08) calc(var(--content-fade-start) + 55px),
    rgba(0, 0, 0, 0.38) calc(var(--content-fade-start) + 95px),
    #000 calc(var(--content-fade-start) + var(--content-fade-distance)),
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--content-fade-start),
    rgba(0, 0, 0, 0.08) calc(var(--content-fade-start) + 55px),
    rgba(0, 0, 0, 0.38) calc(var(--content-fade-start) + 95px),
    #000 calc(var(--content-fade-start) + var(--content-fade-distance)),
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}