/* THE HEADER (2026-09-27) — logo and information on the far left. See showcase-header.js.
   Desktop only (≥900px); phones keep the stacked header. */
@media (min-width:900px){
  html[data-showcase-ui="glass"] body #brandbar.hdr-left{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:22px;padding:14px 24px 0;min-height:0;height:auto}
  html[data-showcase-ui="glass"] body #brandbar.hdr-left .brand-center{position:static;inset:auto;order:0;justify-content:flex-start;width:auto;min-height:0;transform:none;pointer-events:none}
  html[data-showcase-ui="glass"] body #brandbar.hdr-left .brand-hero,html[data-showcase-ui="glass"] body.shell-v3 #brandbar.hdr-left .brand-hero,body:is(.on-content-browser,.on-asset-stage) #brandbar.hdr-left .brand-hero{height:84px;max-width:none;width:auto;margin:0;animation:none;opacity:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
  #brandbar.hdr-left #hdrInfo{order:1;display:flex;flex-direction:column;gap:4px;min-width:0;padding-left:24px;border-left:1px solid rgba(255,255,255,.22);pointer-events:auto;text-shadow:0 1px 3px rgba(0,0,0,.8);opacity:0;animation:hiIn .9s cubic-bezier(.16,1,.3,1) .4s forwards}
  #brandbar.hdr-left #hdrInfo .hi-name{font:400 clamp(24px,2vw,32px)/1.05 'Bodoni 72',Didot,'Cormorant Garamond','Times New Roman',serif;letter-spacing:-.02em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}
  #brandbar.hdr-left #hdrInfo .hi-ro{display:flex;align-items:center;gap:10px;font:500 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);white-space:nowrap}
  #brandbar.hdr-left #hdrInfo .hi-ro em{font-style:normal;color:var(--accent);opacity:.8}
  #brandbar.hdr-left #hdrInfo .hi-ro i{font-style:normal}
  #brandbar.hdr-left #hdrInfo.hi-live .hi-ro i:last-child{color:var(--accent);padding-left:12px;position:relative}
  #brandbar.hdr-left #hdrInfo.hi-live .hi-ro i:last-child::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25);animation:hiPulse 2.4s ease-in-out infinite}
  html[data-showcase-ui="glass"] body #brandbar.hdr-left #collectionBar{order:2;position:static;width:auto;max-width:none;justify-self:center;margin:0;transform:none}
  html[data-showcase-ui="glass"] body #brandbar.hdr-left #hdrAct,html[data-showcase-ui="glass"] body:is(.on-content-browser,.on-asset-stage) #brandbar.hdr-left #hdrAct{order:3;position:static;inset:auto;transform:none;justify-self:end;display:flex;gap:8px}
  /* the hero's top padding was sized for a centred 128px lockup; the left header is shorter */
  html[data-showcase-ui="glass"] body #brandbar.hdr-left{min-height:calc(84px + 28px)}
  html[data-showcase-ui="glass"] #heroLayer .hero.hero-v4{padding-top:calc(136px + var(--chrome-gap,0px))}
  body:is(.on-content-browser,.on-asset-stage) #brandbar.hdr-left{min-height:calc(84px + 24px)}
}
@keyframes hiIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes hiPulse{0%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)}50%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),.08)}}
@media (prefers-reduced-motion:reduce){#brandbar.hdr-left #hdrInfo{animation:none;opacity:1}}
/* PHONE (gate 6, 2026-09-29): below 900px the readout had no rules at all, so the name and the
   readout ran together as one italic line ("Oceanfront ResidenceUS·21 media…"). Same grammar as
   desktop, stacked and smaller. The ILLUSTRATIVE DEMO marker stays readable (truth marker). */
@media (max-width:899px){
  #brandbar.hdr-left #hdrInfo{display:flex;flex-direction:column;gap:3px;min-width:0;max-width:100%;text-shadow:0 1px 3px rgba(0,0,0,.8)}
  #brandbar.hdr-left #hdrInfo .hi-name{font:400 19px/1.1 'Bodoni 72',Didot,'Cormorant Garamond','Times New Roman',serif;letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #brandbar.hdr-left #hdrInfo .hi-ro{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font:500 9px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
  #brandbar.hdr-left #hdrInfo .hi-ro>*{white-space:nowrap}
  #brandbar.hdr-left #hdrInfo .hi-ro em{font-style:normal;color:var(--accent);opacity:.8}
  #brandbar.hdr-left #hdrInfo .hi-ro i{font-style:normal}
}