/* generated by tools/build_metro.py from styles-mix.css: pictures point at the light WebP copies (img/w/) */
/* v26 MIX = look 3 (jam + jam2: rough condensed titles, spray tags, stickers with ink outlines, animations)
   + the new parts: real photos everywhere, brush strokes, stencil Spot, credits. Hard ink shadows of look 3 are kept on purpose. */
:root{
  --tape:linear-gradient(180deg,rgba(244,237,218,.92),rgba(228,219,196,.9));
  --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M2 11 C30 4 60 6 92 8 S160 3 190 6 S228 9 238 5 L236 12 C210 16 170 12 140 14 S70 16 40 14 S10 16 3 15 Z' fill='%23E30613'/%3E%3C/svg%3E");
  --halftone-ph:radial-gradient(circle,rgba(0,0,0,.28) 1px,transparent 1.5px);
}
/* hero: real photo with the look-3 red duotone, cipher ring stays */
.hero-img{background-image:url("img/w/photos/5.webp");background-position:62% 38%;filter:grayscale(1) contrast(1.25) brightness(.95)}
.hero-tint{opacity:.6}
@media (max-width:640px){ .spray{top:5%;bottom:auto;right:4%;font-size:30px} .cipher{opacity:.45} }

/* rough condensed titles keep their look-3 edge, plus the brush stroke */
.sec-h h2::after{clip-path:none;background:var(--brush) 0 0/100% 100% no-repeat;width:min(200px,70%);height:14px;bottom:-2px;opacity:1}

/* event flyers: look-3 flyer + a real photo in halftone on the date block */
.evc-date{min-height:116px;align-items:flex-end;background-color:#16130F;background-size:5px 5px,100% 100%,cover;background-position:0 0,0 0,center;
  background-image:var(--halftone-ph),linear-gradient(180deg,rgba(22,19,15,.15),rgba(22,19,15,.85)),var(--ph,url("img/w/photos/4.webp"));background-blend-mode:normal,normal,luminosity}
