Here's the PHP code for your urbanmusicblog.net site. It detects the domain, loads news from a SQLite database, and renders either a full landing page or a single article view based on the URL slug. The design uses a dark, editorial aesthetic with neon accents, large typography, genre cards, and a newsletter signup.
```php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Urban Music Blog — Sound of the Street. Stories of the City.</title>
<meta name="description" content="Urban Music Blog — an independent editorial platform covering hip-hop, drill, grime, R&amp;B and electronic music. Interviews, reviews, scene reports and culture analysis.">
<meta property="og:title" content="Urban Music Blog — Sound of the Street. Stories of the City.">
<meta property="og:description" content="Urban Music Blog — an independent editorial platform covering hip-hop, drill, grime, R&amp;B and electronic music. Interviews, reviews, scene reports and culture analysis.">
<meta property="og:type" content="website">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#06060a;
  --bg-2:#0c0c13;
  --bg-3:#111119;
  --ink:#f5f5f7;
  --muted:#9b9baa;
  --dim:#6a6a7a;
  --lime:#c9ff31;
  --violet:#8b5cf6;
  --pink:#ff4d8d;
  --cyan:#31e6ff;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --radius:24px;
  --radius-sm:14px;
  --maxw:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ---------- Background FX ---------- */
.bg-fx{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.bg-fx::before{
  content:"";position:absolute;top:-25vw;right:-15vw;width:70vw;height:70vw;
  background:radial-gradient(circle at 50% 50%, rgba(139,92,246,.28), transparent 62%);
  filter:blur(20px);
  animation:float1 22s ease-in-out infinite alternate;
}
.bg-fx::after{
  content:"";position:absolute;bottom:-30vw;left:-20vw;width:75vw;height:75vw;
  background:radial-gradient(circle at 50% 50%, rgba(201,255,49,.14), transparent 62%);
  filter:blur(20px);
  animation:float2 28s ease-in-out infinite alternate;
}
@keyframes float1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8vw,10vh) scale(1.15)}}
@keyframes float2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(10vw,-8vh) scale(1.2)}}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout helpers ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--lime);
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--lime);opacity:.7}
.section{padding:110px 0;position:relative}
.section-head{max-width:820px;margin-bottom:56px}
.section-head h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(30px,5vw,58px);
  line-height:1.03;letter-spacing:-.03em;font-weight:700;
  margin:18px 0 18px;
}
.section-head p{color:var(--muted);font-size:clamp(15px,1.4vw,18px);max-width:680px}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);border:0}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  background:rgba(6,6,10,.62);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;letter-spacing:-.02em}
.logo-mark{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--lime),var(--cyan) 45%,var(--violet));
  display:grid;place-items:center;
  font-size:15px;color:#06060a;font-weight:900;
  box-shadow:0 0 26px rgba(201,255,49,.28);
}
.logo span{color:var(--dim);font-weight:400;font-size:12px;letter-spacing:.06em}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  font-size:13.5px;color:var(--muted);padding:9px 15px;border-radius:999px;
  transition:.25s;font-weight:500;white-space:nowrap;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav-cta{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  padding:11px 22px;border-radius:999px;background:var(--lime);color:#06060a;
  transition:.25s;white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(201,255,49,.35)}
.burger{display:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line-strong);place-items:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);margin:3.5px 0;transition:.25s}
.mobile-menu{display:none;flex-direction:column;gap:2px;padding:14px 0 22px;border-top:1px solid var(--line)}
.mobile-menu a{padding:13px 4px;font-size:16px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.05)}
.mobile-menu a:hover{color:var(--lime)}

/* ---------- Hero ---------- */
.hero{padding:80px 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:end}
.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;
  font-size:clamp(52px,11.5vw,168px);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
  margin:22px 0 0;
}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .outline{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(245,245,247,.42);
}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--lime),var(--cyan) 42%,var(--violet) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 17px;border:1px solid var(--line-strong);border-radius:999px;
  font-size:12.5px;color:var(--muted);letter-spacing:.02em;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero-copy p{color:var(--muted);font-size:16.5px;margin-bottom:22px}
.hero-copy p strong{color:var(--ink);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
  padding:15px 28px;border-radius:999px;transition:.3s;
}
.btn-primary{background:var(--lime);color:#06060a}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(201,255,49,.36)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);transform:translateY(-3px)}
.hero-metric{display:flex;gap:30px;border-top:1px solid var(--line);padding-top:22px}
.hero-metric div b{display:block;font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em}
.hero-metric div span{font-size:11.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.14em}

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;overflow:hidden;background:rgba(255,255,255,.015);
}
.marquee-track{display:flex;gap:44px;width:max-content;animation:scroll 34s linear infinite}
.marquee-track span{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(17px,2.4vw,30px);
  font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:rgba(245,245,247,.32);
  display:flex;align-items:center;gap:44px;white-space:nowrap;
}
.marquee-track span::after{content:"◆";color:var(--lime);font-size:12px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about-text p{color:var(--muted);font-size:16.5px;margin-bottom:20px}
.about-text p:first-of-type{color:var(--ink);font-size:19px;line-height:1.55;font-weight:400}
.about-text .hl{color:var(--lime)}
.about-cards{display:grid;gap:16px}
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;transition:.38s cubic-bezier(.2,.8,.2,1);
  position:relative;overflow:hidden;
}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(500px circle at var(--mx,50%) var(--my,0%),rgba(201,255,49,.09),transparent 42%);
  opacity:0;transition:.4s;
}
.card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.22)}
.card:hover::after{opacity:1}
.card .num{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:600;
  color:var(--lime);letter-spacing:.12em;margin-bottom:14px;display:block;
}
.card h3{font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.card p{color:var(--muted);font-size:14.8px;line-height:1.62}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--bg-2);padding:38px 28px;text-align:left;transition:.35s}
.stat:hover{background:var(--bg-3)}
.stat b{
  display:block;font-family:'Space Grotesk',sans-serif;font-size:clamp(34px,4.4vw,52px);
  font-weight:700;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(120deg,var(--ink),var(--muted));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;margin-top:12px;font-size:12.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.14em}

/* ---------- Genres ---------- */
.genre-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.genre{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;min-height:250px;
  display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(170deg,rgba(255,255,255,.045),transparent 70%);
  transition:.4s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;
}
.genre:hover{transform:translateY(-7px) scale(1.012);border-color:rgba(201,255,49,.42)}
.genre:hover .genre-icon{transform:rotate(-8deg) scale(1.1);box-shadow:0 0 34px rgba(201,255,49,.28)}
.genre-icon{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:23px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-strong);
  transition:.4s cubic-bezier(.2,.8,.2,1);
}
.genre h3{font-family:'Space Grotesk',sans-serif;font-size:23px;font-weight:600;letter-spacing:-.025em;margin:26px 0 10px}
.genre p{color:var(--muted);font-size:14.6px;line-height:1.6}
.genre .tag{margin-top:20px;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* ---------- Picks ---------- */
.picks{display:grid;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pick{
  background:var(--bg);display:grid;grid-template-columns:80px 1fr auto;gap:26px;
  align-items:center;padding:26px 24px;transition:.35s;
}
.pick:hover{background:var(--bg-3);padding-left:34px}
.pick .idx{font-family:'Space Grotesk',sans-serif;font-size:14px;color:var(--dim);letter-spacing:.1em}
.pick h4{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,2.2vw,25px);font-weight:600;letter-spacing:-.025em}
.pick .meta{color:var(--dim);font-size:13px;margin-top:5px}
.pick .score{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line-strong);color:var(--lime);
  white-space:nowrap;
}

/* ---------- News ---------- */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent);
  display:flex;flex-direction:column;transition:.4s cubic-bezier(.2,.8,.2,1);
}
.news-card:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.24);box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.news-thumb{
  height:170px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#141420,#0a0a12);
  display:grid;place-items:center;
}
.news-thumb::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(420px circle at 30% 20%,rgba(139,92,246,.34),transparent 62%),
             radial-gradient(380px circle at 80% 90%,rgba(201,255,49,.2),transparent 60%);
  transition:.55s;
}
.news-card:hover .news-thumb::before{transform:scale(1.18)}
.news-thumb .glyph{
  font-family:'Space Grotesk',sans-serif;font-size:52px;font-weight:700;
  color:rgba(255,255,255,.13);letter-spacing:-.05em;position:relative;
}
.news-body{padding:26px;display:flex;flex-direction:column;flex:1}
.news-date{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:14px}
.news-card h3{font-family:'Space Grotesk',sans-serif;font-size:20.5px;font-weight:600;letter-spacing:-.025em;line-height:1.3;margin-bottom:12px;transition:.3s}
.news-card:hover h3{color:var(--lime)}
.news-card .excerpt{color:var(--muted);font-size:14.4px;line-height:1.62;flex:1}
.news-more{
  margin-top:22px;font-size:13px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;transition:.3s;
}
.news-card:hover .news-more{gap:14px;color:var(--lime)}
.empty{
  border:1px dashed var(--line-strong);border-radius:var(--radius);
  padding:70px 30px;text-align:center;color:var(--dim);font-size:16px;
}

/* ---------- Article ---------- */
.article-hero{padding:70px 0 44px;border-bottom:1px solid var(--line)}
.article-hero .meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:26px}
.article-hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:clamp(32px,6.2vw,76px);line-height:1.02;letter-spacing:-.04em;font-weight:700;
  max-width:1000px;
}
.article-wrap{padding:60px 0 100px}
.article-body{max-width:820px;font-size:17.5px;line-height:1.85;color:#d6d6e0}
.article-body p{margin-bottom:26px}
.article-body h2{font-family:'Space Grotesk',sans-serif;font-size:30px;letter-spacing:-.03em;margin:48px 0 18px;color:var(--ink)}
.article-body h3{font-family:'Space Grotesk',sans-serif;font-size:23px;letter-spacing:-.02em;margin:36px 0 14px;color:var(--ink)}
.article-body ul,.article-body ol{margin:0 0 26px 22px}
.article-body li{margin-bottom:12px}
.article-body a{color:var(--lime);border-bottom:1px solid rgba(201,255,49,.35)}
.article-body blockquote{
  border-left:3px solid var(--lime);padding:6px 0 6px 26px;margin:34px 0;
  font-family:'Space Grotesk',sans-serif;font-size:23px;line-height:1.45;
  letter-spacing:-.02em;color:var(--ink);
}
.article-body img{border-radius:var(--radius-sm);margin:32px 0;border:1px solid var(--line)}
.back-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:52px;
  font-size:14px;font-weight:600;color:var(--ink);
  padding:13px 26px;border:1px solid var(--line-strong);border-radius:999px;transition:.3s;
}
.back-link:hover{background:var(--lime);color:#06060a;border-color:var(--lime);transform:translateY(-2px)}

/* ---------- Newsletter ---------- */
.newsletter{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(34px,5vw,68px);
  background:linear-gradient(140deg,rgba(139,92,246,.14),rgba(201,255,49,.06) 55%,transparent);
  position:relative;overflow:hidden;
}
.newsletter::before{
  content:"";position:absolute;top:-40%;right:-10%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,255,49,.18),transparent 68%);
}
.newsletter-in{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.newsletter h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,3.9vw,44px);line-height:1.08;letter-spacing:-.035em;font-weight:700;margin:16px 0 16px}
.newsletter p{color:var(--muted);font-size:16px}
.sub-form{display:flex;gap:10px;flex-wrap:wrap}
.sub-form input{
  flex:1;min-width:220px;padding:16px 20px;border-radius:999px;
  background:rgba(0,0,0,.42);border:1px solid var(--line-strong);
  color:var(--ink);font-size:14.5px;font-family:inherit;outline:none;transition:.25s;
}
.sub-form input:focus{border-color:var(--lime);box-shadow:0 0 0 4px rgba(201,255,49,.12)}
.sub-form input::placeholder{color:var(--dim)}
.sub-form button{
  padding:16px 30px;border-radius:999px;background:var(--lime);color:#06060a;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:14px;transition:.3s;
}
.sub-form button:hover{transform:translateY(-2px);box-shadow:0 10px 34px rgba(201,255,49,.34)}
.fineprint{font-size:12px;color:var(--dim);margin-top:14px}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:70px 0 40px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.footer h4{font-family:'Space Grotesk',sans-serif;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;font-weight:600}
.footer ul{list-style:none;display:grid;gap:12px}
.footer ul a{font-size:14.5px;color:var(--muted);transition:.25s}
.footer ul a:hover{color:var(--lime)}
.footer-about p{color:var(--muted);font-size:14.5px;max-width:320px;margin-top:20px}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:28px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;
  font-size:12.5px;color:var(--dim);
}
.socials{display:flex;gap:10px}
.socials a{
  width:40px;height:40px;border-radius:12px;border:1px solid var(--line);
  display:grid;place-items:center;font-size:13px;color:var(--muted);transition:.3s;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
}
.socials a:hover{background:var(--lime);color:#06060a;border-color:var(--lime);transform:translateY(-3px)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- Cursor glow ---------- */
.glow{
  position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(201,255,49,.055),transparent 65%);
  transform:translate(-50%,-50%);transition:opacity .4s;opacity:0;
}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:44px;align-items:start}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .genre-grid{grid-template-columns:repeat(2,1fr)}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .newsletter-in{grid-template-columns:1fr;gap:28px}
}
@media(max-width:820px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:grid}
  .section{padding:78px 0}
  .pick{grid-template-columns:52px 1fr;gap:16px}
  .pick .score{grid-column:2;justify-self:start;margin-top:12px}
}
@media(max-width:620px){
  .wrap{padding:0 18px}
  .genre-grid,.news-grid,.stats,.footer-grid{grid-template-columns:1fr}
  .hero{padding:52px 0 46px}
  .hero-metric{gap:20px;flex-wrap:wrap}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}
</style>
</head>
<body>

<div class="bg-fx"></div>
<div class="grain"></div>
<div class="glow" id="glow"></div>

<header class="nav">
  <div class="wrap nav-in">
    <a href="/" class="logo">
      <span class="logo-mark">U</span>
      <span style="display:flex;flex-direction:column;line-height:1.15">
        Urban Music Blog
        <span>Est. 2019 · Independent</span>
      </span>
    </a>
    <nav class="nav-links">
      <a href="/#about">About</a>
      <a href="/#genres">Genres</a>
      <a href="/#picks">Editor's Picks</a>
      <a href="/#scene">Scene Reports</a>
      <a href="/#news">News</a>
      <a href="/#contact">Contact</a>
    </nav>
    <a href="/#newsletter" class="nav-cta">Subscribe</a>
    <button class="burger" id="burger" aria-label="Menu"><span></span><span></span><span></span></button>
  </div>
  <div class="mobile-menu wrap" id="mobileMenu">
    <a href="/#about">About</a>
    <a href="/#genres">Genres</a>
    <a href="/#picks">Editor's Picks</a>
    <a href="/#scene">Scene Reports</a>
    <a href="/#news">News</a>
    <a href="/#newsletter">Newsletter</a>
    <a href="/#contact">Contact</a>
  </div>
</header>


<main>

  <!-- HERO -->
  <section class="hero">
    <div class="wrap">
      <div class="hero-grid">
        <div>
          <span class="eyebrow">Independent music journalism since 2019</span>
          <h1>
            <span class="line">Urban</span>
            <span class="line outline">Music</span>
            <span class="line accent">Blog</span>
          </h1>
        </div>
        <div class="hero-copy">
          <div class="hero-sub">
            <span class="pill"><span class="dot"></span> Live from the underground</span>
            <span class="pill">New issue every Tuesday</span>
          </div>
          <p style="margin-top:26px">
            We are a small, stubbornly independent editorial team documenting the sound of the modern city —
            <strong>hip-hop, drill, grime, R&amp;B, afrobeats, electronic and everything in between</strong>.
            No pay-to-play coverage. No press-release journalism. Just records, artists and scenes that actually matter.
          </p>
          <div class="hero-actions">
            <a href="/#news" class="btn btn-primary">Read the latest →</a>
            <a href="/#about" class="btn btn-ghost">Who we are</a>
          </div>
          <div class="hero-metric">
            <div><b>2,400+</b><span>Stories published</span></div>
            <div><b>68</b><span>Cities covered</span></div>
            <div><b>19</b><span>Countries</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- MARQUEE -->
  <div class="marquee">
    <div class="marquee-track">
      <span>Hip-Hop</span><span>Drill</span><span>Grime</span><span>R&amp;B</span><span>Afrobeats</span><span>Jersey Club</span><span>Lo-fi</span><span>Jazz Rap</span><span>Amapiano</span><span>Garage</span>
      <span>Hip-Hop</span><span>Drill</span><span>Grime</span><span>R&amp;B</span><span>Afrobeats</span><span>Jersey Club</span><span>Lo-fi</span><span>Jazz Rap</span><span>Amapiano</span><span>Garage</span>
    </div>
  </div>

  <!-- ABOUT -->
  <section class="section" id="about">
    <div class="wrap">
      <div class="about-grid">
        <div class="about-text reveal">
          <span class="eyebrow">About the blog</span>
          <h2 style="font-family:'Space Grotesk',sans-serif;font-size:clamp(30px,4.6vw,52px);line-height:1.06;letter-spacing:-.035em;margin:18px 0 26px">
            A magazine built by people who actually go to the shows.
          </h2>
          <p>
            Urban Music Blog started in 2019 as a shared spreadsheet of records nobody else was writing about.
            Six years later it is one of the few remaining platforms that still treats underground music as
            <span class="hl">culture rather than content</span> — a place where a bedroom producer from Leeds can sit
            next to a platinum-selling artist and get the same amount of care.
          </p>
          <p>
            Our editorial team is spread across London, Lagos, Atlanta, Berlin and São Paulo. We work with
            photographers, cinematographers and community radio stations to report from inside the scenes we cover
            instead of commenting on them from a distance. Every review is written by someone who listened to the
            record more than once. Every interview is transcribed by hand.
          </p>
          <p>
            We publish long-form features, album reviews, producer breakdowns, city scene reports and a weekly
            digest of the records that defined the past seven days. We do not run sponsored reviews, we do not
            accept payment for coverage, and we do not chase algorithmic trends. If a record is good, you will
            hear about it here — regardless of how many followers the artist has.
          </p>
          <p>
            If you make music, run a label, shoot film, or organise parties in a city we have not covered yet,
            <a href="/#contact" style="color:var(--lime);border-bottom:1px solid rgba(201,255,49,.35)">get in touch</a>.
            The best stories we have ever published arrived as unmarked emails at 2am.
          </p>
        </div>
        <div class="about-cards reveal">
          <div class="card">
            <span class="num">01 — Editorial independence</span>
            <h3>No sponsored coverage. Ever.</h3>
            <p>
              We are funded entirely by our readers and by a small merch line. That means we can review a debut demo
              and a major-label rollout with exactly the same critical standard — and turn down campaigns that would
              compromise the tone of the magazine.
            </p>
          </div>
          <div class="card">
            <span class="num">02 — On the ground</span>
            <h3>Reported from the room</h3>
            <p>
              Our writers live where the music is made. Scene reports are filed from basement clubs, community
              centres, radio stations and kitchen studios — not from a press release sent by a streaming platform.
            </p>
          </div>
          <div class="card">
            <span class="num">03 — Deep archive</span>
            <h3>Five years, one search bar</h3>
            <p>
              Every interview, review and mix we have ever published stays online, free, and indexed. The archive is
              a living document of a decade of urban music and it belongs to the people who made it.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div class="wrap"><hr class="rule"></div>

  <!-- STATS -->
  <section class="section" style="padding-top:80px">
    <div class="wrap">
      <div class="stats reveal">
        <div class="stat"><b>2,400+</b><span>Articles published</span></div>
        <div class="stat"><b>640</b><span>Artists interviewed</span></div>
        <div class="stat"><b>1.2M</b><span>Monthly readers</span></div>
        <div class="stat"><b>68</b><span>Cities in the archive</span></div>
      </div>
    </div>
  </section>

  <!-- GENRES -->
  <section class="section" id="genres">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">What we cover</span>
        <h2>Six lanes, one city block.</h2>
        <p>
          Urban music has never been a single genre — it is a dense network of local dialects, tempo shifts and
          borrowed drum machines. We follow all of it, from the radio-friendly top layer down to the demos
          circulating in group chats.
        </p>
      </div>
      <div class="genre-grid">
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🎤</div>
            <span class="tag">01</span>
          </div>
          <div>
            <h3>Hip-Hop &amp; Rap</h3>
            <p>
              The backbone of the magazine. Album reviews, verse-by-verse breakdowns, producer interviews and the
              annual list of records that will still be argued about in ten years. We follow regional dialects as
              closely as we follow the charts.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">⚡</div>
            <span class="tag">02</span>
          </div>
          <div>
            <h3>Drill &amp; Trap</h3>
            <p>
              From Chicago to Brixton to Brooklyn. We report on the sound that keeps rewriting itself every eighteen
              months — the sliding 808s, the regional slang, the legal battles and the DIY video culture behind it.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🔊</div>
            <span class="tag">03</span>
          </div>
          <div>
            <h3>Grime &amp; Garage</h3>
            <p>
              The UK's most stubbornly local export and the pirate radio culture that raised it. Set reviews, clash
              recaps, MC spotlights and long interviews with the selectors who kept the frequencies alive.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">💜</div>
            <span class="tag">04</span>
          </div>
          <div>
            <h3>R&amp;B &amp; Soul</h3>
            <p>
              Slow, patient songwriting and the producers who make space for it. We cover the alt-R&amp;B wave, the
              neo-soul revival, and the session musicians quietly shaping the biggest records of the year.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🌍</div>
            <span class="tag">05</span>
          </div>
          <div>
            <h3>Afrobeats &amp; Amapiano</h3>
            <p>
              The sound of a continent reorganising global pop. We report from Lagos, Accra, Johannesburg and
              Nairobi — on the parties, the producers, the labels and the diaspora audiences that carry it worldwide.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🌀</div>
            <span class="tag">06</span>
          </div>
          <div>
            <h3>Electronic &amp; Club</h3>
            <p>
              Jersey club, jungle, garage, footwork, baile funk, techno edits — the rhythm research happening at
              140 BPM and above. Mix premieres, scene reports and interviews with the DJs pushing it forward.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- PICKS -->
  <section class="section" id="picks" style="padding-top:20px">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">Editor's picks · 2026</span>
        <h2>The records we keep coming back to.</h2>
        <p>
          Our running shortlist of the most interesting releases of the year so far — scored by the editorial team
          and updated every month. No algorithmic weighting, no label influence, just listening.
        </p>
      </div>
    </div>
    <div class="picks reveal">
      <div class="pick">
        <span class="idx">01</span>
        <div>
          <h4>Concrete Lullabies — Nia Okafor</h4>
          <div class="meta">Album · Soul / Jazz Rap · Lagos → London</div>
        </div>
        <span class="score">9.2</span>
      </div>
      <div class="pick">
        <span class="idx">02</span>
        <div>
          <h4>SE18 — Kade &amp; Frost</h4>
          <div class="meta">EP · Drill · South East London</div>
        </div>
        <span class="score">8.9</span>
      </div>
      <div class="pick">
        <span class="idx">03</span>
        <div>
          <h4>Frequency Drift — Malaika</h4>
          <div class="meta">Album · Afrobeats / Amapiano · Johannesburg</div>
        </div>
        <span class="score">8.8</span>
      </div>
      <div class="pick">
        <span class="idx">04</span>
        <div>
          <h4>Third Shift — Dojo Sound</h4>
          <div class="meta">Mixtape · Jersey Club · Newark</div>
        </div>
        <span class="score">8.6</span>
      </div>
      <div class="pick">
        <span class="idx">05</span>
        <div>
          <h4>Blue Hour Sessions — Renata Vale</h4>
          <div class="meta">Album · Alt-R&amp;B · São Paulo</div>
        </div>
        <span class="score">8.5</span>
      </div>
      <div class="pick">
        <span class="idx">06</span>
        <div>
          <h4>Pirate Frequencies Vol. 4 — Various Artists</h4>
          <div class="meta">Compilation · Grime / Garage · UK</div>
        </div>
        <span class="score">8.3</span>
      </div>
    </div>
  </section>

  <!-- SCENE REPORTS -->
  <section class="section" id="scene">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">Scene reports</span>
        <h2>Every city sounds different. We go and listen.</h2>
        <p>
          Our correspondents file long-form reports from the rooms where a scene is actually forming — the
          community halls, the basement clubs, the late-night radio slots. These are not travel guides. They are
          dispatches from a specific moment in a specific place.
        </p>
      </div>
      <div class="genre-grid">
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🇬🇧</div>
            <span class="tag">London</span>
          </div>
          <div>
            <h3>The Return of the Pirate Signal</h3>
            <p>
              A decade after the towers came down, a new generation of broadcasters is rebuilding the infrastructure
              of UK underground radio — sometimes legally, sometimes very much not. We spent six weeks riding along
              with three of them.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🇳🇬</div>
            <span class="tag">Lagos</span>
          </div>
          <div>
            <h3>Alté After Dark</h3>
            <p>
              The alternative scene in Lagos has outgrown its own name. We spoke to producers, visual artists and
              label owners about what happens when a subculture becomes an export — and who gets left behind.
            </p>
          </div>
        </div>
        <div class="genre reveal">
          <div style="display:flex;justify-content:space-between;align-items:flex-start">
            <div class="genre-icon">🇺🇸</div>
            <span class="tag">Atlanta</span>
          </div>
          <div>
            <h3>The Producers' Row</h3>
            <p>
              A walk down a single stretch of highway where half of the last five years of rap was made. Studio
              sessions, sample clearances and the economics of a hit that only pays out eighteen months later.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- NEWS -->
  <section class="section" id="news">
    <div class="wrap">
      <div class="section-head reveal">
        <span class="eyebrow">Latest news</span>
        <h2>Fresh from the blog</h2>
        <p>
          Reviews, interviews and scene reports published by the Urban Music Blog editorial team. Everything is
          written in-house and stays online for free.
        </p>
      </div>

                    <div class="empty">No news yet.</div>
          </div>
  </section>

  <!-- NEWSLETTER -->
  <section class="section" id="newsletter" style="padding-top:20px">
    <div class="wrap">
      <div class="newsletter reveal">
        <div class="newsletter-in">
          <div>
            <span class="eyebrow">The Weekly</span>
            <h2>Seven days of urban music, in one email.</h2>
            <p>
              Every Tuesday morning we send one letter containing the records we could not stop playing, the
              interviews worth reading in full and a short dispatch from a scene somewhere in the world. No
              clickbait, no paid placements, no more than four minutes of reading.
            </p>
          </div>
          <div>
            <form class="sub-form" onsubmit="return false">
              <input type="email" placeholder="your@email.com" aria-label="Email address">
              <button type="submit">Subscribe</button>
            </form>
            <p class="fineprint">Join 24,000 readers. Unsubscribe with one click, any time.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>


<footer class="footer" id="contact">
  <div class="wrap">
    <div class="footer-grid">
      <div class="footer-about">
        <a href="/" class="logo">
          <span class="logo-mark">U</span>
          <span style="display:flex;flex-direction:column;line-height:1.15">
            Urban Music Blog
            <span>Est. 2019 · Independent</span>
          </span>
        </a>
        <p>
          An independent editorial platform covering hip-hop, drill, grime, R&amp;B, afrobeats and electronic music
          from 68 cities around the world. Reader-funded, ad-light, written by people who show up.
        </p>
        <div class="socials" style="margin-top:22px">
          <a href="/#news" aria-label="Instagram">IG</a>
          <a href="/#news" aria-label="X">X</a>
          <a href="/#news" aria-label="YouTube">YT</a>
          <a href="/#news" aria-label="SoundCloud">SC</a>
        </div>
      </div>
      <div class="footer">
        <h4>Magazine</h4>
        <ul>
          <li><a href="/#about">About us</a></li>
          <li><a href="/#genres">Genres</a></li>
          <li><a href="/#picks">Editor's Picks</a></li>
          <li><a href="/#scene">Scene Reports</a></li>
          <li><a href="/#news">News</a></li>
        </ul>
      </div>
      <div class="footer">
        <h4>Contribute</h4>
        <ul>
          <li><a href="/#contact">Pitch a story</a></li>
          <li><a href="/#contact">Send a demo</a></li>
          <li><a href="/#contact">Photography</a></li>
          <li><a href="/#contact">Radio partners</a></li>
          <li><a href="/#contact">Corrections</a></li>
        </ul>
      </div>
      <div class="footer">
        <h4>Contact</h4>
        <ul>
          <li><a href="mailto:editorial@urbanmusicblog.net">editorial@urbanmusicblog.net</a></li>
          <li><a href="mailto:demos@urbanmusicblog.net">demos@urbanmusicblog.net</a></li>
          <li><a href="mailto:press@urbanmusicblog.net">press@urbanmusicblog.net</a></li>
          <li><a href="/#newsletter">Newsletter</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <span>© 2026 Urban Music Blog. All rights reserved.</span>
      <span>Independent music journalism · Made in the city, for the city.</span>
    </div>
  </div>
</footer>

<script>
(function(){
  var glow = document.getElementById('glow');
  var fine = window.matchMedia('(pointer:fine)').matches;
  if (fine && glow) {
    document.addEventListener('mousemove', function(e){
      glow.style.opacity = '1';
      glow.style.left = e.clientX + 'px';
      glow.style.top = e.clientY + 'px';
    });
    document.addEventListener('mouseleave', function(){ glow.style.opacity = '0'; });
  }

  var burger = document.getElementById('burger');
  var menu = document.getElementById('mobileMenu');
  if (burger && menu) {
    burger.addEventListener('click', function(){
      var open = menu.style.display === 'flex';
      menu.style.display = open ? 'none' : 'flex';
    });
  }

  var cards = document.querySelectorAll('.card');
  cards.forEach(function(c){
    c.addEventListener('mousemove', function(e){
      var r = c.getBoundingClientRect();
      c.style.setProperty('--mx', (e.clientX - r.left) + 'px');
      c.style.setProperty('--my', (e.clientY - r.top) + 'px');
    });
  });

  var revealEls = document.querySelectorAll('.reveal');
  if ('IntersectionObserver' in window) {
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if (en.isIntersecting) {
          en.target.classList.add('in');
          io.unobserve(en.target);
        }
      });
    }, {threshold: 0.12, rootMargin: '0px 0px -60px 0px'});
    revealEls.forEach(function(el, i){
      el.style.transitionDelay = Math.min(i % 6, 5) * 60 + 'ms';
      io.observe(el);
    });
  } else {
    revealEls.forEach(function(el){ el.classList.add('in'); });
  }
})();
</script>

</body>
</html>
```