/* The studio's frame around an invented business.
   Every sample page carries this bar, and it is the one part of a sample that
   is not designed for the trade: it is the studio speaking, in the studio's
   own paper and green, so a reader can never mistake the frame for the site.
   It is a real element with real contrast, not a watermark, because the point
   of it is to be read. */
.sample-bar{position:sticky;top:0;z-index:99;background:#14130f;color:#f4efe4;font:500 14px/1.4 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;padding:10px clamp(14px,4vw,28px);border-bottom:1px solid #3a362b}
.sample-bar b{font-weight:600}
.sample-bar span{color:#b4ac9a;font-weight:400}
.sample-bar a{color:#8fcaa3;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;white-space:nowrap;padding:4px 0}
.sample-bar a:hover{color:#f4efe4}
.sample-bar a:focus-visible,.sample-note a:focus-visible{outline:2px solid #8fcaa3;outline-offset:3px}

/* The line every sample carries at the foot, under whatever the business's own
   footer is. Same words on all of them. */
.sample-note{background:#14130f;color:#b4ac9a;font:400 14px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;padding:clamp(24px,5vw,40px) clamp(14px,4vw,28px)}
.sample-note p{max-width:60ch;margin:0 auto}
.sample-note a{color:#8fcaa3}

/* On a phone the bar was 122px tall, which on the bakery pushed the menu, the
   one thing its plate promises is on the first screen, entirely below the fold.
   The disclosure has to be legible, not large: 13px, one tight line of lead-in,
   and the studio link on the same row. */
@media (max-width:600px){
  .sample-bar{font-size:13px;padding:8px clamp(14px,4vw,20px);gap:2px 12px}
  .sample-bar p{margin:0}
  .sample-bar a{font-size:13px}
}

@media (prefers-reduced-motion:reduce){.sample-bar{position:static}}