.evc.world .evc-date{background-color:#E30613;background-image:var(--halftone-ph),linear-gradient(180deg,rgba(227,6,19,.3),rgba(150,4,14,.9)),var(--ph,url("img/w/photos/1.webp"))!important;background-blend-mode:normal,normal,luminosity}
/* calendar rows: the date sits on a small photo tile */
.ev-d{background:linear-gradient(180deg,rgba(22,19,15,.25),rgba(22,19,15,.8)),var(--ph,none) center/cover #16130F;color:#fff;border-radius:8px;min-width:64px;min-height:64px;display:grid;place-content:center;text-align:center;border:2px solid #16130F}
.ev-d b{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)} .ev-d span{color:#F4F0E6}
.ev.world .ev-d{background:linear-gradient(180deg,rgba(227,6,19,.35),rgba(150,4,14,.9)),var(--ph,none) center/cover #E30613}
.evc-date b{font-size:56px;text-shadow:0 2px 10px rgba(0,0,0,.4)}

/* page heads: real photo behind the wall, the spray tag still on it */
.phead{background-color:#1A1714;background-size:cover;background-position:center 40%;background-blend-mode:luminosity}
.phead::before{color:rgba(255,255,255,.1)}
[data-view="news"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/8.webp")}
[data-view="events"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/4.webp")}
[data-view="music"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/10.webp")}
[data-view="djs"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/2.webp")}
[data-view="breakers"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/9.webp")}
[data-view="ranking"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/3.webp")}
[data-view="community"] .phead{background-image:linear-gradient(90deg,rgba(26,23,20,.92),rgba(26,23,20,.72) 50%,rgba(26,23,20,.5)),url("img/w/photos/7.webp")}

/* portraits, sheet photo, credits, mix covers */
.pc-art[data-photo]{background-size:cover;background-position:50% 22%;filter:grayscale(.1) contrast(1.05)}
.pc-art[data-photo]::before,.pc-art[data-photo]::after,.pc-art[data-photo] b{display:none}
.sheet-photo{height:min(46vw,300px);border-radius:8px;background:#16130F 50% 25%/cover no-repeat;margin:0 0 6px;border:3px solid #16130F}
.credit{font:500 11px/1.3 var(--f-b);color:var(--muted);margin:0 0 12px}
.tl .n.thumb{width:54px;height:30px;border-radius:4px;background:#16130F center/cover}
.tl button{grid-template-columns:54px minmax(0,1fr) auto}

/* band and home photos in the look-3 frames */
.band .photo{background-image:url("img/w/photos/3.webp")!important;filter:grayscale(1) contrast(1.15);border:3px solid #F4F0E6;box-shadow:6px 6px 0 #E30613;transform:rotate(1deg)}
[data-view="home"] .split .photo{background-image:url("img/w/photos/9.webp")!important;border:3px solid #16130F;box-shadow:6px 6px 0 #16130F;transform:rotate(-.8deg)}

/* ---------- v27 leaderboard: readable rows, photo avatars, point bars ---------- */
.lb-title{font-size:clamp(28px,3.4vw,40px);margin:0 0 6px}
.rk2{gap:26px;align-items:start}
.lb-h{display:flex;align-items:baseline;justify-content:space-between;font:900 26px/1 var(--f-d);text-transform:uppercase;margin:0 0 10px;padding-bottom:8px;border-bottom:3px solid #16130F}
.lb-h small{font:700 11px/1 var(--f-m);letter-spacing:.08em;color:var(--muted)}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lb-row{background:#FFFDF8;border:2px solid #16130F;border-radius:10px;box-shadow:3px 3px 0 #16130F;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}
.lb-row:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 #16130F}
.lb-btn{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:34px 48px minmax(0,1fr) minmax(86px,32%);gap:12px;align-items:center;padding:10px 14px}
.lb-btn:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.lb-pos{font:900 26px/1 var(--f-d);color:var(--red);text-align:center}
.lb-av{width:48px;height:48px;border-radius:50%;background:#E30613 50% 22%/cover no-repeat;display:grid;place-items:center;border:2px solid #16130F}
.lb-av b{font:900 18px/1 var(--f-d);color:#fff}
.lb-who{display:grid;gap:3px;min-width:0}
.lb-who b{font:800 19px/1.1 var(--f-d);text-transform:uppercase;color:#16130F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-who small{font:500 13px/1.3 var(--f-b);color:#5E574F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-pts{display:grid;gap:6px;justify-items:end}
.lb-pts b{font:900 22px/1 var(--f-d);color:#16130F;font-variant-numeric:tabular-nums}
.lb-bar{width:100%;height:6px;border-radius:3px;background:rgba(22,19,15,.12);overflow:hidden}
.lb-bar i{display:block;height:100%;background:var(--red);border-radius:3px}
.lb-row.top1{background:#E30613;border-color:#16130F}
.lb-row.top1 .lb-pos,.lb-row.top1 .lb-who b,.lb-row.top1 .lb-pts b{color:#fff}
.lb-row.top1 .lb-who small{color:rgba(255,255,255,.85)}
.lb-row.top1 .lb-bar{background:rgba(255,255,255,.3)} .lb-row.top1 .lb-bar i{background:#fff}
.lb-row.top1 .lb-av{border-color:#fff;background-color:#16130F}
.lb-row.top2,.lb-row.top3{background:#16130F}
.lb-row.top2 .lb-who b,.lb-row.top3 .lb-who b,.lb-row.top2 .lb-pts b,.lb-row.top3 .lb-pts b{color:#fff}
.lb-row.top2 .lb-who small,.lb-row.top3 .lb-who small{color:#C9C1B6}
.lb-row.top2 .lb-bar,.lb-row.top3 .lb-bar{background:rgba(255,255,255,.18)}
.lb-row.top2 .lb-pos{color:#E9E4DA} .lb-row.top3 .lb-pos{color:#D98C4A}
.lb-row.top .lb-btn{padding:14px 14px;grid-template-columns:34px 60px minmax(0,1fr) minmax(86px,32%)}
.lb-row.top .lb-av{width:60px;height:60px}
.lb-row.top .lb-who b{font-size:22px}
.lb-res{border-top:1px solid rgba(22,19,15,.12);padding:0 14px}
.lb-row.top .lb-res{border-top-color:rgba(255,255,255,.16)}
.lb-res summary{cursor:pointer;list-style:none;font:700 11px/1 var(--f-m);letter-spacing:.06em;text-transform:uppercase;color:#5E574F;padding:9px 0}
.lb-res summary::-webkit-details-marker{display:none}
.lb-res summary::after{content:" ＋"} .lb-res[open] summary::after{content:" −"}
.lb-row.top .lb-res summary{color:rgba(255,255,255,.75)}
.lb-res ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.lb-res li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;font:500 14px/1.3 var(--f-b);color:#2A251F}
.lb-row.top li{color:#fff}
.lb-pl{font:800 12px/1 var(--f-m);background:#16130F;color:#fff;border-radius:5px;padding:5px 6px;text-align:center}
.lb-row.top .lb-pl{background:#fff;color:#16130F}
.lb-res li b{font:800 14px/1 var(--f-m)}
@media (max-width:560px){
  .lb-btn,.lb-row.top .lb-btn{grid-template-columns:26px 42px minmax(0,1fr) 70px;gap:10px;padding:10px 12px}
  .lb-av,.lb-row.top .lb-av{width:42px;height:42px}
  .lb-who b,.lb-row.top .lb-who b{font-size:17px}
  .lb-pts b{font-size:19px} .lb-pos{font-size:22px}
}

/* ---------- v27 news: photo cards, sentence-case titles, one lead story ---------- */
.news{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.nc.nc2{display:grid;grid-template-rows:auto 1fr;gap:0;padding:0;border:2px solid #16130F;border-top:2px solid #16130F;border-radius:10px;background:#FFFDF8;box-shadow:4px 4px 0 #16130F;overflow:hidden;transform:none}
.nc.nc2:hover{transform:translate(-1px,-3px);box-shadow:6px 7px 0 #16130F}
.nc.nc2::before,.nc.nc2::after{display:none}
.nc-img{aspect-ratio:16/9;background:#16130F center/cover no-repeat;position:relative;filter:grayscale(.35) contrast(1.08);border-bottom:2px solid #16130F}
.nc-img .chip{position:absolute;left:10px;top:10px;filter:none;box-shadow:2px 2px 0 #16130F}
.nc-body{display:grid;gap:8px;align-content:start;padding:14px 16px 16px}
.nc.nc2 h3{font:800 21px/1.12 var(--f-d);text-transform:none;letter-spacing:0;margin:0;color:#16130F;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;filter:none}
.nc.nc2 p{font:400 15px/1.5 var(--f-b);color:#3B352E;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nc.nc2 .src{font:600 11.5px/1.2 var(--f-m);color:#6B6359;margin-top:2px}
a.nc.nc2:hover h3{color:var(--red)}
@media (min-width:860px){
  .nc.nc2.lead{grid-column:span 2;grid-template-rows:none;grid-template-columns:1.15fr 1fr}
  .nc.nc2.lead .nc-img{aspect-ratio:auto;min-height:280px;border-bottom:0;border-right:2px solid #16130F}
  .nc.nc2.lead .nc-body{padding:22px 24px;align-content:center}
  .nc.nc2.lead h3{font-size:30px;-webkit-line-clamp:5}
}