.sveeg-demo-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  padding: 0.65rem clamp(1.25rem, 4vw, 5rem);
  background: #2c2e30;
  color: #fff;
  font:
    12px/1.5 Arial,
    Helvetica,
    sans-serif;
  letter-spacing: 0.015em;
}
.sveeg-demo-notice a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sveeg-demo-notice a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* Good Noise opens directly with its cover; the return link sits below the issue. */
[data-sveeg-demo='good-noise'] .sveeg-demo-notice {
  background: var(--sage);
  color: var(--ink);
  padding-inline: var(--gutter);
}
/* Keep the return bar above Édition New's fixed header and contents rail. */
@media screen {
  html[data-sveeg-demo='edition-new'],
  html[data-sveeg-demo='uberwinzig'],
  html[data-sveeg-demo='morrow'] {
    --demo-notice-height: 40px;
  }
  html[data-sveeg-demo='edition-new'] {
    scroll-padding-top: calc(var(--header) + var(--demo-notice-height));
  }
  [data-sveeg-demo='edition-new'] .sveeg-demo-notice {
    position: fixed;
    inset: 0 0 auto;
    z-index: 40;
    height: var(--demo-notice-height);
  }
  [data-sveeg-demo='edition-new'] .site-header {
    top: var(--demo-notice-height);
  }
  [data-sveeg-demo='edition-new'] .contents-rail {
    top: calc(var(--header) + var(--demo-notice-height));
  }
  [data-sveeg-demo='edition-new'] .contents-rail summary,
  [data-sveeg-demo='edition-new'] .contents-panel,
  [data-sveeg-demo='edition-new'] .cover {
    height: calc(100svh - var(--header) - var(--demo-notice-height));
  }
  [data-sveeg-demo='edition-new'] main {
    padding-top: calc(var(--header) + var(--demo-notice-height));
  }
  /* uberwinzig fills the viewport with two independently scrolling columns. */
  [data-sveeg-demo='uberwinzig'] .sveeg-demo-notice {
    height: var(--demo-notice-height);
  }
  [data-sveeg-demo='uberwinzig'] .layout {
    height: calc(100svh - var(--demo-notice-height));
  }
  [data-sveeg-demo='uberwinzig'] .noscript {
    top: calc(90px + var(--demo-notice-height));
  }
}
@media screen and (max-width: 1050px) {
  [data-sveeg-demo='uberwinzig'] .mobile-header {
    top: var(--demo-notice-height);
  }
  [data-sveeg-demo='uberwinzig'] .sidebar {
    top: calc(75px + var(--demo-notice-height));
    height: calc(100svh - 75px - var(--demo-notice-height));
  }
}
@media screen and (max-width: 380px) {
  html[data-sveeg-demo='edition-new'],
  html[data-sveeg-demo='uberwinzig'],
  html[data-sveeg-demo='morrow'] {
    --demo-notice-height: 64px;
  }
}

/* Keep Morrow's fixed header and local view navigation below the return bar. */
@media screen {
  html[data-sveeg-demo='morrow'] {
    scroll-padding-top: calc(var(--header-h) + var(--demo-notice-height) + 24px);
  }
  [data-sveeg-demo='morrow'] .sveeg-demo-notice {
    position: fixed;
    inset: 0 0 auto;
    z-index: 70;
    height: var(--demo-notice-height);
  }
  [data-sveeg-demo='morrow'] .site-header {
    top: var(--demo-notice-height);
  }
  [data-sveeg-demo='morrow'] #content {
    padding-top: calc(var(--header-h) + var(--demo-notice-height));
  }
  [data-sveeg-demo='morrow'] .mobile-nav {
    top: calc(var(--header-h) + var(--demo-notice-height));
  }
}
@media print {
  .sveeg-demo-notice {
    display: none;
  }
}

/* Reserve space for the return bar above Within's viewport-height gallery. */
@media screen and (min-width: 801px) {
  [data-sveeg-demo='within-across'] .sveeg-demo-notice { height: 40px; }
  [data-sveeg-demo='within-across'] .enhanced .shell { height: calc(100dvh - 40px); }
  [data-sveeg-demo='within-across'] .enhanced .shape-frame {
    width: min(100%, calc(100dvh - 292px));
  }
}

/* Keep Mere House's fixed side rails below the shared concept notice. */
@media screen {
  [data-sveeg-demo='mere-house-refined'] .sveeg-demo-notice {
    position: relative;
    z-index: 40;
  }
  [data-sveeg-demo='mere-house-refined'] .hero {
    height: calc(100svh - 116px);
  }
}
@media screen and (max-width: 760px) {
  [data-sveeg-demo='mere-house-refined'] .hero { height: 75svh; }
}