/* ============================================================================
   SYDNEY THROUGH MY EYES — the loop feed.
   One loop per screen, like a phone feed: the loop nearest the middle of the
   viewport is the one you hear. Chrome stays monochrome (LAW 1); the paintings
   carry all the colour (LAW 2).
   ========================================================================= */
.sx-feed{padding:clamp(30px,6vh,80px) var(--pad) 0}
.sx-item{display:grid;grid-template-columns:1fr minmax(0,min(64vh,560px)) 1fr;gap:0 clamp(18px,3vw,48px);align-items:center;
  min-height:92vh;padding:4vh 0;border-top:1px solid var(--hair)}
.sx-item:first-child{border-top:0}
.sx-cap{align-self:center}
.sx-cap .spec{display:block;color:var(--grey);margin-bottom:14px}
.sx-cap h3{margin:0;font:800 clamp(1.8rem,3.6vw,3.4rem)/.9 var(--f-disp);letter-spacing:-.04em;text-transform:uppercase}
.sx-cap h3 em{display:block;font:800 italic 1.04em/1 var(--f-edit);text-transform:none;letter-spacing:-.01em;font-synthesis:none}
.sx-meta{align-self:end;justify-self:start;font:400 var(--s-micro)/1.8 var(--f-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;color:var(--grey)}
.sx-meta b{display:block;font-weight:400;color:var(--ink)}
.sx-v{position:relative;margin:0;aspect-ratio:3/4;background:var(--ph);overflow:hidden}
.sx-v video{display:block;width:100%;height:100%;object-fit:cover}
.sx-v::after{display:none}
/* the live loop: a hairline frame and a moving sound meter */
.sx-eq{position:absolute;left:14px;bottom:14px;display:flex;align-items:flex-end;gap:3px;height:16px;padding:6px 8px;background:#000;color:#fff;
  font:400 10px/1 var(--f-mono);letter-spacing:.14em;opacity:0;transform:translateY(6px);transition:opacity .35s var(--e-expo),transform .35s var(--e-expo)}
.sx-eq i{width:2px;height:4px;background:currentColor;animation:sxeq .9s var(--e-quint) infinite alternate}
.sx-eq i:nth-child(2){animation-delay:-.3s}.sx-eq i:nth-child(3){animation-delay:-.6s}
.sx-eq span{margin-left:6px}
@keyframes sxeq{to{height:14px}}
.sx-item.is-live .sx-eq{opacity:1;transform:none}
.sx-item.is-live.is-muted .sx-eq i{animation:none;height:2px}
/* the one tap browsers require before sound */
.sx-pill{position:fixed;left:50%;bottom:22px;z-index:930;transform:translate(-50%,140%);display:flex;align-items:center;gap:12px;
  padding:13px 20px;background:#000;color:#fff;border:0;font:400 var(--s-micro)/1 var(--f-mono);letter-spacing:var(--tr-mono);text-transform:uppercase;
  pointer-events:none;white-space:nowrap;transition:transform .5s var(--e-expo)}
.sx-pill.is-on{transform:translate(-50%,0)}
.sx-pill b{font-weight:700}
.sx-pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#fff;animation:sxpulse 1.4s ease-in-out infinite}
.sx-pill.is-sound i{animation:none;background:transparent;border:1px solid #fff}
@keyframes sxpulse{50%{opacity:.25}}
.sx-hero{padding:0 var(--pad)}
.sx-hero .sx-item{min-height:auto;padding:0;border:0}
@media (max-width:900px){
  .sx-item{grid-template-columns:1fr;gap:14px;min-height:auto;padding:5vh 0}
  .sx-v{max-height:78vh;width:100%;max-width:520px;justify-self:center}
  .sx-meta{justify-self:start;align-self:start}
  .sx-cap h3{font-size:clamp(2rem,9vw,3rem)}
}
@media (prefers-reduced-motion:reduce){.sx-eq i,.sx-pill i{animation:none}}