/* --------------------------------------------------------------------------- concept.css — the speculative-work label. Charter §6.3: "Design Ideas are labelled speculative... same-looking cards for built work and speculative work IS the overclaim." The marketing page owns card-level labelling and this box does not own that page. So the label is baked into the mockup itself as well, deliberately styled as SYSTEM CHROME rather than as part of the design — a visitor reads it as a wrapper around the work, not as a banner the fictional business chose. That redundancy is the point. A screenshot that escapes without a card label still carries the word "Concept". Add class="capture-clean" to to hide it, for use ONLY where the surrounding page does the labelling instead. scripts/capture.mjs emits both. --------------------------------------------------------------------------- */ .concept-bar { --cb-bg: #16161a; --cb-ink: #e7e5e4; --cb-accent: #fbbf24; position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; padding: 0.55rem clamp(1rem, 4vw, 2rem); background: var(--cb-bg); color: var(--cb-ink); font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; font-size: 0.75rem; line-height: 1.45; letter-spacing: 0.01em; border-block-end: 1px solid rgb(255 255 255 / 0.1); } .concept-bar__tag { flex: none; padding: 0.2em 0.55em; border-radius: 3px; background: var(--cb-accent); color: #16161a; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .concept-bar p { margin: 0; } .concept-bar strong { color: #fff; font-weight: 600; } .concept-bar a { color: var(--cb-accent); text-underline-offset: 0.2em; margin-inline-start: auto; white-space: nowrap; } /* On a phone the label must stay legible without eating the fold. It keeps the tag and the sentence; the convenience link goes, since the index is one back press away. */ @media (max-width: 720px) { .concept-bar { gap: 0.4rem 0.6rem; padding: 0.45rem 1rem; font-size: 0.66rem; line-height: 1.35; } .concept-bar a { display: none; } } /* Clean-capture mode: the label is suppressed because something else supplies it. Never use this variant on a surface that does not label the work. */ body.capture-clean .concept-bar { display: none; } /* The sticky site header must sit below the bar, not over it. */ .concept-bar ~ .site-header { top: 0; }