/* Sistah Vibes · Urban (data-sound="roots"): the sound system in Jamaican colours.
   Black first, anthracite cabinets to lift the boxes, yellow and green as the only colours. No red anywhere.
   Structure and furniture stay from sv.css; this file swaps material and adds the scroll story (sv-urban.js). */

/* metric-matched fallback (Arial scaled to Inter Tight), so the swap to the web font does not move the layout */
@font-face{font-family:"Inter Tight Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Roboto");size-adjust:96%;ascent-override:100.9%;descent-override:25.2%;line-gap-override:0%}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-400.woff2?v=2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500.woff2?v=2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600.woff2?v=2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-700.woff2?v=2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-tight-800.woff2?v=2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/inter-tight-900.woff2?v=2) format("woff2")}

:root:not([data-sound="afro"]){
  --night:#070809;
  --cab:#1d1f22; --cab-hi:#2e3135; --cab-lo:#0b0c0d;
  --face:#0e0f11; --face-2:#141619; --rule:#272a2e;
  --paper:#f4f2ec; --muted:#b4b3ae; --dim:#8c8b87;
  --gold:#fcd116; --green:#13a14b; --green-ink:#0b7a37;
  --red:var(--green);
  --accent:var(--gold); --accent-ink:#0a0a0a;
  --steel:#8d9095; --steel-hi:#d6d8dc;
  --plate-bg:linear-gradient(180deg,#dcdee1,#b4b7bb 55%,#a1a4a9);
  --plate-ink:#1a1c1f;
  --grille-dot:rgba(0,0,0,.66);
  --grille-bg:#1f2124;
  --paint-shadow:.045em .045em 0 var(--green),.09em .09em 0 #000;
  scrollbar-color:var(--cab-hi) var(--night);
}
:root:not([data-sound="afro"]) ::selection{background:var(--gold);color:#0a0a0a}

/* the name: yellow sign lettering, green and black paint shadow */
:root:not([data-sound="afro"]) .name span{color:var(--gold)}

/* flag stripe: green and yellow on black, never red */
:root:not([data-sound="afro"]) .tri{height:5px;background:repeating-linear-gradient(90deg,var(--green) 0 34px,var(--night) 34px 38px,var(--gold) 38px 72px,var(--night) 72px 76px)}
:root:not([data-sound="afro"]) .xf-cap::after{background:#0a0a0a}

/* colour roles: yellow leads (lettering, actions, numbers), green answers (lights, labels, live states) */
:root:not([data-sound="afro"]) .genres li::before,
:root:not([data-sound="afro"]) .genres li:nth-child(3n+1)::before{background:var(--gold)}
:root:not([data-sound="afro"]) .genres li:nth-child(2n)::before{background:var(--green)}
:root:not([data-sound="afro"]) .lanes .led{background:var(--green);box-shadow:0 0 0 3px #050505,0 1px 0 3px rgba(255,255,255,.07)}
:root:not([data-sound="afro"]) .lanes li:nth-child(2) .led{background:var(--gold)}
:root:not([data-sound="afro"]) .lanes li:nth-child(3) .led{background:var(--green)}
:root:not([data-sound="afro"]) .d-l1{fill:var(--green)}
:root:not([data-sound="afro"]) .d-l2{fill:var(--gold)}
:root:not([data-sound="afro"]) .d-l3{fill:#0a0a0a}
:root:not([data-sound="afro"]) .onair-h i{background:var(--green)}
:root:not([data-sound="afro"]) .pull p::before{color:var(--green)}
:root:not([data-sound="afro"]) .field input[aria-invalid="true"]{border-color:var(--gold)}
:root:not([data-sound="afro"]) .form-err{background:color-mix(in srgb,var(--gold) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
:root:not([data-sound="afro"]) .roles{color:var(--green)}
:root:not([data-sound="afro"]) .rt-role,:root:not([data-sound="afro"]) .facts dt,:root:not([data-sound="afro"]) .specs h3,:root:not([data-sound="afro"]) .j-side h3{color:var(--green)}

/* speakers: neutral anthracite, no brown */
:root:not([data-sound="afro"]) .k-frame{fill:#070809}
:root:not([data-sound="afro"]) .k-surround{fill:#1a1c1f;stroke:#2c2f33}
:root:not([data-sound="afro"]) .k-cap{fill:#121417}
:root:not([data-sound="afro"]) .h-out{fill:#070809}
:root:not([data-sound="afro"]) .h-flare{fill:#17191c;stroke:#2a2d31}

/* press photos on request: WhatsApp green in Urban */
:root:not([data-sound="afro"]) .media{border-top-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--face))}
:root:not([data-sound="afro"]) .md-tag,:root:not([data-sound="afro"]) .md-btn{background:var(--green-ink);border-color:var(--green-ink);color:#fff}
:root:not([data-sound="afro"]) .md-btn:hover{background:var(--green);border-color:var(--green)}

/* stack map: the tower builds as you go (reached = green, here = yellow) */
:root:not([data-sound="afro"]) .map a{background:#1c1e21}
:root:not([data-sound="afro"]) .map a.u-reached{background:var(--green-ink)}
:root:not([data-sound="afro"]) .map a.on{background:var(--gold)}

/* ---------- the scroll story ---------- */
/* 1 · the wall assembles box by box when Urban opens */
.u-build .wall>.cab{animation:u-drop .95s var(--ease) both;animation-delay:calc(var(--u-i,0) * 85ms)}
@keyframes u-drop{from{transform:translateY(-34px);opacity:.01}to{transform:none;opacity:1}}
/* 2 · every box below lands in the stack as it scrolls in (armed only below the fold, visible by default) */
.u-arm{transform:translateY(64px);opacity:0}
.u-land{transform:none;opacity:1;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .55s ease-out}
/* 3 · speakers: the cone moves with the music; sound rings leave the cone on the beat */
.cone{position:relative}
.u-live .beat .k-move,.u-live .beat .k-cap{animation:none}
.u-waves{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.u-waves circle{fill:none;stroke-width:2.2;transform-box:view-box;transform-origin:0 0;opacity:0;vector-effect:non-scaling-stroke}
.fill,.bin,.w-cone .face{isolation:isolate}
@media (prefers-reduced-motion:reduce){.u-build .wall>.cab{animation:none}.u-arm{transform:none;opacity:1}.u-waves{display:none}}

/* filler speakers: size the cone to the grille it sits in, so it never runs past the bottom edge */
.fill{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding-top:28px}
.fill .cone{margin:0;height:max(0px,min(calc(84cqh - 6px),230px));width:auto;aspect-ratio:1;max-width:80cqw}
/* tall cabinets carry a second driver, like a double bass bin */
.fill .cone-2{display:none}
@container (min-height:560px){
  .fill .cone{height:min(calc(42cqh - 12px),230px)}
  .fill .cone-2{display:block}
}
.fill.u-empty{padding-top:0}
.fill.u-empty::before,.fill.u-empty .cone{display:none}

/* ---------- hero: Karla cut out, standing in the lit cabinet (same clean cut as Electrónica) ---------- */
:root:not([data-sound="afro"]) .w-photo .photo-face{background:
  radial-gradient(ellipse 58% 46% at 50% 34%,rgba(244,242,236,.15),rgba(244,242,236,.05) 55%,transparent 78%),
  radial-gradient(ellipse 70% 30% at 50% 100%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 70%),
  radial-gradient(circle,var(--grille-dot) 1.25px,transparent 1.7px) 0 0/7px 7px,
  linear-gradient(180deg,#26282c,var(--grille-bg) 60%,#141518)}
:root:not([data-sound="afro"]) .photo-face img.u-cut{object-fit:cover;object-position:50% 0;aspect-ratio:4/5;padding-top:clamp(14px,4vw,26px);box-sizing:border-box;filter:grayscale(1) contrast(1.08) brightness(.98);-webkit-mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.55) 88%,transparent);mask-image:linear-gradient(180deg,#000 0 74%,rgba(0,0,0,.55) 88%,transparent)}
@media (min-width:900px){:root:not([data-sound="afro"]) .photo-face img.u-cut{aspect-ratio:auto;padding-top:clamp(16px,2vw,28px)}}