/* Metro test (metro.html only): B line header, posterized places with a small station sign, a real 1973 painted train between stations. */
.mast .proto{display:none!important}
.mbul{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gw-rust);display:grid;place-items:center;font:400 12px/1 "Holtwood One SC",Georgia,serif;color:#160a04;box-shadow:0 0 0 2px var(--gw-ink),0 0 0 3.5px rgba(216,214,204,.35)}
/* ---------- desktop: the line in the header ---------- */
.nav.metro{flex:1;align-items:center;gap:14px;margin-left:16px;margin-right:10px;overflow:visible!important;min-width:0}
@media (min-width:981px){.nav.metro{display:flex!important}}
.mline{position:relative;flex:1;min-width:0;display:flex;justify-content:space-between;align-items:flex-start;padding-top:3px}
.mline::before{content:"";position:absolute;left:22px;right:22px;top:8px;height:6px;border-radius:3px;background:var(--gw-bone);box-shadow:0 0 0 2px var(--gw-ink)}
.nav.metro a.mst,.tabbar.metro a.mst{all:unset;box-sizing:border-box;cursor:pointer;position:relative;z-index:1;display:grid;justify-items:center;gap:5px;min-width:44px;text-decoration:none}
.nav.metro a.mst::before,.nav.metro a.mst::after{display:none!important}
.mst .dot{width:15px;height:15px;border-radius:50%;background:var(--gw-bone);box-shadow:0 0 0 3px var(--gw-ink);transition:transform .25s,background .25s}
.mst .nm{position:relative;font:400 9.5px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--gw-rust);-webkit-text-stroke:.4px var(--gw-rust-lo);paint-order:stroke fill;white-space:nowrap;padding:3px 5px;border-radius:4px}
.mst:hover .nm{color:var(--gw-rust-lt)}
.mst:focus-visible .nm{outline:2px solid var(--gw-gold)}
.mst[aria-current="page"] .dot{transform:scale(1.35);background:var(--gw-rust);box-shadow:0 0 0 3px var(--gw-ink),0 0 0 5px var(--gw-bone)}
.mst[aria-current="page"] .nm{color:var(--gw-bone);background:#1d3226;-webkit-text-stroke:0}
.mst[aria-current="page"] .nm::before,.mst[aria-current="page"] .nm::after{content:"";position:absolute;top:-2px;bottom:-2px;width:4px;border:2px solid var(--gw-bone)}
.mst[aria-current="page"] .nm::before{left:-3px;border-right:0;border-radius:4px 0 0 4px}
.mst[aria-current="page"] .nm::after{right:-3px;border-left:0;border-radius:0 4px 4px 0}
.nav.metro a.mdoor{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:6px;background:#1a0d08;box-shadow:inset 0 0 0 1px rgba(224,134,74,.45);font:400 10px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:var(--gw-rust-lt)}
.nav.metro a.mdoor::before,.nav.metro a.mdoor::after{display:none!important}
.mdoor svg{width:14px;height:14px}
.nav.metro a.mdoor[aria-current="page"]{background:var(--gw-rust);color:#160a04}
/* ---------- phones: the line at the bottom, under the thumb ---------- */
@media (max-width:980px){
.nav.metro{display:none!important}
.tabbar.metro{display:block!important;background:linear-gradient(#0b1b14,#06110c)!important;border-top:1px solid rgba(216,214,204,.08)!important;padding:0 6px var(--safe-b)!important}
.tabbar.metro .mline{height:var(--tab-h);padding-top:13px}
.tabbar.metro .mline::before{left:7%;right:7%;top:18px;height:5px}
.tabbar.metro a.mst{flex:1;min-width:0;gap:8px}
.tabbar.metro .dot{width:13px;height:13px}
.tabbar.metro .nm{font-size:8.5px;letter-spacing:.04em;padding:3px 3px}
.tabbar.metro .mst[aria-current="page"] .nm::before,.tabbar.metro .mst[aria-current="page"] .nm::after{width:3px;border-width:1.5px}
}
/* ---------- section heads: posterized place + small station sign ---------- */
.phead.mloc{position:relative}
.phead.mloc .phead-in > .eyebrow{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the sign: an enamel station plate screwed to a pillar */
.msignpost,.msign{--sp-bg:#10241a;box-sizing:border-box;width:290px;padding:12px 14px;border-radius:6px;background:linear-gradient(#1c3427,var(--sp-bg));border:3px solid #0a1711;box-shadow:inset 0 0 0 1px rgba(216,214,204,.14),0 4px 0 rgba(0,0,0,.45),0 16px 30px -12px #000;color:var(--gw-bone);text-align:left}
.msignpost{position:relative}
.msignpost::before,.msignpost::after,.msign::before,.msign::after{content:"";position:absolute;top:7px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9aa59f,#3b4440);box-shadow:0 1px 0 rgba(0,0,0,.5)}
.msignpost::before,.msign::before{left:7px}
.msignpost::after,.msign::after{right:7px}
.ms-top{display:flex;align-items:center;gap:8px;margin:0 0 7px 8px}
.ms-top .mbul{width:20px;height:20px;font-size:10px}
.ms-stop{font:600 10px/1 var(--f-m);letter-spacing:.2em;color:#a9b8ae}
.ms-sec{display:block;font:400 21px/1.05 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:var(--gw-bone);-webkit-text-stroke:1.2px var(--gw-ink);paint-order:stroke fill;text-shadow:0 2px 0 rgba(0,0,0,.5);text-transform:uppercase}
.ms-place{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(216,214,204,.22);font:400 10.5px/1.3 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--gw-rust-lt);text-transform:uppercase}
.ms-place i{font:600 10px/1 var(--f-m);font-style:normal;letter-spacing:.06em;color:#8fa196;margin-left:4px;text-transform:none}
.ms-fact{margin:8px 0 0;font:500 12.5px/1.45 var(--f-b);color:#cdd5cf}
.ms-fact em{display:inline-block;margin-right:4px;padding:2px 5px;border-radius:3px;background:var(--gw-gold);color:#1a1405;font:700 9px/1.2 var(--f-m);font-style:normal;letter-spacing:.1em;vertical-align:1px}
.ms-more{display:inline-block;margin-top:8px;font:400 10px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-rust);text-decoration:none}
.ms-more:hover,.ms-more:focus-visible{color:var(--gw-bone)}
.msignpost.in{animation:mswing .6s cubic-bezier(.2,.8,.2,1) both;transform-origin:50% 0}
@keyframes mswing{0%{transform:translateY(-16px) rotate(-4deg);opacity:0}60%{transform:rotate(1.2deg);opacity:1}100%{transform:none;opacity:1}}
@media (min-width:1100px){
.msignpost{position:absolute;right:max(24px,calc((100vw - 1240px)/2 + 24px));top:22px;z-index:3}
.phead.mloc .phead-in{padding-right:330px}
}
@media (max-width:1099px){
.phead.mloc{display:flex;flex-direction:column}
.msignpost{width:auto;max-width:520px;margin:0 16px 14px}
}
@media (max-width:600px){
.msignpost{margin:4px 12px 12px;padding:10px 12px}
.ms-sec{font-size:18px}
.ms-fact{font-size:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
.mcr{position:absolute;right:12px;bottom:6px;z-index:2;max-width:60%;text-align:right;font:10px/1.4 var(--f-m);color:rgba(216,214,204,.55)}
.mcr a{color:inherit}
@media (max-width:1099px){.mcr{position:static;display:block;max-width:none;text-align:left;padding:0 16px 10px}}
/* ---------- Spot: School, History, Cypher live here ---------- */
.mspot{padding:16px max(16px,env(safe-area-inset-left,0px)) 18px;text-align:center;background:linear-gradient(rgba(7,18,13,.6),rgba(7,18,13,.85)),url("img/metro/ph-spot.jpg?v=10") center 35%/cover}
.mspot-m{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 10px;margin:4px 0 8px}
.mspot-m a{font:400 clamp(14px,2.2vw,22px)/1.3 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:var(--gw-rust);-webkit-text-stroke:.8px var(--gw-rust-lo);paint-order:stroke fill;text-decoration:none;padding:4px 14px;border-radius:6px}
.mspot-m a:hover,.mspot-m a:focus-visible{color:var(--gw-bone);background:#1d3226;-webkit-text-stroke:0;box-shadow:-4px 0 0 -1px var(--gw-bone),4px 0 0 -1px var(--gw-bone);outline:none}
.mspot p{margin:0 auto;max-width:52ch;font-size:13px;color:#a9b8ae}
section[data-view="spot"].is-locked > div.mspot{display:block!important}
/* ---------- page change like the game menus (v5, Rick 09.11): nothing covers the page. The page swaps at once,
the camera flies onto the place photo and settles, a small painted train rides the bottom edge of the photo,
the station sign drops in. ---------- */
.phead.mloc{background:#07120d!important;background-image:none!important;isolation:isolate;overflow:hidden}
.phead.mloc::before{content:""!important;display:block!important;position:absolute;inset:0;z-index:-2;background:var(--mimg) center 40%/cover no-repeat;transform-origin:50% 60%}
.phead.mloc::after{content:""!important;display:block!important;position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(7,18,13,.85),rgba(7,18,13,.45) 55%,rgba(7,18,13,.25)),linear-gradient(0deg,rgba(7,18,13,.85),transparent 45%)}
body.mgo-ltr .phead.mloc.marrive::before{animation:mcamL .85s cubic-bezier(.2,.75,.25,1) both}
body.mgo-rtl .phead.mloc.marrive::before{animation:mcamR .85s cubic-bezier(.2,.75,.25,1) both}
@keyframes mcamL{from{transform:translateX(9%) scale(1.3);filter:brightness(.55) blur(2px)}to{transform:none;filter:none}}
@keyframes mcamR{from{transform:translateX(-9%) scale(1.3);filter:brightness(.55) blur(2px)}to{transform:none;filter:none}}
[data-view].marrive > .sec,[data-view].marrive > .band{animation:mrise .45s .12s cubic-bezier(.2,.75,.25,1) both}
@keyframes mrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the small train on the bottom edge of the place photo */
.mptrain{position:absolute;left:0;bottom:6px;z-index:0;height:var(--th,58px);width:max-content;pointer-events:none;transform:translateX(-100%)}
.mptrain img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.mptrain.rtl img{transform:scaleX(-1)}
.mptrain.go.ltr{animation:mpL 1.35s cubic-bezier(.35,.1,.55,.9) both}
.mptrain.go.rtl{animation:mpR 1.35s cubic-bezier(.35,.1,.55,.9) both}
@keyframes mpL{from{transform:translateX(-100%)}to{transform:translateX(100vw)}}
@keyframes mpR{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.mprail{position:absolute;left:0;right:0;bottom:4px;height:4px;z-index:0;background:linear-gradient(#5f6864 0 1px,#141a17 1px);opacity:.85;pointer-events:none}
.phead.mloc .phead-in,.phead.mloc .msignpost,.phead.mloc .mcr{position:relative;z-index:1}
@media (min-width:1100px){.phead.mloc .msignpost{position:absolute}}
@media (max-width:980px){.mptrain{--th:38px}}
@media (prefers-reduced-motion:reduce){.phead.mloc.marrive::before,[data-view].marrive > .sec,.mptrain.go{animation:none!important}.mptrain{display:none}.msignpost.in{animation:none}}
/* ---------- the events ticker is a train (v2, Rick 09.11): one whole painted car per event,
the date glows in the number box, the event name sits on the black destination sign in the windows ---------- */
.ticker{--ch:108px;background:linear-gradient(#06100b,#0a1712 70%,#050c08)!important;background-image:linear-gradient(#06100b,#0a1712 70%,#050c08)!important;transform:none!important;box-shadow:inset 0 1px 0 rgba(216,214,204,.06),inset 0 -1px 0 rgba(0,0,0,.6)!important;margin:0!important;padding:12px 0 9px!important;border:0!important;position:relative;overflow:hidden}
.ticker::before{content:""!important;position:absolute;left:0;right:0;top:auto!important;bottom:6px!important;height:4px!important;background:linear-gradient(#5f6864 0 1px,#1a201d 1px)!important;background-size:auto!important;animation:none!important;z-index:0}
.ticker::after{content:""!important;position:absolute;left:0;right:0;top:auto!important;bottom:0!important;height:6px!important;background:repeating-linear-gradient(90deg,#121b17 0 14px,transparent 14px 38px)!important;background-size:auto!important;animation:none!important;z-index:0}
.ticker-track{padding-block:0!important;position:relative;z-index:1;align-items:flex-end}
.ticker span.tk{box-sizing:border-box;position:relative;isolation:isolate;display:block;flex:none;height:var(--ch);aspect-ratio:796/300;margin-right:10px;
padding:calc(var(--ch)*.135) calc(var(--ch)*.44) 0 calc(var(--ch)*.44)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
background:url("img/metro/car-a.webp?v=4") 0 0/100% 100% no-repeat!important;
color:#f3efe2!important;font:400 10.5px/1.28 "Holtwood One SC",Georgia,serif!important;letter-spacing:.05em!important;text-transform:uppercase;white-space:normal;text-align:center;
overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:var(--ch)}
.ticker span.tk:nth-child(even){aspect-ratio:929/300;background:url("img/metro/car-b.webp?v=4") 0 0/100% 100% no-repeat!important}
/* the black destination sign behind the text */
.ticker span.tk::before{content:"";position:absolute;z-index:-1;left:calc(var(--ch)*.36);right:calc(var(--ch)*.36);top:calc(var(--ch)*.1);height:calc(var(--ch)*.33);background:linear-gradient(#0b0e0c,#040605);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(244,181,63,.25),0 0 12px rgba(0,0,0,.6)}
.ticker span.tk::after{content:none!important;display:none!important}
/* the date glows in the number box */
.ticker span.tk b{position:absolute;left:calc(var(--ch)*.05);top:calc(var(--ch)*.05);margin:0!important;background:#060807!important;color:#f4b53f!important;font:400 10px/1 "Holtwood One SC",Georgia,serif!important;letter-spacing:.06em!important;padding:4px 5px!important;border-radius:2px!important;box-shadow:0 0 8px rgba(244,181,63,.35),inset 0 0 0 1px rgba(244,181,63,.3)!important;text-shadow:0 0 6px rgba(244,181,63,.6)}
.ticker span.tk i{font-size:8px!important;padding:2px 4px!important;margin:0 2px;vertical-align:1px}
@media (max-width:980px){
.ticker{--ch:84px;padding:10px 0 8px!important}
.ticker span.tk{font-size:8.5px!important;line-height:1.25!important}
.ticker span.tk b{font-size:8.5px!important;padding:3px 4px!important}
.ticker span.tk i{display:none!important}
}
.ticker span.tk i{display:none!important}
.ticker span.tk{-webkit-line-clamp:2}
.ticker span.tk::before{height:calc(var(--ch)*.31)}
/* ---------- home: old-school hero (v6) ---------- */
.hero-img{background-image:url("img/metro/hero-1984.jpg?v=6")!important;background-position:48% 42%!important;background-size:cover!important}
@media (max-width:700px){.hero-img{background-position:44% 46%!important}}
.mhcr{position:absolute;right:12px;bottom:8px;z-index:2;max-width:60%;text-align:right;font:10px/1.4 var(--f-m);color:rgba(216,214,204,.6)}
.mhcr a{color:inherit}
@media (max-width:700px){.mhcr{left:12px;right:12px;max-width:none;text-align:left;bottom:6px}}
/* ---------- the spinning vinyl in the header: lighter ---------- */
.mast .vinyl-logo .v-disc{filter:brightness(2.4) contrast(1.05)}
.mast .vinyl-logo .v-disc::before{background:linear-gradient(#0c0c0d,#0c0c0d) right center/50% 9% no-repeat,var(--gw-rust-lt)!important;box-shadow:0 0 0 1.5px #0c0c0d!important}
.mast .vinyl-logo::after{box-shadow:0 0 0 1.5px rgba(216,214,204,.55),0 0 10px rgba(224,134,74,.35)!important}
/* ---------- the events wall instead of the ticker ---------- */
.ticker{display:none!important}
.mwall{position:relative;height:170px;overflow:hidden;border-block:1px solid rgba(216,214,204,.06);
background-color:var(--gw-wall);background-image:radial-gradient(120% 120% at 50% 40%,transparent 45%,rgba(3,9,6,.65) 100%),var(--gw-noise),var(--gw-mottle),var(--gw-blocks);
background-size:100% 100%,260px 260px,900px 900px,200px 184px}
.mwall-sign{position:absolute;left:max(14px,env(safe-area-inset-left,0px));top:10px;z-index:3;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:5px;background:linear-gradient(#1c3427,#10241a);border:2px solid #0a1711;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.mwall-sign .mbul{width:18px;height:18px;font-size:9px}
.mwall-sign b{font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-bone)}
.mwall-sign span:last-child{font:600 9px/1 var(--f-m);letter-spacing:.14em;color:#a9b8ae;text-transform:uppercase}
.mwall-all{position:absolute;right:max(14px,env(safe-area-inset-right,0px));top:14px;z-index:3;font:400 10px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-rust-lt);text-decoration:none}
.mwall-in{position:absolute;inset:40px 0 6px}
.mtag{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r));text-decoration:none;display:grid;gap:2px;justify-items:start;
clip-path:inset(-20% 100% -40% -10%);animation:mspray 1s cubic-bezier(.3,.6,.4,1) forwards}
.mtag .mt-n{font:400 clamp(20px,2.4vw,32px)/1.02 "Sedgwick Ave Display","Permanent Marker",sans-serif;color:#fff;-webkit-text-stroke:5px #050c08;paint-order:stroke fill;text-shadow:3px 4px 0 #050c08,0 0 18px rgba(255,255,255,.12);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 4px 6px 2px;text-transform:none}
.mtag.world .mt-n{color:var(--gw-gold)}
.mtag .mt-d{font:400 10.5px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:var(--gw-rust-lt);text-shadow:0 2px 0 #050c08;text-transform:uppercase}
.mtag .mt-d i{font:600 9px/1 var(--f-m);font-style:normal;letter-spacing:.1em;color:#160a04;background:var(--gw-rust);padding:2px 4px;border-radius:2px;margin-left:4px;text-shadow:none}
.mtag:hover .mt-n,.mtag:focus-visible .mt-n{color:var(--gw-rust-lt)}
.mtag:focus-visible{outline:2px solid var(--gw-gold);outline-offset:4px}
/* the spray: a soft cloud runs with the can, then the paint is there */
.mtag::before{content:"";position:absolute;left:-6%;top:10%;width:30%;height:90%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.35),transparent);filter:blur(6px);opacity:0;animation:mmist 1s ease-out forwards;pointer-events:none}
.mtag.buff{animation:mbuff .7s ease-in forwards}
@keyframes mspray{to{clip-path:inset(-20% -10% -40% -10%)}}
@keyframes mmist{0%{opacity:.9;transform:translateX(0)}85%{opacity:.5;transform:translateX(320%)}100%{opacity:0;transform:translateX(340%)}}
@keyframes mbuff{to{opacity:0;filter:blur(3px);transform:rotate(var(--r)) translateY(6px)}}
@media (max-width:700px){
.mwall{height:180px;background-size:100% 100%,260px 260px,900px 900px,150px 138px}
.mtag .mt-n{font-size:23px;-webkit-line-clamp:1}
}
@media (prefers-reduced-motion:reduce){.mtag,.mtag::before{animation:none;clip-path:none}}
.phead.mloc::before,.mspot{image-rendering:pixelated}
@media (max-width:700px){
.mhcr{display:none}
.mwall-sign span:last-child{display:none}
.mwall-all{top:auto;bottom:10px}
.mtag .mt-n{display:block;white-space:nowrap;text-overflow:ellipsis;max-width:100%;padding-bottom:4px}
}
/* ---------- home hero v7 (Rick 09.11): the old-school break sits clear on the right; text stays on the left.
Phone: the photo is on top, full width, dancer centred; the text goes under it. ---------- */
.hero{background:var(--gw-wall)!important}
.hero-img{left:40%!important;right:0!important;filter:grayscale(.15) sepia(.25) contrast(1.15) brightness(.95)!important;background-position:44% 48%!important;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(90deg,transparent 0,#000 22%)}
.hero-tint{left:40%!important;opacity:.28!important}
.hero-shade{background:linear-gradient(95deg,rgba(7,18,13,.96) 0%,rgba(7,18,13,.9) 36%,rgba(7,18,13,.25) 58%,rgba(7,18,13,0) 80%)!important}
@media (max-width:760px){
.hero-img{left:0!important;bottom:auto!important;height:46vh!important;background-position:46% 50%!important;
-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.hero-tint{left:0!important;bottom:auto!important;height:46vh!important}
.hero-shade{background:linear-gradient(180deg,rgba(7,18,13,0) 0,rgba(7,18,13,.15) 30vh,rgba(7,18,13,.96) 46vh)!important}
.hero-in{padding-top:calc(46vh - 70px)!important}
}
/* ---------- the events wall v7: three old-school posters taped to the wall, moving in a light breeze ---------- */
.mtag{display:none!important}
.mwall{height:auto!important;padding:52px max(16px,env(safe-area-inset-left,0px)) 26px}
.mwall-in{position:relative!important;inset:auto!important;display:grid;grid-template-columns:repeat(3,minmax(0,250px));justify-content:center;gap:clamp(18px,4vw,56px);perspective:900px}
.mposter{grid-row:1;position:relative;display:grid;grid-template-rows:auto auto 1fr auto;text-decoration:none;color:#18140e;
background:#e9e1cb;background-image:linear-gradient(170deg,rgba(255,255,255,.35),transparent 40%),var(--gw-noise);padding:10px 10px 12px;border-radius:2px;
box-shadow:0 2px 0 rgba(0,0,0,.25),0 18px 28px -10px rgba(0,0,0,.65);transform-origin:50% 0;transform:rotate(var(--r));
animation:mslap .55s cubic-bezier(.2,.8,.3,1.2) both,mbreeze 5.5s ease-in-out var(--d) infinite}
.mposter.p0{grid-column:1}.mposter.p1{grid-column:2}.mposter.p2{grid-column:3}
.mposter.off{animation:mrip .6s ease-in forwards;z-index:0}
.mposter:hover,.mposter:focus-visible{animation-play-state:paused;transform:rotate(0) translateY(-4px) scale(1.02);box-shadow:0 2px 0 rgba(0,0,0,.25),0 26px 34px -10px rgba(0,0,0,.7)}
.mposter:focus-visible{outline:3px solid var(--gw-gold);outline-offset:4px}
/* a soft light that passes over the paper, as if the wind lifts it */
.mposter::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);background-size:250% 100%;mix-blend-mode:soft-light;animation:mglint 5.5s ease-in-out var(--d) infinite}
.mp-tape{position:absolute;top:-9px;width:56px;height:18px;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.06)),rgba(206,192,150,.88);box-shadow:0 1px 3px rgba(0,0,0,.35);border-left:2px dashed rgba(0,0,0,.1);border-right:2px dashed rgba(0,0,0,.1)}
.mp-tape.l{left:-12px;transform:rotate(-24deg)}.mp-tape.r{right:-12px;transform:rotate(22deg)}
.mp-img{display:block;aspect-ratio:4/3;background:#2a2620 center/cover no-repeat;filter:grayscale(1) contrast(1.35) brightness(.95);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.mp-date{display:flex;align-items:baseline;gap:6px;margin:8px 0 2px}
.mp-date b{font:400 34px/.9 "Holtwood One SC",Georgia,serif;color:#18140e}
.mp-date i{font:400 13px/1 "Holtwood One SC",Georgia,serif;font-style:normal;letter-spacing:.1em;color:var(--gw-clay);text-transform:uppercase}
.mp-w{justify-self:start;font:700 9px/1 var(--f-m);letter-spacing:.14em;background:#18140e;color:var(--gw-gold);padding:3px 5px;margin-bottom:4px}
.mp-name{font:800 15px/1.12 var(--f-d);text-transform:uppercase;color:#18140e;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mp-place{margin-top:6px;padding-top:6px;border-top:2px solid #18140e;font:600 10.5px/1.35 var(--f-m);color:#3a3226}
.mp-place em{font-style:normal;background:var(--gw-rust);color:#160a04;padding:1px 4px}
.mposter.world{background-color:#efd98f}
@keyframes mbreeze{0%,100%{transform:rotate(var(--r)) rotateX(0) skewY(0)}25%{transform:rotate(calc(var(--r) + .8deg)) rotateX(5deg) skewY(-.6deg)}55%{transform:rotate(calc(var(--r) - .5deg)) rotateX(-2deg) skewY(.4deg)}80%{transform:rotate(calc(var(--r) + .3deg)) rotateX(3deg) skewY(-.2deg)}}
@keyframes mglint{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@keyframes mslap{from{opacity:0;transform:rotate(calc(var(--r) - 6deg)) translateY(-18px) scale(1.06)}to{opacity:1;transform:rotate(var(--r))}}
@keyframes mrip{to{opacity:0;transform:rotate(calc(var(--r) + 14deg)) translate(40px,60px);filter:blur(1px)}}
@media (max-width:700px){
.mwall{padding:48px 0 22px}
.mwall-in{grid-template-columns:repeat(3,62%);justify-content:start;overflow-x:auto;scroll-snap-type:x mandatory;padding:16px 16px 18px;gap:18px;scrollbar-width:none}
.mposter{scroll-snap-align:center}
.mp-date b{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.mposter,.mposter::after{animation:none!important}}
/* ================= v8: the game's wall and scene (Rick 09.11) ================= */
:root{--wtex:url("img/metro/wall-tex.jpg?v=8")}
/* the whole page: a real cinder-block wall in the game's green, the Bronx map faintly over it */
body{background-image:radial-gradient(130% 90% at 50% 20%,transparent 40%,rgba(3,9,6,.6) 100%),var(--bronx),var(--wtex)!important;
background-size:100% 100vh,1800px auto,620px 620px!important;background-position:0 0,center top,0 0!important;background-attachment:fixed,fixed,scroll!important}
@media (max-width:760px){body{background-size:100% 100vh,1100px auto,420px 420px!important;background-attachment:fixed,scroll,scroll!important}}
/* hero: the 1984 break in the game's 4 teal tones on the right; the city layer is painted in under the text */
.hero{background:var(--wtex) 0 0/620px 620px,#13251d!important}
.hero-img{background-image:url("img/metro/hero-1984-game.png?v=8")!important;filter:none!important;image-rendering:pixelated}
.hero-tint{display:none!important}
.hero-shade{background:linear-gradient(95deg,rgba(7,18,13,.9) 0%,rgba(7,18,13,.72) 34%,rgba(7,18,13,.1) 58%,transparent 80%)!important}
.mhsil{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;pointer-events:none;background:url("img/metro/gsil-home.webp?v=9") 0 100%/auto 100% repeat-x;image-rendering:pixelated;
-webkit-mask-image:linear-gradient(90deg,#000 0 38%,transparent 62%);mask-image:linear-gradient(90deg,#000 0 38%,transparent 62%);opacity:.95}
@media (max-width:760px){
.mhsil{height:30%;-webkit-mask-image:none;mask-image:none;opacity:.7}
.hero{background:#0b1913!important}
}
/* the events wall as a game scene: spotlight on the wall, the map showing through in patches,
the El in pixels at the bottom, a metal sign on top, posters in the middle, the game's control bar below */
.mwall{position:relative;overflow:hidden;isolation:isolate;padding:92px max(16px,env(safe-area-inset-left,0px)) 74px!important;border-block:3px solid #050c08!important;
background:radial-gradient(60% 70% at 50% 30%,rgba(190,230,205,.16),transparent 70%),radial-gradient(140% 110% at 50% 40%,transparent 45%,rgba(3,9,6,.8) 100%),var(--wtex) 0 0/560px 560px,#13251d!important}
.mwall-map{position:absolute;inset:0;z-index:-2;background:var(--bronx) 50% 40%/1500px auto no-repeat;opacity:.7;
-webkit-mask-image:radial-gradient(22% 30% at 18% 32%,#000,transparent 70%),radial-gradient(18% 26% at 78% 24%,#000,transparent 70%),radial-gradient(26% 22% at 56% 72%,#000,transparent 70%);
mask-image:radial-gradient(22% 30% at 18% 32%,#000,transparent 70%),radial-gradient(18% 26% at 78% 24%,#000,transparent 70%),radial-gradient(26% 22% at 56% 72%,#000,transparent 70%)}
.mwall-city{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-1;background:url("img/metro/gsil-el.webp?v=9") 50% 100%/auto 100% repeat-x;image-rendering:pixelated;
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
.mwall-sign{position:absolute!important;left:50%!important;top:18px!important;transform:translateX(-50%);display:grid!important;justify-items:center;gap:6px!important;padding:10px 28px 11px!important;
background:linear-gradient(#2d4a3a,#1b3126)!important;border:5px solid #0f1f17!important;border-radius:8px!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06),0 6px 0 rgba(0,0,0,.45)!important}
.mwall-sign .ms-row{display:flex;align-items:center;gap:10px}
.mwall-sign .mbul{width:22px;height:22px;font-size:11px}
.mwall-sign b{font:400 clamp(16px,2.2vw,24px)/1 "Holtwood One SC",Georgia,serif!important;letter-spacing:.14em!important;color:var(--gw-bone)!important;-webkit-text-stroke:1.4px var(--gw-ink);paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.mwall-sign .ms-sub{font:600 10px/1 var(--f-m);letter-spacing:.22em;color:#a9b8ae;text-transform:uppercase}
.mwall-all{display:none!important}
.mwall-in{z-index:1}
.mwall-bar{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,env(safe-area-inset-left,0px));
background:linear-gradient(rgba(8,21,15,.55),rgba(8,21,15,.88));border-top:1px solid rgba(216,214,204,.08);z-index:2}
.mwb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:var(--gw-bone);text-shadow:0 2px 0 #050c08;text-decoration:none;padding:10px 6px}
.mwb i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--gw-bone);font:700 10px/1 var(--f-m);text-shadow:none}
.mwb.all{color:var(--gw-rust-lt)}
.mwb:hover,.mwb:focus-visible{color:var(--gw-rust-lt);outline:none}
.mwb:focus-visible{box-shadow:0 0 0 2px var(--gw-gold);border-radius:4px}
@media (max-width:700px){
.mwall{padding:84px 0 64px!important;background-size:auto,auto,360px 360px,auto!important}
.mwall-sign{padding:8px 16px 9px!important}
.mwall-sign .ms-sub{display:block!important;font-size:8.5px}
.mwall-bar{height:48px}
.mwb{font-size:10.5px;gap:6px}
.mwall-map{background-size:1000px auto}
}
/* ================= v9 (Rick 09.11): photo + wall + painted pixel city, less processing on the photos; lighter ================= */
:root{--wtex:url("img/metro/wall-tex-s.jpg?v=10")}
/* lighter: no fixed backgrounds (they repaint on every scroll), smaller wall tile */
body{background-attachment:scroll,scroll,scroll!important}
.mposter::after{mix-blend-mode:normal!important;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%)!important;background-size:250% 100%!important}
/* hero: the real 1984 photo, softly toned; the wall and the pixel city around it */
.hero-img{background-image:url("img/metro/hero-1984-soft.webp?v=62")!important;image-rendering:auto!important}
/* section heads, same composition as the hero */
.phead.mloc{background:var(--wtex) 0 0/520px 520px,#13251d!important;image-rendering:auto}
.phead.mloc::before{left:36%!important;image-rendering:auto!important;background-position:center 40%!important;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.phead.mloc::after{background:linear-gradient(90deg,rgba(7,18,13,.55),rgba(7,18,13,.2) 45%,transparent 70%),linear-gradient(0deg,rgba(7,18,13,.7),transparent 40%)!important}
.mphsil{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:-1;pointer-events:none;background:0 100%/auto 100% repeat-x;image-rendering:pixelated;
-webkit-mask-image:linear-gradient(90deg,#000 0 34%,transparent 58%);mask-image:linear-gradient(90deg,#000 0 34%,transparent 58%)}
.phead.mloc .phead-in,.phead.mloc .msignpost,.phead.mloc .mcr{z-index:2}
@media (max-width:760px){
.phead.mloc::before{left:0!important;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 95%);mask-image:linear-gradient(180deg,#000 40%,transparent 95%);opacity:.55}
.mphsil{height:36%;-webkit-mask-image:none;mask-image:none;opacity:.7}
}
/* ================= v10 (Rick 09.11) ================= */
/* the head photo appears out of light (no zoom, no slide) */
body.mgo-ltr .phead.mloc.marrive::before,body.mgo-rtl .phead.mloc.marrive::before{animation:mlight 1.1s cubic-bezier(.25,.7,.3,1) both!important}
@keyframes mlight{0%{opacity:0;filter:brightness(2.6) saturate(0) contrast(.55)}35%{opacity:1;filter:brightness(1.8) saturate(.3) contrast(.7)}100%{opacity:1;filter:none}}
.phead.mloc.marrive .mphsil{animation:mrisep .9s .2s cubic-bezier(.2,.75,.25,1) both}
@keyframes mrisep{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* home: hide the repeats */
[data-view="home"] .mhide{display:none!important}
.hero-cta .mcta{order:-1}
.btn.mcta small{font:600 9px/1 var(--f-m);letter-spacing:.14em;margin-left:8px;opacity:.75}
.hero-cta .mplay2{background:transparent!important;color:var(--gw-bone)!important;box-shadow:inset 0 0 0 2px var(--gw-bone)!important}
.hero-cta a.btn[href="#events"]{display:none!important}
/* Your Spot teaser: the game's computer screen (terracotta), on the wall */
.mspotad{padding:44px max(16px,env(safe-area-inset-left,0px));background:radial-gradient(70% 80% at 50% 40%,rgba(190,230,205,.12),transparent 70%),var(--wtex) 0 0/520px 520px,#13251d;border-block:3px solid #050c08}
.msa-in{max-width:760px;margin:0 auto;border-radius:12px;overflow:hidden;background:radial-gradient(90% 80% at 50% 40%,#b6572b,#8e3825 60%,#5a221a);border:4px solid #2a0d08;box-shadow:0 20px 40px -18px #000;padding:0 0 22px;display:grid}
.msa-head{position:relative;display:grid;justify-items:center;gap:4px;padding:18px 16px 16px;background:linear-gradient(#a6452a,#6a2619);border-bottom:4px solid #2a0d08}
.msa-tag{position:absolute;left:16px;top:12px;font:400 26px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:#fff;-webkit-text-stroke:4px #000;paint-order:stroke fill;transform:rotate(-4deg)}
.msa-head b{font:400 clamp(20px,3vw,30px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:var(--gw-bone);-webkit-text-stroke:1.4px #2a0d08;paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.msa-sub{font:600 10px/1 var(--f-m);letter-spacing:.2em;color:#f0d4b8;text-transform:uppercase}
.msa-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:16px 18px 6px}
.msa-row{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;font:400 14px/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:var(--gw-bone);text-shadow:0 2px 0 #2a0d08}
.msa-row small{display:block;margin-top:4px;font:500 12px/1.3 var(--f-b);letter-spacing:0;color:#f3dccb;text-shadow:none}
.msa-row .n{text-align:center;color:#f0d4b8}
.msa-row.on{background:linear-gradient(#c96a35,#a54a22);box-shadow:0 0 0 3px #f0d4a8}
.msa-go{justify-self:center;margin-top:14px}
@media (max-width:640px){.msa-rows{grid-template-columns:1fr}.msa-tag{font-size:20px;left:10px}.msa-head{padding-top:42px}}
/* Did you know: a place photo on the wall with a station sign */
.mdyk{position:relative;overflow:hidden;isolation:isolate;padding:46px max(16px,env(safe-area-inset-left,0px));background:var(--wtex) 0 0/520px 520px,#13251d;border-block:3px solid #050c08}
.mdyk::before{content:"";position:absolute;inset:0;left:40%;z-index:-1;background:var(--dimg) center/cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.mdyk-in{max-width:520px;padding:16px 18px;border-radius:6px;background:linear-gradient(#1c3427,#10241a);border:3px solid #0a1711;box-shadow:0 4px 0 rgba(0,0,0,.45),0 18px 30px -12px #000;display:grid;gap:6px}
.mdyk-in b{font:400 20px/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--gw-rust-lt);text-transform:uppercase}
.mdyk-in i{font:600 11px/1 var(--f-m);font-style:normal;color:#8fa196}
.mdyk-in p{margin:4px 0 0;font:500 15px/1.5 var(--f-b);color:#d8dfd9}
@media (max-width:640px){.mdyk::before{left:0;opacity:.35;-webkit-mask-image:none;mask-image:none}}
/* the Spotify player, always at the bottom */
body.mdeck-on{--deck-h:96px}
body.mdeck-on .deck{display:none!important}
.mdeck{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:59;height:96px;display:flex;align-items:center;gap:12px;padding:8px max(12px,env(safe-area-inset-left,0px));
background:linear-gradient(rgba(10,26,19,.96),#06110c);border-top:1px solid rgba(216,214,204,.1);box-shadow:0 -10px 24px -14px #000}
.mdeck-tag{flex:none;display:grid;justify-items:center;gap:4px}
.mdeck-tag b{font:400 9px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:var(--gw-rust-lt)}
.mdeck-sp{flex:1;min-width:0;max-width:820px;margin:0 auto;height:80px;border-radius:12px;overflow:hidden;background:#0b1712}
.mdeck-sp iframe{display:block;border:0;width:100%!important;height:80px!important}
@media (max-width:980px){.mdeck{height:92px}.mdeck-tag{display:none}}
/* ================= v11 (Rick 09.11) ================= */
/* one painted wall for the whole page: the map in patches from the first screen down, the pixel city painted along */
body{background-image:radial-gradient(130% 90% at 50% 20%,transparent 40%,rgba(3,9,6,.55) 100%),var(--wtex)!important;background-size:100% 100vh,520px 520px!important;background-position:0 0,0 0!important;background-attachment:scroll,scroll!important}
#app{position:relative;isolation:isolate}
.mpagewall{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mpw-map{position:absolute;inset:0;background:var(--bronx) center top/1500px auto repeat;opacity:.95;
-webkit-mask:url("img/metro/map-blobs.png?v=11") 0 0/1100px 1100px repeat;mask:url("img/metro/map-blobs.png?v=11") 0 0/1100px 1100px repeat}
.mpw-city{position:absolute;inset:0;background:url("img/metro/city-band.webp?v=11") 0 520px/1600px 4200px repeat;image-rendering:pixelated;opacity:.92}
@media (max-width:760px){.mpw-map{background-size:1000px auto;-webkit-mask-size:760px 760px;mask-size:760px 760px}.mpw-city{background-size:1000px 2625px;background-position:0 420px}}
.hero{background:transparent!important}
.mwall,.mspotad,.mdyk{background:transparent!important;border-block:0!important}
.mwall{background:radial-gradient(55% 70% at 55% 35%,rgba(190,230,205,.12),transparent 70%)!important}
.mvh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ON THE WALL: a New York street sign on a pole, two blades crossing */
.mwall{padding-top:150px!important}
.mpole{position:absolute;left:clamp(14px,6vw,90px);top:0;bottom:52px;width:12px;z-index:2;pointer-events:none;
background:linear-gradient(90deg,#2b3330,#8c9692 35%,#56605b 60%,#1d2421);box-shadow:4px 0 8px rgba(0,0,0,.45)}
.mpole-cap{position:absolute;left:-3px;top:-6px;width:18px;height:10px;border-radius:4px 4px 2px 2px;background:#6f7975}
.mblade{position:absolute;display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:5px;white-space:nowrap;
background:linear-gradient(#1d7a4c,#13603b);border:2px solid #f2f2ea;box-shadow:inset 0 0 0 2px #13603b,0 6px 10px rgba(0,0,0,.45);color:#f6f6ee}
.mblade b{font:400 18px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em}
.mblade i{font:700 11px/1 var(--f-m);font-style:normal;opacity:.9}
.mblade.a{left:-6px;top:30px}
.mblade.b{left:-6px;top:78px;height:34px;transform:perspective(500px) rotateY(-38deg);transform-origin:0 50%;filter:brightness(.82)}
.mblade.b b{font-size:15px}
.mblade::before{content:"";position:absolute;left:-6px;top:50%;width:10px;height:22px;transform:translateY(-50%);background:#59625e;border-radius:2px}
@media (max-width:700px){
.mwall{padding-top:132px!important}
.mpole{left:14px}
.mblade{height:34px;padding:0 10px}.mblade b{font-size:14px}.mblade.b b{font-size:12px}
.mblade.a{top:24px}.mblade.b{top:66px;height:30px}
}
/* YOUR SPOT: the game's computer screen */
.mspotad{padding:40px max(16px,env(safe-area-inset-left,0px))!important}
.mpc{max-width:760px;margin:0 auto;position:relative;border-radius:14px;overflow:hidden;padding:0 0 18px;
background:radial-gradient(80% 70% at 50% 45%,#c3622f,#9a4126 55%,#6d2a1c);box-shadow:0 0 0 4px #1c0905,0 24px 44px -18px #000}
.mpc-head{position:relative;height:96px;display:flex;align-items:center;gap:18px;padding:0 22px;overflow:hidden;
background:linear-gradient(#b14d2c,#7a2c1d);border-bottom:3px solid #1c0905}
.mpc-sky{position:absolute;left:0;right:0;bottom:0;height:100%;background:#3a1009;opacity:.9;
-webkit-mask:url("img/metro/gsil-home.webp?v=9") 50% 100%/auto 100% repeat-x;mask:url("img/metro/gsil-home.webp?v=9") 50% 100%/auto 100% repeat-x}
.mpc-tag{position:relative;font:400 34px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:#fff;-webkit-text-stroke:5px #000;paint-order:stroke fill;text-shadow:3px 4px 0 #000;transform:rotate(-4deg)}
.mpc-title{position:relative;font:400 clamp(16px,2.6vw,26px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#f4ede4;-webkit-text-stroke:1.2px #1c0905;paint-order:stroke fill;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.mpc-tabs{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#140603;border-bottom:3px solid #1c0905}
.mpc-arr{all:unset;cursor:pointer;color:#c3622f;font-size:22px;padding:2px 6px;text-shadow:0 2px 0 #000}
.mpc-arr:hover,.mpc-arr:focus-visible{color:#f0d4b8;outline:none}
.mpc-tabrow{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mpc-tab{all:unset;cursor:pointer;display:grid;place-items:center;height:42px;border-radius:4px;color:#8f7a70;border:1px solid #2f120b;background:#1d0a06}
.mpc-tab svg{width:26px;height:26px}
.mpc-tab[aria-selected="true"]{color:#fff;background:#3a160e;box-shadow:inset 0 0 0 2px #e7c6a4}
.mpc-tab:focus-visible{outline:2px solid var(--gw-gold)}
.mpc-body{position:relative;padding:14px 46px 4px 18px;min-height:256px}
.mpc-rows{display:grid;gap:6px}
.mpc-row{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:6px 10px;border-radius:10px}
.mpc-row.on{background:linear-gradient(#d67a3e,#a94b22);box-shadow:0 0 0 3px #f2d6a4,0 4px 0 rgba(0,0,0,.3)}
.mpc-th{width:48px;height:48px;border-radius:6px;background:#3b1a10 center/cover;box-shadow:inset 0 0 0 2px rgba(0,0,0,.45),0 2px 0 rgba(0,0,0,.35);display:grid;place-items:center}
.mpc-th.t{font:400 14px/1 "Holtwood One SC",Georgia,serif;color:#f0d4b8}
.mpc-t b{display:block;font:400 15px/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#f6efe6;text-shadow:0 2px 0 #3a1009;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpc-t small{display:block;margin-top:4px;font:500 12px/1.2 var(--f-b);color:#f3dccb}
.mpc-t{min-width:0}
.mpc-env{font-size:20px;color:#f0d4b8}
.mpc-scroll{position:absolute;right:12px;top:14px;bottom:8px;width:16px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;color:#c3622f;font-size:13px}
.mpc-scroll::before{content:"";position:absolute;top:22px;bottom:22px;width:6px;border-radius:3px;background:#5a2216}
.mpc-scroll i{font-style:normal;position:relative}
.mpc-hint{margin:10px 0 0;text-align:center;font:400 11px/1.4 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:#f4ede4;text-shadow:0 2px 0 #3a1009}
.mpc-hint b{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid #f4ede4;font:700 9px/1 var(--f-m)}
.mpc-go{display:flex;width:max-content;margin:12px auto 0}
.msa-in{display:none!important}
@media (max-width:640px){
.mpc-head{height:76px;padding:0 14px;gap:10px}.mpc-tag{font-size:24px}
.mpc-body{padding:12px 34px 4px 10px;min-height:236px}
.mpc-row{grid-template-columns:42px 1fr auto;gap:10px}.mpc-th{width:40px;height:40px}
.mpc-t b{font-size:13px}
.mpc-tab{height:38px}.mpc-tab svg{width:22px;height:22px}
}
/* ================= v12: RADIO — the rooftop room ================= */
.mradio .phead{min-height:220px}
.mr-scene{position:relative;overflow:hidden;isolation:isolate;padding:70px max(16px,env(safe-area-inset-left,0px)) 74px;display:grid;justify-items:center;gap:16px;border-block:3px solid #050c08;
background:linear-gradient(#071a12 0,#0d2a1d 55%,#132b20 100%)}
.mr-sky{position:absolute;inset:0;z-index:-3;background:
radial-gradient(1.5px 1.5px at 12% 18%,#d8e8dd 99%,transparent),radial-gradient(1.5px 1.5px at 28% 8%,#d8e8dd 99%,transparent),radial-gradient(1px 1px at 46% 22%,#d8e8dd 99%,transparent),
radial-gradient(1.5px 1.5px at 63% 12%,#d8e8dd 99%,transparent),radial-gradient(1px 1px at 79% 26%,#d8e8dd 99%,transparent),radial-gradient(1.5px 1.5px at 91% 9%,#d8e8dd 99%,transparent),
radial-gradient(40% 30% at 82% 14%,rgba(233,201,104,.18),transparent 70%);animation:mtwinkle 6s ease-in-out infinite alternate}
@keyframes mtwinkle{to{opacity:.6}}
.mr-city{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:-2;background:url("img/metro/gsil-home.webp?v=9") 50% 100%/auto 100% repeat-x;image-rendering:pixelated;opacity:.95}
.mr-scene::after{content:"";position:absolute;left:0;right:0;bottom:52px;height:26px;z-index:-1;background:linear-gradient(#2b3330,#141a17);box-shadow:0 -2px 0 #4a5450}
/* neon */
.mr-neon{position:absolute;right:clamp(16px,8vw,120px);top:24px;display:flex;gap:6px;padding:8px 14px;border-radius:8px;border:3px solid #2a1205;background:rgba(10,6,4,.6);transform:rotate(3deg)}
.mr-neon span{font:400 22px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:#ffb27a;text-shadow:0 0 6px #e0864a,0 0 16px #c4621f,0 0 30px rgba(196,98,31,.7);animation:mflick 4s steps(1) infinite}
.mr-neon span+span{animation-delay:1.3s}
@keyframes mflick{0%,100%{opacity:1}42%{opacity:1}43%{opacity:.35}44%{opacity:1}71%{opacity:.5}72%{opacity:1}}
/* the TV on crates */
.mr-set{position:relative;display:grid;justify-items:center;width:min(720px,100%)}
.mr-tv{position:relative;display:grid;grid-template-columns:1fr 92px;gap:14px;width:100%;padding:18px;border-radius:26px;
background:linear-gradient(160deg,#4a3b2c,#2b2119 55%,#1a140f);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),inset 0 -6px 0 rgba(0,0,0,.35),0 26px 40px -16px #000}
.mr-ant{position:absolute;left:44%;top:-62px;width:120px;height:66px;pointer-events:none}
.mr-ant::before,.mr-ant::after{content:"";position:absolute;bottom:0;width:4px;height:74px;background:linear-gradient(#cfd6d2,#6c7672);border-radius:2px;transform-origin:50% 100%}
.mr-ant::before{left:40%;transform:rotate(-32deg)}.mr-ant::after{left:56%;transform:rotate(28deg)}
.mr-screen{position:relative;aspect-ratio:16/10;border-radius:22px/18px;overflow:hidden;background:#071009;box-shadow:inset 0 0 0 6px #0c0a08,inset 0 0 40px rgba(0,0,0,.8),0 0 0 3px #3a2f24}
.mr-static{position:absolute;inset:0;background:var(--gw-noise),radial-gradient(70% 60% at 50% 45%,#3d6250,#0b1712);background-size:180px 180px,100% 100%;animation:mstatic .25s steps(4) infinite;opacity:.9}
.mr-static::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px)}
@keyframes mstatic{0%{background-position:0 0,0 0}25%{background-position:-40px 20px,0 0}50%{background-position:30px -30px,0 0}75%{background-position:-20px -10px,0 0}}
.mr-frame{position:absolute;inset:0}
.mr-frame iframe{width:100%;height:100%;border:0;display:block}
.mr-tune{all:unset;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:8px;padding:16px 26px;border-radius:12px;background:rgba(6,14,10,.72);
font:400 16px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:var(--gw-bone);box-shadow:inset 0 0 0 2px rgba(216,214,204,.35)}
.mr-tune b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--gw-rust);color:#160a04;font-size:22px}
.mr-tune:hover b,.mr-tune:focus-visible b{background:var(--gw-rust-lt)}
.mr-tune:focus-visible{outline:2px solid var(--gw-gold)}
.mradio.mr-on .mr-tune,.mradio.mr-on .mr-static{display:none}
.mradio.mr-switch .mr-screen{animation:mzap .42s ease}
@keyframes mzap{0%{filter:brightness(2.4) contrast(.5)}40%{filter:brightness(.4)}100%{filter:none}}
.mr-side{display:grid;align-content:start;justify-items:center;gap:12px;padding-top:6px}
.mr-ch{font:600 12px/1 var(--f-m);letter-spacing:.12em;color:#f4b53f;background:#0b0b0a;padding:6px 8px;border-radius:3px;box-shadow:0 0 10px rgba(244,181,63,.3);text-shadow:0 0 6px rgba(244,181,63,.6)}
.mr-knob{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#8c8076,#3a3029 60%,#1c1612);box-shadow:0 3px 0 rgba(0,0,0,.5)}
.mr-knob.s{width:34px;height:34px}
.mr-grill{width:64px;height:70px;border-radius:6px;background:repeating-linear-gradient(0deg,#1a140f 0 3px,#3b2f25 3px 6px)}
.mr-crates{display:flex;gap:6px;margin-top:-4px}
.mr-crates span{width:clamp(110px,22vw,170px);height:56px;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(0,0,0,.35) 14px 18px),linear-gradient(#c4621f,#8e3825);box-shadow:inset 0 0 0 3px #4a1c0d,0 10px 16px -6px #000}
/* now playing + FM dial */
.mr-np{display:grid;justify-items:center;gap:6px;text-align:center;max-width:680px}
.mr-np small{font:600 10px/1 var(--f-m);letter-spacing:.22em;color:#a9b8ae}
.mr-np b{font:400 clamp(14px,2vw,19px)/1.25 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;color:var(--gw-bone);text-shadow:0 2px 0 #050c08}
.mr-dial{position:relative;width:min(680px,100%);height:46px;border-radius:8px;background:linear-gradient(#e9dfc4,#cdbf9c);box-shadow:inset 0 0 0 3px #3a2f24,inset 0 6px 10px rgba(0,0,0,.25)}
.mr-scale{position:absolute;inset:6px 22px;background:repeating-linear-gradient(90deg,#3a2f24 0 1px,transparent 1px 12px) 0 0/100% 10px no-repeat}
.mr-scale span{position:absolute;top:14px;transform:translateX(-50%);font:700 11px/1 var(--f-m);color:#3a2f24}
.mr-needle{position:absolute;top:4px;bottom:4px;width:3px;margin-left:22px;background:#c8222c;box-shadow:0 0 6px rgba(200,34,44,.6);transition:left .45s cubic-bezier(.3,.7,.3,1)}
.mr-bar{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,env(safe-area-inset-left,0px));background:linear-gradient(rgba(8,21,15,.6),rgba(8,21,15,.92));border-top:1px solid rgba(216,214,204,.08)}
.mr-rand{color:var(--gw-rust-lt)!important}
.mr-credit{margin:0;padding:10px 16px 0;text-align:center;font:11px/1.5 var(--f-m);color:var(--muted)}
.mr-credit a{color:var(--muted)}
@media (max-width:640px){
.mr-scene{padding-top:64px}
.mr-tv{grid-template-columns:1fr;padding:12px;border-radius:20px}
.mr-side{grid-auto-flow:column;align-items:center;padding:0}
.mr-grill{width:90px;height:26px}.mr-knob{width:34px;height:34px}.mr-knob.s{width:26px;height:26px}
.mr-ant{top:-48px;width:90px}.mr-ant::before,.mr-ant::after{height:56px}
.mr-neon{top:14px;right:14px}.mr-neon span{font-size:16px}
.mr-scale span{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.mr-static,.mr-neon span,.mr-sky{animation:none}}
/* home: the door to the rooftop radio */
.mrtease{padding:30px max(16px,env(safe-area-inset-left,0px))}
.mrt-in{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:22px;align-items:center;max-width:760px;margin:0 auto;padding:16px;border-radius:12px;text-decoration:none;
background:linear-gradient(#0b1b14,#071510);box-shadow:inset 0 0 0 1px rgba(216,214,204,.1),0 18px 30px -16px #000}
.mrt-tv{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:8px solid #2b2119;box-shadow:0 0 0 2px #4a3b2c;display:grid;place-items:center}
.mrt-tv b{position:relative;font:400 18px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:#ffb27a;text-shadow:0 0 8px #e0864a,0 0 18px #c4621f}
.mrt-t{display:grid;gap:8px;justify-items:start;min-width:0}
.mrt-t small{font:600 10px/1 var(--f-m);letter-spacing:.2em;color:#a9b8ae}
.mrt-t b{font:400 clamp(14px,2vw,18px)/1.3 "Holtwood One SC",Georgia,serif;letter-spacing:.05em;color:var(--gw-bone)}
@media (max-width:560px){.mrt-in{grid-template-columns:1fr}}
/* ================= v13: the radio is an old-school Bronx boombox ================= */
.mbx{position:relative;width:min(860px,100%);display:block;margin-top:46px;padding:0 0 12px;border-radius:26px 26px 18px 18px;
background:linear-gradient(180deg,#d9dcd8 0,#9da3a0 7%,#2a2e2c 9%,#1b1e1d 60%,#121514 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 30px 50px -18px #000,0 0 0 3px #0a0c0b}
.mbx-handle{position:absolute;left:18%;right:18%;top:-44px;height:48px;border:10px solid #b9bfbc;border-bottom:0;border-radius:24px 24px 0 0;box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 -2px 0 #5d6461}
.mbx-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:22px 22px 12px}
.mbx-brand{font:400 15px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#e7ece8;text-shadow:0 2px 0 #000}
.mbx-brand i{display:block;margin-top:4px;font:700 9px/1 var(--f-m);font-style:normal;letter-spacing:.3em;color:var(--gw-rust-lt)}
.mbx .mr-dial{width:auto;height:40px}
.mbx-body{display:grid;grid-template-columns:1fr minmax(0,1.25fr) 1fr;gap:16px;align-items:center;padding:6px 18px}
.mbx-spk{position:relative;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
background:radial-gradient(circle,#2a2e2c 0 58%,#c9cecb 59% 62%,#5f6663 63% 66%,#1a1d1c 67%);box-shadow:inset 0 0 0 6px #0d0f0e,0 6px 12px rgba(0,0,0,.5)}
.mbx-spk i{width:58%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#141716 0 3px,#222622 4px,#141716 6px),radial-gradient(circle,#3a403d,#0b0d0c);
box-shadow:inset 0 0 0 4px #0b0d0c,0 0 0 3px #7c8481;position:relative}
.mbx-spk i::after{content:"";position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle at 35% 35%,#cfd5d2,#555c59)}
.mbx-mid{display:grid;gap:10px}
.mbx .mr-screen{aspect-ratio:16/10;border-radius:10px;box-shadow:inset 0 0 0 4px #0c0a08,inset 0 0 30px rgba(0,0,0,.8),0 0 0 3px #6f7672}
.mbx-deck{height:54px;border-radius:6px;background:linear-gradient(#0d100f,#1c201e);box-shadow:inset 0 0 0 2px #5d6461;display:grid;place-items:center}
.mbx-tape{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:4px;background:linear-gradient(#e9e1cb,#cbbf9e);box-shadow:inset 0 0 0 2px #3a2f24}
.mbx-tape b{font:700 9px/1 var(--f-m);letter-spacing:.16em;color:#3a2f24}
.mbx-reel{width:22px;height:22px;border-radius:50%;background:repeating-conic-gradient(#2a2420 0 30deg,#8a7e70 30deg 60deg);box-shadow:inset 0 0 0 4px #2a2420}
.mbx-meter{display:flex;justify-content:center;gap:4px;height:14px;align-items:flex-end}
.mbx-meter i{width:12%;max-width:22px;height:30%;border-radius:2px;background:linear-gradient(0deg,var(--gw-hud),#d7dc3c 70%,var(--gw-rust));opacity:.35}
/* while it plays: reels turn, speakers breathe, meters jump */
.mradio.mr-on .mbx-reel{animation:mreel 1.2s linear infinite}
.mradio.mr-on .mbx-spk i{animation:mbeat .52s ease-in-out infinite}
.mradio.mr-on .mbx-meter i{opacity:1;animation:mmeter .6s ease-in-out infinite alternate}
.mradio.mr-on .mbx-meter i:nth-child(2n){animation-duration:.45s}.mradio.mr-on .mbx-meter i:nth-child(3n){animation-duration:.7s}
@keyframes mreel{to{transform:rotate(360deg)}}
@keyframes mbeat{0%,100%{transform:scale(1)}20%{transform:scale(1.06)}}
@keyframes mmeter{from{height:20%}to{height:100%}}
.mbx .mr-ch{justify-self:end}
.mbx ~ .mr-np{margin-top:6px}
.mr-crates{display:none}
@media (max-width:640px){
.mbx{margin-top:40px;border-radius:20px 20px 14px 14px}
.mbx-handle{top:-36px;height:40px;border-width:8px}
.mbx-top{grid-template-columns:1fr auto;padding:16px 12px 8px;gap:8px}
.mbx .mr-dial{grid-column:1/-1;grid-row:2}
.mbx-body{grid-template-columns:1fr 1fr;padding:6px 10px;gap:10px}
.mbx-mid{grid-column:1/-1;grid-row:1}
.mbx-spk{width:70%;justify-self:center}
.mbx-deck{height:44px}
}
@media (prefers-reduced-motion:reduce){.mbx-reel,.mbx-spk i,.mbx-meter i{animation:none!important}}
.mbx-body{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)}
.mbx .mr-tune{white-space:nowrap;padding:12px 18px;font-size:14px}
.mbx .mr-tune b{width:46px;height:46px}
@media (max-width:640px){.mbx-body{grid-template-columns:1fr 1fr}.mbx-spk{width:88%}.mbx .mr-tune{font-size:12px;padding:10px 14px}.mbx .mr-tune b{width:40px;height:40px}}
/* ================= v14: the radio = a real 80s boombox on the roof, no words ================= */
.mradio > .phead{display:none!important}
.mr-scene.mr-bare{min-height:calc(100svh - 230px);padding:80px max(16px,env(safe-area-inset-left,0px)) 86px;align-content:center}
.mbb{position:relative;width:min(1040px,100%);aspect-ratio:1299/689;filter:drop-shadow(0 30px 30px rgba(0,0,0,.65))}
.mbb-img{display:block;width:100%;height:100%;max-width:none}
.mbb::after{content:"";position:absolute;left:6%;right:6%;bottom:-6%;height:10%;z-index:-1;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
/* woofer cones breathe while a mix plays */
.mbb-cone{position:absolute;top:60%;width:33%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
background:radial-gradient(circle,rgba(190,230,205,.0) 30%,rgba(190,230,205,.14) 46%,transparent 62%);opacity:0}
.mbb-cone.l{left:21.2%}.mbb-cone.r{left:78.5%}
.mradio.mr-on .mbb-cone{opacity:1;animation:mcone .52s ease-out infinite}
@keyframes mcone{0%{transform:translate(-50%,-50%) scale(.92)}25%{transform:translate(-50%,-50%) scale(1.04)}100%{transform:translate(-50%,-50%) scale(.92)}}
.mradio.mr-on .mbb-img{animation:mthump .52s ease-out infinite}
@keyframes mthump{0%,100%{transform:none}20%{transform:translateY(-1px) scale(1.004)}}
/* the play button sits on the tape window */
.mbb-play{position:absolute!important;left:49.3%!important;top:33%!important;transform:translate(-50%,-50%)!important;padding:0!important;background:none!important;box-shadow:none!important}
.mbb-play b{width:clamp(48px,7vw,78px)!important;height:clamp(48px,7vw,78px)!important;font-size:clamp(18px,2.6vw,30px)!important;box-shadow:0 0 0 4px rgba(8,22,15,.7),0 0 26px rgba(224,134,74,.55);animation:mpulse 2.2s ease-in-out infinite}
@keyframes mpulse{0%,100%{box-shadow:0 0 0 4px rgba(8,22,15,.7),0 0 16px rgba(224,134,74,.35)}50%{box-shadow:0 0 0 4px rgba(8,22,15,.7),0 0 34px rgba(224,134,74,.75)}}
/* the mix plays in the middle column of the boombox */
.mbb-slot{position:absolute!important;left:39.4%;top:23.5%;width:19.9%;height:56%;aspect-ratio:auto!important;border-radius:6px!important;background:#071009;display:none;box-shadow:0 0 0 3px #0b1712,0 0 24px rgba(0,0,0,.6)!important}
.mradio.mr-on .mbb-slot{display:block}
@media (max-width:1100px){
.mbb-slot{position:relative!important;left:auto;top:auto;width:min(560px,100%);height:auto;aspect-ratio:16/9!important;margin:22px auto 0}
.mradio.mr-on .mbb{margin-bottom:0}
.mradio.mr-on .mbb .mbb-slot{display:none}
}
.mr-slot-out{display:none;width:min(560px,100%);aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#071009;box-shadow:0 0 0 3px #0b1712,0 18px 30px -12px #000}
.mr-slot-out iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:1100px){.mradio.mr-on .mr-slot-out{display:block}}
/* icon-only bar */
.mbb-bar{justify-content:center!important;gap:clamp(24px,8vw,90px)!important}
.mbb-bar .mwb i{width:44px!important;height:44px!important;font-size:18px!important;border-width:3px!important}
.mbb-bar .mr-rand i{color:var(--gw-rust-lt);border-color:var(--gw-rust-lt)!important}
.mr-scene.mr-bare .mr-neon{top:22px}
@media (max-width:640px){.mr-scene.mr-bare{min-height:auto;padding-top:76px}.mbb-play{top:33%!important}}
/* ================= v15 (Rick 09.11) ================= */
/* boombox smaller; the mix always plays under it */
.mbb{width:min(700px,100%)}
.mr-scene.mr-bare{min-height:0;padding-top:70px}
.mradio.mr-on .mr-slot-out{display:block!important}
.mbb-slot{display:none!important}
@media (max-width:640px){.mbb{width:88%}.mr-scene.mr-bare{padding-top:64px;padding-bottom:78px}}
/* every home block hangs under a street sign on a pole */
.mposted{position:relative;padding-top:128px!important;isolation:isolate}
.mposted > .mpole{bottom:auto;height:150px}
.mposted .sec-h{display:none!important}
.mposted .mpole{z-index:3}
.mblade.b{pointer-events:auto;text-decoration:none;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;cursor:pointer}
.mblade.b:hover,.mblade.b:focus-visible{filter:brightness(1.05);outline:none;box-shadow:inset 0 0 0 2px #13603b,0 0 0 3px var(--gw-gold)}
section.mposted,.sec.mposted{background:transparent!important;box-shadow:none!important;border:0!important}
[data-view="home"] > .sec.mposted::before{display:none!important}
.mspotad.mposted,.mrtease.mposted,.mdyk.mposted{padding-top:128px!important}
@media (max-width:700px){.mposted{padding-top:112px!important}.mposted > .mpole{height:120px}}
/* News: newspapers on the wall, moved by the wind */
[data-view="home"] .news{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);perspective:900px}
[data-view="home"] .news .nc{display:grid!important;grid-template-rows:auto 1fr;gap:0;text-decoration:none;color:#1b1a16!important;
background:#e8e2d0!important;background-image:linear-gradient(170deg,rgba(255,255,255,.35),transparent 40%),var(--gw-noise)!important;
border:0!important;border-radius:1px!important;padding:12px 12px 14px!important;box-shadow:0 2px 0 rgba(0,0,0,.25),0 18px 28px -10px rgba(0,0,0,.65)!important;
transform-origin:50% 0;transform:rotate(var(--r));animation:mpaper 6.5s ease-in-out var(--d) infinite}
[data-view="home"] .news .nc::before{content:"BBOY TOWN TIMES";display:block;margin-bottom:8px;padding-bottom:6px;border-bottom:3px double #1b1a16;text-align:center;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#1b1a16}
[data-view="home"] .news .nc::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.6%,rgba(0,0,0,.08) 50%,transparent 50.4%),linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);background-size:100% 100%,250% 100%;animation:mglint 6.5s ease-in-out var(--d) infinite}
[data-view="home"] .news .nc{position:relative}
[data-view="home"] .news .nc-img{height:auto!important;aspect-ratio:16/10;border-radius:0!important;filter:grayscale(1) contrast(1.25);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
[data-view="home"] .news .nc-img .chip{display:none}
[data-view="home"] .news .nc-body{padding:10px 0 0!important;background:none!important}
[data-view="home"] .news .nc-body h3{font:800 17px/1.12 var(--f-d)!important;text-transform:uppercase;color:#1b1a16!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px!important}
[data-view="home"] .news .nc-body p{font:500 13px/1.45 Georgia,serif!important;color:#3a3226!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;column-count:1}
[data-view="home"] .news .nc-body .src{font:600 10px/1 var(--f-m)!important;color:#5a4a36!important;border-top:1px solid #1b1a16;padding-top:6px;display:block;margin-top:8px}
[data-view="home"] .news .nc:hover,[data-view="home"] .news .nc:focus-visible{animation-play-state:paused;transform:rotate(0) translateY(-4px)}
[data-view="home"] .news .nc:focus-visible{outline:3px solid var(--gw-gold);outline-offset:4px}
@keyframes mpaper{0%,100%{transform:rotate(var(--r)) rotateX(0) skewX(0)}20%{transform:rotate(calc(var(--r) + 1deg)) rotateX(7deg) skewX(-.8deg)}45%{transform:rotate(calc(var(--r) - .6deg)) rotateX(-3deg) skewX(.5deg)}70%{transform:rotate(calc(var(--r) + .4deg)) rotateX(4deg) skewX(-.3deg)}}
/* New music: record sleeves, the vinyl slides out */
[data-view="home"] .rel{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:clamp(26px,4vw,48px) clamp(40px,5vw,70px);overflow:visible!important;padding-right:60px}
[data-view="home"] .rel .rc{position:relative;display:grid!important;grid-template-rows:auto auto;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;overflow:visible!important}
[data-view="home"] .rel .rc-art{position:relative;z-index:2;aspect-ratio:1;height:auto!important;border-radius:2px!important;box-shadow:0 2px 0 rgba(0,0,0,.3),0 16px 26px -10px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)!important}
[data-view="home"] .rel .rc-art .chip{display:none}
.mvinyl{position:absolute;z-index:1;left:4%;top:0;width:92%;aspect-ratio:1;border-radius:50%;pointer-events:none;
background:radial-gradient(circle,#0b0b0b 0 2%,var(--gw-rust) 2.4% 17%,#b8551a 17.5% 18%,transparent 18.5%),repeating-radial-gradient(circle,#0d0d0d 0 1px,#1c1c1c 1px 3px);
box-shadow:0 10px 18px rgba(0,0,0,.6),inset 0 0 0 2px #050505;transition:transform .7s cubic-bezier(.2,.8,.25,1)}
.mvinyl::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%)}
[data-view="home"] .rel .rc:hover .mvinyl,[data-view="home"] .rel .rc:focus-within .mvinyl{transform:translateX(52%) rotate(200deg)}
[data-view="home"] .rel .rc-body{padding:12px 0 0!important;background:none!important}
[data-view="home"] .rel .rc-t{font:400 14px/1.15 "Holtwood One SC",Georgia,serif!important;letter-spacing:.06em;color:var(--gw-bone)!important;text-transform:uppercase}
[data-view="home"] .rel .rc-body p{font-size:12px!important;color:#a9b8ae!important}
[data-view="home"] .rel .rc-body p b{color:var(--gw-bone)!important}
[data-view="home"] .rel .rc-cr{font-size:10px!important}
@media (hover:none){[data-view="home"] .rel .rc .mvinyl{transform:translateX(26%) rotate(60deg)}}
/* phones: everything one per row */
@media (max-width:700px){
.mwall-in{grid-template-columns:minmax(0,320px)!important;justify-content:center!important;overflow:visible!important;padding:10px 16px 18px!important;gap:30px!important}
.mposter{grid-column:1!important;grid-row:auto!important}
[data-view="home"] .news{grid-template-columns:minmax(0,1fr)!important}
[data-view="home"] .rel{grid-template-columns:minmax(0,260px)!important;justify-content:center;padding-right:70px}
[data-view="home"] .rail{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:14px}
[data-view="home"] .rail > :nth-child(n+5){display:none!important}
[data-view="home"] .rail .pc{width:auto!important;max-width:none!important}
}
@media (prefers-reduced-motion:reduce){[data-view="home"] .news .nc,[data-view="home"] .news .nc::after{animation:none!important}.mvinyl{transition:none}}
section[data-view="home"] > .sec.mposted{background-color:transparent!important;background-image:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;margin-inline:0!important}
@media (max-width:700px){
[data-view="home"] .rel{grid-auto-flow:row!important;grid-auto-columns:auto!important;overflow:visible!important;scroll-snap-type:none!important}
[data-view="home"] .rel .rc{width:auto!important;min-width:0!important;flex:none!important}
}
/* ================= v16 (Rick 09.11): one continuous wall, poles left / right, DJs as player-select ================= */
/* nothing breaks the wall: no bands, no borders, the hero melts into it */
[data-view="home"] > *:not(.hero){border:0!important;box-shadow:none!important}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:0;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(19,37,29,.0) 10%,rgba(19,37,29,.55) 100%)}
.hero-img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,#000 70%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 22%),linear-gradient(180deg,#000 70%,transparent 100%)!important;-webkit-mask-composite:source-in;mask-composite:intersect}
.mwall{background:transparent!important}
.mwall-bar{background:linear-gradient(rgba(8,21,15,0),rgba(8,21,15,.6))!important;border-top:0!important}
[data-view="home"] .band{background:transparent!important}
[data-view="home"] > .sec,[data-view="home"] > section{margin-block:0!important}
/* poles alternate */
.mright > .mpole{left:auto!important;right:clamp(14px,6vw,90px)}
.mright > .mpole .mblade{left:auto!important;right:-6px;flex-direction:row-reverse}
.mright > .mpole .mblade::before{left:auto;right:-6px}
.mright > .mpole .mblade.b{transform:perspective(500px) rotateY(38deg);transform-origin:100% 50%}
.mright{text-align:initial}
@media (max-width:700px){.mright > .mpole{right:14px}}
/* DJs on home: the game's player-select cards */
[data-view="home"] .rail{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:22px!important;overflow:visible!important}
[data-view="home"] .rail > :nth-child(n+9){display:none!important}
[data-view="home"] .rail .pc{position:relative;display:grid!important;grid-template-rows:auto auto;width:auto!important;max-width:none!important;padding:0!important;border-radius:4px!important;overflow:hidden;text-align:left;
background:#0a1712!important;border:0!important;box-shadow:0 0 0 3px #050c08,0 0 0 4px rgba(216,214,204,.18),0 18px 26px -12px #000!important;cursor:pointer;transition:transform .2s}
[data-view="home"] .rail .pc-art{position:relative;aspect-ratio:3/4;height:auto!important;border-radius:0!important;background-size:cover!important;background-position:center 25%!important;
filter:grayscale(1) contrast(1.35) brightness(.95)}
[data-view="home"] .rail .pc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(62,95,83,.55),rgba(10,26,21,.75));mix-blend-mode:multiply}
[data-view="home"] .rail .pc-art::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px)}
[data-view="home"] .rail .pc-art b{position:relative;z-index:2}
[data-view="home"] .rail .pc-art[data-photo="1"] b{display:none}
[data-view="home"] .rail .pc-body{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 10px 10px!important;background:linear-gradient(180deg,transparent,rgba(5,12,8,.92) 45%)!important}
[data-view="home"] .rail .pc-body h3{margin:0!important;font:400 clamp(20px,2vw,26px)/1 "Sedgwick Ave Display","Roboto Slab",sans-serif!important;color:#fff!important;-webkit-text-stroke:4px #000;paint-order:stroke fill;text-shadow:2px 3px 0 #000;transform:rotate(-3deg);text-transform:none!important;letter-spacing:0!important}
[data-view="home"] .rail .pc-body p{margin:6px 0 0!important;font:600 10px/1.2 var(--f-m)!important;letter-spacing:.08em;color:#a9c2ae!important;text-transform:uppercase}
[data-view="home"] .rail .pc-body .chips{display:none!important}
.mptab{position:absolute;right:8px;top:8px;z-index:4;padding:5px 9px 6px;border-radius:7px 7px 7px 2px;background:var(--gw-rust);color:#fff;font:400 14px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;-webkit-text-stroke:2px #000;paint-order:stroke fill;box-shadow:0 3px 0 rgba(0,0,0,.4)}
[data-view="home"] .rail .pc:hover,[data-view="home"] .rail .pc:focus-visible{transform:translateY(-4px);outline:none;box-shadow:0 0 0 3px #050c08,0 0 0 5px var(--gw-bone),0 22px 30px -12px #000!important}
[data-view="home"] .rail .pc:hover .pc-art,[data-view="home"] .rail .pc:focus-visible .pc-art{filter:grayscale(.2) contrast(1.15)}
@media (max-width:700px){
[data-view="home"] .rail{grid-template-columns:minmax(0,280px)!important;justify-content:center}
[data-view="home"] .rail > :nth-child(n+5){display:none!important}
}
[data-view="home"] .rail{grid-auto-flow:row!important;grid-auto-columns:auto!important;scroll-snap-type:none!important;padding:6px 4px 10px!important}
[data-view="home"] .rail .pc{min-width:0!important;flex:none!important}
section[data-view="home"] > .sec.alt.mposted,section[data-view="home"] > .sec.mposted{background-color:transparent!important;background-image:none!important}
.mptab{font-size:16px}
/* soften the painted city: each silhouette fades in from the wall, no hard edges */
.mpw-city{-webkit-mask:linear-gradient(180deg,transparent 300px,#000 660px,#000 880px,transparent 900px,transparent 1700px,#000 2060px,#000 2280px,transparent 2300px,transparent 3100px,#000 3460px,#000 3680px,transparent 3700px) 0 520px/100% 4200px repeat-y;
mask:linear-gradient(180deg,transparent 300px,#000 660px,#000 880px,transparent 900px,transparent 1700px,#000 2060px,#000 2280px,transparent 2300px,transparent 3100px,#000 3460px,#000 3680px,transparent 3700px) 0 520px/100% 4200px repeat-y;opacity:.8}
@media (max-width:760px){.mpw-city{-webkit-mask-size:100% 2625px;mask-size:100% 2625px;-webkit-mask-position:0 420px;mask-position:0 420px;
-webkit-mask-image:linear-gradient(180deg,transparent 188px,#000 412px,#000 550px,transparent 563px,transparent 1063px,#000 1288px,#000 1425px,transparent 1438px,transparent 1938px,#000 2163px,#000 2300px,transparent 2313px);
mask-image:linear-gradient(180deg,transparent 188px,#000 412px,#000 550px,transparent 563px,transparent 1063px,#000 1288px,#000 1425px,transparent 1438px,transparent 1938px,#000 2163px,#000 2300px,transparent 2313px)}}
section[data-view="home"] .rail > .pc:nth-child(n+9){display:none!important}
@media (max-width:700px){section[data-view="home"] .rail > .pc:nth-child(n+5){display:none!important}}
/* ================= v17 (Rick 09.11) ================= */
/* district borders between blocks, like on the map */
.mborder{position:absolute;left:0;right:0;top:0;height:46px;z-index:2;pointer-events:none}
.mborder svg{position:absolute;left:0;top:6px;width:100%;height:22px;overflow:visible}
.mborder path{fill:none;stroke:var(--gw-rust-lt);stroke-width:2.2;stroke-dasharray:9 6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 2px 0 rgba(0,0,0,.6))}
.mb-lbl{position:absolute;left:50%;top:0;transform:translateX(-50%);display:grid;justify-items:center;gap:2px;padding:5px 12px 6px;border-radius:3px;background:#0b1913;box-shadow:0 0 0 2px var(--gw-rust-lt),0 6px 12px rgba(0,0,0,.5)}
.mb-lbl i{font:700 8px/1 var(--f-m);font-style:normal;letter-spacing:.22em;color:var(--gw-rust-lt)}
.mb-lbl b{font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-bone)}
.mb-lbl small{font:600 8px/1 var(--f-m);letter-spacing:.16em;color:#8fa196}
.mposted{padding-top:150px!important}
.mposted > .mpole{top:44px!important}
.mwall{padding-top:170px!important}
.mwall > .mpole{top:44px!important}
@media (max-width:700px){.mposted{padding-top:136px!important}.mwall{padding-top:156px!important}.mb-lbl{left:auto;right:12px;transform:none}.mborder.r .mb-lbl{right:auto;left:12px}}
/* street signs: different NYC sign types and shapes */
.msign-brown > .mpole .mblade{background:linear-gradient(#7a4a26,#5c3518)!important;box-shadow:inset 0 0 0 2px #5c3518,0 6px 10px rgba(0,0,0,.45)!important;border-radius:14px!important}
.msign-blue > .mpole .mblade{background:linear-gradient(#1c4f8f,#123a6b)!important;box-shadow:inset 0 0 0 2px #123a6b,0 6px 10px rgba(0,0,0,.45)!important;border-radius:3px!important}
.msign-blue > .mpole .mblade.a{clip-path:polygon(0 0,88% 0,100% 50%,88% 100%,0 100%);padding-right:30px}
.mright.msign-blue > .mpole .mblade.a{clip-path:polygon(12% 0,100% 0,100% 100%,12% 100%,0 50%);padding-left:30px;padding-right:14px}
.msign-yellow > .mpole .mblade{background:linear-gradient(#f2c230,#d9a614)!important;color:#141414!important;border-color:#141414!important;box-shadow:inset 0 0 0 2px #d9a614,0 6px 10px rgba(0,0,0,.45)!important;border-radius:2px!important}
.msign-yellow > .mpole .mblade b,.msign-yellow > .mpole .mblade i{color:#141414}
.msign-yellow > .mpole{background:linear-gradient(90deg,#3a2a12,#b8902a 35%,#6e5418 60%,#2a1e0c)}
.msign-brown > .mpole{background:linear-gradient(90deg,#1e1a16,#5c544c 35%,#3a332d 60%,#14110e)}
.msign-blue > .mpole .mpole-cap{width:24px;height:24px;left:-6px;top:-18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe9a8,#d9a614 60%,#5a420a)}
.msign-brown > .mpole .mpole-cap{width:22px;height:14px;left:-5px;border-radius:50% 50% 3px 3px;background:#3a332d}
/* New music: the vinyl label has the cover's colour */
.mvinyl{background:radial-gradient(circle,#0b0b0b 0 2%,var(--lab,var(--gw-rust)) 2.4% 17%,rgba(0,0,0,.35) 17.5% 18%,transparent 18.5%),repeating-radial-gradient(circle,#0d0d0d 0 1px,#1c1c1c 1px 3px)!important}
/* Did you know = the game's loading screen */
.mload{padding-bottom:40px!important}
.mload .mdyk-in{display:none}
.mload::before{display:none!important}
.mld-frame{position:relative;max-width:980px;margin:0 auto;aspect-ratio:16/8;border-radius:6px;overflow:hidden;box-shadow:0 0 0 4px #050c08,0 24px 40px -18px #000}
.mld-img{position:absolute;inset:0;background:center/cover;filter:grayscale(.3) contrast(1.1)}
.mld-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,18,13,.25),rgba(7,18,13,.15) 40%,rgba(7,18,13,.92)),repeating-linear-gradient(0deg,rgba(0,0,0,.15) 0 1px,transparent 1px 3px)}
.mld-year{position:absolute;right:22px;top:6px;font:400 clamp(54px,10vw,120px)/1 "Holtwood One SC",Georgia,serif;color:rgba(216,214,204,.9);-webkit-text-stroke:3px #050c08;paint-order:stroke fill;text-shadow:0 6px 0 rgba(0,0,0,.5)}
.mld-stop{position:absolute;left:22px;top:20px;font:600 11px/1 var(--f-m);letter-spacing:.2em;color:var(--gw-bone);background:rgba(5,12,8,.7);padding:6px 9px;border-radius:3px}
.mld-tip{position:absolute;left:22px;right:22px;bottom:18px;display:grid;gap:6px;padding:14px 16px 12px;border-radius:6px;background:rgba(8,21,15,.88);box-shadow:inset 0 0 0 2px rgba(216,214,204,.16)}
.mld-tab{position:absolute;left:14px;top:-14px;padding:4px 10px 5px;border-radius:7px 7px 7px 2px;background:var(--gw-rust);font:400 14px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.mld-place{font:400 clamp(15px,2vw,21px)/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--gw-rust-lt);text-transform:uppercase;margin-top:4px}
.mld-fact{margin:0;font:500 clamp(13px,1.5vw,16px)/1.45 var(--f-b);color:#e2e8e2}
.mld-bar{height:8px;border-radius:4px;background:#050c08;box-shadow:inset 0 0 0 1px rgba(216,214,204,.2);overflow:hidden;margin-top:4px}
.mld-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gw-hud),#d7dc3c)}
.mld-load{font:400 10px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.16em;color:#a9b8ae}
.mload.mld-go .mld-bar i{animation:mldbar 9s linear forwards}
.mload.mld-go .mld-img{animation:mlight 1.1s cubic-bezier(.25,.7,.3,1) both}
@keyframes mldbar{to{width:100%}}
.mld-arr{all:unset;cursor:pointer;position:absolute;top:42%;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--gw-bone);color:var(--gw-bone);background:rgba(5,12,8,.6);font:700 16px/1 var(--f-m)}
.mld-arr.l{left:14px}.mld-arr.r{right:14px}
.mld-arr:hover,.mld-arr:focus-visible{border-color:var(--gw-rust-lt);color:var(--gw-rust-lt);outline:none}
@media (max-width:700px){.mld-frame{aspect-ratio:auto;min-height:440px}.mld-year{font-size:54px}.mld-arr{top:120px}.mld-tip{left:12px;right:12px}}
@media (max-width:700px){.mld-stop{top:auto;bottom:calc(100% - 200px);left:auto;right:12px}.mload .mld-frame{margin-top:10px}}
/* ================= v18: YOUR SPOT is your room (Rick 09.11) ================= */
.mroom{--ox:48.3%;--oy:29.3%;position:relative;max-width:1000px;margin:0 auto;border-radius:8px;overflow:hidden;box-shadow:0 0 0 4px #050c08,0 26px 44px -18px #000;background:#0a1510}
.mroom-in{position:relative;aspect-ratio:16/9;transform-origin:var(--ox) var(--oy);transition:transform .75s cubic-bezier(.55,0,.25,1),filter .75s}
.mroom.mzoom .mroom-in{transform:scale(3.4)}
.mroom.mui .mroom-in{filter:brightness(.25) blur(2px)}
.mroom-wall{position:absolute;inset:0 0 20% 0;background:radial-gradient(60% 70% at 50% 25%,rgba(233,201,104,.14),transparent 70%),linear-gradient(rgba(5,12,8,.25),rgba(5,12,8,.55)),var(--wtex) 0 0/360px 360px,#13251d}
.mroom-floor{position:absolute;left:0;right:0;bottom:0;height:20%;background:linear-gradient(#1a1410,#0d0a07),repeating-linear-gradient(90deg,transparent 0 60px,rgba(0,0,0,.25) 60px 62px);background-blend-mode:multiply;box-shadow:inset 0 8px 14px rgba(0,0,0,.6)}
.mroom-lamp{position:absolute;left:44%;top:0;width:14%;height:62%;background:linear-gradient(180deg,rgba(255,226,150,.16),transparent 80%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);pointer-events:none;animation:mlamp 5s ease-in-out infinite}
@keyframes mlamp{0%,100%{opacity:1}50%{opacity:.75}}
.mro{all:unset;position:absolute;cursor:pointer;display:block;transition:filter .2s,transform .2s}
.mro:focus-visible{outline:3px solid var(--gw-gold);outline-offset:4px}
.mro.hot{filter:drop-shadow(0 0 10px rgba(233,201,104,.7)) brightness(1.12)}
/* window on the night city */
.mro-win{left:5%;top:8%;width:25%;height:40%;border:8px solid #2a1e14;border-radius:3px;overflow:hidden;background:linear-gradient(#071a12,#0d2a1d);box-shadow:inset 0 0 0 3px #3b2a1c,0 8px 14px rgba(0,0,0,.5)}
.mro-win::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#2a1e14 48% 52%,transparent 52%),linear-gradient(180deg,transparent 48%,#2a1e14 48% 52%,transparent 52%)}
.mro-moon{position:absolute;right:16%;top:12%;width:16%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff4cf,#e9c968 60%,#a08a3a);box-shadow:0 0 18px rgba(233,201,104,.6)}
.mro-city{position:absolute;left:0;right:0;bottom:0;height:70%;background:url("img/metro/gsil-home.webp?v=9") 50% 100%/auto 100% repeat-x;image-rendering:pixelated}
/* history wall: three photos taped */
.mro-posters{left:36%;top:6%;width:22%;height:24%}
.mro-posters span{position:absolute;top:calc(var(--i) * 6%);left:calc(var(--i) * 33%);width:40%;aspect-ratio:3/4;background:#e9e1cb center/cover;box-shadow:0 4px 8px rgba(0,0,0,.5);transform:rotate(calc((var(--i) - 1) * 6deg));border:4px solid #e9e1cb}
.mro-posters span:nth-child(1){background-image:url("img/metro/ph-spot.jpg?v=10")}
.mro-posters span:nth-child(2){background-image:url("img/metro/hero-1984-soft.webp?v=62")}
.mro-posters span:nth-child(3){background-image:url("img/metro/ph-djs.jpg?v=10")}
.mro-posters span::before{content:"";position:absolute;top:-8px;left:30%;width:40%;height:10px;background:rgba(206,192,150,.9);transform:rotate(-4deg)}
/* the door to the cypher */
.mro-door{right:4%;top:8%;width:15%;height:72%;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#4a1c12,#7a3020 40%,#4a1c12);box-shadow:inset 0 0 0 8px #2a0f09,0 0 0 4px #1a0905,0 10px 18px rgba(0,0,0,.5)}
.mro-door b{position:absolute;left:50%;top:20%;transform:translateX(-50%) rotate(-6deg);font:400 clamp(12px,1.8vw,20px)/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;white-space:nowrap}
.mro-door i{position:absolute;right:14%;top:52%;width:10%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 35%,#e9e1cb,#7d7462)}
.mro-door::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:6px;background:rgba(233,201,104,.55);filter:blur(4px)}
/* desk + computer + boombox */
.mroom-desk{position:absolute;left:24%;right:26%;top:66%;height:6%;background:linear-gradient(#5a3a22,#3a2414);box-shadow:0 8px 12px rgba(0,0,0,.6)}
.mroom-desk::before,.mroom-desk::after{content:"";position:absolute;top:100%;width:5%;height:240%;background:#2a1a0e}
.mroom-desk::before{left:4%}.mroom-desk::after{right:4%}
.mro-pc{left:36%;top:17%;width:26%}
.mro-pc img{display:block;width:100%;height:auto}
.mro-scr{position:absolute;left:32.7%;top:10.4%;width:29.4%;height:27.5%;padding:6% 5%;box-sizing:border-box;display:grid;align-content:start;gap:4%;overflow:hidden;border-radius:6px;
background:radial-gradient(80% 80% at 50% 45%,#123224,#03100a);font:600 clamp(5px,.75vw,9px)/1.25 var(--f-m);color:#7dffa0;text-shadow:0 0 4px rgba(98,209,93,.8)}
.mro-scr b{font-weight:700;letter-spacing:.08em}
.mro-scr i{font-style:normal;white-space:nowrap}
.mro-scr .cur{animation:mblink 1s steps(1) infinite}
@keyframes mblink{50%{opacity:0}}
.mro-scr::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.mro-bbx{left:3%;bottom:4%;width:25%}
.mro-bbx img{display:block;width:100%;height:auto;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6))}
/* the game's hint bar */
.mroom-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;padding:0 16px;background:linear-gradient(rgba(8,21,15,.9),#06110c);border-top:1px solid rgba(216,214,204,.08);
font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-bone)}
.mroom-bar span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.mroom-bar i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--gw-bone);font:700 9px/1 var(--f-m)}
.mroom-hint{flex:1;text-align:center;color:var(--gw-rust-lt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the computer screen after the zoom */
.mroom-pcui{position:absolute;inset:0 0 46px 0;z-index:5;display:grid;place-items:center;padding:12px;animation:mpcin .35s ease both}
.mroom-pcui .mpc{width:min(760px,100%);max-height:100%;overflow:auto}
@keyframes mpcin{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.mpc-back{all:unset;cursor:pointer;margin-left:auto;position:relative;font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:#f4ede4;padding:8px 10px;border-radius:6px;box-shadow:inset 0 0 0 2px rgba(244,237,228,.5)}
.mpc-back:focus-visible{outline:2px solid var(--gw-gold)}
.mroom-pcui .mpc-go{display:none}
.mroom-go{display:flex;width:max-content;margin:18px auto 0}
.mspotad > .mpc{display:none}
@media (max-width:700px){
.mroom{--ox:50.9%;--oy:42.3%;border-radius:6px}
.mroom-in{aspect-ratio:4/5}
.mro-win{left:5%;top:5%;width:42%;height:26%}
.mro-posters{left:auto;right:5%;top:6%;width:44%;height:22%}
.mro-door{right:3%;top:36%;width:20%;height:44%}
.mroom-desk{left:10%;right:26%;top:71%}
.mro-pc{left:28.5%;top:33%;width:44%}
.mro-bbx{left:3%;bottom:2%;width:40%}
.mroom-wall{inset:0 0 16% 0}.mroom-floor{height:16%}
.mroom-bar{font-size:9px;padding:0 10px}.mroom-bar span{display:none}
.mroom.mzoom .mroom-in{transform:scale(2.6)}
.mroom-pcui{position:fixed;inset:0;z-index:70;background:rgba(5,12,8,.85);padding:16px}
}
@media (prefers-reduced-motion:reduce){.mroom-in{transition:none}.mroom-lamp{animation:none}}
/* a few big faint tags painted along the wall */
.mpagewall::after{content:"BRONX";position:absolute;left:-2%;top:1500px;font:400 220px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:rgba(216,214,204,.05);-webkit-text-stroke:2px rgba(0,0,0,.25);transform:rotate(-8deg);pointer-events:none}
.mpagewall::before{content:"1520";position:absolute;right:-2%;top:3400px;font:400 260px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:rgba(224,134,74,.06);-webkit-text-stroke:2px rgba(0,0,0,.25);transform:rotate(6deg);pointer-events:none}
@media (max-width:700px){.mpagewall::after{font-size:120px;top:1300px}.mpagewall::before{font-size:140px;top:3000px}}
.mro-pc{top:21%}
.mroom{--oy:33.3%}
.mro-posters{top:2%;height:17%;left:35%;width:24%}
.mro-posters span{width:30%}
@media (max-width:700px){.mro-pc{top:36%}.mroom{--oy:45.3%}.mro-posters{top:6%;height:22%;left:auto;right:5%;width:44%}.mro-posters span{width:40%}}
@media (max-width:700px){.mroom-pcui{bottom:calc(var(--deck-h) + var(--tab-h) + var(--safe-b));top:calc(56px + env(safe-area-inset-top,0px))}}
/* ================= v19: the practice loft like the game's home ================= */
.mloft .mroom-in{aspect-ratio:16/9;overflow:hidden;--pw:140%;--pr:40%}
.mpan{position:absolute;left:0;top:-49.8%;width:var(--pw);aspect-ratio:3/2;background:url("img/metro/loft.jpg?v=19") 0 0/100% 100% no-repeat;
transform:translateX(calc(var(--p,0) * var(--pr) * -1 / var(--pw) * 100%));transition:transform 1s cubic-bezier(.45,.05,.3,1)}
.mloft[data-st="0"] .mpan{--p:0}.mloft[data-st="1"] .mpan{--p:.32}.mloft[data-st="2"] .mpan{--p:.6}.mloft[data-st="3"] .mpan{--p:.85}.mloft[data-st="4"] .mpan{--p:1}
.mloft.mpanning .mpan{animation:mpanblur 1s ease}
@keyframes mpanblur{0%,100%{filter:none}40%{filter:blur(2px) brightness(1.05)}}
/* objects placed in the photo */
.mpan-desk{position:absolute;left:4%;top:70%;width:19%;height:2.4%;background:linear-gradient(#6a4628,#3e2714);box-shadow:0 6px 10px rgba(0,0,0,.45)}
.mpan-desk::before,.mpan-desk::after{content:"";position:absolute;top:100%;width:4%;height:520%;background:#2e1d0f}
.mpan-desk::before{left:5%}.mpan-desk::after{right:5%}
.mloft .mro-pc{left:6%;top:49%;width:13%}
.mloft .mro-bbx{left:60%;top:66%;width:11%;bottom:auto}
.mro-mirror{left:30%;top:33%;width:30%;height:30%}
.mloft .mro-posters{left:88%;top:24%;width:10%;height:15%}
.mloft .mro-posters span{width:46%}
.mro-bag{left:76%;top:20%;width:13%;height:42%}
.mloft .mro.hot{filter:drop-shadow(0 0 14px rgba(255,214,140,.85)) brightness(1.08)}
.mro-mirror.hot,.mro-bag.hot{filter:none;box-shadow:0 0 0 3px rgba(255,214,140,.7),0 0 30px rgba(255,214,140,.45);border-radius:6px}
/* the game's bottom line: ◁ STATION ▷ in the middle, ✕ ACCEPT on the right */
.mloft .mroom-bar{position:relative;justify-content:center;background:linear-gradient(rgba(20,12,6,.75),rgba(10,6,3,.92))}
.mroom-mid{display:flex;align-items:center;gap:18px}
.mroom-arr{all:unset;cursor:pointer;font:700 22px/1 var(--f-m);color:var(--gw-bone);padding:4px 8px;text-shadow:0 2px 0 #000}
.mroom-arr:hover,.mroom-arr:focus-visible{color:#ffd68c;outline:none}
.mloft .mroom-hint{flex:none;min-width:min(330px,56vw);font-size:15px;letter-spacing:.14em;color:#f4ede4;text-shadow:0 2px 0 #000}
.mroom-ok{all:unset;cursor:pointer;position:absolute;right:14px;display:flex;align-items:center;gap:6px;font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-bone)}
.mroom-ok i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--gw-bone);font:700 10px/1 var(--f-m)}
.mroom-ok:hover,.mroom-ok:focus-visible{color:#ffd68c;outline:none}
.mloft{--ox:17%;--oy:40%}
.mloft.mzoom .mroom-in{transform:scale(3.6)}
@media (max-width:700px){
.mloft .mroom-in{aspect-ratio:4/5;--pw:300%;--pr:200%}
.mpan{top:-48%}
.mloft{--ox:36.6%;--oy:38.7%}
.mloft .mroom-hint{font-size:11px;min-width:0}
.mroom-ok{display:none}
.mloft .mroom-bar{height:52px}
.mloft.mzoom .mroom-in{transform:scale(2.4)}
}
@media (prefers-reduced-motion:reduce){.mpan{transition:none}.mloft.mpanning .mpan{animation:none}}
.mloft .mroom-in{--k:.2857}
.mpan{transform:translateX(calc(var(--p,0) * var(--k) * -100%))}
@media (max-width:700px){.mloft .mroom-in{--k:.6667}}
.mloft .mro-posters{left:84%;top:30%;width:10%;height:14%}
.mpan-desk{top:71%}
.mloft .mro-pc{top:50%}
/* v20: the game computer screen lives on the Spot page */
.mspot .mpc-page{display:block!important;max-width:760px;margin:18px auto 6px;text-align:left}
.mspot .mpc-page .mpc-back{display:none}
.mspot .mpc-page .mpc-go{display:flex}
/* ================= v21 (Rick 09.11) ================= */
.mborder{display:none!important}
.mposted,.mwall{padding-top:150px!important}
.mposted > .mpole,.mwall > .mpole{top:0!important;height:150px!important;bottom:auto!important}
@media (max-width:700px){.mposted,.mwall{padding-top:130px!important}.mposted > .mpole,.mwall > .mpole{height:128px!important}}
/* the block in focus is lit, the others sink into the wall's dark teal (like the characters behind the menus in the game) */
.mfocusable{transition:filter .7s ease}
.mfocusable:not(.mlit){filter:brightness(.42) saturate(.55) sepia(.25) hue-rotate(95deg)}
@media (prefers-reduced-motion:reduce){.mfocusable{transition:none}}
/* B-boy ranking = the game's WALL OF FAME */
.mrank{padding-bottom:40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mrk{max-width:760px;margin:0 auto;border-radius:14px;overflow:hidden;padding-bottom:16px;background:radial-gradient(80% 70% at 50% 45%,#c3622f,#9a4126 55%,#6d2a1c);box-shadow:0 0 0 4px #1c0905,0 24px 44px -18px #000}
.mrk-head{position:relative;height:86px;display:flex;align-items:center;gap:16px;padding:0 20px;overflow:hidden;background:linear-gradient(#b14d2c,#7a2c1d);border-bottom:3px solid #1c0905}
.mrk-head b{position:relative;font:400 clamp(16px,2.6vw,26px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#f4ede4;-webkit-text-stroke:1.2px #1c0905;paint-order:stroke fill}
.mrk-head small{position:relative;margin-left:auto;align-self:flex-end;margin-bottom:10px;font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#f0d4b8}
.mrk-tabs{display:flex;gap:6px;padding:10px 12px;background:#140603;border-bottom:3px solid #1c0905}
.mrk-tabs button{all:unset;cursor:pointer;flex:1;text-align:center;padding:9px;border-radius:4px;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:#8f7a70;background:#1d0a06;border:1px solid #2f120b}
.mrk-tabs button[aria-selected="true"]{color:#fff;background:#3a160e;box-shadow:inset 0 0 0 2px #e7c6a4}
.mrk-rows{display:grid;gap:6px;padding:14px 18px 4px}
.mrk-row{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:28px 46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px 12px;border-radius:10px}
.mrk-row:first-child,.mrk-row:hover,.mrk-row:focus-visible{background:linear-gradient(#d67a3e,#a94b22);box-shadow:0 0 0 3px #f2d6a4;outline:none}
.mrk-row .n{font:400 16px/1 "Holtwood One SC",Georgia,serif;color:#f0d4b8;text-align:center}
.mrk-av{width:44px;height:44px;border-radius:6px;background:#3b1a10 center/cover;box-shadow:inset 0 0 0 2px rgba(0,0,0,.45)}
.mrk-who{min-width:0}
.mrk-who b{display:block;font:400 15px/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#f6efe6;text-shadow:0 2px 0 #3a1009;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrk-who small{display:block;margin-top:3px;font:500 12px/1.2 var(--f-b);color:#f3dccb}
.mrk-stars{font-size:17px;letter-spacing:.08em;color:#e9c968;text-shadow:0 1px 0 #3a1009;white-space:nowrap}
.mrk-stars i{font-style:normal;color:#7a4a28}
.mrk-claim{display:grid;justify-items:center;gap:8px;margin:16px 18px 0;padding:14px;border-radius:10px;background:rgba(20,6,3,.55);box-shadow:inset 0 0 0 2px rgba(240,212,184,.25);text-align:center}
.mrk-claim b{font:400 15px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#f0d4b8}
.mrk-claim span{font:500 14px/1.4 var(--f-b);color:#f6efe6}
.mdj-claim{max-width:760px;margin:24px auto 0;background:rgba(8,21,15,.82);box-shadow:inset 0 0 0 2px rgba(216,214,204,.18)}
.mdj-claim b{color:var(--gw-rust-lt)}
.mdj-claim span{color:var(--gw-bone)}
@media (max-width:640px){.mrk-row{grid-template-columns:22px 40px minmax(0,1fr);gap:10px}.mrk-stars{grid-column:3;font-size:14px}.mrk-av{width:40px;height:40px}.mrk-head{height:70px}}
/* 4 DJs */
[data-view="home"] .rail{grid-template-columns:repeat(4,minmax(0,1fr))!important}
[data-view="home"] .rail .mdj{display:grid!important;grid-template-rows:auto 1fr}
[data-view="home"] .rail .mdj .pc-art{all:unset;cursor:pointer;display:block;position:relative;aspect-ratio:3/4;background-size:cover!important;background-position:center 25%!important;filter:grayscale(1) contrast(1.3) brightness(.95)}
[data-view="home"] .rail .mdj:hover .pc-art,[data-view="home"] .rail .mdj .pc-art:focus-visible{filter:grayscale(.15) contrast(1.1)}
[data-view="home"] .rail .mdj .pc-art:focus-visible{outline:3px solid var(--gw-gold);outline-offset:-3px}
[data-view="home"] .rail .mdj .pc-body{position:relative!important;inset:auto!important;padding:10px 12px 12px!important;background:#0a1712!important;display:grid;gap:6px}
[data-view="home"] .rail .mdj .pc-body h3{margin-top:-30px!important;position:relative}
.mdj-bio{margin:0!important;font:500 12.5px/1.4 var(--f-b)!important;letter-spacing:0!important;text-transform:none!important;color:#c9d2cc!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mdj-links{display:flex;flex-wrap:wrap;gap:5px}
.mdj-links a{font:700 10px/1 var(--f-m);letter-spacing:.08em;color:var(--gw-bone);text-decoration:none;padding:5px 7px;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(216,214,204,.3)}
.mdj-links a:hover,.mdj-links a:focus-visible{background:var(--gw-rust);color:#160a04;box-shadow:none;outline:none}
.mdj-ok{position:absolute;left:8px;top:8px;z-index:4;padding:4px 7px;border-radius:3px;background:rgba(5,12,8,.8);font:700 9px/1 var(--f-m);letter-spacing:.12em;color:var(--gw-hud)}
@media (max-width:900px){[data-view="home"] .rail{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:700px){[data-view="home"] .rail{grid-template-columns:minmax(0,300px)!important}}
/* history: real hip-hop photos, credited */
.mld-img{background-size:cover;background-position:center 30%;filter:grayscale(.6) sepia(.25) contrast(1.15) brightness(.95) hue-rotate(60deg)}
.mld-src{display:block;max-width:980px;margin:8px auto 0;font:10.5px/1.45 var(--f-m);color:rgba(216,214,204,.6)}
.mld-src a{color:inherit}
.mld-fact{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* news: three kinds of paper */
[data-view="home"] .news .nc.mpaper-post::before{content:"THE BBOY POST";background:#b8231c;color:#fff;border:0;padding:8px 0;font-size:16px;letter-spacing:.06em;margin:-12px -12px 10px}
[data-view="home"] .news .nc.mpaper-post{background-color:#f2efe6!important}
[data-view="home"] .news .nc.mpaper-post .nc-body h3{font:900 21px/1.02 var(--f-d)!important;letter-spacing:-.01em}
[data-view="home"] .news .nc.mpaper-zine::before{content:"CYPHER ZINE · NO. 12";font:400 15px/1 "Sedgwick Ave Display","Roboto Slab",sans-serif;letter-spacing:.02em;border-bottom:2px dashed #1b1a16;text-align:left}
[data-view="home"] .news .nc.mpaper-zine{background-color:#d9d6cf!important;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 3px),var(--gw-noise)!important;clip-path:polygon(0 1%,4% 0,30% 1.5%,60% 0,100% 1%,99% 40%,100% 100%,70% 99%,40% 100%,0 99%)}
[data-view="home"] .news .nc.mpaper-zine .nc-img{filter:grayscale(1) contrast(1.9) brightness(1.05)!important}
[data-view="home"] .news .nc.mpaper-zine .nc-body h3{font:400 20px/1.05 "Sedgwick Ave Display","Roboto Slab",sans-serif!important;text-transform:none}
[data-view="home"] .news .nc.mpaper-times .nc-body h3{font:700 19px/1.12 Georgia,"Times New Roman",serif!important;text-transform:none}
.mfocusable:not(.mlit){filter:brightness(.45) saturate(.6)}
.mfocusable{position:relative}
.mfocusable::after{content:none}
.mfocusable:not(.mlit){filter:brightness(.55) saturate(.65)}
/* ================= v22 (Rick 09.11) ================= */
/* --- the game's speaker, bottom left; tap = music off + player hidden, tap again = back; gone on RADIO --- */
body{--spk-w:58px}
.mspk{all:unset;box-sizing:border-box;position:fixed;z-index:61;left:max(12px,env(safe-area-inset-left,0px));width:var(--spk-w);height:calc(var(--spk-w) * 1.25);cursor:pointer;
bottom:calc(var(--tab-h) + var(--safe-b) + (var(--deck-h) - var(--spk-w) * 1.25) / 2);transition:bottom .45s cubic-bezier(.2,.8,.25,1);animation:mspkin .6s cubic-bezier(.2,1.4,.4,1) both;-webkit-tap-highlight-color:transparent}
.mspk-box{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(3px 6px 6px rgba(0,0,0,.7))}
.mspk:focus-visible{outline:3px solid var(--gw-gold);outline-offset:4px;border-radius:6px}
.mspk-wf,.mspk-tw{transform-box:fill-box;transform-origin:center}
body.mspk-play .mspk-wf{animation:mthump .46s ease-in-out infinite}
body.mspk-play .mspk-tw{animation:mthump .23s ease-in-out infinite}
.mspk-x{opacity:0;transition:opacity .25s}
body.mdeck-off .mspk-x{opacity:1}
body.mdeck-off .mspk-box{filter:drop-shadow(3px 6px 6px rgba(0,0,0,.7)) brightness(.8)}
.mspk-band{position:absolute;left:0;bottom:calc(100% + 16px);display:grid;gap:4px;width:max-content;max-width:min(76vw,460px);padding:10px 44px 11px 16px;pointer-events:none;
background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.62) 70%,rgba(0,0,0,0));opacity:0;transform:translateX(-14px);transition:opacity 1.4s ease,transform 1.4s ease}
.mspk-show .mspk-band{opacity:1;transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.25,1)}
.mspk-t{font:800 15px/1.15 "Arial Rounded MT Bold","Varela Round",var(--f-b);letter-spacing:.2em;color:#f4f4ee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 0 #000}
.mspk-a{font:700 11px/1 "Arial Rounded MT Bold","Varela Round",var(--f-b);letter-spacing:.24em;color:#b9c4bd;text-transform:uppercase}
body.mdeck-on .mdeck{padding-left:calc(var(--spk-w) + 26px);transition:transform .45s cubic-bezier(.2,.8,.25,1),visibility 0s}
body.mdeck-on .mdeck-tag{display:none}
/* off: the player slides away, the speaker drops to the corner, the band shows next to it */
body.mdeck-on.mdeck-off,body.mdeck-on.mradio-on{--deck-h:0px}
body.mdeck-off .mdeck{transform:translateY(130%);visibility:hidden;transition:transform .45s ease,visibility 0s .45s}
body.mdeck-off .mspk{bottom:calc(var(--tab-h) + var(--safe-b) + 14px)}
body.mdeck-off .mspk-band{left:calc(100% + 10px);bottom:8px}
/* the RADIO page plays only our mixtapes */
body.mradio-on .mdeck,body.mradio-on .mspk{display:none!important}
.gw-chip{left:auto!important;right:max(12px,env(safe-area-inset-right,0px))}
@keyframes mspkin{from{opacity:0;transform:translateX(-120%) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes mthump{0%,100%{transform:scale(1)}40%{transform:scale(1.07)}}
@media (max-width:700px){body{--spk-w:50px}.mspk-t{font-size:13px;letter-spacing:.16em}}
@media (prefers-reduced-motion:reduce){.mspk{animation:none}body.mspk-play .mspk-wf,body.mspk-play .mspk-tw{animation:none}}
/* --- a steel pipe runs across the wall at the top of every block; the signs hang from it on chains --- */
.mpiped{position:relative;isolation:isolate;padding-top:122px!important}
.mpiped.mpiped > .mpole{position:absolute;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;
display:flex;flex-wrap:nowrap;align-items:flex-start;gap:14px;padding:50px clamp(16px,6vw,90px) 0;z-index:4;pointer-events:none}
.mright.mpiped > .mpole{justify-content:flex-end}
.mpiped > .mpole .mpole-cap{display:none}
.mpipe{position:absolute;left:-4px;right:-4px;top:14px;height:18px;
background:linear-gradient(180deg,#151a17 0,#5d6762 22%,#aab3ae 40%,#7b8580 58%,#3a433f 82%,#121714 100%);box-shadow:0 10px 14px -6px rgba(0,0,0,.75)}
.mpipe::before{content:"";position:absolute;top:-5px;bottom:-5px;left:0;right:0;
background:linear-gradient(90deg,#3b4440,#9aa39e 45%,#4b5450) 0 0/16px 100% no-repeat,linear-gradient(90deg,#3b4440,#9aa39e 45%,#4b5450) 0 0/16px 100% no-repeat,linear-gradient(90deg,#3b4440,#9aa39e 45%,#4b5450) 0 0/16px 100% no-repeat;
background-position:9% 0,50% 0,91% 0;border-radius:2px}
.mpipe::after{content:"";position:absolute;left:0;right:0;top:100%;height:46px;pointer-events:none;
background:linear-gradient(180deg,rgba(4,10,7,.55),transparent),linear-gradient(90deg,transparent 8.6%,rgba(120,60,20,.35) 9%,transparent 9.6%,transparent 49.6%,rgba(120,60,20,.3) 50%,transparent 50.6%)}
.mpiped > .mpole .mblade{position:relative!important;left:auto!important;right:auto!important;top:auto!important;flex:none;flex-direction:row!important;transform:none;filter:none;
height:44px;transform-origin:50% -20px;animation:mswing 6s ease-in-out var(--sw,0s) infinite}
.mpiped > .mpole .mblade.b{height:44px;filter:none;transform:none;background:linear-gradient(#1d7a4c,#13603b);font-size:14px;animation-duration:5.2s}
.mpiped > .mpole .mblade::before,.mpiped > .mpole .mblade::after{content:"";position:absolute;top:-20px;width:3px;height:20px;transform:none;border-radius:1px;
background:repeating-linear-gradient(180deg,#a7b0ab 0 3px,#3c4440 3px 5px)}
.mpiped > .mpole .mblade::before{left:16%;right:auto}
.mpiped > .mpole .mblade::after{right:16%;left:auto}
@keyframes mswing{0%,100%{transform:rotate(0)}30%{transform:rotate(1.1deg)}70%{transform:rotate(-.9deg)}}
@media (max-width:700px){
.mpiped{padding-top:112px!important}
.mpiped.mpiped > .mpole{gap:8px;padding:48px 12px 0;justify-content:center!important}
.mpiped > .mpole .mblade{height:42px;padding:0 10px;gap:6px}
.mpiped > .mpole .mblade b{font-size:12.5px;letter-spacing:.05em}
.mpiped > .mpole .mblade i{display:none}
.mpiped > .mpole .mblade.b{font-size:11.5px;letter-spacing:.05em}
}
@media (prefers-reduced-motion:reduce){.mpiped > .mpole .mblade{animation:none}}
/* --- the wall: a game-toned photo of a real place on one side of each block, melting into the wall + map --- */
.mside{position:absolute;top:0;bottom:0;right:0;width:min(64%,940px);z-index:-1;pointer-events:none;background:var(--simg) center/cover;opacity:.62;
-webkit-mask-image:linear-gradient(270deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(270deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect}
.mright > .mside{right:auto;left:0;-webkit-mask-image:linear-gradient(90deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.mside-sil{position:absolute;left:0;right:0;bottom:12%;height:38%;background:url("img/metro/gsil-el.webp?v=9") 50% 100%/auto 100% repeat-x;opacity:.85;image-rendering:pixelated}
.mright > .mside .mside-sil{background-image:url("img/metro/gsil-home.webp?v=9")}
@media (max-width:700px){.mside{width:100%;opacity:.42}}
/* --- DJs: game-toned portraits with the pixel city at their feet --- */
[data-view="home"] .rail .mdj .pc-art{filter:url(#mgame-green) contrast(1.05)!important;overflow:hidden}
[data-view="home"] .rail .mdj:hover .pc-art,[data-view="home"] .rail .mdj .pc-art:focus-visible{filter:url(#mgame-post) contrast(1.05)!important}
[data-view="home"] .rail .mdj .pc-art::after{background:linear-gradient(180deg,rgba(195,98,47,.0) 50%,rgba(195,98,47,.35)),repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)!important;mix-blend-mode:normal!important}
.mdj-city{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:2;background:url("img/metro/gsil-spot.webp?v=9") 50% 100%/auto 100% repeat-x;image-rendering:pixelated;opacity:.95}
[data-view="home"] .rail .mdj{box-shadow:0 0 0 3px #1c0905,0 0 0 6px #c3622f,0 18px 26px -12px #000!important}
/* --- history: the whole photo, never cropped, over a blurred copy of itself --- */
.mld-frame{isolation:isolate}
.mld-frame::before{content:"";position:absolute;inset:-30px;z-index:0;background:var(--dimg,none) center/cover;filter:blur(22px) brightness(.42) saturate(.55)}
.mld-img{inset:0 0 0 34%!important;z-index:0;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;filter:contrast(1.06) saturate(.85)!important}
.mld-img::after{background:linear-gradient(90deg,rgba(7,18,13,.55),transparent 18%),repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)!important}
.mld-tip{left:22px!important;right:auto!important;width:min(36%,380px);bottom:22px!important;top:70px}
.mld-year{left:22px;right:auto;top:6px}
.mld-stop{left:auto!important;right:14px!important;top:14px!important;bottom:auto!important}
.mld-arr{top:auto!important;bottom:22px}
.mld-arr.l{left:auto!important;right:72px!important}
.mld-more{justify-self:start;margin-top:4px;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-bone);text-decoration:none;padding:11px 12px;border-radius:5px;background:var(--gw-rust);color:#160a04}
.mld-more:hover,.mld-more:focus-visible{background:var(--gw-rust-lt);outline:none}
.mld-tip .mld-fact{-webkit-line-clamp:7}
@media (max-width:700px){
.mld-frame{min-height:560px}
.mld-img{inset:0 0 auto 0!important;height:250px}
.mld-year{top:auto;bottom:calc(100% - 245px);font-size:46px}
.mld-tip{left:12px!important;right:12px!important;width:auto;top:262px;bottom:74px!important}
.mld-arr{bottom:16px}.mld-arr.l{right:auto!important;left:14px!important}.mld-arr.r{right:14px!important}
.mld-tip .mld-fact{-webkit-line-clamp:6}
}
/* --- news: a magazine you flip --- */
.mmag{max-width:1000px;margin:0 auto;outline:none;padding:0 4px}
.mmag:focus-visible .mmag-book{box-shadow:0 0 0 3px var(--gw-gold)}
.mmag-book{position:relative;aspect-ratio:16/10;perspective:2000px;border-radius:3px;box-shadow:0 30px 50px -20px #000}
.mmag-spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;background:#efe9da;background-image:var(--gw-noise);border-radius:3px;overflow:hidden;color:#1b1a16}
.mmag-spread::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 30px);width:60px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.22) 48%,rgba(0,0,0,.35) 50%,rgba(0,0,0,.18) 52%,transparent)}
.mmag-pg-l,.mmag-pg-r{position:relative;overflow:hidden;min-width:0}
.mmag-cover{background:var(--cimg,none) center/cover #1b1a16;display:flex;flex-direction:column;justify-content:space-between;padding:18px 20px;filter:url(#mgame-post)}
.mmag-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 55%,rgba(0,0,0,.75))}
.mmag-mast{position:relative;font:400 clamp(34px,5.6vw,62px)/.9 "Holtwood One SC",Georgia,serif;letter-spacing:.02em;color:#e8583a;-webkit-text-stroke:2px #fff;paint-order:stroke fill;text-shadow:0 4px 0 rgba(0,0,0,.4)}
.mmag-issue{position:relative;margin-top:6px;font:700 11px/1 var(--f-m);letter-spacing:.16em;color:#fff;text-shadow:0 1px 2px #000}
.mmag-cl{position:relative;margin-top:auto;font:400 clamp(18px,2.4vw,26px)/1.05 "Sedgwick Ave Display","Roboto Slab",sans-serif;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;max-width:92%}
.mmag-bar-code{position:absolute;right:16px;bottom:16px;width:46px;height:30px;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 3px,#111 3px 4px,#fff 4px 6px);box-shadow:0 0 0 4px #fff}
.mmag-toc{padding:22px 26px;display:grid;align-content:start;gap:10px}
.mmag-kick{font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.16em;color:#b8231c;text-transform:uppercase}
.mmag-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mmag-toc button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:30px 1fr;gap:8px;width:100%;padding:7px 6px;border-bottom:1px solid rgba(0,0,0,.15);font:600 13.5px/1.25 Georgia,serif;color:#1b1a16}
.mmag-toc button b{font:400 15px/1.1 "Holtwood One SC",Georgia,serif;color:#b8231c}
.mmag-toc button:hover,.mmag-toc button:focus-visible{background:rgba(184,35,28,.1);outline:none}
.mmag-photo{background:var(--pimg,none) center/cover #2a2620;filter:url(#mgame-post) contrast(1.08)}
.mmag-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.18) 0 .8px,transparent 1.2px) 0 0/4px 4px}
.mmag-folio{position:absolute;left:14px;bottom:12px;z-index:1;font:700 10px/1 var(--f-m);letter-spacing:.16em;color:#fff;background:rgba(0,0,0,.55);padding:5px 7px}
.mmag-story{padding:28px 30px 22px;display:flex;flex-direction:column;gap:12px}
.mmag-story h3{margin:0;font:700 clamp(20px,2.6vw,30px)/1.08 Georgia,"Times New Roman",serif;color:#1b1a16;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mmag-story p{margin:0;font:500 15px/1.55 Georgia,serif;color:#3a3226;display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.mmag-story p::first-letter{float:left;font:400 44px/.85 "Holtwood One SC",Georgia,serif;color:#b8231c;margin:4px 8px 0 0}
.mmag-link{color:inherit;text-decoration:none}
.mmag-link:hover h3,.mmag-link:focus-visible h3{text-decoration:underline}
.mmag-read{display:inline-block;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:#fff;background:#1b1a16;padding:12px 14px;border-radius:3px}
.mmag-num{margin-top:auto;align-self:flex-end;font:700 11px/1 var(--f-m);color:#6a5a46}
.mmag-bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:16px}
.mmag-pg{min-width:120px;text-align:center;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.16em;color:var(--gw-bone)}
.mmag-flip{position:absolute;inset:0;pointer-events:none;z-index:3;transform-style:preserve-3d}
.mmag-flip .mmag-spread{background:transparent;overflow:visible}
.mmag-flip .mmag-spread::after{display:none}
.mmag-flip.fwd .mmag-pg-l,.mmag-flip.back .mmag-pg-r{visibility:hidden}
.mmag-flip .mmag-pg-l,.mmag-flip .mmag-pg-r{background-color:#efe9da;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mmag-flip.fwd .mmag-pg-r{transform-origin:0 50%;animation:mturnf .75s cubic-bezier(.45,.05,.35,1) forwards}
.mmag-flip.back .mmag-pg-l{transform-origin:100% 50%;animation:mturnb .75s cubic-bezier(.45,.05,.35,1) forwards}
@keyframes mturnf{from{transform:rotateY(0);box-shadow:none}to{transform:rotateY(-180deg);box-shadow:-30px 0 40px rgba(0,0,0,.4)}}
@keyframes mturnb{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@media (max-width:700px){
.mmag-book{aspect-ratio:auto;height:600px}
.mmag-spread{grid-template-columns:1fr;grid-template-rows:230px 1fr}
.mmag-spread::after{display:none}
.mmag-spread:has(.mmag-cover){grid-template-rows:1fr}
.mmag-toc{display:none}
.mmag-story{padding:20px 18px 16px}
.mmag-story p{-webkit-line-clamp:9;font-size:14.5px}
.mmag-flip .mmag-pg-l,.mmag-flip .mmag-pg-r{visibility:visible!important;animation:none!important}
.mmag-flip.fwd .mmag-spread{transform-origin:0 50%;animation:mturnf .7s cubic-bezier(.45,.05,.35,1) forwards;backface-visibility:hidden;background:#efe9da}
.mmag-flip.back .mmag-spread{transform-origin:100% 50%;animation:mturnb .7s cubic-bezier(.45,.05,.35,1) forwards;backface-visibility:hidden;background:#efe9da}
}
@media (prefers-reduced-motion:reduce){.mmag-flip{display:none}}
/* v22 fixes */
[data-view="home"] .news.mhide{display:none!important}
.mld-tip{top:auto!important}
.mmag-photo{background:#1b1a16!important;filter:none}
.mmag-photo::before{content:"";position:absolute;inset:-24px;background:var(--pimg,none) center/cover;filter:blur(18px) brightness(.55) saturate(.7)}
.mmag-photo::after{background:radial-gradient(circle,rgba(0,0,0,.16) 0 .8px,transparent 1.2px) 0 0/4px 4px,var(--pimg,none) center/contain no-repeat!important;filter:url(#mgame-post) contrast(1.06)}
.mmag-story p{font-size:16.5px}
.mmag-also{margin-top:auto;display:grid;gap:2px;padding-top:12px;border-top:3px double #1b1a16}
.mmag-also button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:28px 1fr;gap:8px;padding:7px 4px;border-bottom:1px solid rgba(0,0,0,.13);font:600 13px/1.25 Georgia,serif;color:#1b1a16}
.mmag-also button b{font:400 14px/1.1 "Holtwood One SC",Georgia,serif;color:#b8231c}
.mmag-also button:hover,.mmag-also button:focus-visible{background:rgba(184,35,28,.1);outline:none}
.mmag-num{margin-top:4px}
@media (max-width:700px){.mmag-also button:nth-of-type(n+3){display:none}}
/* v22b (Rick): no shop window; magazine photos keep their own shape */
.mmag-pic{position:relative;display:block;overflow:hidden;background:#1b1a16;isolation:isolate}
.mmag-pic::before{content:"";position:absolute;inset:-24px;z-index:0;background:var(--pimg,none) center/cover;filter:blur(18px) brightness(.55) saturate(.7)}
.mmag-pic img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;filter:url(#mgame-post) contrast(1.05)}
.mmag-pic::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle,rgba(0,0,0,.14) 0 .8px,transparent 1.2px) 0 0/4px 4px}
.mmag-cover{background:#1b1a16!important;filter:none!important;padding:16px 18px!important;gap:10px}
.mmag-cover::before{display:none}
.mmag-cover .mmag-pic{flex:1;min-height:0;margin:2px -18px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mmag-cover .mmag-mast{color:#e8583a}
.mmag-cl{margin-top:0!important;max-width:calc(100% - 70px)}
.mmag-front{padding:24px 26px 40px;display:flex;flex-direction:column;gap:12px}
.mmag-front .mmag-pic{flex:1;min-height:120px;max-height:62%;border-radius:1px;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.mmag-front h3{margin:0;font:700 clamp(20px,2.4vw,28px)/1.08 Georgia,"Times New Roman",serif;color:#1b1a16;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mmag-front .mmag-folio{position:absolute;left:26px;bottom:14px;background:none;color:#6a5a46;padding:0}
.mmag-story{padding-top:34px!important}
@media (max-width:700px){
.mmag-book{height:auto;min-height:0;aspect-ratio:auto}
.mmag-spread{position:relative;grid-template-rows:auto auto!important;min-height:640px}
.mmag-spread:has(.mmag-cover){grid-template-rows:1fr!important}
.mmag-cover{min-height:600px}
.mmag-front{padding:18px 16px 30px}
.mmag-front .mmag-pic{flex:none;height:auto;max-height:none;aspect-ratio:16/11}
.mmag-story{padding:4px 16px 16px!important}
.mmag-flip .mmag-spread{position:absolute;inset:0}
}
/* phone: the Spotify player needs its full width, the speaker is smaller */
@media (max-width:700px){body{--spk-w:40px}body.mdeck-on .mdeck{padding-left:calc(var(--spk-w) + 14px);padding-right:8px}}
@media (min-width:701px){.mmag-story p{font-size:clamp(16px,1.45vw,20px)}}
@media (max-width:700px){.mld-year{top:6px!important;bottom:auto!important;left:12px;font-size:40px}.mld-stop{top:auto!important;bottom:calc(100% - 244px)!important}}
/* ===== v23 (09.11, Rick) ===== */
/* the second sign on the pipe is a link: rust, like the buttons, so it reads as "press me" */
.mpiped > .mpole .mblade.b{background:linear-gradient(#d8782f,#b4561a)!important;color:#1a0c04!important;box-shadow:inset 0 0 0 2px #8f4112,0 6px 10px rgba(0,0,0,.45)!important}
.mpiped > .mpole .mblade.b:hover,.mpiped > .mpole .mblade.b:focus-visible{background:linear-gradient(#ea8a3c,#c4621f)!important;box-shadow:inset 0 0 0 2px #8f4112,0 0 0 3px var(--gw-gold)!important}
/* DJs: the real photo fades in over the game portrait (hover; on a phone when the card is mid-screen) */
[data-view="home"] .rail .mdj .mdj-orig{position:absolute;left:0;right:0;top:0;aspect-ratio:3/4;z-index:1;pointer-events:none;background-size:cover;background-position:center 25%;opacity:0;transition:opacity .45s ease}
[data-view="home"] .rail .mdj .pc-body{z-index:2}
[data-view="home"] .rail .mdj:hover .mdj-orig,[data-view="home"] .rail .mdj:focus-within .mdj-orig,[data-view="home"] .rail .mdj.mdj-real .mdj-orig{opacity:1}
[data-view="home"] .rail .mdj:hover .pc-art,[data-view="home"] .rail .mdj .pc-art:focus-visible{filter:url(#mgame-green) contrast(1.05)!important}
@media (prefers-reduced-motion:reduce){[data-view="home"] .rail .mdj .mdj-orig{transition:none}}
/* seams (Rick: «щоб усе з одного в друге переливалось»):
1. a block out of focus dims only its content; the wall photo and the pipe stay, so the wall never changes brightness at a block edge */
.mfocusable:not(.mlit){filter:none!important}
.mfocusable > :not(.mside):not(.mpole){transition:filter .7s ease}
.mfocusable:not(.mlit) > :not(.mside):not(.mpole){filter:brightness(.55) saturate(.65)}
/* 2. the wall photos run past their block and melt into the next one (left/right alternate, so they cross-fade) */
.mpiped.mwall,.mpiped.mdyk{overflow-x:clip!important;overflow-y:visible!important}
.mpiped > .mside{top:-160px;bottom:-160px;
-webkit-mask-image:linear-gradient(270deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(270deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
.mright.mpiped > .mside{-webkit-mask-image:linear-gradient(90deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 30%,#000 70%,transparent 100%)}
@media (max-width:700px){.mpiped > .mside{top:-90px;bottom:-90px}}
/* 3. the painted city on the wall has no hard bottom edge any more */
.mpw-city{-webkit-mask-image:linear-gradient(180deg,transparent 300px,#000 660px,#000 820px,transparent 960px,transparent 1700px,#000 2060px,#000 2220px,transparent 2360px,transparent 3100px,#000 3460px,#000 3620px,transparent 3760px);
mask-image:linear-gradient(180deg,transparent 300px,#000 660px,#000 820px,transparent 960px,transparent 1700px,#000 2060px,#000 2220px,transparent 2360px,transparent 3100px,#000 3460px,#000 3620px,transparent 3760px)}
@media (max-width:760px){.mpw-city{-webkit-mask-image:linear-gradient(180deg,transparent 188px,#000 412px,#000 510px,transparent 600px,transparent 1063px,#000 1288px,#000 1385px,transparent 1475px,transparent 1938px,#000 2163px,#000 2260px,transparent 2350px);
mask-image:linear-gradient(180deg,transparent 188px,#000 412px,#000 510px,transparent 600px,transparent 1063px,#000 1288px,#000 1385px,transparent 1475px,transparent 1938px,#000 2163px,#000 2260px,transparent 2350px)}}
/* the green skin paints any ".next" as a dark band; the NEXT poster button must stay on the wall */
.mwb.next{background:none!important;border:0!important}
/* ===== v24 (09.11, Rick: «це клас, переносимо»): the BBOY TOWN magazine from mockups/magazine (all classes mz-, scoped under .mzine) ===== */
.mzine{
--wall:#1d3a2e; /* the game's teal-green wall */
--paper:#efe6cf; /* newsprint */
--paper-2:#e3d6b6; /* older, yellowed paper */
--ink:#17130e; /* press black */
--red:#c62b1f; /* masthead red */
--yellow:#e9bd2b; /* cover yellow */
--cyan:#1f9fd0; /* misregistered plate */
--tape:rgba(214,190,128,.82);
--f-game:"Holtwood One SC",Georgia,serif;
--f-mast:"Bowlby One SC","Arial Black",Impact,sans-serif;
--f-head:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
--f-tag:"Sedgwick Ave Display","Marker Felt","Comic Sans MS",cursive;
--f-body:"PT Serif",Georgia,"Times New Roman",serif;
--f-type:"Courier Prime","Courier New",monospace;
}
.mzine .mz-stage{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:center}
@media (max-width:820px){.mzine .mz-bar small{display:none}
.mzine .mz-bar{gap:12px}}
.mzine .mz-book{position:relative;width:100%;max-width:1120px;perspective:2200px;outline:none}
.mzine .mz-spread{display:grid;grid-template-columns:1fr 1fr;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));transform:rotate(-.4deg)}
.mzine .mz-spread::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:60px;transform:translateX(-50%);pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(0,0,0,.28) 45%,rgba(0,0,0,.42) 50%,rgba(0,0,0,.28) 55%,transparent)}
.mzine .mz-pg{position:relative;min-width:0;min-height:740px;padding:34px 34px 52px;background:var(--paper);color:var(--ink);overflow:hidden;isolation:isolate}
.mzine .mz-pg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
.mzine .mz-l{box-shadow:inset -18px 0 24px -18px rgba(0,0,0,.35)}
.mzine .mz-r{box-shadow:inset 18px 0 24px -18px rgba(0,0,0,.35)}
.mzine .mz-folio{position:absolute;bottom:16px;left:34px;right:34px;display:flex;justify-content:space-between;font:700 11px/1 var(--f-type);letter-spacing:.14em;color:#5b5140;border-top:1px solid #b9ab8a;padding-top:8px}
.mzine .mz-book.mz-one .mz-spread{grid-template-columns:1fr;transform:none}
.mzine .mz-book.mz-one .mz-spread::after{display:none}
.mzine .mz-book.mz-one .mz-pg{min-height:0;padding:22px 18px 50px}
.mzine .mz-book.mz-one .mz-folio{left:18px;right:18px}
.mzine .mz-leaf{position:absolute;top:0;bottom:0;width:50%;transform-style:preserve-3d;z-index:5;pointer-events:none}
.mzine .mz-leaf.mz-fwd{left:50%;transform-origin:0 50%;animation:mzturnF .75s cubic-bezier(.45,.05,.3,1) forwards}
.mzine .mz-leaf.mz-back{left:0;transform-origin:100% 50%;animation:mzturnB .75s cubic-bezier(.45,.05,.3,1) forwards}
.mzine .mz-leaf > .mz-pg{position:absolute;inset:0;min-height:0;backface-visibility:hidden}
.mzine .mz-leaf > .mz-pg.mz-bs{transform:rotateY(180deg)}
@keyframes mzturnF{to{transform:rotateY(-180deg)}}
@keyframes mzturnB{to{transform:rotateY(180deg)}}
.mzine .mz-book.mz-one .mz-leaf{width:100%}
.mzine .mz-book.mz-one .mz-leaf.mz-fwd{left:0;transform-origin:0 50%;animation:mzpeelF .6s cubic-bezier(.45,.05,.3,1) forwards}
.mzine .mz-book.mz-one .mz-leaf.mz-back{left:0;transform-origin:0 50%;animation:mzpeelB .6s cubic-bezier(.45,.05,.3,1) forwards}
@keyframes mzpeelF{0%{transform:rotateY(0);opacity:1}100%{transform:rotateY(-105deg);opacity:.2}}
@keyframes mzpeelB{0%{transform:rotateY(-105deg);opacity:.2}100%{transform:rotateY(0);opacity:1}}
.mzine .mz-bar{display:flex;align-items:center;gap:14px;justify-content:center;padding:8px 14px;border-radius:6px;background:linear-gradient(#10251b,#08150f);box-shadow:inset 0 0 0 2px rgba(216,214,204,.22),0 8px 18px rgba(0,0,0,.45)}
.mzine .mz-bar button{all:unset;cursor:pointer;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:3px solid var(--paper);color:var(--paper);font:700 18px/1 var(--f-type);background:rgba(10,22,16,.55)}
.mzine .mz-bar button:hover,.mzine .mz-bar button:focus-visible{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.mzine .mz-bar span{min-width:110px;text-align:center;font:400 12px/1 var(--f-game);letter-spacing:.14em;color:var(--paper);text-shadow:0 2px 0 #000}
.mzine .mz-bar small{font:400 11px/1 var(--f-game);letter-spacing:.14em;color:#e0864a}
.mzine .mz-note{max-width:640px;font:13px/1.55 var(--f-type);color:#cfe0d6;background:rgba(6,16,11,.72);padding:14px 16px;border-radius:4px}
.mzine .mz-note b{color:var(--yellow)}
.mzine .mz-tape{position:absolute;width:96px;height:26px;background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.18);z-index:3;
clip-path:polygon(0 8%,6% 0,12% 10%,18% 2%,82% 0,88% 9%,94% 1%,100% 10%,98% 92%,92% 100%,86% 90%,80% 100%,20% 97%,14% 100%,8% 91%,2% 100%)}
.mzine .mz-kick{display:inline-flex;gap:8px;align-items:center;font:700 11px/1 var(--f-type);letter-spacing:.16em;text-transform:uppercase}
.mzine .mz-kick b{background:var(--ink);color:var(--paper);padding:5px 7px}
.mzine .mz-read{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:9px 12px;min-height:40px;background:var(--red);color:#fff;text-decoration:none;font:700 12px/1 var(--f-type);letter-spacing:.12em;box-shadow:3px 3px 0 var(--ink)}
.mzine .mz-read:hover,.mzine .mz-read:focus-visible{background:var(--ink);outline:none}
.mzine .mz-photo{position:relative;margin:0;background:#fff;padding:8px 8px 6px;box-shadow:0 6px 12px rgba(0,0,0,.28)}
.mzine .mz-photo img{display:block;width:100%;height:auto;filter:url(#mz-g) contrast(1.05)}
.mzine .mz-photo .mz-dots{position:absolute;inset:8px 8px 30px;pointer-events:none;mix-blend-mode:multiply;opacity:.35;
background:radial-gradient(circle,#000 .8px,transparent 1.2px) 0 0/4px 4px}
.mzine .mz-photo figcaption{font:400 10.5px/1.35 var(--f-type);color:#4a4235;padding-top:6px}
.mzine .mz-photo figcaption a{color:inherit}
.mzine .mz-spray{position:absolute;font:400 var(--s,90px)/1 var(--f-tag);color:var(--c,var(--red));opacity:var(--o,.85);transform:rotate(var(--rot,-8deg));pointer-events:none;
text-shadow:2px 2px 0 rgba(0,0,0,.25);z-index:0;white-space:nowrap}
.mzine h2,.mzine h3{text-wrap:balance}
.mzine .mz-cover{background:var(--yellow);display:flex;flex-direction:column;gap:14px}
.mzine .mz-cover::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background:radial-gradient(circle,#b8860b 1px,transparent 1.6px) 0 0/6px 6px}
.mzine .mz-strap{display:flex;justify-content:space-between;gap:10px;font:700 11px/1.2 var(--f-type);letter-spacing:.12em}
.mzine .mz-mast{margin:-6px 0 0;font:400 clamp(58px,9.4vw,108px)/.86 var(--f-mast);letter-spacing:-.01em;color:var(--red);
-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink),-2px 0 0 var(--cyan)}
.mzine .mz-book.mz-one .mz-mast{font-size:clamp(46px,15vw,68px)}
.mzine .mz-mast small{display:block;font-size:.42em;color:var(--ink);-webkit-text-stroke:0;text-shadow:none;letter-spacing:.06em;margin-top:6px}
.mzine .mz-cover .mz-spray{--s:40px;--c:var(--ink);--o:.88;right:22px;top:196px;--rot:-7deg}
.mzine .mz-book.mz-one .mz-cover .mz-spray{display:none}
.mzine .mz-cover-photo{position:relative;align-self:center;width:88%;transform:rotate(1.6deg);margin-top:6px}
.mzine .mz-cover-photo img{filter:contrast(1.12) saturate(1.15)}
.mzine .mz-cover-photo .mz-tape{top:-12px;left:42%;transform:rotate(-4deg)}
.mzine .mz-lines{display:grid;gap:8px;margin:auto 0 0;padding:0}
.mzine .mz-lines li{list-style:none}
.mzine .mz-lines b{display:inline;background:var(--ink);color:var(--paper);font:900 clamp(18px,2.2vw,24px)/1.32 var(--f-head);text-transform:uppercase;padding:2px 8px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mzine .mz-lines .mz-lead b{background:var(--red);color:#fff;font-size:clamp(22px,2.8vw,30px)}
.mzine .mz-lines ul{margin:0;padding:0;display:grid;gap:6px}
.mzine .mz-burst{position:absolute;right:18px;bottom:110px;width:104px;height:104px;display:grid;place-items:center;text-align:center;transform:rotate(12deg);
background:var(--red);color:#fff;font:900 15px/1 var(--f-head);text-transform:uppercase;z-index:4;
clip-path:polygon(50% 0,61% 13%,77% 6%,79% 23%,95% 23%,89% 39%,100% 50%,89% 61%,95% 77%,79% 77%,77% 94%,61% 87%,50% 100%,39% 87%,23% 94%,21% 77%,5% 77%,11% 61%,0 50%,11% 39%,5% 23%,21% 23%,23% 6%,39% 13%)}
.mzine .mz-burst span{font-size:30px;display:block}
.mzine .mz-book.mz-one .mz-burst{width:82px;height:82px;font-size:12px;bottom:auto;top:150px;right:10px}
.mzine .mz-book.mz-one .mz-burst span{font-size:22px}
.mzine .mz-cov-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;font:700 11px/1.3 var(--f-type);letter-spacing:.12em}
.mzine .mz-barcode{position:relative;flex:none;width:84px;height:44px;background:#fff;padding:4px 5px 12px}
.mzine .mz-barcode::before{content:"";display:block;height:100%;background:repeating-linear-gradient(90deg,#000 0 2px,#fff 2px 3px,#000 3px 4px,#fff 4px 7px,#000 7px 10px,#fff 10px 11px)}
.mzine .mz-barcode::after{content:"0 26112 02295 7";position:absolute;left:0;right:0;bottom:2px;text-align:center;font:700 7px/1 var(--f-type);color:#000}
.mzine .mz-cover .mz-folio{color:var(--ink);border-color:rgba(0,0,0,.35)}
.mzine .mz-toc h2{margin:0;font:900 64px/.9 var(--f-head);text-transform:uppercase;letter-spacing:-.01em}
.mzine .mz-toc h2 em{font-style:normal;color:var(--red)}
.mzine .mz-stamp{display:inline-block;margin:12px 0 18px;padding:6px 10px;border:2px solid var(--red);color:var(--red);font:700 11px/1.3 var(--f-type);letter-spacing:.14em;transform:rotate(-2deg)}
.mzine .mz-toc-sec{margin:14px 0 4px;font:400 26px/1 var(--f-tag);color:var(--red)}
.mzine .mz-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mzine .mz-toc li button{all:unset;cursor:pointer;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;width:100%;padding:6px 0;border-bottom:1px dashed #b3a37e;font:700 15px/1.25 var(--f-body)}
.mzine .mz-toc li button b{font:900 22px/1 var(--f-head);color:var(--red);font-variant-numeric:tabular-nums}
.mzine .mz-toc li button:hover span,.mzine .mz-toc li button:focus-visible span{text-decoration:underline;outline:none}
.mzine .mz-ed{margin-top:18px;padding:12px 14px;background:var(--paper-2);font:italic 14px/1.5 var(--f-body);border-left:5px solid var(--ink)}
.mzine .mz-ed b{font-style:normal}
.mzine .mz-dark{background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:18px}
.mzine .mz-dark::before{opacity:.25;mix-blend-mode:screen}
.mzine .mz-dark .mz-photo{transform:rotate(-1.4deg)}
.mzine .mz-dark .mz-photo .mz-tape{top:-12px;left:12%;transform:rotate(-6deg)}
.mzine .mz-dark .mz-photo .mz-tape.mz-t2{left:auto;right:12%;transform:rotate(5deg)}
.mzine .mz-ransom{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0}
.mzine .mz-ransom .mz-w{display:inline-flex;gap:4px;white-space:nowrap}
.mzine .mz-book.mz-one .mz-sec-h{font-size:32px}
.mzine .mz-ransom i{font-style:normal;display:inline-grid;place-items:center;min-width:.8em;padding:2px 5px;line-height:1;transform:rotate(var(--r,0deg))}
.mzine .mz-dark .mz-folio{color:#a99c80;border-color:#4b4335}
.mzine .mz-lead-t .mz-kick{margin-bottom:12px}
.mzine .mz-lead-t h2{margin:0 0 16px;font:900 clamp(40px,4.6vw,62px)/.92 var(--f-head);text-transform:uppercase;letter-spacing:-.005em}
.mzine .mz-lead-t h2 a{color:inherit;text-decoration:none}
.mzine .mz-lead-t h2 a:hover{color:var(--red)}
.mzine .mz-lead-t .mz-dek{font:400 19px/1.55 var(--f-body);margin:0 0 18px;max-width:34em}
.mzine .mz-lead-t .mz-dek::first-letter{float:left;font:900 74px/.8 var(--f-head);color:var(--red);padding:6px 8px 0 0}
.mzine .mz-lead-t .mz-spray{--s:110px;right:-10px;bottom:70px;--o:.14;--c:var(--ink);--rot:-12deg}
.mzine .mz-book.mz-one .mz-lead-t h2{font-size:40px}
.mzine .mz-sec-h{margin:0 0 18px;font:900 42px/1 var(--f-head);text-transform:uppercase}
.mzine .mz-sec-h .mz-w i:nth-child(4n+1){background:var(--ink);color:var(--paper);--r:-3deg}
.mzine .mz-sec-h .mz-w i:nth-child(4n+2){background:var(--red);color:#fff;--r:2deg;font-family:var(--f-mast);font-size:.8em}
.mzine .mz-sec-h .mz-w i:nth-child(4n+3){background:#fff;color:var(--ink);--r:-1deg;font-family:var(--f-body);font-weight:700;border:2px solid var(--ink)}
.mzine .mz-sec-h .mz-w i:nth-child(4n){background:var(--yellow);color:var(--ink);--r:4deg}
.mzine .mz-sec-h small{display:block;width:100%;margin-top:8px;font:700 11px/1 var(--f-type);letter-spacing:.16em;color:#5b5140}
.mzine .mz-story{position:relative;display:grid;gap:10px;padding-bottom:18px;margin-bottom:18px;border-bottom:3px double #a8996f}
.mzine .mz-story:last-of-type{border-bottom:0;margin-bottom:0}
.mzine .mz-story .mz-photo{width:92%;transform:rotate(var(--pr,-1deg))}
.mzine .mz-story:nth-of-type(2) .mz-photo{--pr:1.2deg;justify-self:end}
.mzine .mz-story .mz-photo .mz-tape{top:-11px;left:40%;transform:rotate(3deg);width:80px;height:22px}
.mzine .mz-story h3{margin:2px 0 0;font:900 30px/.98 var(--f-head);text-transform:uppercase}
.mzine .mz-story h3 a{color:inherit;text-decoration:none}
.mzine .mz-story h3 a:hover{color:var(--red)}
.mzine .mz-story p{margin:0;font:400 15.5px/1.55 var(--f-body)}
.mzine .mz-story.mz-noimg{background:var(--ink);color:var(--paper);padding:20px 18px 22px;border:0;transform:rotate(-.6deg)}
.mzine .mz-story.mz-noimg h3{font-size:36px}
.mzine .mz-story.mz-noimg h3::before{content:"\201C";display:block;font:400 80px/.5 var(--f-mast);color:var(--red);margin:14px 0 6px}
.mzine .mz-story.mz-noimg .mz-kick b{background:var(--red)}
.mzine .mz-pg .mz-spray.mz-side{--s:70px;--o:.12;--c:var(--ink);right:10px;top:40%;--rot:-80deg}
.mzine .mz-nexti h2{margin:0 0 6px;font:900 56px/.9 var(--f-head);text-transform:uppercase}
.mzine .mz-nexti .mz-clock{display:inline-block;margin:6px 0 18px;padding:8px 12px;background:var(--ink);color:var(--yellow);font:700 22px/1 var(--f-type);letter-spacing:.1em}
.mzine .mz-nexti ul{margin:0;padding-left:18px;font:15px/1.6 var(--f-body)}
.mzine .mz-ad{background:var(--red);color:#fff;display:flex;flex-direction:column;gap:14px;text-align:center;align-items:center;justify-content:center}
.mzine .mz-ad::before{opacity:.25}
.mzine .mz-ad .mz-wanted{font:400 clamp(54px,7vw,86px)/.9 var(--f-mast);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;color:var(--yellow);text-shadow:5px 5px 0 var(--ink)}
.mzine .mz-ad p{margin:0;max-width:24em;font:700 18px/1.45 var(--f-body)}
.mzine .mz-ad .mz-coupon{border:3px dashed #fff;padding:16px 18px;display:grid;gap:8px;max-width:340px}
.mzine .mz-ad .mz-coupon b{font:900 30px/1 var(--f-head);text-transform:uppercase}
.mzine .mz-ad .mz-coupon span{font:700 12px/1.4 var(--f-type);letter-spacing:.1em}
.mzine .mz-ad a.mz-read{background:var(--ink)}
.mzine .mz-ad .mz-folio{color:#ffd9cf;border-color:rgba(255,255,255,.4)}
.mzine .mz-book:not(.mz-one) .mz-story{grid-template-columns:minmax(0,46%) minmax(0,1fr);column-gap:20px;row-gap:8px;align-items:start;align-content:start}
.mzine .mz-book:not(.mz-one) .mz-story .mz-photo{grid-row:1 / span 5;width:100%;margin-top:6px}
.mzine .mz-book:not(.mz-one) .mz-story:nth-of-type(2) .mz-photo{justify-self:stretch}
.mzine .mz-book:not(.mz-one) .mz-story h3{font-size:26px}
.mzine .mz-book:not(.mz-one) .mz-story p{font-size:14.5px}
.mzine .mz-book:not(.mz-one) .mz-story .mz-read{justify-self:start}
.mzine .mz-book:not(.mz-one) .mz-story.mz-noimg{grid-template-columns:1fr}
.mzine .mz-book:not(.mz-one) .mz-toc li button{padding:5px 0;font-size:13.5px}
.mzine .mz-book:not(.mz-one) .mz-toc li button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mzine .mz-book:not(.mz-one) .mz-toc li button b{font-size:19px}
.mzine .mz-book:not(.mz-one) .mz-toc-sec{margin-top:10px;font-size:22px}
.mzine .mz-book:not(.mz-one) .mz-toc h2{font-size:56px}
.mzine .mz-book:not(.mz-one) .mz-pg{min-height:760px}
.mzine .mz-pg{clip-path:polygon(0 .6%,4% 0,31% .5%,58% 0,83% .4%,100% 0,100% 100%,76% 99.6%,49% 100%,22% 99.5%,0 100%,.4% 71%,0 44%,.5% 18%)}
.mzine .mz-pg.mz-r{clip-path:polygon(0 0,21% .5%,47% 0,73% .6%,96% 0,100% .7%,99.5% 27%,100% 55%,99.4% 82%,100% 100%,61% 99.5%,33% 100%,0 99.6%)}
.mzine .mz-book.mz-one .mz-pg.mz-r{clip-path:polygon(0 .5%,6% 0,35% .4%,64% 0,92% .5%,100% 0,99.4% 30%,100% 62%,99.5% 100%,70% 99.6%,38% 100%,8% 99.5%,0 100%,.5% 66%,0 35%)}
.mzine .mz-wear{position:absolute;inset:0;z-index:6;pointer-events:none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .97 0 0 0 0 .95 0 0 0 0 .9 18 0 0 0 -13.2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)'/%3E%3C/svg%3E"),
linear-gradient(var(--ca,74deg),transparent calc(var(--cp,40%) - 2px),rgba(255,250,235,.38) var(--cp,40%),rgba(60,40,15,.16) calc(var(--cp,40%) + 1.5px),transparent calc(var(--cp,40%) + 4px)),
linear-gradient(180deg,transparent calc(50% - 2px),rgba(60,40,15,.1) 50%,rgba(255,250,235,.3) calc(50% + 1.5px),transparent calc(50% + 4px)),
radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(96,66,24,.26) 100%);
opacity:.75}
.mzine .mz-dark .mz-wear,.mzine .mz-ad .mz-wear{opacity:.7}
.mzine .mz-wear.mz-cof::after{content:"";position:absolute;width:150px;height:150px;right:var(--cx,12%);top:var(--cy,58%);border-radius:50%;transform:rotate(20deg) scaleX(1.06);
background:radial-gradient(circle,transparent 60px,rgba(122,74,24,.26) 64px,rgba(122,74,24,.1) 68px,transparent 72px),radial-gradient(circle at 40% 40%,rgba(122,74,24,.06),transparent 60%)}
.mzine .mz-wear.mz-ear::before{content:"";position:absolute;right:0;bottom:0;width:48px;height:48px;
background:linear-gradient(315deg,var(--wall) 50%,#cdbb92 50%,#e6d8b4 78%);filter:drop-shadow(-3px -3px 3px rgba(0,0,0,.25))}
.mzine .mz-book:not(.mz-one) .mz-spread::before{content:"";position:absolute;left:50%;top:26%;width:4px;height:48%;transform:translateX(-50%);z-index:7;pointer-events:none;
background:linear-gradient(#c9ccc8,#7f8682) 0 0/4px 34px no-repeat,linear-gradient(#c9ccc8,#7f8682) 0 100%/4px 34px no-repeat}
.mzine .mz-city{position:relative;margin:2px -34px -6px;height:74px;background:url("img/metro/gsil-home.webp?v=9") 50% 100%/auto 100% repeat-x;image-rendering:pixelated;opacity:.92;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mzine .mz-book.mz-one .mz-city{margin:2px -18px -6px;height:56px}
.mzine .mz-sec .mz-foot-city,.mzine .mz-toc .mz-foot-city,.mzine .mz-lead-t .mz-foot-city{position:absolute;left:0;right:0;bottom:38px;height:46px;background:url("img/metro/gsil-el.webp?v=9") 50% 100%/auto 100% repeat-x;image-rendering:pixelated;opacity:.16;z-index:-1;pointer-events:none}
.mzine .mz-pg .mz-folio span:first-child,.mzine .mz-pg .mz-folio span:last-child{font-family:var(--f-game);font-weight:400;letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.mzine .mz-leaf{display:none}}
.mzine{width:100%;margin:8px 0 10px}
.mzine .mz-book:not(.mz-one) .mz-mast{font-size:clamp(58px,6.6vw,90px)}
.mzine .mz-book:not(.mz-one) .mz-mast small{font-size:.4em}
/* ===== v26 (10.11, Rick): News · Events · Music · History · School · Cypher live in the Spot ===== */
.mspot-strip{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
padding:8px max(12px,env(safe-area-inset-left,0px));background:linear-gradient(#10251b,#08150f);box-shadow:inset 0 -2px 0 rgba(216,214,204,.12),0 6px 14px rgba(0,0,0,.35);position:relative;z-index:3}
.mspot-strip::-webkit-scrollbar{display:none}
.mspot-strip a{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:6px;text-decoration:none;
font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:var(--gw-bone)}
.mspot-strip a:hover,.mspot-strip a:focus-visible{background:#1d3226;outline:none}
.mspot-strip a[aria-current="page"]{background:var(--gw-rust);color:#160a04}
.mspot-strip .mspot-home{color:var(--gw-rust-lt);box-shadow:inset 0 0 0 1px rgba(224,134,74,.45);margin-right:6px}
.mspot-strip .mspot-home svg{width:16px;height:16px}
@media (min-width:981px){.mspot-strip{justify-content:center}}
.mspot-m a[aria-current="page"]{color:var(--gw-bone)}
#nav.metro a.mdoor[aria-current="page"]{background:var(--gw-rust)!important;color:#160a04!important;box-shadow:none!important}
/* ===== v26c (10.11, Rick): members' stations dimmed with a padlock for guests, they light up after sign-in ===== */
.mst .mst-lock{position:absolute;top:-6px;right:50%;transform:translateX(15px);width:12px;height:12px;color:var(--gw-rust-lt);filter:drop-shadow(0 1px 0 #000);pointer-events:none}
.mst.mst-locked .dot,.mst.mst-locked .nm{opacity:.38;filter:saturate(.2)}
.mst.mst-locked:hover .nm,.mst.mst-locked:focus-visible .nm{opacity:.7}
.mst.mst-knock{animation:mknock .45s ease}
@keyframes mknock{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.mst.mst-open .dot{animation:mopen 1.1s ease var(--ud,0s) both}
.mst.mst-open .nm{animation:mopenT 1.1s ease var(--ud,0s) both}
@keyframes mopen{0%{box-shadow:0 0 0 0 rgba(242,196,48,0);transform:scale(1)}35%{box-shadow:0 0 0 8px rgba(242,196,48,.55),0 0 22px 8px rgba(242,196,48,.6);transform:scale(1.5);background:#f2c430}100%{box-shadow:0 0 0 0 rgba(242,196,48,0);transform:scale(1)}}
@keyframes mopenT{0%{opacity:.38}35%{opacity:1;color:#f2c430;text-shadow:0 0 12px rgba(242,196,48,.9)}100%{opacity:1}}
.munlock{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:60;display:grid;gap:6px;justify-items:center;text-align:center;
padding:14px 22px;border-radius:8px;background:linear-gradient(#10251b,#08150f);box-shadow:inset 0 0 0 2px #f2c430,0 14px 30px rgba(0,0,0,.6);
animation:munl 4.2s ease both;pointer-events:none;max-width:calc(100vw - 32px)}
.munlock b{font:400 clamp(16px,4vw,22px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#f2c430}
.munlock span{font:700 11px/1.3 var(--f-m,monospace);letter-spacing:.14em;color:var(--gw-bone)}
@keyframes munl{0%{opacity:0;transform:translate(-50%,-16px) scale(.9)}10%,82%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px)}}
/* the lock screen on a members' page */
.mlocked > :not(.phead):not(.mlock){display:none!important}
.mlock{padding:48px max(16px,env(safe-area-inset-left,0px)) 56px;display:grid;place-items:center}
.mlock-in{max-width:460px;display:grid;gap:12px;justify-items:center;text-align:center;padding:26px 22px;border-radius:8px;background:linear-gradient(#10251b,#08150f);box-shadow:inset 0 0 0 2px rgba(216,214,204,.22),0 14px 30px rgba(0,0,0,.45)}
.mlock-key{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#1a0d08;color:var(--gw-rust-lt);box-shadow:inset 0 0 0 2px rgba(224,134,74,.5)}
.mlock-key svg{width:26px;height:26px}
.mlock-in b{font:400 22px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:#f2c430}
.mlock-in p{margin:0;color:var(--gw-bone);font-size:15px;line-height:1.5}
.mlock-back{font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:var(--gw-bone);text-decoration:none;padding:12px}
@media (prefers-reduced-motion:reduce){.mst.mst-open .dot,.mst.mst-open .nm,.munlock,.mst.mst-knock{animation:none}}
/* ===== v27 (10.11, Rick): three magazines on the NEWS page — BBOY TOWN (breaking), THE CUT (DJs), BLOCK REPORT (hip-hop) ===== */
/* --- the rack --- */
.mnewsmag{padding:22px max(16px,env(safe-area-inset-left,0px)) 34px}
.mrack-h{margin:0 0 10px;text-align:center;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.16em;color:var(--gw-bone)}
.mrack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:720px;margin:0 auto 22px}
.mrack-c{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;align-content:start;gap:6px;min-height:118px;padding:12px 10px 10px;border-radius:3px;
box-shadow:0 8px 16px rgba(0,0,0,.45);transform:rotate(var(--rr,-1.2deg));transition:transform .2s ease,filter .2s ease;filter:brightness(.62) saturate(.7)}
.mrack-c:nth-child(2){--rr:.8deg}.mrack-c:nth-child(3){--rr:-.5deg}
.mrack-c[aria-selected="true"]{filter:none;transform:rotate(0) translateY(-4px) scale(1.04);box-shadow:0 0 0 3px #f2c430,0 14px 22px rgba(0,0,0,.55)}
.mrack-c:hover,.mrack-c:focus-visible{filter:none;outline:none}
.mrack-c b{display:block;line-height:.9;word-break:break-word}
.mrack-c small{font:700 10px/1.2 "Courier Prime","Courier New",monospace;letter-spacing:.12em;text-transform:uppercase}
.mrack-c i{position:absolute;left:10px;bottom:8px;font:700 9.5px/1 "Courier Prime","Courier New",monospace;letter-spacing:.1em;font-style:normal;opacity:.85}
.mrack-c.mz-t-city{background:#e9bd2b;color:#17130e}
.mrack-c.mz-t-city b{font:400 clamp(20px,5vw,30px)/.86 "Bowlby One SC","Arial Black",sans-serif;color:#c62b1f;-webkit-text-stroke:1.5px #17130e;paint-order:stroke fill;text-shadow:2px 2px 0 #17130e}
.mrack-c.mz-t-cut{background:radial-gradient(circle at 78% 70%,#e0307c 0 10px,#0c0c0e 11px 12px,transparent 13px),repeating-radial-gradient(circle at 78% 70%,#1d1d22 0 1.5px,#0c0c0e 1.5px 3px);color:#e8e8ec}
.mrack-c.mz-t-cut b{font:400 clamp(20px,5vw,30px)/1 "Monoton",cursive;color:#ff4f9a;text-shadow:0 0 10px rgba(255,79,154,.6)}
.mrack-c.mz-t-block{background:#e8e6df;color:#151515}
.mrack-c.mz-t-block b{font:400 clamp(15px,3.8vw,22px)/1 "Alfa Slab One",Georgia,serif;color:#fff;background:#151515;padding:5px 6px 4px;margin:0 -10px;box-shadow:3px 3px 0 #1f6b4a}
.mzine .mz-empty,.mz-empty{text-align:center;color:var(--gw-bone);font:15px/1.5 "Courier Prime",monospace}
/* --- THE CUT: black record sleeve, hot pink neon, chrome --- */
.mzine.mz-t-cut{--paper:#f0efea;--paper-2:#e2e1db;--ink:#0f0f12;--red:#e0307c;--yellow:#cfd3d8;--cyan:#22c6dc}
.mzine.mz-t-cut .mz-cover{color:#e8e8ec;background:
radial-gradient(circle at 76% 26%,#e0307c 0 46px,#0c0c0e 47px 50px,transparent 51px),
radial-gradient(circle at 76% 26%,transparent 0 228px,#0c0c0e 230px),
repeating-radial-gradient(circle at 76% 26%,#1e1e24 0 2px,#0b0b0d 2px 4px)}
.mzine.mz-t-cut .mz-cover::after{opacity:.12}
.mzine.mz-t-cut .mz-cover .mz-strap,.mzine.mz-t-cut .mz-cover .mz-cov-foot{color:#cfd3d8}
.mzine.mz-t-cut .mz-cover .mz-folio{color:#9a9aa3;border-color:rgba(255,255,255,.2)}
.mzine.mz-t-cut .mz-mast{font-family:"Monoton",cursive;font-weight:400;letter-spacing:.02em;color:#ff4f9a;-webkit-text-stroke:0;text-shadow:0 0 14px rgba(255,79,154,.75),3px 3px 0 #22c6dc;line-height:1}
.mzine.mz-t-cut .mz-mast small{color:#cfd3d8;font-family:"Courier Prime",monospace;font-weight:700;letter-spacing:.2em;text-shadow:none}
.mzine.mz-t-cut .mz-lines b{background:#e0307c;color:#fff}
.mzine.mz-t-cut .mz-lines .mz-lead b{background:#22c6dc;color:#0c0c0e}
.mzine.mz-t-cut .mz-burst{background:linear-gradient(135deg,#f4f5f7,#9da3ab 55%,#e6e8eb);color:#0c0c0e}
.mzine.mz-t-cut .mz-cover .mz-spray{--c:#22c6dc}
.mzine.mz-t-cut .mz-city{filter:brightness(2.4) saturate(.4);opacity:.5}
.mzine.mz-t-cut .mz-photo img{filter:grayscale(1) contrast(1.35) brightness(1.05)}
.mzine.mz-t-cut .mz-cover-photo .mz-photo img{filter:contrast(1.1) saturate(1.1)}
.mzine.mz-t-cut .mz-stamp{border-color:#e0307c;color:#e0307c}
.mzine.mz-t-cut .mz-toc h2 em{color:#e0307c}
.mzine.mz-t-cut .mz-ad .mz-wanted{color:#22c6dc}
/* --- BLOCK REPORT: photocopied street zine, black bar masthead, game green --- */
.mzine.mz-t-block{--paper:#e8e6df;--paper-2:#d8d5cc;--ink:#151515;--red:#1f6b4a;--yellow:#e0864a;--cyan:#e0864a}
.mzine.mz-t-block .mz-cover{background:#e8e6df;color:#151515}
.mzine.mz-t-block .mz-cover::after{opacity:.35;background:radial-gradient(circle,#151515 .6px,transparent 1.1px) 0 0/5px 5px}
.mzine.mz-t-block .mz-mast{font-family:"Alfa Slab One",Georgia,serif;font-weight:400;color:#fff;background:#151515;-webkit-text-stroke:0;text-shadow:4px 4px 0 #1f6b4a;
margin:0 -34px;padding:14px 34px 12px;transform:rotate(-1.4deg);font-size:clamp(46px,7vw,84px)!important;line-height:.95}
.mzine.mz-t-block .mz-book.mz-one .mz-mast{margin:0 -18px;padding:12px 18px 10px;font-size:clamp(34px,11vw,52px)!important}
.mzine.mz-t-block .mz-mast small{color:#e0864a;font-family:"Courier Prime",monospace;font-weight:700;letter-spacing:.18em;text-shadow:none}
.mzine.mz-t-block .mz-lines b{background:#fff;color:#151515;font-family:"Courier Prime",monospace;font-weight:700;font-size:clamp(14px,1.7vw,18px);box-shadow:inset 0 0 0 2px #151515;text-transform:none}
.mzine.mz-t-block .mz-lines .mz-lead b{background:#1f6b4a;color:#fff;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:clamp(22px,2.8vw,30px);text-transform:uppercase;box-shadow:none}
.mzine.mz-t-block .mz-burst{clip-path:circle(50%);background:#1f6b4a;transform:rotate(-8deg)}
.mzine.mz-t-block .mz-cover .mz-spray{--c:#151515}
.mzine.mz-t-block .mz-photo img,.mzine.mz-t-block .mz-cover-photo .mz-photo img{filter:grayscale(1) contrast(1.6) brightness(1.08)}
.mzine.mz-t-block .mz-photo .mz-dots{opacity:.5}
.mzine.mz-t-block .mz-stamp{border-color:#1f6b4a;color:#1f6b4a}
.mzine.mz-t-block .mz-toc h2 em{color:#1f6b4a}
.mzine.mz-t-block .mz-toc-sec{font-family:"Alfa Slab One",Georgia,serif;font-size:20px;color:#1f6b4a}
.mzine.mz-t-block .mz-ad{background:#151515}
.mzine.mz-t-block .mz-ad .mz-wanted{color:#e8e6df;text-shadow:5px 5px 0 #1f6b4a}
/* ===== v28 (10.11, Rick: «у DJs прибрати B-Boys, у B-Boys прибрати DJs») ===== */
/* v28b (Rick: «куди ти дів рейтинг?»): DJs keeps DJs | Rankings, B-Boys keeps B-Boys | Rankings, the Rankings page keeps all three */
[data-view="djs"] .people-seg a[href="#breakers"]{display:none!important}
[data-view="breakers"] .people-seg a[href="#djs"]{display:none!important}
/* phone: eight stations on the line now (DJS and B-BOYS apart) */
@media (max-width:980px){.tabbar.metro.mline-long a.mst{min-width:0}.tabbar.metro.mline-long .nm{font-size:8.5px;letter-spacing:.02em}}
/* ===== v29 (10.11, Rick): MUSIC = playlists · new music · THE RECORD SHOP; no radio, no training here ===== */
#music-tabs [data-mt="radio"],#music-tabs [data-mt="train"]{display:none!important}
.mshop{padding-block:6px 30px}
.mshop-head{display:grid;gap:6px;justify-items:center;text-align:center;margin:0 auto 18px;max-width:640px}
.mshop-head b{display:inline-block;padding:10px 18px 9px;border-radius:5px;background:linear-gradient(#1d7a4c,#13603b);box-shadow:inset 0 0 0 2px #0e4a2d,0 6px 10px rgba(0,0,0,.45);
font:400 clamp(18px,4.6vw,28px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#f6f6ee}
.mshop-head span{color:var(--gw-bone);font-size:14px;line-height:1.5}
/* crates: divider cards sticking out of a wooden crate */
.mshop-crates{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:0 auto 18px;padding:12px 10px 0;border-radius:6px 6px 0 0;
background:repeating-linear-gradient(90deg,#6b4523 0 46px,#5a391c 46px 48px),#6b4523;box-shadow:inset 0 -10px 0 #3e2712,0 8px 14px rgba(0,0,0,.4);max-width:720px}
.mshop-crates button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:3px;min-width:64px;min-height:52px;padding:8px 10px 14px;border-radius:6px 6px 0 0;
background:#e7dcc2;color:#2a1a0c;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);transform:translateY(8px);transition:transform .15s ease}
.mshop-crates button b{font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em}
.mshop-crates button i{font:700 10px/1 "Courier Prime","Courier New",monospace;font-style:normal;opacity:.7}
.mshop-crates button[aria-selected="true"]{background:#f2c430;transform:translateY(0)}
.mshop-crates button:focus-visible{outline:3px solid #f2c430;outline-offset:2px}
.mshop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 14px}
@media (max-width:520px){.mshop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}}
.msleeve{position:relative;display:grid;align-content:start;gap:6px;min-width:0}
.msleeve-cov{position:relative;display:block;aspect-ratio:1;background:#0b1712;box-shadow:0 8px 14px rgba(0,0,0,.5);overflow:visible}
.msleeve-cov img{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover}
.msleeve-blank{position:relative;z-index:2;display:grid;place-items:center;height:100%;padding:10px;text-align:center;font:400 14px/1.1 "Holtwood One SC",Georgia,serif;color:var(--gw-bone);background:#13251d}
.msleeve-disc{position:absolute;z-index:1;top:4%;right:-2%;width:92%;height:92%;border-radius:50%;background:radial-gradient(circle,#c3622f 0 14%,#111 15% 17%,transparent 18%),repeating-radial-gradient(circle,#1b1b1b 0 2px,#0a0a0a 2px 4px);transition:transform .3s ease}
.msleeve-cov:hover .msleeve-disc,.msleeve-cov:focus-visible .msleeve-disc{transform:translateX(22%)}
.msleeve-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.mprice{display:inline-flex;gap:5px;align-items:center;padding:4px 6px;border-radius:3px;font:700 10px/1 "Courier Prime","Courier New",monospace;letter-spacing:.04em;background:#f2c430;color:#1a1206;box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.mprice b{font:400 9px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em}
.mprice-vinyl{background:#c3622f;color:#fff}.mprice-cassette{background:#e7dcc2}.mprice-cd{background:#b9c4cc}.mprice-digital{background:#1d7a4c;color:#fff}
.mprice.msold{background:#4a4a4a;color:#ddd;text-decoration:line-through}
.msleeve h3{margin:2px 0 0;font:700 14px/1.25 var(--f-b,inherit);color:#f6f6ee;text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.msleeve p{margin:0;font-size:12px;color:#b9c7be}
.msleeve-buy{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.msleeve-buy a{display:inline-flex;align-items:center;min-height:36px;padding:0 10px;border-radius:5px;background:var(--gw-rust);color:#160a04;text-decoration:none;font:400 10px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em}
.msleeve-buy a.it{background:transparent;color:var(--gw-bone);box-shadow:inset 0 0 0 1px rgba(216,214,204,.4)}
.msleeve-buy a:hover,.msleeve-buy a:focus-visible{filter:brightness(1.1);outline:2px solid #f2c430;outline-offset:1px}
.mshop-more{display:block;margin:20px auto 0}
.mshop-note{margin:18px auto 0;max-width:640px;text-align:center;font-size:12px;color:#93a69a}
/* the lock shows only while the page is locked (signing in on a locked page opens it at once) */
.mlock{display:none!important}
.mlocked > .mlock{display:grid!important}
/* music tabs: three of them, on a phone they wrap instead of running off the screen */
#music-tabs{flex-wrap:wrap;row-gap:4px;border-radius:22px}
@media (max-width:520px){#music-tabs [data-mt]{font-size:12px;padding-inline:12px}}
/* ===== v29c (10.11, Rick: «у нашому стилі, в стилі гри»): the record shop as a game screen ===== */
.mshop-head{display:none}
.msg{max-width:1100px;margin:0 auto;border-radius:8px;overflow:hidden;background:linear-gradient(rgba(8,21,15,.86),rgba(8,21,15,.92)),url("img/metro/wall-tex-s.jpg?v=8") 0 0/420px 420px;
box-shadow:inset 0 0 0 2px rgba(216,214,204,.2),0 18px 34px rgba(0,0,0,.55)}
.msg-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;padding:12px 16px;background:linear-gradient(#c3622f,#9c4a1f);box-shadow:inset 0 -3px 0 #5c2a10}
.msg-title{font:400 clamp(18px,3.4vw,26px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#fff4e6;text-shadow:0 3px 0 #3a1a08}
.msg-crates{display:flex;gap:4px;flex-wrap:wrap}
.msg-crates button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:baseline;gap:6px;min-height:40px;padding:0 12px;border-radius:4px;
font:400 12px/40px "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#ffe4cc}
.msg-crates button i{font:700 10px/1 "Courier Prime",monospace;font-style:normal;opacity:.75}
.msg-crates button[aria-selected="true"]{background:#2a1206;color:#f2c430}
.msg-crates button[aria-selected="true"] span::before{content:"[ "}
.msg-crates button[aria-selected="true"] span::after{content:" ]"}
.msg-crates button:focus-visible{outline:3px solid #f2c430}
.msg-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;padding:18px}
/* the picked record */
.msg-feat{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-content:start}
.msg-big{position:relative;width:min(100%,360px);aspect-ratio:1;margin:0 auto;padding-right:16%}
.msg-big img,.msg-big .msg-blank{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;box-shadow:0 14px 24px rgba(0,0,0,.6)}
.msg-disc{position:absolute;z-index:1;top:4%;left:4%;width:80%;height:92%;aspect-ratio:1;border-radius:50%;
background:radial-gradient(circle,#c3622f 0 15%,#111 16% 18%,transparent 19%),repeating-radial-gradient(circle,#1d1d1d 0 2px,#090909 2px 4px);box-shadow:0 10px 18px rgba(0,0,0,.6)}
.msg-big.in .msg-disc{animation:mdisc .7s cubic-bezier(.2,.8,.3,1) both}
@keyframes mdisc{from{transform:translateX(0) rotate(0)}to{transform:translateX(22%) rotate(40deg)}}
.msg-big:not(.in) .msg-disc{transform:translateX(22%)}
.msg-blank{display:grid!important;place-items:center;padding:14px;text-align:center;background:#13251d;font:400 16px/1.1 "Holtwood One SC",Georgia,serif;color:var(--gw-bone)}
.msg-info h3{margin:0;font:400 clamp(18px,2.4vw,26px)/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.03em;color:#f6f6ee;text-transform:uppercase;overflow-wrap:anywhere}
.msg-info p{margin:6px 0 10px;color:#b9c7be;font-size:14px}
.msg-stats{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.msg-stats li{display:flex;align-items:baseline;gap:8px;padding:6px 10px;border-radius:4px;background:rgba(0,0,0,.35);box-shadow:inset 3px 0 0 var(--kc,#1d7a4c)}
.msg-stats b{font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--kc,#1d7a4c)}
.msg-stats i{flex:1;border-bottom:2px dotted rgba(216,214,204,.3);transform:translateY(-3px)}
.msg-stats span{font:700 13px/1 "Courier Prime",monospace;color:#f2c430}
.msg-stats li.sold span{color:#8a8a8a;text-decoration:line-through}
.k-vinyl{--kc:#e0864a}.k-cassette{--kc:#f2c430}.k-cd{--kc:#b9c4cc}.k-digital{--kc:#3fbf7f}
.msg-links{display:flex;flex-wrap:wrap;gap:8px}
.msg-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:5px;background:var(--gw-rust);color:#160a04;text-decoration:none;font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;box-shadow:0 4px 0 #6e3212}
.msg-go b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#160a04;color:#7fb2ff;font:700 12px/1 sans-serif}
.msg-go.it{background:transparent;color:var(--gw-bone);box-shadow:inset 0 0 0 2px rgba(216,214,204,.35)}
.msg-go:hover,.msg-go:focus-visible{filter:brightness(1.1);outline:2px solid #f2c430;outline-offset:2px}
/* the shelf */
.msg-shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start;max-height:520px;overflow-y:auto;padding:6px;scrollbar-width:thin;outline:none}
.msg-sl{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;aspect-ratio:1;background:#0b1712;box-shadow:0 6px 10px rgba(0,0,0,.45);filter:brightness(.72) saturate(.8);transition:filter .15s ease,transform .15s ease}
.msg-sl img,.msg-sl .msg-blank{display:block;width:100%;height:100%;object-fit:cover}
.msg-sl .msg-blank{font-size:10px}
.msg-sl:hover,.msg-sl:focus-visible{filter:none}
.msg-sl.on{filter:none;transform:scale(1.04);z-index:2}
.msg-sl.on::before,.msg-sl.on::after{content:"";position:absolute;inset:-6px;pointer-events:none;border:3px solid #f2c430;
clip-path:polygon(0 0,28% 0,28% 6px,6px 6px,6px 28%,0 28%,0 72%,6px 72%,6px calc(100% - 6px),28% calc(100% - 6px),28% 100%,0 100%,0 0,100% 0,100% 28%,calc(100% - 6px) 28%,calc(100% - 6px) 6px,72% 6px,72% 0,100% 0,100% 100%,72% 100%,72% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 72%,100% 72%)}
.msg-sl.on::after{border-color:transparent;box-shadow:0 0 18px 2px rgba(242,196,48,.45)}
.msg-chip{position:absolute;left:4px;bottom:4px;padding:3px 5px;border-radius:3px;background:rgba(5,12,8,.85);font:400 8px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;font-style:normal;color:var(--kc,#3fbf7f)}
.msg-hud{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 14px;background:linear-gradient(#10251b,#08150f);box-shadow:inset 0 2px 0 rgba(216,214,204,.12)}
.msg-hud button{all:unset;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:3px solid var(--gw-bone);color:var(--gw-bone);font:700 15px/1 sans-serif}
.msg-hud button:hover,.msg-hud button:focus-visible{background:#f2c430;border-color:#f2c430;color:#160a04}
.msg-hud span{font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#e0864a}
.msg-buy{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;color:var(--gw-bone);text-decoration:none;font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em}
.msg-buy b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#0b1712;color:#7fb2ff;box-shadow:inset 0 0 0 2px #7fb2ff;font:700 12px/1 sans-serif}
.msg-note{margin:0;padding:10px 16px 14px;text-align:center;font-size:12px;color:#93a69a;background:#08150f}
/* phone: the picked record on top, the shelf scrolls sideways under the thumb */
@media (max-width:760px){
.msg-body{grid-template-columns:minmax(0,1fr);padding:14px 12px;gap:12px}
.msg-feat{grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start}
.msg-big{width:100%;padding-right:14%}
.msg-info h3{font-size:16px}
.msg-stats li{padding:5px 8px}
.msg-go{min-height:40px;padding:0 10px;font-size:10px}
.msg-shelf{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:30%;max-height:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:8px 6px 12px}
.msg-sl{scroll-snap-align:start}
.msg-bar{padding:10px 12px}
.msg-crates button{padding:0 8px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){.msg-big.in .msg-disc{animation:none}}
.msg-shelf{scrollbar-color:#c3622f #0b1712}.msg-shelf::-webkit-scrollbar{width:8px;height:8px}.msg-shelf::-webkit-scrollbar-thumb{background:#c3622f;border-radius:4px}.msg-shelf::-webkit-scrollbar-track{background:#0b1712}
/* ---------- v31 (Rick 10.11, after the usability agents: «низ екрана, плеєр»). The player box was 109 px (padding on top of
height 92/96, no border-box) and rode 13 px over the metro line. Now it is exactly the Spotify player + 2 px, and on phones
and tablets (≤ 980 px) it tucks away under the metro line while you scroll down and comes back when you scroll up or tap
the speaker. The music keeps playing; the speaker drops to the corner like when it is off. ---------- */
.mdeck{box-sizing:border-box}
body.mdeck-on .mdeck{transition:transform .35s cubic-bezier(.2,.8,.25,1),visibility 0s,z-index 0s .35s}
@media (max-width:980px){
body.mdeck-on{--deck-h:84px}
.mdeck{height:84px;padding-top:2px;padding-bottom:2px}
body.mdeck-on.mdeck-tuck .mdeck{transform:translateY(calc(100% + 4px));z-index:57;transition:transform .3s ease-in,z-index 0s}
body.mdeck-tuck .mspk{bottom:calc(var(--tab-h) + var(--safe-b) + 10px)}
body.mdeck-tuck .mspk-band{left:calc(100% + 10px);bottom:8px}
.gw-chip{transition:transform .35s cubic-bezier(.2,.8,.25,1)}
body.mdeck-tuck .gw-chip{transform:translateY(var(--deck-h))}
}
@media (prefers-reduced-motion:reduce){body.mdeck-on .mdeck,body.mdeck-on.mdeck-tuck .mdeck{transition:none}}
/* v31: the phone metro line was 62 px + 13 px padding = 75 px, while everything above it (player, speaker, test chip, page bottom)
counted 62: so the player rode 14 px over the line. The line now really is --tab-h tall. */
@media (max-width:980px){.tabbar.metro .mline{box-sizing:border-box}}
/* v33 (Rick 10.11): the EVENTS header photo is the Rock Steady Crew 30th anniversary cypher, the Bronx 2007;
the dancer is in the lower half of the picture, so the frame sits lower than on the other headers */
section[data-view="events"] .phead.mloc::before{background-position:center 78%!important}
/* ---------- v34 (Rick 10.11): the events map as a game screen (THE CIRCUIT) ---------- */
.mapwrap.mgmap{padding:0!important;border-radius:8px;overflow:hidden;background:#06110c!important;border:3px solid #030806;box-shadow:inset 0 0 0 1px rgba(216,214,204,.1),0 18px 40px -18px #000}
.mgm-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(#d2692a,#a84d1a);border-bottom:3px solid #4a210a;box-shadow:inset 0 1px 0 rgba(255,220,180,.35)}
.mgm-top .mbul{flex:none}
.mgm-top b{font:400 clamp(16px,2.4vw,22px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:#fbf4e6;text-shadow:0 2px 0 #4a210a}
.mgm-top small{margin-left:auto;font:700 10px/1.2 var(--f-m);letter-spacing:.16em;color:#ffe7cf;opacity:.9;text-align:right}
.mgmap .map-bar{padding:10px 14px!important;margin:0!important;background:#0b1a13;border-bottom:1px solid rgba(216,214,204,.08);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* regions: the game's choice in brackets */
.mgmap #map-region{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;gap:4px}
.mgmap #map-region button{background:none!important;border:0!important;box-shadow:none!important;min-height:44px;padding:0 12px!important;font:400 14px/1 "Holtwood One SC",Georgia,serif!important;letter-spacing:.08em;color:#8fa79a!important;border-radius:4px}
.mgmap #map-region button[aria-selected="true"]{color:#f2c230!important}
.mgmap #map-region button[aria-selected="true"]::before{content:"[ "}
.mgmap #map-region button[aria-selected="true"]::after{content:" ]"}
.mgmap #map-region button:focus-visible{outline:2px solid #f2c230;outline-offset:2px}
.mgmap .map-legend{font:700 10px/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#a9b8ae}
/* the sea: dark teal with an old map grid and faint scan lines; the land in the game's greens */
.mgmap #ev-map{border-radius:0!important;background:
repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
linear-gradient(rgba(140,190,160,.07) 1px,transparent 1px) 0 0/48px 48px,
linear-gradient(90deg,rgba(140,190,160,.07) 1px,transparent 1px) 0 0/48px 48px,
radial-gradient(120% 90% at 50% 40%,#0f2a22,#071712 70%,#040d0a)!important}
.mgmap .datamaps-subunit{fill:#1b3527!important;stroke:#06110c!important;stroke-width:.7px!important;transition:fill .4s}
.mgmap .datamaps-subunit.mg-has{fill:#3c6a4f!important;stroke:#0b1d14!important}
/* pins: flyers with tape, a beacon under world level, the chosen one in yellow corner brackets */
.mgmap .pin-frame{fill:#ece6d4;stroke:#0a1510}
.mgmap .pin-tape{fill:rgba(222,205,160,.88);stroke:rgba(120,100,60,.35);stroke-width:.6}
.mgmap .pin-br{fill:none;stroke:#f2c230;stroke-width:3;stroke-linecap:square;opacity:0}
.mgmap .pin.on .pin-br{opacity:1}
.mgmap .pin.on .pin-frame,.mgmap .pin:focus .pin-frame{stroke:#f2c230}
.mgmap .pin-beacon{fill:rgba(210,105,42,.45);stroke:#d2692a;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:mgbeacon 2.2s ease-out infinite}
@keyframes mgbeacon{0%{transform:scale(.4);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.mgmap .map-zoom button{min-width:40px;min-height:40px;border:2px solid #ece6d4!important;background:#0b1a13!important;color:#ece6d4!important;border-radius:5px;box-shadow:0 3px 0 rgba(0,0,0,.5)!important;font:400 16px/1 "Holtwood One SC",Georgia,serif}
.mgmap .map-zoom button:hover,.mgmap .map-zoom button:focus-visible{background:#d2692a!important}
/* the game's bottom bar */
.mgm-bar{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(#0b1a13,#050d09);border-top:3px solid #030806}
.mgm-b{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px;min-height:48px;padding:0 12px;border-radius:6px;
background:linear-gradient(#1d7a4c,#13603b);border:2px solid #f2f2ea;box-shadow:inset 0 0 0 2px #13603b,0 4px 0 rgba(0,0,0,.5);color:#f6f6ee;font:400 14px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;-webkit-tap-highlight-color:transparent}
.mgm-b:hover,.mgm-b:focus-visible{background:linear-gradient(#d2692a,#a84d1a);box-shadow:inset 0 0 0 2px #a84d1a,0 4px 0 rgba(0,0,0,.5);outline:none}
.mgm-b:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #13603b,0 2px 0 rgba(0,0,0,.5)}
.mgm-now{flex:1;min-width:0;display:grid;justify-items:center;text-align:center;gap:3px}
.mgm-now b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 clamp(13px,2vw,17px)/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;color:#f2c230;text-transform:uppercase}
.mgm-now small{font:700 10px/1.2 var(--f-m);letter-spacing:.12em;color:#a9b8ae;text-transform:uppercase}
.mgmap > p.muted{margin:0!important;padding:8px 14px 12px!important;background:#050d09;color:#8fa79a!important;font-size:12px!important}
/* the city card under the map: the game's info panel */
#ev-mappanel .map-city:not(:empty){margin-top:14px;padding:14px;border-radius:8px;background:linear-gradient(#0b1a13,#07120d);border:2px solid #030806;box-shadow:inset 0 0 0 1px rgba(216,214,204,.1)}
#ev-mappanel .map-city h3{margin:0 0 4px;font:400 clamp(18px,3vw,24px)/1.1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;color:#d2692a;text-transform:uppercase}
@media (max-width:600px){
.mgm-top{padding:8px 10px}.mgm-top small{display:none}
.mgmap .map-bar{padding:6px 8px!important}
.mgmap #map-region button{padding:0 8px!important;font-size:12px!important}
.mgm-b{min-width:64px;padding:0 10px}.mgm-b span{display:none}
}
@media (prefers-reduced-motion:reduce){.mgmap .pin-beacon{animation:none;opacity:.5}}
@media (max-width:980px){.mgmap .map-zoom button{min-width:44px;min-height:44px}}
/* ---------- v35 (Rick 10.11: «так, зроби» — the city window on a phone covered almost the whole map): on a phone the window
is a small strip docked at the bottom of the map — small poster, city, count, the next event; the full list is under the map ---------- */
@media (max-width:600px){
.mgmap .map-pop{left:6px!important;right:6px!important;top:auto!important;bottom:6px!important;width:auto!important;max-height:min(112px,46%);
display:grid;grid-template-columns:72px minmax(0,1fr);align-items:stretch;box-shadow:0 6px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(216,214,204,.12)!important;border:2px solid #f2c230!important}
.mgmap .map-pop-img{height:auto!important;min-height:72px;grid-row:1}
.mgmap .map-pop:not(:has(.map-pop-img)){grid-template-columns:minmax(0,1fr)}
.mgmap .map-pop-b{padding:6px 44px 6px 9px!important;gap:2px!important;min-width:0;overflow:hidden}
.mgmap .map-pop-b>b{font:400 14px/1.1 "Holtwood One SC",Georgia,serif!important;letter-spacing:.04em;padding-right:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f2c230}
.mgmap .map-pop-b>small{font-size:11px!important}
.mgmap .map-pop ul{margin:2px 0 0!important}
.mgmap .map-pop li:not(:first-child){display:none}
.mgmap .map-pop li button{min-height:36px!important;padding:4px 6px!important;font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex!important}
.mgmap .map-pop-all{position:absolute;right:6px;bottom:4px;padding:0!important;min-height:30px!important;font-size:11px!important}
.mgmap .map-pop-x{width:40px!important;height:40px!important;right:2px!important;top:2px!important}
}
/* ---------- v37 (Rick 10.11) ---------- */
/* «у плейлістах менше опису, тільки самі назви»: a playlist card is its cover + its name */
#pl-list .plc-b > :not(b){display:none!important}
#pl-list .plc-b{padding-bottom:12px}
/* «на всіх сторінках справа оцей вініл» — the big record on the right of every page header is gone */
.phead .ph-vinyl{display:none!important}
/* the MUSIC header photo (Battle of the Year CZ 2006): the dancer sits in the middle of the frame */
section[data-view="music"] .phead.mloc::before{background-position:34% 55%!important}
/* v38: NEW MUSIC shows 24 at a time, the rest behind a big MORE button */
.mnew-more{display:block;margin:18px auto 0;min-height:48px;padding:0 22px}
/* ---------- v39 (Rick 10.11): the player hides, the speaker blinks and offers the first track, small like the game ---------- */
body.mdeck-off .mspk-x{opacity:0!important}
body.mdeck-off:not(.mspk-play) .mspk-box{animation:mspkblink 2.6s ease-in-out infinite}
@keyframes mspkblink{0%,100%{filter:drop-shadow(3px 6px 6px rgba(0,0,0,.7)) brightness(.85)}50%{filter:drop-shadow(0 0 10px rgba(242,194,48,.75)) drop-shadow(3px 6px 6px rgba(0,0,0,.7)) brightness(1.15)}}
.mspk-band{gap:2px!important;padding:6px 26px 7px 10px!important;max-width:min(68vw,360px)!important;border-left:3px solid #f2c230;background:linear-gradient(90deg,rgba(4,10,7,.92),rgba(4,10,7,.78) 70%,rgba(4,10,7,0))!important}
.mspk-tag{font:700 9px/1 var(--f-m);font-style:normal;letter-spacing:.18em;color:#f2c230}
.mspk-t{font-size:13px!important;letter-spacing:.08em!important;text-transform:uppercase}
.mspk-a{font-size:10px!important;letter-spacing:.14em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:700px){.mspk-t{font-size:12px!important}.mspk-band{max-width:min(72vw,300px)!important}}
@media (prefers-reduced-motion:reduce){body.mdeck-off:not(.mspk-play) .mspk-box{animation:none}}
/* ---------- v40 (Rick 10.11): HISTORY = STORY MODE (mock-up https://claude.ai/artifact/GVmAsy6qUQ8KC5JUrGt9kN). One stop per screen,
all controls in one screen: chapters (level select) · map · loading-screen tip · the game's bottom bar ---------- */
.hm-sec.msm-old{display:none!important}
.msm{--msm-sea:#071712;--msm-land:#1b3527;--msm-bx:#3c6a4f;--msm-pk:#14291e;--msm-gold:#f2c230;--msm-rust:#d2692a;--msm-dim:#9fb3a6;--msm-faint:#5f7769;
position:relative;display:flex;flex-direction:column;margin:0 0 18px;background:#07120d;border-block:3px solid #030806;overflow:hidden;color:var(--gw-bone,#ece7d6);
height:calc(100dvh - 59px - var(--tab-h,0px) - var(--deck-h,0px) - var(--safe-b,0px) - 5px);min-height:540px}
.msm-rail{position:relative;flex:none;display:flex;align-items:center;gap:4px;padding:6px 8px;background:linear-gradient(#d2692a,#a84d1a);border-bottom:3px solid #4a210a;overflow-x:auto;scrollbar-width:none}
.msm-rail::-webkit-scrollbar{display:none}
.msm-ch{all:unset;box-sizing:border-box;flex:none;cursor:pointer;display:grid;gap:3px;min-height:46px;padding:6px 10px;border-radius:5px;color:#ffe7cf}
.msm-ch b{font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;white-space:nowrap}
.msm-ch small{font:700 9px/1 var(--f-m);letter-spacing:.12em;opacity:.85}
.msm-pips{display:flex;gap:2px;height:4px}
.msm-pips i{flex:1;min-width:5px;border-radius:1px;background:rgba(255,231,207,.3)}
.msm-pips i.seen{background:#fff3df}
.msm-ch[aria-selected="true"]{background:rgba(0,0,0,.28);color:var(--msm-gold)}
.msm-ch[aria-selected="true"] b::before{content:"[ "}
.msm-ch[aria-selected="true"] b::after{content:" ]"}
.msm-ch:focus-visible,.msm-auto:focus-visible,.msm-nb:focus-visible,.msm-read:focus-visible,.msm-x:focus-visible{outline:3px solid var(--msm-gold);outline-offset:2px}
.msm-auto{all:unset;box-sizing:border-box;cursor:pointer;flex:none;margin-left:auto;min-width:46px;min-height:46px;display:grid;place-items:center;border-radius:6px;background:rgba(0,0,0,.25);font:400 13px/1 "Holtwood One SC",Georgia,serif;color:#ffe7cf}
.msm-auto[aria-pressed="true"]{background:var(--msm-gold);color:#241a02}
.msm-stage{flex:1;min-height:0;display:flex;flex-direction:column;touch-action:pan-y}
.msm-map{position:relative;flex:1;min-height:150px;overflow:hidden;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
linear-gradient(rgba(140,190,160,.06) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(140,190,160,.06) 1px,transparent 1px) 0 0/40px 40px,
radial-gradient(120% 90% at 50% 40%,#0f2a22,var(--msm-sea) 70%,#040d0a)}
.msm-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.msm-land{fill:var(--msm-land);stroke:#06110c;stroke-width:1.2;vector-effect:non-scaling-stroke}
.msm-land.bx{fill:var(--msm-bx)}
.msm-land.pk{fill:var(--msm-pk)}
.msm-pin{cursor:pointer}
.msm-dot{fill:#5d7a68;stroke:#06110c;stroke-width:1.5;vector-effect:non-scaling-stroke}
.msm-pin.ch-on .msm-dot{fill:#ece7d6}
.msm-pin.on .msm-dot{fill:var(--msm-gold)}
.msm-ring{fill:none;stroke:var(--msm-gold);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;animation:msmring 1.8s ease-out infinite}
@keyframes msmring{from{transform:scale(.6);opacity:1}to{transform:scale(2.6);opacity:0}}
.msm-br{fill:none;stroke:var(--msm-gold);stroke-width:3;vector-effect:non-scaling-stroke}
.msm-tag{position:absolute;left:10px;top:10px;padding:5px 9px 4px;border-radius:4px;background:linear-gradient(#1d7a4c,#13603b);border:2px solid #f2f2ea;box-shadow:inset 0 0 0 2px #13603b,0 4px 8px rgba(0,0,0,.5);font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em}
.msm-swipe{position:absolute;right:10px;top:12px;font:700 9px/1 var(--f-m);letter-spacing:.14em;color:var(--msm-dim)}
.msm-city{position:absolute;left:0;right:0;bottom:0;height:46px;background:url("img/metro/gsil-el.webp?v=9") 50% 100%/auto 100% repeat-x;opacity:.55;image-rendering:pixelated;pointer-events:none}
.msm-tip{flex:none;position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:12px;background:linear-gradient(#0c1b14,#07120d);border-top:2px solid #030806}
.msm-ti{width:96px;height:96px;border-radius:4px;background:#020604 center/cover no-repeat;box-shadow:0 0 0 2px #030806,0 0 0 3px rgba(236,231,214,.15);display:grid;place-items:center;font:400 22px/1 "Holtwood One SC",Georgia,serif;color:var(--msm-rust)}
.msm-tb{min-width:0;display:grid;align-content:start;gap:4px}
.msm-ty{font:400 26px/.95 "Holtwood One SC",Georgia,serif;color:var(--msm-rust);letter-spacing:.02em}
.msm-tn{font:700 12px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:var(--msm-dim)}
.msm-tt{margin:0;font:700 15px/1.3 "Roboto Slab",Georgia,serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance}
.msm-read{all:unset;box-sizing:border-box;cursor:pointer;justify-self:start;margin-top:2px;min-height:40px;padding:0 12px;display:inline-flex;align-items:center;border-radius:5px;background:linear-gradient(#d2692a,#a84d1a);box-shadow:inset 0 0 0 2px #a84d1a,0 3px 0 rgba(0,0,0,.5);font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;color:#fff6ea}
.msm-full{display:none}
.msm-bar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(#0b1a13,#050d09);border-top:3px solid #030806}
.msm-nb{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:76px;min-height:52px;padding:0 12px;border-radius:7px;background:linear-gradient(#1d7a4c,#13603b);border:2px solid #f2f2ea;
box-shadow:inset 0 0 0 2px #13603b,0 4px 0 rgba(0,0,0,.5);font:400 14px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.05em;color:#f6f6ee;-webkit-tap-highlight-color:transparent}
.msm-nb:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #13603b,0 2px 0 rgba(0,0,0,.5)}
.msm-nb:hover{background:linear-gradient(#d2692a,#a84d1a)}
.msm-cnt{flex:1;min-width:0;display:grid;justify-items:center;text-align:center;gap:4px}
.msm-cnt b{font:400 15px/1 "Holtwood One SC",Georgia,serif;color:var(--msm-gold);letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.msm-cnt small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 10px/1.1 var(--f-m);letter-spacing:.14em;color:var(--msm-dim)}
/* READ: the sheet from the bottom with its own ◁ ▷ */
.msm-sheet{position:fixed;left:0;right:0;bottom:0;z-index:120;max-height:84dvh;display:flex;flex-direction:column;background:#07120d;color:#ece7d6;border-top:3px solid #f2c230;border-radius:14px 14px 0 0;
box-shadow:0 -20px 40px rgba(0,0,0,.6);transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.25,1);padding-bottom:env(safe-area-inset-bottom,0px)}
.msm-sheet.open{transform:none}
.msm-scrim{position:fixed;inset:0;z-index:119;background:rgba(2,6,4,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.msm-scrim.open{opacity:1;pointer-events:auto}
.msm-grab{flex:none;height:22px;display:grid;place-items:center}
.msm-grab::before{content:"";width:44px;height:5px;border-radius:3px;background:#5f7769}
.msm-shb{flex:1;min-height:0;overflow:auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.msm-shph{position:relative;height:200px;border-radius:6px;overflow:hidden;background:#020604}
.msm-shph i{position:absolute;inset:-20px;background:var(--im) center/cover;filter:blur(16px) brightness(.5)}
.msm-shph b{position:absolute;inset:0;background:var(--im) center/contain no-repeat}
.msm-shy{margin:14px 0 2px;font:400 30px/1 "Holtwood One SC",Georgia,serif;color:#d2692a}
.msm-shn{font:700 12px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#9fb3a6}
.msm-sht{margin:8px 0 6px;font:700 20px/1.25 "Roboto Slab",Georgia,serif;text-wrap:balance}
.msm-shs{margin:0;max-width:62ch;color:#d9ddd2;font-size:16px;line-height:1.6}
.msm-ppl{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.msm-ppl li{padding:4px 8px;border-radius:4px;background:#163024;font:700 11px/1.2 var(--f-m);letter-spacing:.06em}
.msm-cr{margin:12px 0 0;font:12px/1.5 var(--f-m);color:#9fb3a6}
.msm-cr a{color:#ece7d6}
.msm-shbar{flex:none;display:flex;gap:8px;align-items:center;padding:8px 10px;border-top:2px solid #030806;background:#050d09}
.msm-x{all:unset;box-sizing:border-box;cursor:pointer;flex:1;min-height:52px;display:grid;place-items:center;border-radius:7px;background:#14241c;border:2px solid #5f7769;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;color:#ece7d6}
@media (min-width:1000px){
.msm{max-width:1240px;margin:18px auto 24px;height:min(760px,calc(100dvh - 58px - 36px));border:3px solid #030806;border-radius:10px;box-shadow:0 24px 50px -24px #000}
.msm-stage{flex-direction:row}
.msm-map{flex:1.55}
.msm-tip{width:430px;flex:none;grid-template-columns:1fr;align-content:start;gap:10px;padding:16px 18px;border-top:0;border-left:3px solid #030806;overflow:auto}
.msm-ti{width:100%;height:220px;font-size:44px}
.msm-ty{font-size:38px}
.msm-tt{font-size:19px;-webkit-line-clamp:unset}
.msm-full{display:block}
.msm-full p{margin:4px 0 0;color:#d9ddd2;line-height:1.6}
.msm-read{display:none}
.msm-nb{min-width:120px}
.msm-swipe{display:none}
}
@media (max-width:370px){.msm-tip{grid-template-columns:78px minmax(0,1fr)}.msm-ti{width:78px;height:78px}.msm-nb{min-width:64px}.msm-nb span{display:none}}
@media (prefers-reduced-motion:reduce){.msm-ring{animation:none}.msm-sheet,.msm-scrim{transition:none}}
.msm-mus{all:unset;box-sizing:border-box;cursor:pointer;flex:none;margin-left:auto;min-width:46px;min-height:46px;display:grid;place-items:center;border-radius:6px;background:rgba(0,0,0,.25);font:700 18px/1 Georgia,serif;color:#ffe7cf}
.msm-mus+.msm-auto{margin-left:0}
body:not(.mdeck-off) .msm-mus{background:#f2c230;color:#241a02}
.msm-mus:focus-visible{outline:3px solid #f2c230;outline-offset:2px}
@media (max-width:999px){
body.msm-in .gw-chip{opacity:0!important;pointer-events:none!important;transition:opacity .25s}
}
/* ♪ and ▶ stay pinned at the right end of the chapter rail (the chapters scroll under them) */
.msm-mus,.msm-auto{position:sticky;z-index:1;box-shadow:-8px 0 10px -4px #a84d1a}
.msm-auto{right:0}
.msm-mus{right:50px}
.msm-mus,.msm-auto:not([aria-pressed="true"]){background:#8a3d14}
body:not(.mdeck-off) .msm-mus{background:#f2c230}
/* room after the last chapter, so any chapter can scroll clear of the pinned ♪ ▶ */
.msm-rail .msm-ch:nth-last-child(3){margin-right:110px}
@media (min-width:1000px){.msm-rail .msm-ch:nth-last-child(3){margin-right:0}}
.msm-rail{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.msm-rail{scroll-behavior:auto}}
body.msm-in .gw-chip{opacity:0!important;pointer-events:none!important;transition:opacity .25s}
/* ---------- v41 (Rick 10.11) ---------- */
/* small arrows on the map itself, round and see-through, out of the way of the pins */
.msm-ma{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:50%;z-index:3;width:44px;height:44px;margin-top:-22px;display:grid;place-items:center;border-radius:50%;
background:rgba(5,13,9,.62);border:2px solid rgba(236,231,214,.55);color:#ece7d6;font:400 15px/1 "Holtwood One SC",Georgia,serif;box-shadow:0 4px 10px rgba(0,0,0,.45);-webkit-tap-highlight-color:transparent}
.msm-ma.l{left:8px}.msm-ma.r{right:8px}
.msm-ma:hover,.msm-ma:focus-visible{background:#d2692a;border-color:#ece7d6;outline:none}
.msm-ma:active{transform:scale(.94)}
/* «▶ TOUR»: a clear label instead of a bare triangle */
.msm-auto{min-width:0;padding:0 12px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
/* the speaker stays on History: the bar leaves room for it on the left, its band pops up above it */
body.msm-in .msm-bar{padding-left:calc(var(--spk-w,50px) + 18px)}
body.msm-in.mdeck-off .mspk-band{left:0;bottom:calc(100% + 10px)}
@media (min-width:1000px){body.msm-in .msm-bar{padding-left:28px}}
/* «колоночку розвернути вправо, і щоб на назву треку теж можна було нажати»: the speaker faces right; the band is a button too */
.mspk-box{transform:scaleX(-1)}
.mspk.mspk-show .mspk-band{pointer-events:auto;cursor:pointer}
/* v41: only «▶ TOUR» is pinned now — the room goes after the last chapter */
.msm-rail .msm-ch:nth-last-child(3){margin-right:0}
.msm-rail .msm-ch:nth-last-child(2){margin-right:96px}
@media (min-width:1000px){.msm-rail .msm-ch:nth-last-child(2){margin-right:0}}
@media (max-width:999px){
body.msm-in .msm-bar .msm-nb{min-width:72px;padding:0 8px;font-size:12px}
body.msm-in .msm-cnt b{font-size:14px}
}
/* ---------- v42 (Rick 10.11): full screen + a landscape layout for phones ---------- */
.msm-swipe{display:none!important}
.msm-fs{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;right:8px;top:8px;z-index:3;width:44px;height:44px;display:grid;place-items:center;border-radius:8px;
background:rgba(5,13,9,.62);border:2px solid rgba(236,231,214,.55);color:#ece7d6;font:700 18px/1 system-ui,sans-serif;box-shadow:0 4px 10px rgba(0,0,0,.45)}
.msm-fs:hover,.msm-fs:focus-visible{background:#d2692a;outline:none}
.msm-rot{display:none}
/* full screen: the story covers the whole page (real full screen where the browser allows it) */
.msm.msm-fullon{position:fixed;inset:0;z-index:150;margin:0!important;max-width:none!important;width:auto!important;height:100dvh!important;min-height:0!important;border:0!important;border-radius:0!important;
padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.msm:fullscreen{width:100vw;height:100vh!important}
body.msm-fullpage{overflow:hidden}
body.msm-fullpage .mspk,body.msm-fullpage .gw-chip,body.msm-fullpage .mdeck,body.msm-fullpage #tabbar{visibility:hidden}
/* full screen on a phone held upright: ask to turn it */
@media (orientation:portrait) and (max-width:700px){
.msm.msm-fullon .msm-rot{display:block;position:absolute;left:50%;top:58px;transform:translateX(-50%);z-index:3;padding:6px 12px;border-radius:5px;background:rgba(242,194,48,.92);color:#241a02;font:400 11px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;animation:msmrot 2.4s ease-in-out infinite}
}
@keyframes msmrot{0%,100%{opacity:1}50%{opacity:.55}}
/* landscape on a phone (in or out of full screen): map left, the story right, slim bars */
@media (orientation:landscape) and (max-height:520px){
.msm{min-height:0;height:calc(100dvh - 59px - var(--tab-h,0px) - var(--deck-h,0px) - var(--safe-b,0px) - 5px)}
.msm.msm-fullon{height:100dvh!important}
.msm-rail{padding:3px 6px}
.msm-ch{min-height:36px;padding:4px 8px}
.msm-ch small{display:none}
.msm-auto{min-height:36px}
.msm-stage{flex-direction:row}
.msm-map{flex:1.3}
.msm-tip{width:min(46vw,380px);flex:none;grid-template-columns:76px minmax(0,1fr);align-content:start;gap:10px;padding:10px 12px;border-top:0;border-left:3px solid #030806;overflow:auto}
.msm-ti{width:76px;height:76px}
.msm-ty{font-size:22px}
.msm-tt{-webkit-line-clamp:unset}
.msm-full{display:block;grid-column:1/-1}
.msm-full p{margin:0;color:#d9ddd2;line-height:1.55;font-size:14px}
.msm-read{display:none}
.msm-bar{padding-block:4px}
.msm-bar .msm-nb{min-height:40px}
.msm-city{height:30px}
}
.msm.msm-fullon{z-index:1000}
body.msm-fullpage .mast,body.msm-fullpage header.mast{visibility:hidden}
body.msm-fullpage .msm-bar{padding-left:10px!important}
/* ---------- v43 (Rick 10.11: «стрілочки знизу прибрати, залишити тільки на карті — знизу не бачиш, що нажимаєш»):
the bottom bar keeps only the stop counter (and the speaker on phones); the map's own arrows move the story ---------- */
.msm-bar > .msm-nb{display:none!important}
.msm-bar{padding-block:6px!important;min-height:44px}
.msm-cnt{gap:3px}
/* ---------- v45 (Rick 10.11: History = LINES — the base story + DJ / b-boy / records / culture lines, legends, districts, era attributes;
mock-up https://claude.ai/artifact/6DvYMHtAs7gcBsyvN1qfzL, «так, переносимо») ---------- */
[data-view="history"] .sec.msm-hide{display:none!important}
.msm{--lc:#f2c230}
/* map: borough tags (spray), neighbourhood street signs when close, other lines' stops faint, the trail of the last rides */
.msm-boro{font-family:"Rubik Spray Paint","Holtwood One SC",Impact,sans-serif;fill:rgba(236,231,214,.17);text-anchor:middle;pointer-events:none;letter-spacing:.02em}
.msm-plates{opacity:0;transition:opacity .35s;pointer-events:none}
.msm-svg.msm-near .msm-plates{opacity:.92}
.msm-plates rect{fill:#1d7a4c;stroke:#e9e6da;stroke-width:1.5;vector-effect:non-scaling-stroke}
.msm-plates text{font:700 12px "Courier Prime","Courier New",monospace;fill:#fff;letter-spacing:.06em;text-anchor:middle;dominant-baseline:central}
.msm-oth{fill:#5d7a68;opacity:.5}
.msm-case{fill:none;stroke:#030806;stroke-width:12;stroke-linecap:round;vector-effect:non-scaling-stroke}
.msm-track{fill:none;stroke:var(--lc);stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.msm-dot{fill:#ece7d6;stroke:var(--lc);stroke-width:3.5}
.msm-pin.ch-on .msm-dot{fill:#ece7d6}
.msm-pin.xfer .msm-dot{stroke:#030806;stroke-width:6}
.msm-pin.on .msm-dot{fill:var(--msm-gold)}
.msm-odo{position:absolute;left:10px;top:46px;z-index:3;font:400 18px/1 "Holtwood One SC",Georgia,serif;color:var(--msm-gold);background:rgba(3,8,6,.8);border:2px solid rgba(242,194,48,.55);border-radius:4px;padding:5px 7px 4px;font-variant-numeric:tabular-nums;pointer-events:none}
.msm-odo:empty{display:none}
.msm-att{position:absolute;left:0;top:0;z-index:4;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;opacity:0;filter:drop-shadow(0 3px 4px rgba(0,0,0,.7))}
.msm-att svg{width:100%;height:100%;display:block}
.msm-att.go{opacity:1}
.msm-wipe{position:absolute;left:0;right:0;top:50%;z-index:5;display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--ec,#f2c230);color:#0b0f0c;border-block:4px solid #030806;pointer-events:none;transform:translateY(-50%) translateX(-105%)}
.msm-wipe svg{width:54px;height:54px;flex:none}
.msm-wipe b{display:block;font:400 21px/1 "Holtwood One SC",Georgia,serif}
.msm-wipe small{font:700 11px/1.2 var(--f-m);letter-spacing:.14em}
.msm-wipe.go{animation:msmwipe 1.5s cubic-bezier(.6,0,.3,1) forwards}
@keyframes msmwipe{0%{transform:translateY(-50%) translateX(-105%)}28%,72%{transform:translateY(-50%) translateX(0)}100%{transform:translateY(-50%) translateX(105%)}}
/* tip: a tape and the transfers, one scrolling row under the thumb */
.msm-xs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;min-width:0}
.msm-xs::-webkit-scrollbar{display:none}
.msm-chip{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;max-width:min(78vw,340px);padding:4px 10px 4px 6px;border-radius:5px;background:#0c1b14;border:2px solid rgba(236,231,214,.2);font:700 11px/1.2 var(--f-m);letter-spacing:.03em;color:#ece7d6}
.msm-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msm-chip.tape{border-color:rgba(242,194,48,.5)}
.msm-chip:focus-visible,.msm-ln:focus-visible,.msm-lg:focus-visible,.msm-lnb:focus-visible,.msm-lx:focus-visible{outline:3px solid var(--msm-gold);outline-offset:2px}
.msm-cas{width:28px;height:19px;flex:none;border:2px solid var(--msm-gold);border-radius:3px;position:relative}
.msm-cas::after{content:"";position:absolute;left:4px;right:4px;top:5px;height:5px;background:radial-gradient(circle at 20% 50%,var(--msm-gold) 0 32%,transparent 36%),radial-gradient(circle at 80% 50%,var(--msm-gold) 0 32%,transparent 36%)}
.msm-bul{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:normal 400 12px/1 "Holtwood One SC",Georgia,serif;color:#0b0f0c;background:var(--lc,#f2c230);box-shadow:0 0 0 2px #030806}
/* bottom bar: the LINES button on the right, under the thumb */
.msm-lnb{all:unset;box-sizing:border-box;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 7px;border-radius:6px;border:2px solid rgba(236,231,214,.35);font:400 12px/1 "Holtwood One SC",Georgia,serif;color:#ece7d6;background:rgba(0,0,0,.25)}
.msm-lnb .msm-bul{width:28px;height:28px;font-size:13px}
.msm-lnb[aria-expanded="true"]{border-color:var(--msm-gold)}
/* the menu of lines: its own screen on phones */
.msm-lines{display:none;position:absolute;inset:0;z-index:8;overflow-y:auto;overscroll-behavior:contain;background:#07120d;padding:12px 12px 20px;flex-direction:column;gap:10px}
.msm.msm-menu .msm-lines{display:flex}
.msm-lines>*{flex:none}
.msm-lh{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.msm-lh b{font:400 18px/1 "Holtwood One SC",Georgia,serif;color:#ece7d6}
.msm-lh small{font:700 10px/1 var(--f-m);letter-spacing:.14em;color:var(--msm-dim)}
.msm-lh.sub{margin-top:6px}
.msm-lh.sub b{font-size:15px}
.msm-lx{all:unset;box-sizing:border-box;cursor:pointer;width:44px;height:44px;display:grid;place-items:center;border-radius:8px;border:2px solid rgba(236,231,214,.35);color:#ece7d6;font-size:16px}
.msm-ln{box-sizing:border-box;cursor:pointer;position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:64px;padding:10px;border-radius:6px;background:#0c1b14;border:2px solid rgba(236,231,214,.1);color:#ece7d6}
.msm-ln>*{min-width:0}
.msm-ln:hover{border-color:rgba(236,231,214,.3)}
.msm-ln[aria-pressed="true"]{border-color:var(--msm-gold);background:#0f2219}
.msm-ln .msm-bul{width:40px;height:40px;font-size:18px;box-shadow:0 0 0 2px #030806,0 0 0 4px rgba(236,231,214,.5)}
.msm-lnm{display:grid;grid-template-columns:minmax(0,1fr);gap:3px}
.msm-lnm em{font:normal 700 10px/1.2 var(--f-m);letter-spacing:.12em;color:var(--lc);text-transform:uppercase}
.msm-lnm b{font:400 14px/1.15 "Holtwood One SC",Georgia,serif}
.msm-lnm span{font:13px/1.35 "Roboto Slab",Georgia,serif;color:var(--msm-dim)}
.msm-lpips{display:flex;gap:3px;margin-top:2px}
.msm-lpips u{width:12px;height:4px;background:rgba(236,231,214,.15)}
.msm-lpips u.on{background:var(--lc)}
.msm-lct{display:grid;justify-items:end;gap:3px;font:700 10px/1 var(--f-m);letter-spacing:.1em;color:var(--msm-dim);text-align:right}
.msm-lct b{font:400 20px/1 "Holtwood One SC",Georgia,serif;color:#ece7d6}
.msm-lct small{font:inherit;color:var(--msm-gold)}
.msm-ln.big{grid-template-columns:52px minmax(0,1fr) auto;min-height:84px;margin-top:6px;background:linear-gradient(90deg,rgba(242,194,48,.16),#0c1b14 60%);border-color:rgba(242,194,48,.5)}
.msm-ln.big .msm-bul{width:48px;height:48px;font-size:22px}
.msm-ln.big .msm-lnm b{font-size:18px}
.msm-start{position:absolute;top:-9px;left:10px;font:700 9px/1 var(--f-m);letter-spacing:.14em;background:var(--msm-gold);color:#1d1503;padding:3px 5px;border-radius:2px}
.msm-legs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.msm-lg{box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;align-items:center;min-height:52px;padding:7px 8px;border-radius:6px;background:#0c1b14;border:2px solid rgba(236,231,214,.1);color:#ece7d6}
.msm-lg[aria-pressed="true"]{border-color:#ece7d6}
.msm-lg em{width:34px;height:34px;display:grid;place-items:center;font:normal 400 12px/1 "Holtwood One SC",Georgia,serif;background:#2a2f2b;border:2px solid #ece7d6;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
.msm-lg span{display:grid;gap:2px;min-width:0;font:400 11px/1.15 "Holtwood One SC",Georgia,serif}
.msm-lg small{font:700 9.5px/1 var(--f-m);letter-spacing:.1em;color:var(--msm-dim)}
/* computer: the menu is a column on the left of the story */
@media (min-width:1100px){
.msm:not(.msm-fullon){display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;max-width:1320px}
.msm:not(.msm-fullon) .msm-lines{display:flex;position:static;grid-column:1;grid-row:1/4;border-right:3px solid #030806}
.msm:not(.msm-fullon) .msm-lx,.msm:not(.msm-fullon) .msm-lnb{display:none}
.msm:not(.msm-fullon)>.msm-rail{grid-column:2;grid-row:1}
.msm:not(.msm-fullon)>.msm-stage{grid-column:2;grid-row:2}
.msm:not(.msm-fullon)>.msm-bar{grid-column:2;grid-row:3}
.msm:not(.msm-fullon) .msm-tip{width:380px}
.msm:not(.msm-fullon) .msm-ln{min-height:60px}
.msm:not(.msm-fullon) .msm-lnm span{font-size:12.5px}
}
@media (orientation:landscape) and (max-height:520px){
.msm-odo{top:40px;font-size:15px}
.msm-wipe{padding:8px 12px}.msm-wipe svg{width:40px;height:40px}.msm-wipe b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.msm-wipe.go{animation:none}.msm-plates{transition:none}}
/* ---------- v46 (Rick 10.11: Bronx Map idea parked — «саме ця кнопка з мапою щоб зникла»): the BX BRONX MAP button in the History header is hidden.
The #bronx page itself and the footer link stay. ---------- */
[data-view="history"] .bx-door{display:none!important}
/* ---------- v47 (Rick 10.11, home: «підписи, звідки картинка, менші, прозоріші, по всьому сайту»; стіна: стрілки посередині
по боках, одна афіша на телефоні, зривають і приклеюють; історія: стрілки по центру, анімація легша; плеєр ховається й на компі) ---------- */
/* photo / cover / poster credits: small and faint everywhere, full strength when you point at them */
.mcr,.mhcr,.credit,.rc-cr,.mld-src,.msm-cr,.hc-ph,.bx-phc,.hm-phc,.mzine figcaption,.cr{font-size:9.5px!important;line-height:1.35!important;opacity:.4;transition:opacity .2s;letter-spacing:.02em}
.mcr:hover,.mhcr:hover,.credit:hover,.rc-cr:hover,.mld-src:hover,.msm-cr:hover,.hc-ph:hover,.bx-phc:hover,.hm-phc:hover,.mzine figcaption:hover,
.mcr:focus-within,.mhcr:focus-within,.credit:focus-within,.rc-cr:focus-within,.mld-src:focus-within,.msm-cr:focus-within,.hc-ph:focus-within,.bx-phc:focus-within,.hm-phc:focus-within,.mzine figcaption:focus-within{opacity:.95}
@media (max-width:700px){
.mcr,.mhcr,.credit,.rc-cr,.mld-src,.msm-cr,.hc-ph,.bx-phc,.hm-phc,.mzine figcaption,.cr{font-size:8.5px!important;opacity:.32}
}
/* the wall: ◁ ▷ on the sides of the posters (vertical middle), the bottom bar is gone */
.mwall .mwall-bar{display:none!important}
.mwall .mwall-in{max-width:calc(3 * 250px + 2 * 56px + 2 * 76px);margin-inline:auto!important;padding-inline:76px!important;box-sizing:border-box}
.mwall-in > .mwb{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:50%;z-index:6;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;
background:rgba(5,12,8,.74);border:3px solid var(--gw-bone);color:var(--gw-bone);font-size:0;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.mwall-in > .mwb i{all:unset;font:700 18px/1 var(--f-m)}
.mwall-in > .mwb.prev{left:8px}.mwall-in > .mwb.next{right:8px}
.mwall-in > .mwb:hover,.mwall-in > .mwb:focus-visible{border-color:var(--gw-rust-lt);color:var(--gw-rust-lt);outline:none}
.mwall-in > .mwb:focus-visible{box-shadow:0 0 0 3px var(--gw-gold)}
@media (max-width:700px){
.mwall .mwall-in{grid-template-columns:minmax(0,250px)!important;justify-content:center!important;gap:0!important;overflow:visible!important;padding:14px 58px 18px!important}
.mwall .mposter{grid-column:1!important;grid-row:1!important}
.mwall .mposter.p1,.mwall .mposter.p2,.mwall .mp-scraps.p1,.mwall .mp-scraps.p2{display:none!important}
.mwall .mp-scraps{grid-column:1!important}
.mwall-in > .mwb{width:46px;height:46px;margin-top:-23px}
.mwall-in > .mwb.prev{left:6px}.mwall-in > .mwb.next{right:6px}
}
/* tear off: the poster is pulled from its right corner and falls; the new one is slapped on, then the tape */
.mwall .mposter{animation:mslap2 .6s cubic-bezier(.2,.8,.3,1.15) .32s both,mbreeze 5.5s ease-in-out calc(var(--d) + 1s) infinite}
.mwall .mposter .mp-tape{animation:mtape .26s .78s both}
.mwall .mposter .mp-tape.l{--tr:-24deg}.mwall .mposter .mp-tape.r{--tr:22deg}
.mwall .mposter.off{animation:mtear .75s cubic-bezier(.55,0,.8,.4) forwards!important;z-index:3;transform-origin:0 0;pointer-events:none}
.mwall .mposter.off .mp-tape{opacity:0}
@keyframes mslap2{0%{opacity:0;transform:rotate(calc(var(--r) - 9deg)) translateY(-44px) scale(1.12)}55%{opacity:1;transform:rotate(calc(var(--r) + 1deg)) translateY(2px) scale(.97)}78%{transform:rotate(var(--r)) scale(1.01)}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes mtape{from{opacity:0;transform:rotate(var(--tr)) scale(1.6)}to{opacity:1;transform:rotate(var(--tr)) scale(1)}}
@keyframes mtear{0%{transform:rotate(var(--r))}20%{transform:rotate(calc(var(--r) - 4deg)) translate(-3px,-6px)}42%{opacity:1;transform:rotate(calc(var(--r) + 10deg)) translate(8px,6px)}100%{opacity:0;transform:rotate(calc(var(--r) + 34deg)) translate(60px,230px) scale(.9)}}
.mp-scraps{grid-row:1;position:relative;z-index:2;pointer-events:none;animation:mscrap 1.7s ease-in forwards}
.mp-scraps.p0{grid-column:1}.mp-scraps.p1{grid-column:2}.mp-scraps.p2{grid-column:3}
.mp-scraps::before,.mp-scraps::after{content:"";position:absolute;top:-4px;width:26px;height:20px;background:#d9cfb4;box-shadow:0 1px 2px rgba(0,0,0,.35);opacity:.9}
.mp-scraps::before{left:-8px;clip-path:polygon(0 0,100% 0,72% 38%,88% 62%,40% 100%,22% 70%,0 82%);transform:rotate(-14deg)}
.mp-scraps::after{right:-8px;clip-path:polygon(0 0,100% 0,100% 80%,76% 66%,62% 100%,30% 58%,12% 44%);transform:rotate(12deg)}
@keyframes mscrap{0%,70%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.mwall .mposter,.mwall .mposter .mp-tape,.mwall .mposter.off,.mp-scraps{animation:none!important}.mwall .mposter.off{opacity:0}}
/* history block on the home page: ◁ ▷ on the sides, in the middle of the photo; lighter animation (no filter flash, bar by transform) */
.mdyk .mld-arr{top:50%!important;bottom:auto!important;margin-top:-25px;z-index:4}
.mdyk .mld-arr.l{left:12px!important;right:auto!important}
.mdyk .mld-arr.r{right:12px!important;left:auto!important}
@media (max-width:700px){.mdyk .mld-arr{top:125px!important}}
@media (min-width:701px){.mdyk .mld-arr.l{left:calc(min(36%,380px) + 82px)!important}} /* computer: both arrows sit on the photo, clear of the text */
.mload.mld-go .mld-img{animation:mldfade .5s ease-out both!important}
@keyframes mldfade{from{opacity:0}to{opacity:1}}
.mld-bar i{width:100%!important;transform-origin:0 50%;transform:scaleX(0)}
.mload.mld-go .mld-bar i{animation:mldbar2 9s linear forwards!important}
@keyframes mldbar2{to{transform:scaleX(1)}}
/* the player tucks away under the bottom edge on computers too while you scroll down; the music keeps playing */
@media (min-width:981px){
body.mdeck-on.mdeck-tuck .mdeck{transform:translateY(calc(100% + 4px));z-index:57;transition:transform .3s ease-in,z-index 0s}
body.mdeck-tuck .mspk{bottom:calc(var(--safe-b,0px) + 14px)}
body.mdeck-tuck .mspk-band{left:calc(100% + 10px);bottom:8px}
}
/* ---------- v48 (Rick 10.11: «на мобільній одна карточка, стрілочками в сторону, стрілочки по центру по сторонах» — new music, DJs;
music block background = Kool Herc with a James Brown LP) ---------- */
.mcar{position:relative}
.mcar-a,.mcar-n{display:none}
@media (max-width:700px){
.mcar{padding-inline:50px;margin-inline:-6px}
[data-view="home"] .mcar-t{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:100%!important;grid-template-columns:none!important;grid-template-rows:none!important;
gap:24px!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:8px 0 14px!important;margin:0!important;justify-content:start!important}
[data-view="home"] .mcar-t::-webkit-scrollbar{display:none}
[data-view="home"] .mcar-t > *{scroll-snap-align:start;scroll-snap-stop:always;min-width:0!important;width:auto!important;max-width:none!important;margin:0!important}
.mcar-a{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;top:var(--ct,40%);z-index:5;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;
background:rgba(5,12,8,.74);border:3px solid var(--gw-bone);color:var(--gw-bone);font:700 16px/1 var(--f-m);box-shadow:0 6px 14px rgba(0,0,0,.5)}
.mcar-a.l{left:2px}.mcar-a.r{right:2px}
.mcar-a:active{transform:scale(.94)}
.mcar-a:focus-visible{outline:3px solid var(--gw-gold);outline-offset:2px}
.mcar-n{display:block;text-align:center;font:400 10px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.16em;color:#a9b8ae;margin-top:2px}
/* new music: the cover fills the card, the vinyl peeks less so nothing is clipped */
[data-view="home"] #home-rel.mcar-t{padding-right:0!important}
[data-view="home"] #home-rel.mcar-t .rc{padding-right:34px!important}
}
/* the music block's background photo (Herc + «Sex Machine») reads clearly behind the records */
[data-view="home"] .sec:has(#home-rel) > .mside{opacity:.78}
@media (max-width:700px){
[data-view="home"] .sec:has(#home-rel) > .mside{opacity:.66;background-position:80% 20%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 80%,transparent 100%)}
}
/* ---------- v49 (Rick 10.11: журнал «дуже длінний і на компі, і на мобільному — треба квадратніше; стрілочки по сторонам по центру»):
pages have a fixed, squarer height (computer 600 px a page, phone 470 px), one story a page; ◁ ▷ on the sides, in the middle ---------- */
.mzine .mz-stage{position:relative}
.mzine .mz-book{max-width:1000px;margin-inline:auto}
.mzine .mz-bar{position:static!important;background:none!important;box-shadow:none!important;padding:10px 0 0!important;min-height:30px}
.mzine .mz-bar small{display:none!important}
.mzine .mz-bar button{position:absolute;top:calc(50% - 20px - 26px);z-index:7;box-shadow:0 6px 14px rgba(0,0,0,.5);background:rgba(10,22,16,.82)!important}
.mzine .mz-bar .mz-prev{left:max(4px,calc(50% - 500px - 76px))}
.mzine .mz-bar .mz-nextb{right:max(4px,calc(50% - 500px - 76px))}
.mzine .mz-pg{min-height:0!important;height:600px;padding:26px 28px 46px!important}
.mzine .mz-folio{bottom:12px!important}
.mzine .mz-photo img{display:block;width:100%;object-fit:cover}
/* cover */
.mzine .mz-cover{display:flex;flex-direction:column}
.mzine .mz-mast{font-size:clamp(46px,6.2vw,80px)!important}
.mzine .mz-cover-photo{width:76%!important;margin-top:4px}
.mzine .mz-cover-photo .mz-photo img{max-height:220px}
.mzine .mz-lines{gap:5px!important}
.mzine .mz-lines b{font-size:clamp(14px,1.5vw,17px)!important}
.mzine .mz-lines .mz-lead b{font-size:clamp(17px,1.9vw,22px)!important}
.mzine .mz-burst{transform:scale(.8);transform-origin:100% 0}
.mzine .mz-cov-foot{transform:scale(.85);transform-origin:0 100%}
/* contents */
.mzine .mz-toc{overflow-y:auto!important;scrollbar-width:thin}
.mzine .mz-toc h2{font-size:44px!important}
.mzine .mz-toc-sec{font-size:20px!important;margin:8px 0 2px!important}
.mzine .mz-toc li button{padding:4px 0!important;font-size:13px!important}
.mzine .mz-toc li button b{font-size:17px!important}
.mzine .mz-ed{font-size:12.5px!important}
/* cover story pages */
.mzine .mz-dark .mz-photo img{max-height:420px}
.mzine .mz-lead-t h2{font-size:clamp(30px,3.4vw,46px)!important;margin-bottom:12px!important}
.mzine .mz-lead-t .mz-dek{font-size:16px!important;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical;overflow:hidden}
.mzine .mz-lead-t .mz-dek::first-letter{font-size:58px!important}
/* one story a page */
.mzine .mz-sec{display:flex;flex-direction:column}
.mzine .mz-book .mz-story{display:flex!important;flex-direction:column;gap:8px;border-bottom:0!important;margin:0!important;padding:0!important;min-height:0;flex:1}
.mzine .mz-book .mz-story .mz-photo{width:100%!important;margin:6px 0 2px!important;justify-self:auto!important}
.mzine .mz-book .mz-story .mz-photo img{max-height:250px}
.mzine .mz-book .mz-story h3{font-size:clamp(22px,2.3vw,28px)!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mzine .mz-book .mz-story p{font-size:14.5px!important;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.mzine .mz-book .mz-story .mz-read{margin-top:auto;align-self:flex-start}
.mzine .mz-book .mz-story.mz-noimg h3{font-size:clamp(28px,3vw,40px)!important;-webkit-line-clamp:5}
.mzine .mz-book .mz-story.mz-noimg p{-webkit-line-clamp:10}
.mzine .mz-sec-h{margin-bottom:4px!important}
/* phone: one squarer page, arrows on its edges in the middle */
.mzine .mz-book.mz-one .mz-pg{height:470px;padding:18px 30px 40px!important}
.mzine .mz-book.mz-one .mz-folio{left:30px!important;right:30px!important}
.mzine .mz-book.mz-one .mz-mast{font-size:44px!important}
.mzine .mz-book.mz-one .mz-strap{font-size:9px}
.mzine .mz-book.mz-one .mz-cover-photo{width:80%!important}
.mzine .mz-book.mz-one .mz-cover-photo .mz-photo img{max-height:150px}
.mzine .mz-book.mz-one .mz-lines li:nth-child(n+3){display:none}
.mzine .mz-book.mz-one .mz-burst{top:118px!important;transform:scale(.72)}
.mzine .mz-book.mz-one .mz-cov-foot{display:none}
.mzine .mz-book.mz-one .mz-toc h2{font-size:34px!important}
.mzine .mz-book.mz-one .mz-dark .mz-photo img{max-height:300px}
.mzine .mz-book.mz-one .mz-lead-t h2{font-size:30px!important}
.mzine .mz-book.mz-one .mz-lead-t .mz-dek{font-size:14.5px!important;-webkit-line-clamp:8}
.mzine .mz-book.mz-one .mz-story .mz-photo img{max-height:170px}
.mzine .mz-book.mz-one .mz-story h3{font-size:21px!important}
.mzine .mz-book.mz-one .mz-story p{font-size:13.5px!important;-webkit-line-clamp:4}
@media (max-width:760px){
.mzine .mz-bar button{width:44px!important;height:44px!important;top:calc(50% - 20px - 22px)}
.mzine .mz-bar .mz-prev{left:-8px}.mzine .mz-bar .mz-nextb{right:-8px}
}
.mzine .mz-pg{box-sizing:border-box}
.mzine .mz-book:not(.mz-one) .mz-mast{font-size:clamp(44px,5vw,66px)!important}
.mzine .mz-book:not(.mz-one) .mz-cover-photo .mz-photo img{max-height:170px}
.mzine .mz-book:not(.mz-one) .mz-lines li:nth-child(n+4){display:none}
.mzine .mz-strap{margin-bottom:4px}
.mzine .mz-cover .mz-spray{display:none}
.mzine .mz-book .mz-story > *{flex-shrink:0}
.mzine .mz-book .mz-story .mz-photo img{max-height:220px}
.mzine .mz-book .mz-story h3{line-height:1.04!important;padding-bottom:2px}
.mzine .mz-book .mz-story p{-webkit-line-clamp:4}
.mzine .mz-book.mz-one .mz-story .mz-photo img{max-height:150px}
.mzine .mz-book.mz-one .mz-story p{-webkit-line-clamp:3}
.mzine .mz-book.mz-one .mz-sec:has(.mz-sec-h) .mz-story .mz-photo img{max-height:105px}
.mzine .mz-book.mz-one .mz-sec-h{font-size:26px!important}
/* v49 (Rick 10.11: «з сайту важко»): lighter rendering — the blocks' background blur (their fill is ~85 % opaque anyway) is off,
the light that runs over the posters stays on computers only */
.sec{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@media (max-width:700px){.mposter::after{animation:none!important;opacity:0}}
/* ---------- v50 (Rick 10.11: «афіші прикольніші, більш схожі на бібойські; анімацію поправ — щось лишається, скотч, щось пропадає»;
фото блоків: стіна — графіті, Wall of Fame — закинуте приміщення з графіті, музика — вініл, History — розмальований потяг,
батл — інший потяг; журнал — рвані, пом'яті газети; нижній блок — як усі, по-олдскульному) ---------- */
/* old v47 tear bits off */
.mp-scraps{display:none!important}
/* the flyer */
.mwall .mposter.mfly{--fy-bg:#f2c230;--fy-ink:#141210;--fy-hi:#d0342c;--fy-tone:#141210;display:grid;grid-template-rows:auto auto auto auto 1fr;gap:0;padding:10px 10px 22px!important;border-radius:0!important;
background:var(--fy-bg)!important;background-image:var(--gw-noise),linear-gradient(170deg,rgba(255,255,255,.18),transparent 45%)!important;color:var(--fy-ink)!important;
clip-path:polygon(0 0,100% 0,100.0% 97.0%,96.2% 97.6%,92.3% 99.6%,88.5% 97.1%,84.6% 97.3%,80.8% 97.7%,76.9% 95.5%,73.1% 97.3%,69.2% 98.0%,65.4% 98.9%,61.5% 95.0%,57.7% 96.2%,53.8% 95.0%,50.0% 99.0%,46.2% 98.3%,42.3% 94.7%,38.5% 99.9%,34.6% 99.8%,30.8% 98.1%,26.9% 97.9%,23.1% 95.4%,19.2% 94.6%,15.4% 97.4%,11.5% 94.8%,7.7% 95.5%,3.8% 95.8%,0.0% 94.7%);overflow:visible}
.mwall .mposter.mfly.fy-r{--fy-bg:#c8322a;--fy-ink:#fff4dc;--fy-hi:#f2c230;--fy-tone:#3a0c08}
.mwall .mposter.mfly.fy-k{--fy-bg:#151311;--fy-ink:#f2ead2;--fy-hi:#f2c230;--fy-tone:#000}
.mwall .mposter.mfly.fy-w{--fy-bg:#ede6d3;--fy-ink:#141210;--fy-hi:#c8322a;--fy-tone:#141210}
.mwall .mposter.mfly.fy-g{--fy-bg:#2f8a57;--fy-ink:#f6f0dc;--fy-hi:#f2c230;--fy-tone:#06261a}
.mwall .mposter.mfly.world{--fy-bg:#f2c230;--fy-ink:#141210;--fy-hi:#c8322a}
.mwall .mfly .mp-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:2px 2px 6px;border-bottom:3px solid var(--fy-ink);margin-bottom:8px}
.mwall .mfly .mp-top b{font:900 26px/.9 "Fira Sans Extra Condensed","Holtwood One SC",Impact,sans-serif;letter-spacing:.02em;color:var(--fy-ink);text-transform:uppercase}
.mwall .mfly .mp-top i{font:700 8.5px/1.1 var(--f-m);font-style:normal;letter-spacing:.14em;color:var(--fy-ink);opacity:.85;text-align:right}
.mwall .mfly.world .mp-top i{background:var(--fy-ink);color:var(--fy-bg);padding:2px 4px;opacity:1}
.mwall .mfly .mp-img{position:relative;aspect-ratio:4/3;background-color:var(--fy-tone)!important;background-size:cover!important;background-position:center!important;
filter:grayscale(1) contrast(1.5) brightness(1.02)!important;mix-blend-mode:multiply;box-shadow:none!important;overflow:hidden}
.mwall .mfly.fy-k .mp-img,.mwall .mfly.fy-r .mp-img,.mwall .mfly.fy-g .mp-img{mix-blend-mode:normal;filter:grayscale(1) contrast(1.45) brightness(.95)!important}
.mwall .mfly .mp-dots{position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.35) 0 1px,transparent 1.4px) 0 0/5px 5px;mix-blend-mode:multiply;pointer-events:none}
.mwall .mfly .mp-date{position:absolute;top:44px;right:-8px;z-index:3;display:grid;place-items:center;align-content:center;width:66px;height:66px;margin:0!important;border-radius:50%;
background:var(--fy-hi);color:var(--fy-ink);transform:rotate(9deg);box-shadow:0 3px 0 rgba(0,0,0,.35),0 8px 14px rgba(0,0,0,.35);gap:0}
.mwall .mfly.fy-r .mp-date,.mwall .mfly.fy-g .mp-date,.mwall .mfly.fy-k .mp-date{color:#141210}
.mwall .mfly .mp-date b{font:400 28px/.85 "Holtwood One SC",Georgia,serif!important;color:inherit!important}
.mwall .mfly .mp-date i{font:700 11px/1 var(--f-m)!important;letter-spacing:.14em;color:inherit!important;text-transform:uppercase}
.mwall .mfly .mp-name{margin-top:10px;font:400 clamp(19px,1.7vw,23px)/1.02 "Sedgwick Ave Display","Permanent Marker",sans-serif!important;color:var(--fy-ink)!important;
text-transform:none!important;-webkit-line-clamp:3;letter-spacing:.01em}
.mwall .mfly .mp-place{margin-top:6px!important;padding-top:6px!important;border-top:2px dashed var(--fy-ink)!important;font:800 12px/1.2 "Fira Sans Extra Condensed",sans-serif!important;
letter-spacing:.08em;text-transform:uppercase;color:var(--fy-ink)!important;align-self:start}
.mwall .mfly .mp-cd{position:absolute;left:10px;bottom:28px;font:700 10px/1 var(--f-m);font-style:normal;letter-spacing:.1em;text-transform:uppercase;background:var(--fy-ink);color:var(--fy-bg);padding:3px 5px;transform:rotate(-3deg)}
.mwall .mfly .mp-cd{position:static;justify-self:start;margin-top:6px}
.mwall .mfly .mp-w{display:none}
.mwall .mfly .mp-tape{z-index:4}
.mwall .mposter.mfly::after{display:none!important}
@media (max-width:700px){.mwall .mfly .mp-top b{font-size:23px}.mwall .mfly .mp-name{font-size:20px}}
/* tear and slap, clean: the old flyer goes with its tape; the new one lands with its tape already on */
.mwall .mposter .mp-tape{animation:none!important;opacity:1!important}
.mwall .mposter.off .mp-tape{opacity:1!important}
.mwall .mposter{animation:mslap3 .55s cubic-bezier(.2,.8,.3,1.12) .22s both,mbreeze 5.5s ease-in-out calc(var(--d) + 1s) infinite!important}
.mwall .mposter.off{animation:mtear2 .7s cubic-bezier(.5,0,.8,.45) forwards!important;z-index:3;transform-origin:8% 2%;pointer-events:none}
@keyframes mslap3{0%{opacity:0;transform:rotate(calc(var(--r) - 7deg)) translateY(-34px) scale(1.1)}60%{opacity:1;transform:rotate(calc(var(--r) + .8deg)) translateY(2px) scale(.98)}100%{opacity:1;transform:rotate(var(--r))}}
@keyframes mtear2{0%{transform:rotate(var(--r))}25%{transform:rotate(calc(var(--r) + 7deg)) translate(2px,-4px)}100%{opacity:0;transform:rotate(calc(var(--r) + 40deg)) translate(40px,260px) scale(.92)}}
@media (prefers-reduced-motion:reduce){.mwall .mposter,.mwall .mposter.off{animation:none!important}.mwall .mposter.off{opacity:0}}
/* NEW MUSIC: a big record turns slowly behind the releases (the 1979 «Rapper's Delight» label) */
[data-view="home"] .sec:has(#home-rel) > .mside{display:none!important}
.mrecord{position:absolute;z-index:-1;top:50%;right:-12%;width:min(760px,62vw);aspect-ratio:1;margin-top:calc(min(760px,62vw) / -2);pointer-events:none;border-radius:50%;opacity:.55;
background:radial-gradient(circle,transparent 0 17.5%,#0b0b0b 17.6% 18.4%,transparent 18.5%),repeating-radial-gradient(circle,#101010 0 1.6px,#191919 1.8px 3.4px),#111;
box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 0 6px #050505;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.mrecord::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 20deg,transparent 0 8%,rgba(255,255,255,.14) 12%,transparent 18% 50%,rgba(255,255,255,.1) 56%,transparent 62%)}
.mrecord i{position:absolute;inset:32%;border-radius:50%;background:url("img/metro/vinyl-label-rappers-delight.webp?v=50") center/cover;animation:mrec 9s linear infinite}
.mrecord::after{content:"";position:absolute;left:50%;top:50%;width:2.2%;height:2.2%;margin:-1.1% 0 0 -1.1%;border-radius:50%;background:#d8d6cc;box-shadow:0 0 0 3px #222}
@keyframes mrec{to{transform:rotate(360deg)}}
@media (max-width:700px){.mrecord{width:150vw;right:-90vw;opacity:.42;margin-top:-75vw}}
@media (prefers-reduced-motion:reduce){.mrecord i{animation:none}}
/* the battle-breaks block: pipe and signs like the other blocks, the painted car taped to the wall */
[data-view="home"] .band.mposted{background:transparent!important;border:0!important}
[data-view="home"] .band .mtrainph{position:relative;filter:contrast(1.08) saturate(.95)!important;border:8px solid #ece3c8;box-shadow:0 4px 0 rgba(0,0,0,.3),0 24px 40px -12px rgba(0,0,0,.75)!important;transform:rotate(1.4deg);border-radius:2px!important}
[data-view="home"] .band .mtrainph .mp-tape{top:-14px}
[data-view="home"] .band .mtrainph .mp-tape.l{left:-16px}
[data-view="home"] .band .mtrainph .mp-tape.r{right:-16px}
[data-view="home"] .band h2{font-family:"Holtwood One SC",Georgia,serif!important;letter-spacing:.02em;-webkit-text-stroke:1.5px #050c08;paint-order:stroke fill;text-shadow:0 4px 0 #050c08}
/* the magazine: torn, crumpled newsprint */
.mzine .mz-spread .mz-pg.mz-l{clip-path:polygon(0.0% 0.6%,4.2% 0.6%,8.3% 1.1%,12.5% 0.7%,16.7% 0.8%,20.8% 0.6%,25.0% 0.9%,29.2% 0.6%,33.3% 0.4%,37.5% 1.3%,41.7% 1.3%,45.8% 1.1%,50.0% 0.9%,54.2% 0.4%,58.3% 0.3%,62.5% 0.4%,66.7% 0.1%,70.8% 1.0%,75.0% 0.5%,79.2% 1.1%,83.3% 0.5%,87.5% 1.2%,91.7% 1.1%,95.8% 0.0%,100.0% 0.3%,100% 0,100% 100%,100.0% 99.9%,95.8% 99.3%,91.7% 100.0%,87.5% 99.2%,83.3% 98.7%,79.2% 99.5%,75.0% 99.7%,70.8% 99.0%,66.7% 98.7%,62.5% 99.1%,58.3% 99.9%,54.2% 99.7%,50.0% 98.8%,45.8% 98.9%,41.7% 98.7%,37.5% 98.7%,33.3% 99.7%,29.2% 98.8%,25.0% 99.4%,20.8% 99.2%,16.7% 98.9%,12.5% 99.6%,8.3% 98.8%,4.2% 99.5%,0.0% 98.8%,0.6% 100.0%,0.3% 93.8%,0.4% 87.5%,1.5% 81.2%,1.2% 75.0%,0.5% 68.8%,1.3% 62.5%,0.3% 56.2%,0.6% 50.0%,1.3% 43.8%,1.0% 37.5%,0.2% 31.2%,1.5% 25.0%,0.3% 18.8%,0.4% 12.5%,1.2% 6.2%,0.5% 0.0%)}
.mzine .mz-spread .mz-pg.mz-r{clip-path:polygon(0.0% 0.4%,4.2% 0.1%,8.3% 0.1%,12.5% 0.8%,16.7% 0.3%,20.8% 0.8%,25.0% 0.5%,29.2% 0.6%,33.3% 1.2%,37.5% 0.6%,41.7% 0.7%,45.8% 1.1%,50.0% 0.2%,54.2% 0.2%,58.3% 1.2%,62.5% 1.1%,66.7% 0.3%,70.8% 0.2%,75.0% 1.0%,79.2% 1.2%,83.3% 0.3%,87.5% 1.2%,91.7% 1.1%,95.8% 0.8%,100.0% 0.5%,98.7% 0.0%,98.6% 6.2%,99.9% 12.5%,98.9% 18.8%,99.6% 25.0%,98.9% 31.2%,99.7% 37.5%,99.4% 43.8%,98.9% 50.0%,98.8% 56.2%,99.6% 62.5%,98.6% 68.8%,98.8% 75.0%,99.3% 81.2%,99.8% 87.5%,99.4% 93.8%,98.9% 100.0%,100.0% 99.9%,95.8% 98.9%,91.7% 98.6%,87.5% 99.0%,83.3% 99.2%,79.2% 98.7%,75.0% 98.8%,70.8% 99.1%,66.7% 99.4%,62.5% 98.8%,58.3% 99.1%,54.2% 99.8%,50.0% 100.0%,45.8% 99.5%,41.7% 99.6%,37.5% 99.4%,33.3% 98.8%,29.2% 98.6%,25.0% 98.6%,20.8% 99.9%,16.7% 99.6%,12.5% 99.9%,8.3% 98.6%,4.2% 99.5%,0.0% 99.3%,0 100%,0 0)}
.mzine .mz-book.mz-one .mz-spread .mz-pg{clip-path:polygon(0.0% 0.9%,4.2% 0.4%,8.3% 1.3%,12.5% 0.1%,16.7% 0.7%,20.8% 1.0%,25.0% 1.2%,29.2% 1.0%,33.3% 0.9%,37.5% 1.0%,41.7% 1.2%,45.8% 0.5%,50.0% 0.9%,54.2% 1.2%,58.3% 1.1%,62.5% 0.5%,66.7% 1.0%,70.8% 1.1%,75.0% 0.7%,79.2% 0.8%,83.3% 0.5%,87.5% 0.8%,91.7% 0.8%,95.8% 0.1%,100.0% 0.8%,100.0% 0.0%,99.8% 6.2%,99.6% 12.5%,99.1% 18.8%,99.6% 25.0%,99.4% 31.2%,99.2% 37.5%,99.8% 43.8%,98.6% 50.0%,99.6% 56.2%,98.5% 62.5%,99.4% 68.8%,99.2% 75.0%,98.8% 81.2%,99.5% 87.5%,99.2% 93.8%,99.4% 100.0%,100.0% 99.9%,95.8% 99.0%,91.7% 98.6%,87.5% 99.0%,83.3% 99.5%,79.2% 98.9%,75.0% 98.8%,70.8% 99.9%,66.7% 99.5%,62.5% 99.2%,58.3% 99.8%,54.2% 99.1%,50.0% 99.5%,45.8% 98.9%,41.7% 99.2%,37.5% 99.7%,33.3% 99.9%,29.2% 99.8%,25.0% 99.1%,20.8% 99.4%,16.7% 99.0%,12.5% 98.8%,8.3% 99.3%,4.2% 99.8%,0.0% 99.8%,1.1% 100.0%,1.4% 93.8%,0.4% 87.5%,0.3% 81.2%,0.7% 75.0%,0.4% 68.8%,0.3% 62.5%,0.6% 56.2%,0.9% 50.0%,0.7% 43.8%,0.5% 37.5%,1.3% 31.2%,1.5% 25.0%,0.7% 18.8%,0.1% 12.5%,0.0% 6.2%,1.3% 0.0%)}
.mzine .mz-pg::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.3;mix-blend-mode:multiply;
background:linear-gradient(118deg,transparent 47.6%,rgba(0,0,0,.16) 48.2%,rgba(255,255,255,.3) 48.8%,transparent 49.6%),
linear-gradient(28deg,transparent 63.4%,rgba(0,0,0,.12) 64%,rgba(255,255,255,.24) 64.5%,transparent 65.3%),
linear-gradient(162deg,transparent 21%,rgba(0,0,0,.1) 21.6%,transparent 22.4%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' seed='9'/%3E%3CfeDiffuseLighting lighting-color='%23fff' surfaceScale='5'%3E%3CfeDistantLight azimuth='225' elevation='38'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") center/520px 520px}
.mzine .mz-dark::after{mix-blend-mode:screen;opacity:.16}
.mzine .mz-spread{transform:rotate(-.6deg)}
/* v50b: NEW MUSIC — an old-school boombox behind the releases instead of the record; it bumps softly to the beat */
.mrecord{display:none!important}
.mboom{position:absolute;z-index:-1;right:-4%;top:50%;width:min(720px,58vw);transform:translateY(-50%) rotate(-4deg);pointer-events:none;opacity:.62;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%);filter:drop-shadow(0 26px 30px rgba(0,0,0,.6))}
.mboom img{display:block;width:100%;height:auto;animation:mboomb .94s ease-in-out infinite}
@keyframes mboomb{0%,100%{transform:scale(1)}12%{transform:scale(1.018)}}
@media (max-width:700px){.mboom{width:150vw;right:-78vw;top:42%;opacity:.4}}
@media (prefers-reduced-motion:reduce){.mboom img{animation:none}}
/* v50c: the torn paper is drawn behind the flyer, so the tape on top is not cut off; brighter paper, lighter photo */
.mwall .mposter.mfly{clip-path:none!important;background:transparent!important;background-image:none!important;box-shadow:none!important;isolation:isolate;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55))}
.mwall .mposter.mfly::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fy-bg);
background-image:linear-gradient(170deg,rgba(255,255,255,.22),transparent 45%),radial-gradient(rgba(0,0,0,.08) 1px,transparent 1.2px);background-size:auto,4px 4px;clip-path:polygon(0 0,100% 0,100.0% 97.0%,96.2% 97.6%,92.3% 99.6%,88.5% 97.1%,84.6% 97.3%,80.8% 97.7%,76.9% 95.5%,73.1% 97.3%,69.2% 98.0%,65.4% 98.9%,61.5% 95.0%,57.7% 96.2%,53.8% 95.0%,50.0% 99.0%,46.2% 98.3%,42.3% 94.7%,38.5% 99.9%,34.6% 99.8%,30.8% 98.1%,26.9% 97.9%,23.1% 95.4%,19.2% 94.6%,15.4% 97.4%,11.5% 94.8%,7.7% 95.5%,3.8% 95.8%,0.0% 94.7%)}
.mwall .mfly .mp-img{filter:grayscale(1) contrast(1.35) brightness(1.3)!important}
.mwall .mfly.fy-k .mp-img,.mwall .mfly.fy-r .mp-img,.mwall .mfly.fy-g .mp-img{filter:grayscale(1) contrast(1.3) brightness(1.08)!important}
/* ---------- v51 (Rick 10.11: фото в наших кольорах; бібої — олдскульне графіті; бумбокс не стрибає, темно-зелений; діджеї — частина вінілу,
що переливається в стіну; history — дальній план, багато вагонів; журнал — старі газети й блекбук з тегами; головне — без жорстких стиків:
плавні переходи кольору й ефектів через усю сторінку, блоки по черзі зліва / справа) ---------- */
/* one rule for every wall picture on the page: the same green, soft edges on all four sides, overlapping the next block */
body.mlook-b [data-view="home"] .mpiped > .mside{opacity:.55;-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent 96%),linear-gradient(180deg,transparent 0,#000 26%)!important;
mask-image:linear-gradient(270deg,#000 30%,transparent 96%),linear-gradient(180deg,transparent 0,#000 26%)!important;-webkit-mask-composite:source-in;mask-composite:intersect}
body.mlook-b [data-view="home"] .mright.mpiped > .mside{-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent 96%),linear-gradient(180deg,transparent 0,#000 26%)!important;
mask-image:linear-gradient(90deg,#000 30%,transparent 96%),linear-gradient(180deg,transparent 0,#000 26%)!important}
@media (max-width:700px){body.mlook-b [data-view="home"] .mpiped > .mside{opacity:.42}}
/* the first screen melts into the wall instead of ending on a hard line */
body.mlook-b [data-view="home"] .hero{background:transparent!important}
body.mlook-b [data-view="home"] .hero .hero-img{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%),linear-gradient(90deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%),linear-gradient(90deg,transparent 0,#000 22%);-webkit-mask-composite:source-in;mask-composite:intersect}
body.mlook-b [data-view="home"] .hero .hero-shade{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}
body.mlook-b [data-view="home"] .mwall{margin-top:-60px}
@media (max-width:700px){body.mlook-b [data-view="home"] .hero .hero-img{-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}}
/* new music: the boombox, still, in the wall's greens, on the block's picture side */
.mboom{opacity:.7!important;right:-4%;left:auto;filter:none!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important;-webkit-mask-composite:source-in;mask-composite:intersect}
.mboom img{animation:none!important}
.mright > .mboom{right:auto!important;left:-4%;transform:translateY(-50%) rotate(4deg)!important;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important;mask-image:linear-gradient(270deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)!important}
@media (max-width:700px){.mboom,.mright > .mboom{width:140vw;opacity:.42!important}.mboom{right:-70vw}.mright > .mboom{left:-70vw}}
/* DJs: a record comes out of the picture side */
.mvin{position:absolute;z-index:-1;top:50%;right:-22%;width:min(820px,64vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;border-radius:50%;opacity:.6;
background:radial-gradient(circle,transparent 0 16.5%,#04110b 16.6% 17.4%,transparent 17.5%),repeating-radial-gradient(circle,#0b1d14 0 1.4px,#11261b 1.6px 3.2px),#0b1d14;
box-shadow:inset 0 0 0 5px #030a06,0 30px 60px rgba(0,0,0,.55);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.mvin::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 30deg,transparent 0 7%,rgba(190,230,205,.14) 11%,transparent 17% 52%,rgba(190,230,205,.1) 58%,transparent 64%)}
.mvin i{position:absolute;inset:33%;border-radius:50%;display:grid;place-items:center;align-content:center;gap:4%;background:radial-gradient(circle,#0b1d14 0 4%,#2f6a4b 4.5% 100%);color:#d9e6dc;font-style:normal;text-align:center}
.mvin i b{font:400 clamp(12px,1.6vw,22px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;margin-top:30%}
.mvin i small{font:700 clamp(8px,.8vw,11px)/1 var(--f-m);letter-spacing:.16em;opacity:.8}
.mright > .mvin{right:auto;left:-22%;-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(270deg,transparent 0,#000 34%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
@media (max-width:700px){.mvin{width:150vw;right:-95vw;opacity:.38}.mright > .mvin{left:-95vw}}
/* News: newspaper clippings + a blackbook page, toned into the wall */
[data-view="home"] .sec.mposted:has(.mpress) > .mside{display:none!important}
.mpress{position:absolute;z-index:-1;top:40px;bottom:40px;right:0;width:min(60%,900px);pointer-events:none;opacity:.5;filter:sepia(.35) hue-rotate(55deg) saturate(.55) brightness(.82);
-webkit-mask-image:linear-gradient(270deg,#000 35%,transparent 98%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(270deg,#000 35%,transparent 98%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.mright > .mpress{right:auto;left:0;-webkit-mask-image:linear-gradient(90deg,#000 35%,transparent 98%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,#000 35%,transparent 98%),linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.mclip{position:absolute;width:46%;padding:14px 16px 18px;background:#e7dcc0;color:#1a1610;box-shadow:0 10px 24px rgba(0,0,0,.55);font-family:Georgia,"Times New Roman",serif;
clip-path:polygon(0 2%,8% 0,22% 3%,40% 0,61% 2%,79% 0,100% 2%,98% 30%,100% 58%,97% 100%,72% 97%,50% 100%,28% 97%,6% 100%,2% 70%,0 40%)}
.mclip .mc-m{display:block;text-align:center;font:900 30px/1 "Old English Text MT","UnifrakturMaguntia",Georgia,serif;border-bottom:3px double #1a1610;padding-bottom:6px;letter-spacing:.01em}
.mclip .mc-d{display:block;margin:5px 0 8px;font:700 9px/1 var(--f-m);letter-spacing:.16em;text-align:center;border-bottom:1px solid #1a1610;padding-bottom:5px}
.mclip h4{margin:6px 0 8px;font:900 22px/1.05 Georgia,"Times New Roman",serif;text-transform:uppercase}
.mclip .mc-c{display:block;height:120px;background:repeating-linear-gradient(180deg,rgba(26,22,16,.55) 0 2px,transparent 2px 7px);-webkit-mask-image:linear-gradient(90deg,#000 0 31%,transparent 31% 34.5%,#000 34.5% 65.5%,transparent 65.5% 69%,#000 69%);mask-image:linear-gradient(90deg,#000 0 31%,transparent 31% 34.5%,#000 34.5% 65.5%,transparent 65.5% 69%,#000 69%)}
.mclip.c1{right:6%;top:2%;transform:rotate(-4deg)}
.mclip.c2{right:30%;top:36%;width:40%;transform:rotate(3deg)}
.mclip.c2 .mc-m{font-size:24px}
.mclip.c3{right:2%;bottom:4%;width:36%;transform:rotate(-2deg)}
.mclip.c3 .mc-c{height:70px}
.mbook{position:absolute;right:46%;top:6%;width:34%;aspect-ratio:3/4;transform:rotate(-8deg);background:#f1ece0;box-shadow:0 12px 26px rgba(0,0,0,.55);
background-image:linear-gradient(rgba(60,110,90,.25) 1px,transparent 1px);background-size:100% 22px;border-left:18px solid #1b1b1b}
.mbook .mb-r{position:absolute;left:-14px;top:6%;bottom:6%;width:10px;background:repeating-linear-gradient(180deg,#cfcfcf 0 6px,transparent 6px 16px)}
.mbook b{position:absolute;font:400 34px/1 "Sedgwick Ave Display","Permanent Marker",sans-serif;-webkit-text-stroke:2.5px #111;paint-order:stroke fill}
.mbook .t1{left:10%;top:10%;color:#d2692a;transform:rotate(-6deg);font-size:44px}
.mbook .t2{left:28%;top:28%;color:#f2c230;transform:rotate(-3deg);font-size:46px}
.mbook .t3{left:12%;top:52%;color:#3fa7d6;font-size:30px;transform:rotate(4deg)}
.mbook .t4{left:44%;top:60%;color:#5cbf6a;font-size:26px;transform:rotate(-9deg)}
.mbook .t5{left:16%;top:78%;color:#ece7d6;font-size:20px;transform:rotate(2deg)}
.mright > .mpress .mclip.c1{right:auto;left:6%}.mright > .mpress .mclip.c2{right:auto;left:30%}.mright > .mpress .mclip.c3{right:auto;left:2%}.mright > .mpress .mbook{right:auto;left:46%}
@media (max-width:700px){.mpress{width:100%;opacity:.32}.mclip{width:70%}.mclip.c2{width:62%;right:20%}.mbook{width:56%;right:30%}}
/* v51b: the pictures read a little stronger on computers (Dondi's piece, the yard, the record) */
@media (min-width:701px){body.mlook-b [data-view="home"] .mpiped > .mside{opacity:.7}.mvin{opacity:.8}.mboom{opacity:.8!important}}
.mvin i{background:radial-gradient(circle,#0b1d14 0 4%,#3c7d5a 4.5% 100%)}
/* ---------- v52 (Rick 10.11): the top as before (no fade on the first screen); sides R / L / R / L / R / L; graffiti, boombox,
record shop as the blocks' own pictures; hip-hop clippings on the left of News ---------- */
body:not(.mlook-b) [data-view="home"] .hero .hero-img,body:not(.mlook-b) [data-view="home"] .hero .hero-shade{-webkit-mask-image:none!important;mask-image:none!important}
body:not(.mlook-b) [data-view="home"] .mwall{margin-top:0!important}
.mboom,.mvin{display:none!important}
@media (min-width:701px){body.mlook-b [data-view="home"] .mpiped > .mside{opacity:.78}}
@media (max-width:700px){body.mlook-b [data-view="home"] .mpiped > .mside{opacity:.5}}
/* clippings: more colour, more hip-hop */
.mpress{opacity:.62;filter:sepia(.15) saturate(.9) brightness(.92)!important}
.mclip.hh{background:#f2c230}
.mclip .hh1{font:400 34px/.9 "Holtwood One SC",Georgia,serif!important;color:#c8322a;-webkit-text-stroke:1.5px #141210;paint-order:stroke fill;border-bottom:3px solid #141210}
.mclip.hh2{background:#151311;color:#f2ead2}
.mclip .hh2m{font:900 40px/.9 "Fira Sans Extra Condensed",Impact,sans-serif!important;letter-spacing:.04em;color:#f2c230;border-bottom-color:#f2ead2}
.mclip.hh2 .mc-d{border-bottom-color:#f2ead2}
.mclip.hh2 .mc-c{background:repeating-linear-gradient(180deg,rgba(242,234,210,.5) 0 2px,transparent 2px 7px)}
.mclip.hh3{background:#ede6d3}
.mclip .hh3m{font:400 26px/1 "Sedgwick Ave Display","Permanent Marker",sans-serif!important;color:#2f8a57;-webkit-text-stroke:1.5px #141210;paint-order:stroke fill;border-bottom:3px double #141210}
.mtag{position:absolute;font:400 30px/1 "Sedgwick Ave Display","Permanent Marker",sans-serif;-webkit-text-stroke:2px #111;paint-order:stroke fill;transform:rotate(-12deg)}
.mtag.s1{right:-10px;bottom:6px;color:#3fa7d6}
.mtag.s2{left:-8px;top:-14px;color:#c8322a;transform:rotate(8deg)}
.mbook .mb-bomb{position:absolute;right:8%;bottom:8%;width:28%;aspect-ratio:1;border-radius:50% 46% 52% 44%;background:#f2c230;box-shadow:inset 0 0 0 4px #111}
.mflyer{position:absolute;right:58%;bottom:6%;width:24%;aspect-ratio:3/4;transform:rotate(6deg);background:#c8322a;color:#fff4dc;padding:12px;box-shadow:0 10px 22px rgba(0,0,0,.55);display:grid;align-content:start;gap:6px;
clip-path:polygon(0 0,100% 0,100% 94%,90% 100%,76% 95%,60% 100%,44% 96%,28% 100%,12% 95%,0 99%)}
.mflyer b{font:400 46px/.9 "Holtwood One SC",Georgia,serif;-webkit-text-stroke:1.5px #141210;paint-order:stroke fill;color:#f2c230}
.mflyer span{font:800 12px/1.2 "Fira Sans Extra Condensed",sans-serif;letter-spacing:.1em}
.mflyer i{font:700 9px/1.2 var(--f-m);font-style:normal;letter-spacing:.12em;opacity:.9}
.mright > .mpress .mflyer{right:auto;left:58%}
@media (max-width:700px){.mflyer{width:40%;right:50%}.mright > .mpress .mflyer{left:50%}}
[data-view="home"] .sec:has(#home-rel) > .mside{display:block!important;background-position:center!important}
/* v52: each picture shows its outer part (the subject sits at the page edge, where the blocks leave the wall free) */
[data-view="home"] .mpiped > .mside{background-size:cover!important;background-position:right center!important}
[data-view="home"] .mright.mpiped > .mside{background-position:left center!important}
/* ---------- v53 (Rick 10.11: касетна плівка по картинках, ледь-ледь видно, зелена, по краях, як маршрут на карті) ---------- */
svg.mtape{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;overflow:visible;opacity:.4}
svg.mtape path{fill:none;stroke-linecap:round;stroke-linejoin:round}
svg.mtape .mt-a{stroke:#06150e;stroke-width:9}
svg.mtape .mt-b{stroke:#2c5d43;stroke-width:6}
svg.mtape .mt-c{stroke:rgba(205,238,215,.55);stroke-width:1.4;stroke-dasharray:2 30}
svg.mtape .mt-cas rect{fill:#163828;stroke:#06150e;stroke-width:2}
svg.mtape .mt-cas .w{fill:#0b2016;stroke:#06150e;stroke-width:1.5}
svg.mtape .mt-cas .r{fill:none;stroke:#7fb497;stroke-width:2.4}
@media (max-width:700px){svg.mtape{opacity:.32}svg.mtape .mt-a{stroke-width:6}svg.mtape .mt-b{stroke-width:4}}
/* v53b: the tape lies above every wall picture (z 0, early in the block, so cards and signs still sit on top of it) */
svg.mtape{z-index:0;opacity:.5}
svg.mtape .mt-b{stroke:#3d7b58}
@media (max-width:700px){svg.mtape{opacity:.38}}
/* ---------- v54 (Rick 10.11): only the pictures change — every block a painted train; the game buildings stay (variant A, default).
Variant B (?look=b): the first screen fades into the wall, the pictures fade in from the top (the buildings at the bottom stay) ---------- */
.mpress{display:none!important}
[data-view="home"] .sec.mposted > .mside{display:block!important}
body.mlook-b .gw-chip::after{content:" · B";color:var(--gw-gold)}
/* ---------- v55 (Rick 10.11): our train — fast start, a slow crawl in the middle, fast again; on the home page it stands on the
first pipe and pulls out; it rides into the Radio too. Radio: the player sits in the boombox's tape window, bigger keys
with words, a street lamp shining on the boombox ---------- */
.mptrain.go.ltr{animation:mpL3 3.6s both!important}
.mptrain.go.rtl{animation:mpR3 3.6s both!important}
@keyframes mpL3{0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.2,.55,.45,1)}35%{transform:translateX(calc(44vw - 56%));animation-timing-function:linear}65%{transform:translateX(calc(56vw - 44%));animation-timing-function:cubic-bezier(.55,0,.8,.45)}100%{transform:translateX(100vw)}}
@keyframes mpR3{0%{transform:translateX(100vw);animation-timing-function:cubic-bezier(.2,.55,.45,1)}35%{transform:translateX(calc(56vw - 44%));animation-timing-function:linear}65%{transform:translateX(calc(44vw - 56%));animation-timing-function:cubic-bezier(.55,0,.8,.45)}100%{transform:translateX(-100%)}}
/* home: the train on the first pipe (its wheels on the pipe) */
.mwall .mhtrain{position:absolute;left:0;top:calc(14px - var(--ht,62px) + 5px);z-index:4;height:var(--ht,62px);width:max-content;pointer-events:none;transform:translateX(-100%)}
.mwall .mhtrain img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.mwall .mhtrain.park{transform:translateX(calc(-100% + min(34vw, 330px)))}
.mwall .mhtrain.go{animation:mhGo 3.7s both}
.mwall .mhtrain.in{animation:mhIn 2.6s cubic-bezier(.15,.7,.35,1) both}
@keyframes mhGo{0%{transform:translateX(calc(-100% + min(34vw, 330px)));animation-timing-function:cubic-bezier(.45,0,.55,.6)}30%{transform:translateX(calc(42vw - 58%));animation-timing-function:linear}62%{transform:translateX(calc(56vw - 44%));animation-timing-function:cubic-bezier(.55,0,.8,.45)}100%{transform:translateX(100vw)}}
@keyframes mhIn{from{transform:translateX(-100%)}to{transform:translateX(calc(-100% + min(34vw, 330px)))}}
@media (max-width:700px){.mwall .mhtrain{--ht:40px}}
@media (prefers-reduced-motion:reduce){.mwall .mhtrain{animation:none!important}}
/* (v56: the v55 radio changes are taken out — Rick: «радіо поверне, як було»; they are in _backup/styles-metro_before_v56.css) */
/* ---------- v56 (Rick 10.11): the City train stands; on coming back it rolls in, stops right, runs out, comes back and stands.
The tape is a real-looking magnetic tape (no cassette). The first screen melts into the wall (the harsh seam over ON THE WALL) ---------- */
.mwall .mhtrain.out{transform:translateX(-100%)}
.mwall .mhtrain.enter{animation:mhEnter 2.6s cubic-bezier(.2,.6,.35,1) both}
.mwall .mhtrain.leave{animation:mhLeave 1.6s cubic-bezier(.55,0,.85,.4) both}
@keyframes mhEnter{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw - 100% - 24px))}}
@keyframes mhLeave{from{transform:translateX(calc(100vw - 100% - 24px))}to{transform:translateX(100vw)}}
/* magnetic tape: a dark brown glossy ribbon with a bronze sheen along its edge and little twists */
svg.mtape{opacity:.55}
svg.mtape .mt-a{stroke:#0a0604!important;stroke-width:8!important}
svg.mtape .mt-b{stroke:#3b2516!important;stroke-width:6!important}
svg.mtape .mt-d{stroke:rgba(214,160,112,.55)!important;stroke-width:1.2!important}
svg.mtape .mt-c{stroke:rgba(255,226,196,.8)!important;stroke-width:2.6!important;stroke-dasharray:1 58!important}
svg.mtape .mt-cas{display:none}
@media (max-width:700px){svg.mtape{opacity:.42}}
/* the first screen fades into the wall instead of ending on a line */
[data-view="home"] .hero{background:transparent!important}
[data-view="home"] .hero .hero-img{-webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 75%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 75%,transparent 100%)!important}
[data-view="home"] .hero .hero-shade{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 55%,transparent 100%)!important}
[data-view="home"] .mwall > .mside{-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent 96%),linear-gradient(180deg,transparent 0,#000 34%,#000 100%)!important;mask-image:linear-gradient(270deg,#000 30%,transparent 96%),linear-gradient(180deg,transparent 0,#000 34%,#000 100%)!important;-webkit-mask-composite:source-in;mask-composite:intersect}
/* v59 (Rick 10.11: «картинки підгружались чітко, швидко, плавно, без рвання»): a wall picture that arrives while you look at it fades in */
.mside.mside-in{animation:msidein .6s ease-out}
@keyframes msidein{from{opacity:0}}
/* v59: the tape line is off (Rick: «прибери оцю ленту, плівкову»); hide any left from a cached page */
svg.mtape{display:none!important}
/* v62 (Rick 10.11: «формула — щоб не важчав»): nothing that is never shown is fetched on the start —
the band photo is the 1973 train (metro sets it too), the hidden Cypher teaser on home keeps no photo */
[data-view="home"] .band .photo{background-image:url("img/metro/ph-band-train-1973.jpg")!important}
.cm-photo{background-image:none!important}
/* v64 (Rick 10.11: «крок 5»): the end of a long list — more cards come by themselves when it nears the screen, or by tapping it (48 px, under the thumb) */
.pg-more{grid-column:1/-1;flex:0 0 100%;justify-self:center;align-self:center;margin:18px auto 6px!important;min-height:48px;padding:0 22px;font:700 13px/1 var(--f-m,monospace);letter-spacing:.18em}
/* ---------- v67 (Rick 10.11: «три журнали з обкладинками, людина вибирає один і погнала; прибери категорії вгорі і нижній блок;
зроби, як першу; труба між шапкою і блоком, щоб наш потяг по ній їхав; плашка NEWS на телефоні — юзабільніше») ---------- */
/* the tabs and the long list are gone: every story lives in the magazines */
[data-view="news"].mnews3 #news-tabs,[data-view="news"].mnews3 > .sec{display:none!important}
.mnewsmag.mpiped{padding:122px max(16px,env(safe-area-inset-left,0px)) 34px!important;overflow:visible}
/* a wall picture behind, on the right, as on the home wall */
[data-view="news"] .mnewsmag > .mside{top:-40px;bottom:auto;height:min(980px,140vw);background-size:cover;background-position:right center}
/* the picker: the three real covers */
.mnewsmag .mrack-h{margin:6px 0 18px;text-align:center;font:400 14px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.2em;color:var(--gw-gold)}
.mnewsmag .mrack{display:grid;grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;gap:clamp(18px,3vw,40px);max-width:1040px;margin:0 auto 30px}
.mrack-cv{position:relative;display:flex;flex-direction:column;gap:14px;cursor:pointer;outline:none;--cw:300;min-width:0}
.mrack-cv .mrack-thumb{display:block;width:440px;zoom:calc(var(--cw) / 440);pointer-events:none;box-shadow:0 18px 30px rgba(0,0,0,.6);transform:rotate(var(--rr,-1deg));transition:transform .25s ease,box-shadow .25s ease}
.mrack-cv:nth-child(2) .mrack-thumb{--rr:.8deg}
.mrack-cv:nth-child(3) .mrack-thumb{--rr:-.6deg}
.mrack-cv:hover .mrack-thumb,.mrack-cv:focus-visible .mrack-thumb{transform:rotate(0) translateY(-6px)}
.mrack-cv[aria-selected="true"] .mrack-thumb{transform:rotate(0) translateY(-10px);box-shadow:0 0 0 6px #f2c430,0 24px 36px rgba(0,0,0,.65)}
.mrack-cv .mrack-n{text-align:center;font:400 15px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--gw-bone)}
.mrack-cv[aria-selected="true"] .mrack-n{color:var(--gw-gold)}
.mrack-cv:focus-visible .mrack-n{outline:3px solid var(--gw-gold);outline-offset:4px}
.mrack-thumb .mzine{margin:0!important;max-width:none!important;padding:0!important}
.mrack-thumb .mz-book{margin:0!important;box-shadow:none!important;transform:none!important}
.mrack-thumb .mzine .mz-book .mz-pg{min-height:590px!important} /* a magazine-shaped cover (about 3:4), not a square */
.mnewsmag .mrack-read{display:none}
/* phone: one cover at a time (◁ ▷, swipe) and a big READ button under the thumb */
@media (max-width:700px){
.mnewsmag.mpiped{padding-top:112px!important}
.mnewsmag .mrack{display:grid!important;grid-auto-flow:column;grid-auto-columns:100%;grid-template-columns:none;gap:24px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;padding:12px 0 14px;margin:0;max-width:none;justify-content:start}
.mnewsmag .mrack::-webkit-scrollbar{display:none}
.mnewsmag .mrack > .mrack-cv{scroll-snap-align:start;scroll-snap-stop:always;align-items:center}
.mnewsmag .mrack-read{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;margin:6px 0 26px;font:400 16px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em}
}
/* our train on the News pipe (the same moves as on home; the header train does not run on News) */
.mnewsmag .mhtrain{position:absolute;left:0;top:calc(14px - var(--ht,62px) + 5px);z-index:5;height:var(--ht,62px);width:max-content;pointer-events:none;transform:translateX(-100%)}
.mnewsmag .mhtrain img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.mnewsmag .mhtrain.park{transform:translateX(calc(-100% + min(34vw, 330px)))}
.mnewsmag .mhtrain.out{transform:translateX(-100%)}
.mnewsmag .mhtrain.enter{animation:mhEnter 2.6s cubic-bezier(.2,.6,.35,1) both}
.mnewsmag .mhtrain.leave{animation:mhLeave 1.6s cubic-bezier(.55,0,.85,.4) both}
.mnewsmag .mhtrain.in{animation:mhIn 2.6s cubic-bezier(.15,.7,.35,1) both}
@media (max-width:700px){.mnewsmag .mhtrain{--ht:40px}}
@media (prefers-reduced-motion:reduce){.mnewsmag .mhtrain{animation:none!important}}
/* the station sign on a phone: one readable street-sign line; a tap opens the story about the place
(v67 News; v69 Rick 10.11 «так, на всі»: every page with a station sign — Events, Music, DJs, B-Boys, Rankings, School, History, Cypher) */
@media (max-width:600px){
[data-view] .msignpost{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:52px;padding:9px 12px;background:#0b6b3a;border:0;border-radius:6px;box-shadow:inset 0 0 0 2px #e9efe9,0 6px 14px rgba(0,0,0,.45);cursor:pointer}
[data-view] .msignpost::before,[data-view] .msignpost::after{display:none}
[data-view] .msignpost .ms-top{margin:0}
[data-view] .msignpost .ms-top .mbul{width:28px;height:28px;font-size:14px}
[data-view] .msignpost .ms-stop{font:700 13px/1 var(--f-m);letter-spacing:.06em;color:#fff}
[data-view] .msignpost .ms-sec{display:none}
[data-view] .msignpost .ms-place{flex:1 1 auto;margin:0;padding:0;border:0;font:700 13px/1.3 var(--f-m);letter-spacing:.04em;color:#fff;text-transform:uppercase}
[data-view] .msignpost .ms-place i{color:#ffe28a;font-size:12.5px}
[data-view] .msignpost .ms-place::after{content:" ⓘ";color:#ffe28a}
[data-view] .msignpost:not(.mopen) .ms-fact,[data-view] .msignpost:not(.mopen) .ms-more{display:none}
[data-view] .msignpost.mopen .ms-fact{flex-basis:100%;margin:4px 0 0;font-size:15px;line-height:1.45;color:#fff}
[data-view] .msignpost.mopen .ms-more{display:flex;align-items:center;justify-content:center;flex-basis:100%;min-height:44px;margin:2px 0 0;border-radius:6px;background:#e2763a;color:#111;font-size:13px}
}
/* ---------- v70 (Rick 10.11: «Events»): the Events page as one wall without seams, like home — variant ?wall=1 for Rick's «так».
The panel is transparent (the city wall shows through), a pipe with street signs on top and over every month, far views of
painted trains on alternate sides down the page (metro.js evWall). Only transform/opacity move; pictures load near the screen. ---------- */
.mevw > .sec{overflow-x:clip}
.mevw-walls{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.mevw-walls > .mside{bottom:auto;z-index:0}
.mevw-walls > .mside.mevw-l{right:auto;left:0;-webkit-mask-image:linear-gradient(90deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,#000 25%,transparent 96%),linear-gradient(180deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.mevw-walls > .mside.mevw-l .mside-sil{background-image:url("img/metro/gsil-home.webp?v=9")}
/* the events stand on the wall as dark plates (readable over the photos) */
.mevw #ev-list li.ev{background:rgba(9,20,14,.7);border:0;border-radius:8px;padding:14px 14px;margin:0 0 14px;box-shadow:inset 0 0 0 1px rgba(216,214,204,.08),0 8px 16px -10px #000}
.mevw #ev-list ul.evlist{border:0}
/* every month = a station: the steel pipe across the page, the month and the count on two green street signs */
.mevw #ev-list h2.mevw-mo{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:40px 0 16px;padding:52px 0 0;min-height:98px;border:0;background:none;font-size:0;line-height:1}
.mevw #ev-list h2.mevw-mo:first-child{margin-top:8px}
.mevw-mo > .mpipe{left:calc(50% - 50vw);right:calc(50% - 50vw);top:14px}
.mevw-mo > .mblade{position:relative;left:auto;top:auto;right:auto;flex:none;height:44px;padding:0 14px;transform:none;filter:none;
transform-origin:50% -20px;animation:mswing 6s ease-in-out var(--sw,0s) infinite}
.mevw-mo > .mblade b{font:400 18px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;text-transform:uppercase}
.mevw-mo > small.mblade.b{display:flex;align-items:center;margin:0;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;text-transform:uppercase;color:#f6f6ee;opacity:1;animation-duration:5.2s}
.mevw-mo > .mblade::before,.mevw-mo > .mblade::after{content:"";position:absolute;top:-20px;width:3px;height:20px;transform:none;border-radius:1px;background:repeating-linear-gradient(180deg,#a7b0ab 0 3px,#3c4440 3px 5px)}
.mevw-mo > .mblade::before{left:16%;right:auto}
.mevw-mo > .mblade::after{right:16%;left:auto}
@media (max-width:700px){
.mevw #ev-list li.ev{padding:12px 10px}
.mevw #ev-list h2.mevw-mo{gap:8px;padding-top:48px;min-height:92px;margin-top:34px}
.mevw-mo > .mblade{height:42px;padding:0 10px}
.mevw-mo > .mblade b{font-size:14px;letter-spacing:.06em}
.mevw-mo > small.mblade.b{font-size:11.5px;letter-spacing:.05em}
}
@media (prefers-reduced-motion:reduce){.mevw-mo > .mblade{animation:none}}
section.mevw[data-view] > .sec.mposted{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
section.mevw[data-view] > .sec.mposted::before{display:none!important}
section.mevw[data-view] > .sec.mposted{margin-left:0!important;margin-right:0!important;border-radius:0!important}
/* v76: on wall pages the panels keep their own headings (Music: «New releases», «Labels and where to buy»…) — .mposted hides .sec-h elsewhere */
section.mevw[data-view] > .sec.mposted .sec-h{display:flex!important}
/* ---------- v82 (Rick 12.11: «так, варіантом»): a variant for ?wall=1 — on DJs and B-Boys the steel pipe crosses the grid every
12 cards with two street signs (the page's sign · 13–24 OF 152), the Events month pipe as a whole grid row (metro.js gridPipes).
On a phone the cards fill the width, so the pipe is where the wall and the city read between them. Only transform/opacity move. ---------- */
.mevw .grid > .mevw-gp{grid-column:1/-1;position:relative;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:26px 0 8px;padding:52px 0 0;min-height:98px;pointer-events:none}
.mevw .grid > .mevw-gp > .mblade{pointer-events:none;cursor:default}
.mevw .grid > .mevw-gp > .mblade i{font:700 12px/1 var(--f-m);font-style:normal;opacity:.9}
.mevw .grid > .mevw-gp > .mblade.b{font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;text-transform:uppercase}
@media (max-width:700px){
.mevw .grid > .mevw-gp{gap:8px;padding-top:48px;min-height:92px;margin:20px 0 6px}
.mevw .grid > .mevw-gp > .mblade.b{font-size:11.5px;letter-spacing:.05em}
}
/* ---------- v84 (Rick 12.11) — variant ?wall=1 (html.mv84):
1) the first pipe of a wall page right under the header, as on News, and our train standing on it (metro.js pipeTrain) ---------- */
.mv84 section.mevw[data-view] > .sec.mtop{margin-top:0!important}
.mevw > .sec > .mhtrain{position:absolute;left:0;top:calc(14px - var(--ht,62px) + 5px);z-index:5;height:var(--ht,62px);width:max-content;pointer-events:none;transform:translateX(-100%)}
.mevw > .sec > .mhtrain img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.mevw > .sec > .mhtrain.park{transform:translateX(calc(-100% + min(34vw, 330px)))}
.mevw > .sec > .mhtrain.out{transform:translateX(-100%)}
.mevw > .sec > .mhtrain.enter{animation:mhEnter 2.6s cubic-bezier(.2,.6,.35,1) both}
.mevw > .sec > .mhtrain.leave{animation:mhLeave 1.6s cubic-bezier(.55,0,.85,.4) both}
.mevw > .sec > .mhtrain.in{animation:mhIn 2.6s cubic-bezier(.15,.7,.35,1) both}
@media (max-width:700px){.mevw > .sec > .mhtrain{--ht:40px}}
@media (prefers-reduced-motion:reduce){.mevw > .sec > .mhtrain{animation:none!important}}
/* 2) City: coming back, the train comes in from the right, crawls through the middle, runs out on the left, then rolls to its place */
.mwall .mhtrain.rout{transform:translateX(100vw)}
.mwall .mhtrain.rpass{animation:mhPass 4.2s both}
@keyframes mhPass{0%{transform:translateX(100vw);animation-timing-function:cubic-bezier(.25,.6,.45,1)}38%{transform:translateX(calc(56vw - 44%));animation-timing-function:linear}62%{transform:translateX(calc(44vw - 56%));animation-timing-function:cubic-bezier(.55,0,.85,.4)}100%{transform:translateX(-100%)}}
/* 3) the search: a green station sign screwed to the wall — the input is its dark window, the choices are orange signs,
the tabs are the game's choice in brackets. Events, DJs, B-Boys and the new Music search. */
.mv84 [data-view] .filters{position:relative;gap:10px;padding:16px;margin:0 0 14px;border:2px solid #f2f2ea;border-radius:6px;
background:linear-gradient(#1d7a4c,#13603b);box-shadow:inset 0 0 0 2px #13603b,0 12px 20px -6px rgba(0,0,0,.6)}
.mv84 [data-view] .filters::before{content:"";position:absolute;inset:5px;pointer-events:none;
background:radial-gradient(circle,#dfe6e1 0 1.5px,#5b6560 2px,transparent 3px) left top/8px 8px no-repeat,
radial-gradient(circle,#dfe6e1 0 1.5px,#5b6560 2px,transparent 3px) right top/8px 8px no-repeat,
radial-gradient(circle,#dfe6e1 0 1.5px,#5b6560 2px,transparent 3px) left bottom/8px 8px no-repeat,
radial-gradient(circle,#dfe6e1 0 1.5px,#5b6560 2px,transparent 3px) right bottom/8px 8px no-repeat}
.mv84 [data-view] .filters .inp.grow{flex:1 1 230px;min-height:52px;padding:0 14px 0 46px;border:0;border-radius:4px;color:#f6f6ee;
background:#0a3a22 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c230' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") 14px 50%/21px 21px no-repeat;
box-shadow:inset 0 3px 8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.4);font:700 16px/1.2 var(--f-m);letter-spacing:.03em}
.mv84 [data-view] .filters .inp.grow::placeholder{color:#a9d3b8;opacity:1;text-transform:uppercase;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.07em}
.mv84 [data-view] .filters .inp.grow:focus{outline:3px solid #f2c230;outline-offset:2px}
.mv84 [data-view] .filters select.inp{min-height:48px;padding:0 34px 0 14px;border:2px solid #f2f2ea;border-radius:5px;color:#1a0c04;cursor:pointer;
-webkit-appearance:none;appearance:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231a0c04' stroke-width='2'/%3E%3C/svg%3E") right 12px center/12px 8px no-repeat,linear-gradient(#d8782f,#b4561a);
box-shadow:inset 0 0 0 2px #8f4112,0 6px 10px rgba(0,0,0,.45);font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em;text-transform:uppercase}
.mv84 [data-view] .filters select.inp:focus-visible{outline:3px solid #f2c230;outline-offset:2px}
.mv84 [data-view] .filters .tog{min-height:44px;color:#f6f6ee;font:700 12px/1.2 var(--f-m);letter-spacing:.1em;text-transform:uppercase}
.mv84 [data-view] .filters .tog input{width:22px;height:22px;accent-color:#f2c230}
.mv84 [data-view] .filters .seg{flex:1 1 100%;flex-wrap:wrap;gap:2px 4px;padding:0;border:0!important;background:none!important;box-shadow:none!important;overflow:visible}
.mv84 [data-view] .filters .seg button{min-height:44px;padding:0 10px!important;border:0!important;border-radius:4px;background:none!important;box-shadow:none!important;
color:#cfe6d7!important;font:400 14px/1 "Holtwood One SC",Georgia,serif!important;letter-spacing:.06em;text-transform:uppercase}
.mv84 [data-view] .filters .seg button[aria-selected="true"]{color:#f2c230!important}
.mv84 [data-view] .filters .seg button[aria-selected="true"]::before{content:"[ "}
.mv84 [data-view] .filters .seg button[aria-selected="true"]::after{content:" ]"}
.mv84 [data-view] .filters .seg button:focus-visible{outline:2px solid #f2c230;outline-offset:2px}
.mv84 .mbr-note{margin:0 0 12px;padding:10px 12px;border-radius:6px;background:rgba(9,20,14,.78);color:#f6f6ee;font:700 12px/1.45 var(--f-m);letter-spacing:.05em}
@media (max-width:700px){
.mv84 [data-view] .filters{padding:14px 12px;gap:8px}
.mv84 [data-view] .filters select.inp{flex:1 1 100%;font-size:12.5px}
.mv84 [data-view] .filters .seg button{font-size:13px!important;padding:0 8px!important}
.mv84 [data-view] .filters .inp.grow{padding-left:42px;background-position:12px 50%}
.mv84 [data-view] .filters .inp.grow::placeholder{font-size:10.5px;letter-spacing:.02em}
}
/* the Music search: results as dark plates on the wall, under the sign */
.mv84 .msrch{margin-top:4px}
.mv84 .msr{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;margin:0 0 22px}
.mv84 .msr[hidden]{display:none}
.mv84 .msr-n{grid-column:1/-1;margin:0;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:#f2c230}
.mv84 .msr-i{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:rgba(9,20,14,.82);box-shadow:inset 0 0 0 1px rgba(216,214,204,.1)}
.mv84 .msr-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1 1 auto;min-width:0}
.mv84 .msr-t b,.mv84 .msr-t small{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mv84 .msr-i b{color:#f6f6ee;font:700 15px/1.3 var(--f-b)}
.mv84 .msr-i small{color:#b9c9be;font:500 13px/1.35 var(--f-b)}
.mv84 .msr-k{font:700 10px/1 var(--f-m);font-style:normal;letter-spacing:.16em;color:#1a0c04;background:#f2c230;padding:4px 6px;border-radius:3px}
.mv84 .msr-i .btn{flex:none;min-height:44px;padding:0 12px;font-size:12px;white-space:nowrap}
/* ---------- v85 (Rick 12.11: «за навігацію: коли ми двигаємо вправо — все вправо, якщо вліво — то вліво»; ?wall=1):
riding to a station on the left, the pipe train comes in from the right, stops at the left side, runs on out to the left,
then backs in to its place (metro.js trainRun). Riding to the right — the moves as before. Only transform moves. ---------- */
.mnewsmag .mhtrain.rout,.mevw > .sec > .mhtrain.rout{transform:translateX(100vw)}
.mnewsmag .mhtrain.renter,.mevw > .sec > .mhtrain.renter{animation:mhREnter 2.6s cubic-bezier(.2,.6,.35,1) both}
.mnewsmag .mhtrain.rleave,.mevw > .sec > .mhtrain.rleave{animation:mhRLeave 1.6s cubic-bezier(.55,0,.85,.4) both}
@keyframes mhREnter{from{transform:translateX(100vw)}to{transform:translateX(24px)}}
@keyframes mhRLeave{from{transform:translateX(24px)}to{transform:translateX(-100%)}}
/* ---------- v86 (Rick 12.11: «щоб він проїжджав далі і не вертався — таке тільки на Сіті; на School — зупинявся справа, як кінечна»; ?wall=1):
on the pages the train passes through in the direction of the ride and is gone; at School it rolls in and stays at the right ---------- */
.mnewsmag .mhtrain.lpass,.mevw > .sec > .mhtrain.lpass{animation:mhLPass 4.2s both}
.mnewsmag .mhtrain.rpass,.mevw > .sec > .mhtrain.rpass{animation:mhPass 4.2s both}
.mnewsmag .mhtrain.rstop,.mevw > .sec > .mhtrain.rstop{animation:mhRStop 2.6s cubic-bezier(.2,.6,.35,1) both}
.mnewsmag .mhtrain.pend,.mevw > .sec > .mhtrain.pend{transform:translateX(calc(100vw - 100% - 24px))}
@keyframes mhLPass{0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.25,.6,.45,1)}38%{transform:translateX(calc(44vw - 56%));animation-timing-function:linear}62%{transform:translateX(calc(56vw - 44%));animation-timing-function:cubic-bezier(.55,0,.85,.4)}100%{transform:translateX(100vw)}}
@keyframes mhRStop{from{transform:translateX(100vw)}to{transform:translateX(calc(100vw - 100% - 24px))}}
/* ---------- v88 (Rick 12.11: «самоанімація руху трохи рвана… заїжджає, повільно в центрі зупиняється і просто їде швидко далі; так само в
усі сторони; щоб було схоже на рух потяга, який зупиняється, їде далі, без ривків»): one smooth move instead of fast–crawl–fast
(that had a jump in speed at every joint): the train comes in at speed, brakes evenly to a full stop in the middle (even braking:
the speed falls to zero), stands a second, pulls away evenly and runs out fast. The same in both directions, on the pipes of
every page, at City and for the header train; the stops (School, City's back-in) brake evenly too. Only transform moves. ---------- */
.mhtrain,.mptrain{will-change:transform;backface-visibility:hidden}
.mnewsmag .mhtrain.lpass,.mevw > .sec > .mhtrain.lpass{animation:mhGoR 5.2s both}
.mnewsmag .mhtrain.rpass,.mevw > .sec > .mhtrain.rpass,.mwall .mhtrain.rpass{animation:mhGoL 5.2s both}
.mwall .mhtrain.in,.mevw > .sec > .mhtrain.in{animation:mhIn 2.8s cubic-bezier(.33,.67,.67,1) both}
.mevw > .sec > .mhtrain.enter{animation:mhEnter 3.1s cubic-bezier(.33,.67,.67,1) both}
.mevw > .sec > .mhtrain.rstop{animation:mhRStop 3.1s cubic-bezier(.33,.67,.67,1) both}
.mptrain.go.ltr{animation:mpGoR 5.2s both!important}
.mptrain.go.rtl{animation:mpGoL 5.2s both!important}
/* brake (even: cubic-bezier(.33,.67,.67,1) ends at zero speed) → stand → pull away (even: cubic-bezier(.33,0,.67,.33) starts at zero) */
@keyframes mhGoR{0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.33,.67,.67,1)}44%{transform:translateX(calc(50vw - 50%));animation-timing-function:linear}63%{transform:translateX(calc(50vw - 50%));animation-timing-function:cubic-bezier(.33,0,.67,.33)}100%{transform:translateX(100vw)}}
@keyframes mhGoL{0%{transform:translateX(100vw);animation-timing-function:cubic-bezier(.33,.67,.67,1)}44%{transform:translateX(calc(50vw - 50%));animation-timing-function:linear}63%{transform:translateX(calc(50vw - 50%));animation-timing-function:cubic-bezier(.33,0,.67,.33)}100%{transform:translateX(-100%)}}
@keyframes mpGoR{0%{transform:translateX(-100%);animation-timing-function:cubic-bezier(.33,.67,.67,1)}44%{transform:translateX(calc(50vw - 50%));animation-timing-function:linear}63%{transform:translateX(calc(50vw - 50%));animation-timing-function:cubic-bezier(.33,0,.67,.33)}100%{transform:translateX(100vw)}}
@keyframes mpGoL{0%{transform:translateX(100vw);animation-timing-function:cubic-bezier(.33,.67,.67,1)}44%{transform:translateX(calc(50vw - 50%));animation-timing-function:linear}63%{transform:translateX(calc(50vw - 50%));animation-timing-function:cubic-bezier(.33,0,.67,.33)}100%{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.mptrain.go,.mwall .mhtrain,.mnewsmag .mhtrain,.mevw > .sec > .mhtrain{animation:none!important}}
/* ---------- v89 (Rick 12.11: «на School, щоб там його якась менша частина було видно, коли він доїжджає туди в кінець»): at the end of
the line the train stops with only its back part showing at the right edge — the mirror of the City train at the left ---------- */
.mnewsmag .mhtrain.pend,.mevw > .sec > .mhtrain.pend{transform:translateX(calc(100vw - min(34vw, 330px)))}
.mevw > .sec > .mhtrain.eend{animation:mhEnd 3.4s cubic-bezier(.33,.67,.67,1) both}
.mevw > .sec > .mhtrain.rstop{animation:mhRStop2 2.4s cubic-bezier(.33,.67,.67,1) both}
@keyframes mhEnd{from{transform:translateX(-100%)}to{transform:translateX(calc(100vw - min(34vw, 330px)))}}
@keyframes mhRStop2{from{transform:translateX(100vw)}to{transform:translateX(calc(100vw - min(34vw, 330px)))}}
/* v89: nine stations on a phone line — each station as wide as its name, the names whole (no «HIST…», «SCH…»); the font stays the same */
@media (max-width:520px){
.tabbar.metro.mline-long a.mst{flex:1 1 auto;min-width:32px}
.tabbar.metro.mline-long .nm{overflow:visible;text-overflow:clip;max-width:none;font-size:8px;letter-spacing:0;padding:3px 1px}
}
/* ---------- v90 (Rick 12.11: «підняти трубу скрізь: вона межує з шапкою, там виглядають кирпичі — щоб вона відділяла ці кирпичі; і потяг, щоб по ній
їхав»): the first pipe lies right on the bottom edge of the header (no strip of bricks between them) — above it the header, below it the
wall; the header gets a band at its bottom for our train, so the train never covers the photo credit; on a phone the header photo
reaches down to the pipe (dimmed) instead of fading out into bricks. Home: the pipe on the hero's edge the same way. ---------- */
.mv84 section.mevw[data-view] > .sec.mtop,.mv84 [data-view="news"] .mnewsmag,.mv84 [data-view="home"] .mwall.mfirst{margin-top:-14px!important}
.mv84 section.mevw[data-view] > .phead.mloc,.mv84 [data-view="news"].mnews3 > .phead.mloc{padding-bottom:54px!important}
@media (max-width:700px){
.mv84 section.mevw[data-view] > .phead.mloc,.mv84 [data-view="news"].mnews3 > .phead.mloc{padding-bottom:34px!important}
}
@media (max-width:760px){
.mv84 section.mevw[data-view] > .phead.mloc::before,.mv84 [data-view="news"].mnews3 > .phead.mloc::before{
-webkit-mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.45) 100%);mask-image:linear-gradient(180deg,#000 40%,rgba(0,0,0,.45) 100%)}
}
@media (max-width:1099px){.mv84 [data-view="home"] .hero{padding-bottom:14px!important}} /* v90: a little air between the hero buttons and the train (phone, iPad) */
/* ---------- v91 (Rick 12.11: «хай буде просто зверху, типу кнопка старт-стоп; рандомну приберемо; гортать вперед-назад»): the Radio keys sit above
the boombox — ◁ previous · START/STOP (the big orange one, ■ while a mix plays) · ▷ next; the scene, the boombox and the ▶ on it stay as they were.
On a phone the keys stand under the ON AIR neon. ---------- */
.mr-scene.mr-bare .mbb-bar.mr-top{top:16px;bottom:auto;height:auto;padding:0;background:none!important;box-shadow:none!important;gap:clamp(22px,6vw,54px)!important}
.mr-scene.mr-bare{padding-top:118px!important;padding-bottom:30px!important}
.mbb-bar.mr-top .mwb{padding:4px}
.mbb-bar.mr-top .mwb i{width:58px!important;height:58px!important;font-size:22px!important;background:rgba(6,14,10,.6);box-shadow:0 6px 12px rgba(0,0,0,.5)}
.mbb-bar.mr-top .mr-ss i{width:72px!important;height:72px!important;font-size:26px!important;background:var(--gw-rust,#d8782f);color:#1a0c04;border-color:#1a0c04!important;
box-shadow:0 0 0 4px rgba(8,22,15,.7),0 0 22px rgba(224,134,74,.5)}
.mbb-bar.mr-top .mr-ss:hover i,.mbb-bar.mr-top .mr-ss:focus-visible i{color:#fff}
@media (max-width:640px){
.mr-scene.mr-bare .mbb-bar.mr-top{top:66px}
.mr-scene.mr-bare{padding-top:158px!important;padding-bottom:24px!important}
.mbb-bar.mr-top .mwb i{width:56px!important;height:56px!important}
.mbb-bar.mr-top .mr-ss i{width:68px!important;height:68px!important}
}
/* v91: the boombox credit on a dark band, so the wall's paper stickers behind it never get in the way of reading it */
.mradio .mr-credit{position:relative;z-index:1;background:rgba(6,14,10,.86)}
/* ---------- v92a (Rick 12.11: «хіба би кнопку на самій касеті прибрати? А вверху нормально хай буде»): the play button on the tape deck is gone;
the keys above the boombox (◁ · START/STOP · ▷) do it all ---------- */
.mradio .mbb-play{display:none!important}
/* ---------- v92 (Rick 12.11: «футер оформити, а не отаким списком») — variant ?wall=1 (metro.js footUp): the end of the line.
A pipe with two signs, three enamel plates, a thin strip with PHOTOS & SOURCES ▾ and the Bronx map; the credits open in one tap. ---------- */
.foot.mft{position:relative;background:linear-gradient(180deg,transparent,rgba(4,10,7,.75) 60px)!important}
.foot.mft .foot-in.mft-old{display:none!important}
.mft-in{position:relative;padding-block:6px 26px;display:grid;gap:14px}
.mft-pipe{position:relative;display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;padding:52px 0 0;min-height:98px;box-sizing:border-box}
.mft-pipe > .mpipe{left:calc(50% - 50vw);right:calc(50% - 50vw);top:14px}
.mft-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.mft-p{border:2px solid #f2f2ea;border-radius:6px;background:linear-gradient(#1d7a4c,#13603b);box-shadow:inset 0 0 0 2px #13603b,0 10px 16px -8px #000;min-width:0}
.mft-p > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 14px;cursor:pointer;
font:400 15px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:#f6f6ee}
.mft-p > summary::-webkit-details-marker{display:none}
.mft-p > summary::after{content:"▾";font:700 14px/1 var(--f-m)}
.mft-p[open] > summary::after{content:"▴"}
.mft-p > summary:focus-visible{outline:3px solid #f2c230;outline-offset:2px}
.mft-b{padding:0 14px 14px;color:#e9f3ec;font:500 14px/1.5 var(--f-b)}
.mft-b span{display:block}
.mft-ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
.mft-ul a{display:flex;align-items:center;min-height:36px;color:#fff;text-decoration:none;font:400 12px/1.2 "Holtwood One SC",Georgia,serif;letter-spacing:.06em}
.mft-ul a:hover,.mft-ul a:focus-visible{color:#f2c230}
.mft-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 14px;border-radius:6px;background:#06100b;box-shadow:inset 0 0 0 1px rgba(216,214,204,.08)}
.mft-c{font:700 11px/1 var(--f-m)!important;letter-spacing:.14em;color:#a9b8ae!important;text-transform:uppercase}
.mft-crb{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:5px;border:2px solid #f2f2ea;
background:linear-gradient(#d8782f,#b4561a);color:#1a0c04;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;box-shadow:inset 0 0 0 2px #8f4112}
.mft-crb:focus-visible{outline:3px solid #f2c230;outline-offset:2px}
.mft-bx{margin-left:auto}
.mft-bx a{display:inline-flex;align-items:center;min-height:44px;color:#f2c230}
.mft-cr{padding:14px 16px 18px;border-radius:8px;background:rgba(6,14,10,.92);box-shadow:inset 0 0 0 1px rgba(216,214,204,.1)}
.mft-cr[hidden]{display:none}
.mft-cr h4{margin:14px 0 8px;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.1em;color:#f2c230}
.mft-note{margin:0;color:#d7e2da;font:500 14px/1.5 var(--f-b)}
.mft-note span{display:block}
.mft-row{margin:0 0 10px}
.mft-row[hidden]{display:none}
.mft-row b{display:block;margin:0 0 4px;font:700 11px/1.3 var(--f-m);letter-spacing:.1em;text-transform:uppercase;color:#cfe3d6}
.mft-row ul{margin:0;padding:0 0 0 14px;display:grid;gap:4px;font:500 12px/1.5 var(--f-m);color:#a9b8ae}
.mft-row a{color:#f2c230}
.mft-cr-none{margin:0;font:500 12px/1.5 var(--f-m);color:#8fa79a}
.mft-cr-none[hidden]{display:none}
@media (max-width:900px){.mft-plates{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){
.mft-pipe{gap:8px;padding-top:48px;min-height:92px}
.mft-pipe > .mblade{height:42px;padding:0 10px}
.mft-pipe > .mblade b{font-size:13px;letter-spacing:.05em}
.mft-bx{margin-left:0}
}
/* ---------- v93 (Rick 12.11: «всі підписи винести окремо: кнопочка знизу → окрема сторінка») — variant ?wall=1 (html.mv92):
the credits under the headers, the hero photo and the boombox are gone from the pages; every credit lives on the PHOTOS & SOURCES page ---------- */
.mv92 .phead .mcr,.mv92 .hero .mhcr,.mv92 .mradio .mr-credit{display:none!important}
.mft92 .phead .mcr,.mft92 .hero .mhcr,.mft92 .mradio .mr-credit{display:none!important} /* v108: with the footer button for everyone, the credits live on its page */
.foot.mft small.foot-osm{display:none!important}
.mft-strip a.mft-crb{text-decoration:none}
.mft-osm{flex-basis:100%;font:500 10px/1.4 var(--f-m);color:#7f978a}
.mft-osm a{color:#a9b8ae}
/* the page itself */
.mcred{padding-block:8px 40px}
.mcred-in{display:grid;gap:14px}
.mcred-lead{margin:0;max-width:68ch;color:#e3ece5;font:500 15px/1.55 var(--f-b)}
.mcred-cards{margin:0;color:#a9b8ae;font:500 12px/1.5 var(--f-m)}
.mcred-toc{display:flex;flex-wrap:wrap;gap:8px}
.mcred-toc button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:5px;border:2px solid #f2f2ea;
background:linear-gradient(#1d7a4c,#13603b);box-shadow:inset 0 0 0 2px #13603b;color:#f6f6ee;font:400 12px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em}
.mcred-toc button:focus-visible{outline:3px solid #f2c230;outline-offset:2px}
.mcred-g{scroll-margin-top:80px;padding:14px 16px 6px;border-radius:8px;background:rgba(6,14,10,.9);box-shadow:inset 0 0 0 1px rgba(216,214,204,.1)}
.mcred-h{margin:0 0 10px;font:400 17px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:#f2c230}
.mcred-g ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.mcred-g li{padding:0 0 8px;border-bottom:1px solid rgba(216,214,204,.08);font:500 13px/1.55 var(--f-m);color:#c9d6cd}
.mcred-g li:last-child{border-bottom:0}
.mcred-g li b{color:#f6f6ee}
.mcred-g li a{color:#f2c230}
.mcred-g li.mcred-sub{padding:6px 0 0;border:0;font:700 11px/1.2 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:#8fb59d}
.mcred-back{justify-self:start;display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:6px;border:2px solid #f2f2ea;background:linear-gradient(#d8782f,#b4561a);
color:#1a0c04;text-decoration:none;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;box-shadow:inset 0 0 0 2px #8f4112}
@media (max-width:700px){.mcred-g{padding:12px 12px 4px}.mcred-g li{font-size:12.5px}}
/* ---------- v94 (Rick 12.11: «у футері просто одна кнопка… а не купа кнопок знизу; Our Music прибирай») — variant ?wall=1:
the footer is one orange sign button to the ABOUT & SOURCES page ---------- */
.foot.mft{background:#06100b!important}
.foot.mft .mft-in{display:flex;justify-content:center;padding-block:22px 26px}
.mft-one{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:6px;border:2px solid #f2f2ea;
background:linear-gradient(#d8782f,#b4561a);color:#1a0c04;text-decoration:none;font:400 13px/1.2 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;text-align:center;
box-shadow:inset 0 0 0 2px #8f4112,0 8px 14px -8px #000}
.mft-one:hover,.mft-one:focus-visible{color:#fff}
.mft-one:focus-visible{outline:3px solid #f2c230;outline-offset:3px}
.mcred-about .mcred-lead{margin:0 0 10px}
.mcred-bx{display:inline-flex;align-items:center;min-height:44px;margin:0 0 6px;color:#f2c230;font:600 14px/1 var(--f-b)}
.mcred-toc{display:none!important}
/* ---------- v96 (Rick 12.11: «на сторінці радіо нижня частина дуже дивно виглядає — зроби її в одному стилі з цією сторінкою»): on the Radio the night
scene runs down to the very end of the page: the boombox credit and the footer sit on the same night ground, no black strip, no bricks below ---------- */
body.mradio-on{background:#0a1a12!important}
body.mradio-on .mpagewall{display:none!important}
body.mradio-on .mradio{background:linear-gradient(#132b20,#0a1a12 70%)}
body.mradio-on .mradio .mr-credit{background:transparent!important;padding-bottom:14px}
body.mradio-on .foot{background:#0a1a12!important;background-image:none!important;border-top:0!important;box-shadow:none!important}
body.mradio-on .foot.mft{background:#0a1a12!important}
body.mradio-on::after{display:none!important} /* v96: the Green Wall skyline glued to the bottom of the screen peeked out under the short Radio page */
html:has(body.mradio-on){background:#0a1a12!important}
/* ---------- v97 (Rick 12.11: «круті картинки для верху сторінок… на компі одна, на телефоні друга») — variant ?wall=1: the header photo per device
(--mimg computer, --mimg-t iPad, --mimg-m phone, set by metro.js sign()); the station sign shows the caption of the photo on this screen ---------- */
.ms-place .hx,.ms-fact .hx{display:none}
.ms-place .hx-d,.ms-fact .hx-d{display:inline}
@media (min-width:761px) and (max-width:1099px){
.phead.mloc::before{background-image:var(--mimg-t,var(--mimg))!important}
.ms-place .hx-d,.ms-fact .hx-d{display:none}.ms-place .hx-t,.ms-fact .hx-t{display:inline}
}
@media (max-width:760px){
.phead.mloc::before{background-image:var(--mimg-m,var(--mimg))!important}
.ms-place .hx-d,.ms-fact .hx-d{display:none}.ms-place .hx-m,.ms-fact .hx-m{display:inline}
}
/* ---------- v98 (Rick 12.11: «попрацювати над цими плашками, бо вони багато перекривають») — variant ?wall=1: the station sign is one
street-sign line on the iPad and the computer too (as on a phone since v69); a tap opens the story. On a computer it stands at the top
right as before, only small, so the header photo shows. ---------- */
@media (min-width:601px){
.mv92 [data-view] .msignpost{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:52px;padding:9px 12px;background:#0b6b3a;border:0;border-radius:6px;box-shadow:inset 0 0 0 2px #e9efe9,0 6px 14px rgba(0,0,0,.45);cursor:pointer}
.mv92 [data-view] .msignpost::before,.mv92 [data-view] .msignpost::after{display:none}
.mv92 [data-view] .msignpost .ms-top{margin:0}
.mv92 [data-view] .msignpost .ms-top .mbul{width:28px;height:28px;font-size:14px}
.mv92 [data-view] .msignpost .ms-stop{font:700 13px/1 var(--f-m);letter-spacing:.06em;color:#fff}
.mv92 [data-view] .msignpost .ms-sec{display:none}
.mv92 [data-view] .msignpost .ms-place{flex:1 1 auto;margin:0;padding:0;border:0;font:700 13px/1.3 var(--f-m);letter-spacing:.04em;color:#fff;text-transform:uppercase}
.mv92 [data-view] .msignpost .ms-place i{color:#ffe28a;font-size:12.5px}
.mv92 [data-view] .msignpost .ms-place::after{content:" ⓘ";color:#ffe28a}
.mv92 [data-view] .msignpost:not(.mopen) .ms-fact,.mv92 [data-view] .msignpost:not(.mopen) .ms-more{display:none}
.mv92 [data-view] .msignpost.mopen .ms-fact{flex-basis:100%;margin:4px 0 0;font-size:15px;line-height:1.45;color:#fff}
.mv92 [data-view] .msignpost.mopen .ms-more{display:flex;align-items:center;justify-content:center;flex-basis:100%;min-height:44px;margin:2px 0 0;border-radius:6px;background:#e2763a;color:#111;font-size:13px}
.mv92 [data-view] .msignpost{width:auto;max-width:460px}
.mv92 [data-view] .msignpost.mopen{max-width:520px}
}
/* ---------- v99 (Rick 12.11) ---------- */
/* City: the hero photo melts into the wall on its left instead of a hard vertical seam (computer, iPad; on a phone it fills the width) */
@media (min-width:701px){
html body:not(.mlook-b) [data-view="home"] .hero .hero-img{ /* beats «body:not(.mlook-b) … mask-image:none» (v54) */
-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 9%,#000 30%),linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 75%,transparent 100%)!important;
mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 9%,#000 30%),linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 75%,transparent 100%)!important;
-webkit-mask-composite:source-in!important;mask-composite:intersect!important}
}
/* Radio (variant ?wall=1): no grey roof ledge — the boombox stands on a New York sidewalk with a curb and the asphalt below; a street lamp
on the other side from the ON AIR neon throws warm light on it. Drawn in CSS in the site's greens; nothing moves. */
.mr-ground,.mr-lamp{display:none}
.mv92 .mr-scene::after{display:none!important}
.mv92 .mr-scene.mr-bare{padding-bottom:70px!important}
.mv92 .mr-city{bottom:92px!important;height:52%!important}
.mv92 .mr-ground{display:block;position:absolute;left:0;right:0;bottom:0;height:96px;z-index:-1;background:
repeating-linear-gradient(90deg,rgba(0,0,0,.38) 0 2px,transparent 2px 132px) 0 0/100% 44px no-repeat,
linear-gradient(#41504a,#2d3934) 0 0/100% 44px no-repeat,
linear-gradient(#8a9993,#5d6a64 3px,#3b4742 12px,#2a3430 15px) 0 44px/100% 15px no-repeat,
linear-gradient(rgba(0,0,0,.65),transparent) 0 59px/100% 12px no-repeat,
repeating-linear-gradient(90deg,rgba(242,194,48,.28) 0 56px,transparent 56px 110px) 0 84px/100% 3px no-repeat,
radial-gradient(1.2px 1.2px,rgba(220,235,225,.07) 99%,transparent) 0 59px/9px 7px,
linear-gradient(#18201c,#0e1411) 0 59px/100% 37px no-repeat;
box-shadow:inset 0 1px 0 rgba(220,235,225,.08)}
.mv92 .mr-ground::before{content:"";position:absolute;left:7%;top:6px;width:min(320px,48%);height:30px;border-radius:50%;
background:radial-gradient(closest-side,rgba(255,226,138,.36),rgba(255,226,138,.12) 60%,transparent)}
.mv92 .mr-lamp{display:block;position:absolute;left:max(14px,7%);bottom:74px;width:150px;height:min(74%,430px);z-index:-1;pointer-events:none}
.mv92 .mr-lamp .lp-pole{position:absolute;left:34px;bottom:0;width:9px;height:100%;border-radius:3px;background:linear-gradient(90deg,#0c1511,#33463d 45%,#0e1813)}
.mv92 .mr-lamp .lp-pole::after{content:"";position:absolute;left:-7px;bottom:0;width:23px;height:30px;border-radius:4px 4px 1px 1px;background:linear-gradient(90deg,#0f1914,#2a3b33 45%,#111b16)}
.mv92 .mr-lamp .lp-arm{position:absolute;left:38px;top:-2px;width:52px;height:20px;border-top:6px solid #22332b;border-right:6px solid #22332b;border-radius:0 26px 0 0}
.mv92 .mr-lamp .lp-head{position:absolute;left:70px;top:14px;width:48px;height:15px;border-radius:22px 22px 6px 6px;background:linear-gradient(#304339,#152019)}
.mv92 .mr-lamp .lp-head::after{content:"";position:absolute;left:7px;right:7px;bottom:-4px;height:5px;border-radius:0 0 9px 9px;background:#fff4c8;box-shadow:0 0 16px 6px rgba(255,226,138,.75),0 0 46px 14px rgba(255,214,120,.28)}
.mv92 .mr-lamp .lp-beam{position:absolute;left:4px;top:30px;width:200px;height:calc(100% - 26px);
background:linear-gradient(180deg,rgba(255,226,138,.30),rgba(255,226,138,.10) 60%,rgba(255,226,138,.02));clip-path:polygon(41% 0,55% 0,100% 100%,0 100%)}
@media (max-width:640px){
.mv92 .mr-scene.mr-bare{padding-bottom:54px!important}
.mv92 .mr-ground{height:74px;background-size:100% 34px,100% 34px,100% 12px,100% 10px,100% 3px,9px 7px,100% 28px;
background-position:0 0,0 0,0 34px,0 46px,0 64px,0 46px,0 46px}
.mv92 .mr-city{bottom:72px!important}
.mv92 .mr-lamp{left:6px;bottom:56px;width:110px;height:78%}
.mv92 .mr-lamp .lp-pole{left:18px;width:7px}
.mv92 .mr-lamp .lp-arm{left:21px;width:40px}
.mv92 .mr-lamp .lp-head{left:46px;width:40px;height:13px}
.mv92 .mr-lamp .lp-beam{left:-10px;width:150px}
}
/* the footer (variant ?wall=1): not one flat colour — it comes out of the wall in a soft gradient, with a faint spray stencil behind the button */
.foot.mft{position:relative;background:linear-gradient(180deg,rgba(6,16,11,0) 0,rgba(6,16,11,.6) 46px,rgba(6,16,11,.92) 100%)!important;overflow:hidden}
.foot.mft::before{content:"BBOY TOWN";position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) rotate(-3deg);white-space:nowrap;pointer-events:none;
font:400 clamp(44px,11vw,120px)/1 "Holtwood One SC",Georgia,serif;letter-spacing:.12em;color:transparent;-webkit-text-stroke:1.5px rgba(242,242,234,.07)}
.foot.mft .mft-in{position:relative;z-index:1}
body.mradio-on .foot.mft{background:transparent!important}
/* ---------- v102 (Rick 12.11: «так, полегши») — for everyone: landing straight on another page (#events, #news…), the home page's
photos (hero 111 KB, the 1973 train band 96 KB, event posters) were fetched before the site had hidden the home.
An inline script at the top of marks the page, the home stays hidden until metro.js removes the mark. ---------- */
html.mnh [data-view="home"]{display:none!important}
/* ---------- v103 (Rick 11.11: «низ всього сайту на всіх сторінках… якісь домики, як на радіо… щоб стиків знизу не було, м'якими градієнтними
переходами») — for everyone, every page:
1) the Marcy Houses skyline glued to the bottom of the screen (body::after, manual.css) is gone; in its place the wall just darkens softly
towards the bottom bar (the file img/green/skyline.png stays where it is);
2) the wall no longer hits the footer with a hard edge: the bottom of every page (main::after, behind the cards, above the wall photos)
melts into the footer's colour;
3) the footer is not one flat colour: it goes on from that dark green and deepens, with a faint green glow at the top;
4) the 26 px strip of bare wall between the page and the footer (collapsed margins) is closed; 5) and the strip under it, behind the bottom bar.
The Radio keeps its own night scene (v96). ---------- */
html body::after{background:linear-gradient(180deg,rgba(4,12,8,0),rgba(4,12,8,.55))!important;height:min(16vh,140px)!important}
html body.mradio-on::after{display:none!important}
html body main{display:flow-root}
html body main::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(220px,26vw,380px);z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(6,17,12,0) 0,rgba(6,17,12,.3) 25%,rgba(6,17,12,.62) 50%,rgba(6,17,12,.86) 72%,rgba(6,17,12,.97) 90%,#06110c 100%)}
html body.mradio-on main::after{display:none}
html body .foot{display:flow-root;
background:radial-gradient(120% 140px at 50% 0,rgba(29,122,76,.10),rgba(29,122,76,0)),linear-gradient(180deg,#06110c 0,#050e0a 50%,#030906 100%)!important}
/* 5) under the footer the body keeps room for the bottom bar (86 px on a phone): the bare wall showed there behind the station line.
The footer's colour now runs on under the bar (a shadow takes no room and adds no scroll) */
html body .foot{box-shadow:0 320px 0 #030906!important}
html body .foot.mft{background:radial-gradient(120% 120px at 50% 0,rgba(29,122,76,.10),rgba(29,122,76,0)),linear-gradient(180deg,#06110c,#030906)!important}
/* v104 (Rick 12.11: «Інтеграція в сайт»; for everyone since v105, ?3d=0 — without it): the 3D Spot room, the first screen of #spot (a frame: spot3d/room.html).
A strip of the page shows under it (the floating speaker .mspk sits on that strip, not on the room's buttons),
so it is clear the Spot goes on below and there is room for the thumb to scroll. */
.m3d{position:relative;height:calc(100svh - 59px - 100px);min-height:460px;max-height:900px;background:#0b0f0c;overflow:hidden}
.m3d iframe{display:block;width:100%;height:100%;border:0}
.m3d-cred{max-width:1100px;margin:18px auto 0;padding:0 16px 24px;font:500 11.5px/1.6 "Golos Text",system-ui,sans-serif;color:#a9bdb0}
.m3d-cred b{color:#d9d4c4;font-weight:700}
.m3d-cred a{color:#d9c7a4}
section[data-view="spot"].is-locked > div.m3d,section[data-view="spot"].is-locked > p.m3d-cred{display:block!important}
.m3d-on section[data-view="spot"] .mpc{display:none!important} /* v106: the room has its own board */
.m3d-on section[data-view="spot"] .hub{display:none!important} /* v107: the YOUR SPOT panel lives in the room's board now (it still works from there) */ /* a guest sees the room too, like the game computer */
@media (max-width:980px){.m3d{height:calc(100svh - 59px - 63px - var(--safe-b,0px) - 72px);min-height:460px}} /* ends above the floating speaker (.mspk), so it never covers the room's buttons */
/* v108 (Rick 12.11: «якщо ми заходимо в спот, то у нас повністю дизайн від гори до низу — це кімната наша, більш там нічого»):
the Spot page is the room only: no menu, no sign-in block, no panel, no footer under it; the account (edit profile, sign out,
card claims) opens from MY PAGE → ACCOUNT and has its way back. The room fills the screen between the header and the line. */
html.m3d-on section[data-view="spot"] > div.mspot,html.m3d-on section[data-view="spot"] > div.gate,html.m3d-on section[data-view="spot"] > div.hub,html.m3d-on section[data-view="spot"] > p.m3d-cred{display:none!important}
html.m3d-on.m3d-acc section[data-view="spot"] > div.gate{display:block!important}
.m3d-on body.m3d-page .foot{display:none!important}
.m3d-on:not(.m3d-acc) body.m3d-page{padding-bottom:0!important}
.m3d-on body.m3d-page .m3d{height:calc(100svh - 59px);max-height:none;min-height:420px}
@media (max-width:980px){.m3d-on body.m3d-page .m3d{height:calc(100svh - 59px - 63px - var(--safe-b,0px))}}
.m3d-back{display:inline-flex;align-items:center;min-height:48px;margin:14px 16px 0;padding:0 18px;border:2px solid #f2f2ea;border-radius:6px;background:linear-gradient(#d8782f,#b4561a);color:#fff;cursor:pointer;font:400 14px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.06em}
/* ===== v116 (13.11, Rick: «Помилки 1–5»): the members-only card fits a 360 px phone; a lower hero photo on short phones ===== */
.mlock{grid-template-columns:minmax(0,1fr)}
.mlock-in{width:100%;max-width:460px;box-sizing:border-box;min-width:0}
.mlock-in .btn{max-width:100%;white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;row-gap:4px}
@media (max-width:760px) and (max-height:900px){
.hero-img,.hero-tint{height:38vh!important}
.hero-shade{background:linear-gradient(180deg,rgba(7,18,13,0) 0,rgba(7,18,13,.15) 24vh,rgba(7,18,13,.96) 38vh)!important}
.hero-in{padding-top:calc(38vh - 70px)!important}
}
@media (max-width:760px) and (max-height:700px){
.hero-img,.hero-tint{height:32vh!important}
.hero-shade{background:linear-gradient(180deg,rgba(7,18,13,0) 0,rgba(7,18,13,.15) 20vh,rgba(7,18,13,.96) 32vh)!important}
.hero-in{padding-top:calc(32vh - 64px)!important}
}
/* ===== v120 (13.11, Rick: «7» — a look through the glass on the members' pages): three real things above the lock ===== */
.mlock{gap:16px}
.mtz{width:100%;max-width:760px;display:grid;gap:10px;min-width:0}
.mtz-h{justify-self:center;font:400 13px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.14em;color:#f2c430;padding:7px 12px 6px;border-radius:4px;background:rgba(8,21,15,.88);box-shadow:inset 0 0 0 1px rgba(216,214,204,.18)}
.mtz-h i{font-style:normal;color:var(--gw-bone);opacity:.7}
.mtz-l{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.mtz-c{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:64px;padding:10px 14px;
border:0;border-radius:8px;cursor:pointer;text-align:left;font:inherit;color:var(--gw-bone);
background:linear-gradient(180deg,rgba(16,37,27,.82),rgba(8,21,15,.82));box-shadow:inset 0 0 0 1px rgba(216,214,204,.2),0 6px 14px rgba(0,0,0,.3);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .15s ease,opacity .15s ease}
.mtz-c:hover,.mtz-c:focus-visible{transform:translateY(-2px)}
.mtz-c:nth-child(3){opacity:.5;-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent);mask-image:linear-gradient(180deg,#000 30%,transparent)}
.mtz-d{display:grid;justify-items:center;gap:3px;color:var(--gw-rust-lt)}
.mtz-d b{font:400 20px/1 "Holtwood One SC",Georgia,serif}
.mtz-d small{font:400 9.5px/1 "Holtwood One SC",Georgia,serif;letter-spacing:.08em;color:var(--gw-bone);opacity:.8}
.mtz-x{display:grid;gap:3px;min-width:0}
.mtz-t{font-weight:700;font-size:15px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mtz-s{font-size:13px;line-height:1.3;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:719px){ /* phone: three short rows, so ENTER YOUR SPOT stays near the first screen */
.mlocked > .mlock{padding-top:14px}
.mtz{gap:8px}
.mtz-l{gap:6px}
.mtz-c{min-height:50px;padding:6px 12px;gap:10px}
.mlocked > .mlock{gap:10px}
.mlock:has(.mtz) .mlock-key{display:none} /* the look through the glass already says it is locked */
.mlock:has(.mtz) .mlock-in{padding:16px 18px 6px;gap:10px}
.mlock:has(.mtz) .mlock-back{padding:10px}
.mtz-t{-webkit-line-clamp:1;font-size:14.5px}
.mtz-d b{font-size:18px}
}
@media (min-width:720px){
.mtz-l{grid-template-columns:repeat(3,minmax(0,1fr))}
.mtz-c{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;padding:14px 16px;min-height:132px}
.mtz-d{justify-items:start;grid-auto-flow:column;justify-content:start;align-items:baseline;gap:6px}
.mtz-c:nth-child(3){-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent);mask-image:linear-gradient(90deg,#000 20%,transparent)}
}
@media (prefers-reduced-motion:reduce){.mtz-c{transition:none}.mtz-c:hover,.mtz-c:focus-visible{transform:none}}
/* ===== v122 (13.11, Rick: «роби все що потрібно» — the rest of research/38) ===== */
/* Events, phone: WARM UP BEFORE THE BATTLE wraps instead of running off the screen */
.ev-side{min-width:0;flex-wrap:wrap}
.ev-side .btn{max-width:100%;white-space:normal;text-align:center}
/* fingers (touch screens): 44 px to tap */
@media (pointer:coarse){
.mast .btn-login,.mast .btn-lang,.mast .btn-search{min-height:44px;min-width:44px}
.mast .logo{position:relative}
.mast .logo::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
[data-view] .btn,[data-view] .btn-sm{min-height:44px}
.savebtn{min-width:44px;min-height:44px}
.mrk-tabs [role=tab],.seg a,.seg button,[role=tablist] > [role=tab]{min-height:44px}
details > summary{min-height:44px;display:flex;align-items:center}
[data-view="ranking"] select,[data-view="ranking"] input:not([type=checkbox]):not([type=radio]){min-height:44px}
.pp-back{min-height:44px;display:inline-flex;align-items:center}
#tabbar .mst,#nav .mst{min-height:44px}
.credit a,.rc-cr a,a.link,.mz-cap a,.mld-src a{padding:12px 3px;margin:-12px -3px}
}
/* metro station names: bigger where there is room (phones keep all nine names whole, v89) */
@media (min-width:768px){ #tabbar .nm,#nav .nm{font-size:11px!important} }
/* iPad: b-boys and DJs in three columns */
@media (min-width:700px) and (max-width:1023px){ #br-grid,#dj-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
/* big screens: the whole site a size larger, like the browser's zoom; the Spot room and the History screen stay screen-high */
@media (min-width:1700px){ html{zoom:1.2} .m3d,.msm{zoom:.8334} }
@media (min-width:2300px){ html{zoom:1.45} .m3d,.msm{zoom:.6897} }