/* Showcase chrome shared by all five designs: picker banner + ownership notice */
:root { --showcase-h: 38px; }
body { padding-top: var(--showcase-h) !important; }
.showcase-bar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--showcase-h); z-index: 5000;
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 18px; background: #0a0a0b; color: #efeae2; border-bottom: 1px solid #c9a27e;
  font: 500 11px/1 Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.showcase-bar a { color: #c9a27e; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.showcase-bar a:hover, .showcase-bar a:focus-visible { color: #fff; outline: none; }
.showcase-bar a svg { width: 12px; height: 12px; }
.showcase-bar .sb-name { color: #8f887c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showcase-bar .sb-right { display: flex; gap: 22px; }
@media (max-width: 640px) { .showcase-bar .sb-name { display: none; } .showcase-bar { font-size: 10px; padding: 0 14px; } }

/* push fixed / sticky chrome below the banner */
.site-header { top: var(--showcase-h); }
.lightbox { top: var(--showcase-h); }
html:has(body[data-design="design-01-obsidian"]) { scroll-padding-top: calc(100px + var(--showcase-h)); }
body[data-design="design-01-obsidian"] .nav { top: var(--showcase-h); }
body[data-design="design-02-gallery"] .nav { top: calc(79px + var(--showcase-h)); }
body[data-design="design-03-architect"] .mobile-nav { top: calc(var(--header-h) + var(--showcase-h)); }
body[data-design="design-05-immersive"] .mobile-menu { top: var(--showcase-h); }
body[data-design="design-05-immersive"] .skip-link { top: calc(8px + var(--showcase-h)); }

/* ownership notice under every page */
.showcase-notice {
  background: #050505; color: #9a938a; border-top: 1px solid #2a2a2c;
  font: 400 12px/1.7 Inter, "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; text-align: center;
  padding: 22px 24px;
}
.showcase-notice p { margin: 0 auto; max-width: 900px; }
.showcase-notice strong { color: #d9d2c6; font-weight: 500; }