/* Variant D — Corrupted / brutalist: black + white, one red, broken grid */
:root{--k:#000;--w:#f2f2f2;--red:#ff1a1a;--g:#8a8a8a;--disp:"Anton","Archivo Black",Impact,sans-serif;--mono:"Space Mono",ui-monospace,monospace}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--k);scroll-behavior:smooth}
body{background:var(--k);color:var(--w);font-family:var(--mono);font-size:15px;line-height:1.55;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--red);color:var(--k)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:0;top:0;z-index:99;background:var(--red);color:#000;padding:8px 12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.crt{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.09;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(2) infinite}
@keyframes grain{50%{background-position:40px -30px}}
/* nav */
nav{position:sticky;top:0;z-index:30;background:var(--k);border-bottom:3px solid var(--w)}
nav .wrap{display:flex;align-items:stretch;justify-content:space-between;height:54px;padding:0}
.logo{display:flex;align-items:center;padding:0 28px;background:var(--w);color:var(--k);font-family:var(--disp);font-size:26px;letter-spacing:.02em;text-decoration:none}
.logo span{color:var(--red)}
nav ul{list-style:none;display:flex}
nav ul a{display:flex;align-items:center;height:100%;padding:0 22px;border-left:3px solid var(--w);text-decoration:none;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.06em}
nav ul a:hover{background:var(--red);color:var(--k)}
.burger{display:none;background:var(--k);color:var(--w);border:0;border-left:3px solid var(--w);font:700 13px var(--mono);padding:0 18px;cursor:pointer}
/* hero */
.hero{position:relative;border-bottom:3px solid var(--w);overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(2.2) brightness(.45);opacity:.5;mix-blend-mode:screen}
.hero .grid{position:absolute;inset:0;background-image:linear-gradient(var(--g) 1px,transparent 1px),linear-gradient(90deg,var(--g) 1px,transparent 1px);background-size:80px 80px;opacity:.18}
.hero>.wrap{position:relative;display:grid;grid-template-columns:1.3fr 1fr;min-height:640px;padding-top:48px;padding-bottom:0}
.hud{display:flex;flex-wrap:wrap;gap:0;font-size:12px;font-weight:700;text-transform:uppercase;margin-bottom:12px}
.hud span{border:2px solid var(--w);padding:3px 10px;margin:0 -2px -2px 0}
.hud span:first-child{background:var(--red);border-color:var(--red);color:#000}
.hud b{font-weight:700}
h1{font-family:var(--disp);font-weight:400;line-height:.78;margin:10px 0 0 -6px;font-size:clamp(96px,17vw,250px);letter-spacing:-.02em;text-transform:uppercase}
.glitch{position:relative;display:inline-block;color:var(--w)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden}
.glitch::before{color:var(--red);clip-path:inset(38% 0 44% 0);transform:translateX(-22px);background:var(--k);animation:sl1 3.2s infinite steps(1)}
.glitch::after{color:var(--w);clip-path:inset(66% 0 18% 0);transform:translateX(30px);background:var(--k);animation:sl2 2.6s infinite steps(1)}
@keyframes sl1{0%{clip-path:inset(38% 0 44% 0);transform:translateX(-22px)}30%{clip-path:inset(10% 0 78% 0);transform:translateX(16px)}55%{clip-path:inset(52% 0 30% 0);transform:translateX(-40px)}80%{clip-path:inset(38% 0 44% 0);transform:translateX(8px)}}
@keyframes sl2{0%{clip-path:inset(66% 0 18% 0);transform:translateX(30px)}40%{clip-path:inset(80% 0 4% 0);transform:translateX(-18px)}70%{clip-path:inset(24% 0 64% 0);transform:translateX(44px)}}
.pron{display:inline-block;margin-top:18px;background:var(--w);color:var(--k);padding:4px 12px;font-weight:700;transform:rotate(-1.5deg)}
.pron b{color:var(--red)}
.blink{animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.tl{margin:22px 0 0;max-width:470px;font-size:17px;border-left:6px solid var(--red);padding-left:14px}
.cta{display:flex;flex-wrap:wrap;margin:28px 0 48px}
.btn{display:inline-block;padding:14px 22px;border:3px solid var(--w);margin-right:-3px;text-decoration:none;text-transform:uppercase;font-weight:700;font-size:14px;letter-spacing:.04em;background:var(--k)}
.btn:hover{background:var(--w);color:var(--k)}
.btn.p{background:var(--red);border-color:var(--red);color:#000}
.btn.p:hover{background:var(--w);border-color:var(--w)}
.btn.todo{border-style:dashed;color:var(--g)}
/* images: pixel sorted */
.art{align-self:end;position:relative;margin-right:-28px}
.frame{position:relative;border:3px solid var(--w);background:var(--k)}
.hero .frame{transform:translateY(3px);border-bottom:0}
.gimg{position:relative;aspect-ratio:4/5;overflow:hidden}
.gimg img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.1)}
.gimg .rgb{display:none}
.gimg::before{content:"";position:absolute;left:0;right:0;top:58%;height:7%;background:var(--red);mix-blend-mode:multiply;z-index:1}
.gimg::after{content:"";position:absolute;left:0;right:0;top:20%;height:9%;background:inherit;backdrop-filter:invert(1);z-index:1;animation:band 4s infinite steps(1)}
@keyframes band{0%{top:20%}25%{top:71%;height:3%}50%{top:44%;height:12%}75%{top:8%;height:5%}}
.cap{position:absolute;left:-3px;bottom:22px;z-index:2;display:flex;gap:0;font-size:12px;font-weight:700}
.cap span{background:var(--w);color:var(--k);padding:3px 8px}.cap span+span{background:var(--red)}
/* marquee */
.strip{overflow:hidden;border-bottom:3px solid var(--w);background:var(--red);color:#000;font-family:var(--disp);font-size:34px;line-height:1;white-space:nowrap;padding:10px 0}
.strip div{display:inline-block;animation:mq 22s linear infinite}
.strip span{margin:0 18px}.strip i{font-style:normal;-webkit-text-stroke:1.5px #000;color:transparent}
@keyframes mq{to{transform:translateX(-50%)}}
/* sections */
section{border-bottom:3px solid var(--w);padding:80px 0}
.tag{display:inline-block;font-weight:700;font-size:13px;text-transform:uppercase;background:var(--w);color:var(--k);padding:3px 10px;margin-bottom:14px}
.tag i{font-style:normal;color:var(--red)}
h2{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:clamp(64px,10vw,150px);line-height:.82;letter-spacing:-.01em;margin:0 0 36px -4px}
h2 small{display:block;font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--red);margin-top:12px}
#music h2{text-indent:12%}
.grid2{display:grid;grid-template-columns:1.1fr 1fr;border:3px solid var(--w)}
.grid2 .card+.card{border-left:3px solid var(--w)}
.card{padding:22px;background:var(--k)}
.card h3{font-family:var(--disp);font-weight:400;font-size:30px;text-transform:uppercase;line-height:1}
.m{font-size:12px;color:var(--g);margin:4px 0 16px;text-transform:uppercase}
iframe{width:100%;border:0;display:block;background:#111;filter:grayscale(1) contrast(1.15)}
iframe.video{aspect-ratio:16/9;height:auto}
.about{display:grid;grid-template-columns:420px 1fr;gap:0;border:3px solid var(--w)}
.about>.frame{border:0;border-right:3px solid var(--w)}
.about>.frame .gimg{aspect-ratio:auto;height:100%;min-height:480px}
.about>div:last-child{padding:36px}
.about h2{font-size:clamp(64px,8vw,120px);margin-bottom:18px}
.about p{margin:12px 0;max-width:600px}
.ph{display:inline-block;background:var(--red);color:#000;font-weight:700;font-size:12px;text-transform:uppercase;padding:3px 10px}
.facts{display:flex;flex-wrap:wrap;margin-top:22px}
.chip{border:2px solid var(--w);margin:0 -2px -2px 0;padding:5px 12px;font-size:12px;font-weight:700;text-transform:uppercase}
.plat{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--w);border-left:3px solid var(--w)}
.plat a{display:block;padding:26px 20px;border-right:3px solid var(--w);border-bottom:3px solid var(--w);text-decoration:none;min-height:130px;position:relative}
.plat a b{display:block;font-family:var(--disp);font-weight:400;font-size:34px;text-transform:uppercase;line-height:1}
.plat a span{font-size:12px;color:var(--g)}
.plat a::after{content:"↗";position:absolute;right:14px;top:10px;font-size:20px}
.plat a:hover{background:var(--w);color:var(--k)}.plat a:hover span{color:var(--k)}
.plat a:nth-child(3){background:var(--red);color:#000}.plat a:nth-child(3) span{color:#000}
.plat a.todo{color:var(--g)}.plat a.todo b{-webkit-text-stroke:1px var(--g);color:transparent}
.contact{display:grid;grid-template-columns:1.5fr 1fr;gap:0;border:3px solid var(--w)}
.contact>div:first-child{padding:36px}
.contact>.card{border-left:3px solid var(--w);padding:36px}
.mail{display:block;font-family:var(--disp);font-size:clamp(28px,4.2vw,58px);line-height:1;text-decoration:none;word-break:break-all;margin:4px 0 14px}
.mail:hover{color:var(--red)}
.contact p{color:var(--g);margin-bottom:22px}
footer{padding:26px 0;font-size:12px;font-weight:700;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.soc{display:flex;flex-wrap:wrap;gap:16px}.soc a{text-decoration:none}.soc a:hover{color:var(--red)}
@media(max-width:900px){
 .hero>.wrap,.grid2,.about,.contact{grid-template-columns:1fr}
 .hero>.wrap{min-height:0}
 .art{margin-right:0;max-width:420px}
 .grid2 .card+.card,.contact>.card{border-left:0;border-top:3px solid var(--w)}
 .about>.frame{border-right:0;border-bottom:3px solid var(--w)}
 .about>.frame .gimg{min-height:0;aspect-ratio:1}
 .plat{grid-template-columns:1fr 1fr}
 #music h2{text-indent:0}
 .burger{display:block}
 nav ul{display:none;position:absolute;top:54px;left:0;right:0;flex-direction:column;background:var(--k);border-bottom:3px solid var(--w)}
 nav ul.open{display:flex}nav ul a{border-left:0;border-top:3px solid var(--w);padding:14px 22px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* ===== D1 — Refined / premium label ===== */
:root{--w:#ededed;--g:#7a7a7a}
.crt{display:none}
body{font-size:15px;line-height:1.7}
.wrap{max-width:1180px;padding:0 40px}
nav{border-bottom:1px solid #2a2a2a;background:#000d;backdrop-filter:blur(8px)}
nav .wrap{height:64px;padding:0 40px}
.logo{background:none;color:var(--w);padding:0;font-size:22px;letter-spacing:.08em}
nav ul{gap:34px}
nav ul a{border:0;padding:0;font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--g)}
nav ul a:hover{background:none;color:var(--w);box-shadow:inset 0 -1px var(--red)}
.burger{border:1px solid #333}
.hero{border-bottom:1px solid #2a2a2a}
.hero .bg,.hero .grid{display:none}
.hero>.wrap{grid-template-columns:1.25fr 1fr;gap:72px;min-height:720px;padding-top:96px;padding-bottom:96px;align-items:center}
.hud{gap:28px;font-weight:400;letter-spacing:.2em;color:var(--g);margin-bottom:28px}
.hud span{border:0;padding:0;margin:0}
.hud span:first-child{background:none;color:var(--red)}
h1{font-size:clamp(90px,13vw,190px);margin-left:-4px}
/* glitch only on hover */
.glitch::before,.glitch::after{animation:none;opacity:0;transition:opacity .1s}
.glitch:hover::before,.glitch:hover::after{opacity:1}
.glitch:hover::before{animation:sl1 .9s infinite steps(1)}
.glitch:hover::after{animation:sl2 .7s infinite steps(1)}
.glitch::before{content:attr(data-text);opacity:1;clip-path:inset(56% 0 36% 0);transform:translateX(14px);animation:none}
.pron{background:none;color:var(--g);transform:none;padding:0;font-weight:400;letter-spacing:.08em;margin-top:28px}
.tl{border-left:1px solid var(--red);padding-left:20px;margin-top:20px;color:#cfcfcf;font-size:16px}
.cta{gap:14px;margin:40px 0 0}
.btn{border-width:1px;margin:0;padding:14px 26px;font-weight:400;font-size:12px;letter-spacing:.2em}
.art{margin:0;align-self:center}
.frame,.hero .frame{border:0;transform:none}
.gimg{aspect-ratio:4/5}
.gimg img{filter:grayscale(1) contrast(1.05)}
.gimg::after{display:none}
.gimg::before{top:62%;height:2.5%;transition:transform .3s}
.frame:hover .gimg img{content:url(avatar-sort.jpg)}
.gimg img{transition:filter .3s}
.cap{position:static;margin-top:14px;justify-content:space-between;font-weight:400;letter-spacing:.16em;color:var(--g)}
.cap span,.cap span+span{background:none;color:var(--g);padding:0}
.cap span+span{color:var(--red)}
.strip{background:none;color:var(--w);border-bottom:1px solid #2a2a2a;font-size:15px;font-family:var(--mono);letter-spacing:.3em;padding:18px 0}
.strip div{animation-duration:60s}
.strip span{margin:0 26px;color:var(--g)}.strip i{-webkit-text-stroke:0;color:var(--w)}
section{border-bottom:1px solid #2a2a2a;padding:120px 0}
section .wrap{display:grid;grid-template-columns:200px 1fr;column-gap:40px}
section .wrap>*{grid-column:2}
section .wrap>.tag{grid-column:1;grid-row:1 / span 3;align-self:start}
#about .wrap,#contact .wrap{display:block}
.tag{background:none;color:var(--g);padding:0;font-weight:400;letter-spacing:.2em;font-size:11px;border-top:1px solid var(--red);padding-top:12px}
.tag i{color:var(--red)}
h2{font-size:clamp(56px,7vw,104px);margin-bottom:48px}
#music h2{text-indent:0}
h2 small{color:var(--g);font-weight:400;letter-spacing:.2em;font-size:12px;margin-top:16px}
.grid2{border:0;gap:40px}
.grid2 .card+.card{border:0}
.card{padding:0}
.card h3{font-size:24px}
.about{border:0;grid-template-columns:420px 1fr;gap:72px}
.about>.frame{border:0}
.about>.frame .gimg{min-height:0;aspect-ratio:4/5;height:auto}
.about>div:last-child{padding:0}
.about .tag{display:block;width:200px;margin-bottom:24px}
.ph{background:none;color:var(--red);border:1px solid var(--red);font-weight:400;letter-spacing:.12em}
.chip{border:1px solid #333;margin:0 8px 8px 0;font-weight:400;letter-spacing:.12em;color:#bbb}
.plat{border:0;border-top:1px solid #2a2a2a;grid-template-columns:repeat(2,1fr);column-gap:40px}
.plat a{border:0;border-bottom:1px solid #2a2a2a;min-height:0;padding:22px 0;display:flex;align-items:baseline;justify-content:space-between}
.plat a b{font-size:30px}
.plat a::after{position:static;color:var(--g);font-size:16px;margin-left:16px;order:3}
.plat a span{margin-left:auto}
.plat a:hover{background:none;color:var(--w)}.plat a:hover::after{color:var(--red)}.plat a:hover span{color:var(--g)}
.plat a:nth-child(3){background:none;color:var(--w)}.plat a:nth-child(3) span{color:var(--g)}
.contact{border:0;gap:72px}
.contact>div:first-child,.contact>.card{padding:0;border:0}
.contact .tag{display:block;width:200px;margin-bottom:24px}
.mail{font-size:clamp(28px,4vw,52px)}
footer{font-weight:400;letter-spacing:.16em;color:var(--g)}
@media(max-width:900px){
 .wrap,nav .wrap{padding:0 22px}
 .hero>.wrap{padding-top:56px;padding-bottom:64px;gap:40px;min-height:0}
 section{padding:80px 0}
 section .wrap{display:block}.tag{display:block;width:160px;margin-bottom:20px}
 .plat{grid-template-columns:1fr}
 .about,.contact{gap:40px}
 nav ul{gap:0}nav ul a{padding:14px 22px;border-top:1px solid #2a2a2a}
}

/* ===== D1a — typography tweak: condensed grotesk, bigger wordmark ===== */
:root{--disp:"Big Shoulders Display","Anton",Impact,sans-serif}
h1{font-weight:900;font-size:clamp(110px,17vw,250px);line-height:.8;letter-spacing:-.01em}
h2{font-weight:900;letter-spacing:0;font-size:clamp(64px,8vw,120px)}
.logo{font-weight:900;font-size:26px;letter-spacing:.12em}
.card h3,.plat a b,.mail{font-weight:800;letter-spacing:.01em}
.plat a b{font-size:34px}

/* ---- D1a-G1: no red bar on photo + glitchier wordmark ---- */
.gimg::before{display:none}
.glitch{position:relative;display:inline-block;isolation:isolate;color:var(--w)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;opacity:1;background:#000;color:var(--w);pointer-events:none;z-index:1}
.glitch:hover::before,.glitch:hover::after{opacity:1}
/* g1: static RGB split + two displaced slices */
.glitch{text-shadow:-.03em 0 0 var(--red),.02em 0 0 rgba(255,255,255,.3)}
.glitch::before,.glitch::after,.glitch:hover::before,.glitch:hover::after{animation:none;text-shadow:-.03em 0 0 var(--red),.02em 0 0 rgba(255,255,255,.3)}
.glitch::before{clip-path:inset(24% 0 58% 0);transform:translateX(-.08em)}
.glitch::after{clip-path:inset(62% 0 22% 0);transform:translateX(.11em)}
/* ---- D1a-FINAL: clean legible wordmark, soft red neon glow, rare tiny flicker ---- */
.glitch{color:#f4f1f1;text-shadow:-.018em 0 0 rgba(255,26,26,.8),0 0 .012em rgba(255,50,50,.9),0 0 .035em rgba(255,26,26,.5);animation:kf 7s infinite steps(1)}
.glitch::after,.glitch:hover::after{display:none}
.glitch::before,.glitch:hover::before{opacity:0;clip-path:inset(48% 0 49% 0);transform:translateX(.035em);text-shadow:none;animation:ks 7s infinite steps(1)}
@keyframes kf{0%,97.2%,100%{opacity:1}97.6%{opacity:.88}}
@keyframes ks{0%,97%,98.6%,100%{opacity:0}97.1%{opacity:1}}
@media(prefers-reduced-motion:reduce){.glitch,.glitch::before{animation:none!important}}
/* ---- D1a-FINAL v3: Michroma wordmark + logo (headings stay Big Shoulders Display) ---- */
:root{--mark:"Michroma","Big Shoulders Display",sans-serif}
h1{font-family:var(--mark);font-weight:400;line-height:1;letter-spacing:.06em;font-size:clamp(40px,13.4vw,100px);margin-left:-2px}
.glitch{-webkit-text-stroke:.032em currentColor;paint-order:stroke fill}
.glitch::before{-webkit-text-stroke:.032em currentColor}
.logo{font-family:var(--mark);font-weight:400;font-size:15px;letter-spacing:.2em;-webkit-text-stroke:.5px currentColor}
.logo span{letter-spacing:0;margin-left:4px}
/* mobile fix: about grid inherited from D1 overflowed below 900px */
@media(max-width:900px){.hero>.wrap,.about{grid-template-columns:1fr;gap:40px}.about>.frame .gimg{aspect-ratio:1}}
/* the About title is the artist name itself, so it uses the wordmark face too */
#about h2{font-family:var(--mark);font-weight:400;letter-spacing:.06em;line-height:1.05;font-size:clamp(34px,8vw,64px);-webkit-text-stroke:.025em currentColor}
/* ---- D1a-FINAL v4: no glow; very slight glitchy 3D extrusion ---- */
:root{--x3d:.01em .01em 0 #7a7a7a,.02em .02em 0 #4a4a4a,.03em .03em 0 #2c2c2c,.04em .04em 0 rgba(190,22,22,.6);
--x3d-a:.012em .01em 0 #7a7a7a,.026em .02em 0 #4a4a4a,.04em .03em 0 #2c2c2c,.058em .04em 0 rgba(255,30,30,.75),-.012em 0 0 rgba(255,255,255,.22);
--x3d-b:.008em .012em 0 #7a7a7a,.016em .024em 0 #4a4a4a,.026em .034em 0 #2c2c2c,.03em .046em 0 rgba(190,22,22,.6)}
.glitch{color:#f4f1f1;text-shadow:var(--x3d);animation:kd 7s infinite steps(1)}
.glitch::before,.glitch:hover::before{text-shadow:var(--x3d-a)}
@keyframes kd{0%{text-shadow:var(--x3d)}97%{text-shadow:var(--x3d-a)}97.8%{text-shadow:var(--x3d-b)}98.6%{text-shadow:var(--x3d)}100%{text-shadow:var(--x3d)}}
@media(prefers-reduced-motion:reduce){.glitch,.glitch::before{animation:none!important}.glitch{text-shadow:var(--x3d)!important}.glitch::before{opacity:0!important}}
.logo{text-shadow:1px 1px 0 #4a4a4a}.logo span{text-shadow:none}
/* ---- D1a-FINAL v5: solid red offset depth (anaglyph-like), hard-edged ---- */
:root{--x3d:.014em .014em 0 #1c1c1c,.05em .05em 0 var(--red);
--x3d-a:.014em .014em 0 #1c1c1c,.072em .04em 0 var(--red),-.012em 0 0 rgba(255,255,255,.25);
--x3d-b:.014em .014em 0 #1c1c1c,.036em .064em 0 var(--red)}
.logo{text-shadow:1.5px 1.5px 0 var(--red)}.logo span{text-shadow:none}
/* ---- D1a-FINAL v6: red depth at 90% + barely-there red glow (red only) ---- */
:root{--rd:rgba(255,26,26,.9);--rg:rgba(255,26,26,.3);
--x3d:.014em .014em 0 #1c1c1c,.05em .05em 0 var(--rd),.05em .05em .03em var(--rg);
--x3d-a:.014em .014em 0 #1c1c1c,.072em .04em 0 var(--rd),.072em .04em .03em var(--rg),-.012em 0 0 rgba(255,255,255,.25);
--x3d-b:.014em .014em 0 #1c1c1c,.036em .064em 0 var(--rd),.036em .064em .03em var(--rg)}
.logo{text-shadow:1.5px 1.5px 0 var(--rd)}.logo span{text-shadow:none}
/* ---- D1a-FINAL v7: flat white letters (no stroke, no dark separator, no white ghost); red offset unchanged ---- */
:root{--x3d:.05em .05em 0 var(--rd),.05em .05em .03em var(--rg);
--x3d-a:.072em .04em 0 var(--rd),.072em .04em .03em var(--rg);
--x3d-b:.036em .064em 0 var(--rd),.036em .064em .03em var(--rg)}
.glitch,.glitch::before{-webkit-text-stroke:0}
.logo{-webkit-text-stroke:0}

/* ---- Latest release: featured single, then DJ set + SoundCloud side by side ---- */
.feat{margin-bottom:56px}
.grid2.duo{grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid2.duo{grid-template-columns:1fr}.feat{margin-bottom:40px}}