/* The studio preview ribbon. site-motion ONLY (20 Sep 2026): this copy of the site lives on Rob's
   portal at /site-motion/ and never on amillati.com, so every page carries one slim fixed strip
   saying so, with a way back to /review/. It sits at the BOTTOM so it never covers the site nav
   (top, z 300) and stays under the open drawer (z 290). Tokens are the site's own. */
.preview-ribbon{position:fixed;left:0;right:0;bottom:0;z-index:280;display:flex;align-items:center;
  justify-content:center;gap:18px;flex-wrap:wrap;padding:9px clamp(14px,4vw,28px);
  font-family:var(--serif);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:var(--ground);border-top:1px solid var(--hair);}
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .preview-ribbon{background:color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);}
}
.preview-ribbon a{color:var(--gold-text);border-bottom:1px solid var(--gold);padding-bottom:2px;white-space:nowrap;}
.preview-ribbon a:hover,.preview-ribbon a:focus-visible{color:var(--ink);}
body{padding-bottom:44px;}       /* the footer clears the ribbon */
@media (max-width:480px){ .preview-ribbon{font-size:11px;gap:10px;padding:8px 12px;} body{padding-bottom:72px;} }  /* two rows on a phone, measured 65px */
/* the pinned consulting scene keeps its copy above the ribbon while it is pinned (the loop bands scroll away) */
.js .hero-band--scrub .hb-in{padding-bottom:44px;}
@media (max-width:480px){ .js .hero-band--scrub .hb-in{padding-bottom:72px;} }
@media (prefers-reduced-motion: reduce){ .js .hero-band--scrub .hb-in{padding-bottom:0;} }
@media print{ .preview-ribbon{display:none;} body{padding-bottom:0;} .js .hero-band--scrub .hb-in{padding-bottom:0;} }