/* Shared: "Concept project" banner shown on every demo page. */
.concept-bar {
  position: relative; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .6rem clamp(1rem, 3vw, 2rem);
  background: #30302E; color: #E8E1D7;
  font: 500 13px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: 0;
}
.concept-bar strong { color: #FAF8F4; font-weight: 600; }
.concept-bar .cb-tag {
  display: inline-block; margin-right: .6rem; padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid #B49A7A; color: #D7C6B0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.concept-bar a { color: #FAF8F4; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.concept-bar a:focus-visible { outline: 2px solid #B49A7A; outline-offset: 2px; }
.is-preview .concept-bar { display: none; }
.is-preview { scrollbar-width: none; }
.is-preview::-webkit-scrollbar { display: none; }

.ph-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font: 600 10px/1 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  padding: .45rem .6rem; border-radius: 4px; background: rgba(255,255,255,.75); color: #3a3a38;
}
.is-preview .ph-label { display: none; }

.demo-note { font-size: .85rem; margin-top: .75rem; min-height: 1.2em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}