/* Street Buzz Mag – shared styles (extracted from Anthony's index.html, 2026-10-20) */
  :root{
    --accent:#ffc21a;
    --accent-ink:#b07800;
    --neon:#3fd6f5;
    --ink:#111;
    --muted:#888;
    --line:#e5e5e5;
    --bg:#fff;
    --dark:#0d0d0d;
    --wrap:1200px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font:400 16px/1.5 Roboto,Arial,sans-serif}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  ul{list-style:none}
  .wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}

  /* ---------- Fly-out menu ---------- */
  .fly{position:fixed;inset:0 auto 0 0;width:300px;max-width:85vw;background:#000;color:#fff;
       transform:translateX(-100%);transition:transform .3s;z-index:60;overflow-y:auto;padding:24px}
  .fly.open{transform:none}
  .fly .fly-logo{width:200px;margin:0 auto 28px}
  .fly li a{display:block;padding:10px 0;border-bottom:1px solid #222;font:500 14px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.5px}
  .fly li a:hover{color:var(--accent)}
  .fly h4{margin:28px 0 12px;font:500 13px Oswald,sans-serif;text-transform:uppercase;color:#aaa}
  .shade{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s;z-index:55}
  .shade.open{opacity:1;pointer-events:auto}

  /* ---------- Top header ---------- */
  .top{background:#000;color:#fff}
  .top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:18px;padding-bottom:18px}
  .top .logo img{height:110px;width:auto}
  .top .lead{flex:1;max-width:728px}
  .top .lead img{width:100%;height:auto}
  .socials{display:flex;gap:10px}
  .socials a{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#222;color:#fff;transition:background .2s}
  .socials a:hover{background:var(--accent)}
  .socials svg{width:15px;height:15px;fill:currentColor}

  /* ---------- Main nav ---------- */
  .nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:0 2px 6px rgba(0,0,0,.06)}
  .nav .wrap{display:flex;align-items:center;height:60px;gap:12px}
  .burger{background:none;border:0;cursor:pointer;width:36px;height:36px;display:grid;place-items:center}
  .burger span,.burger span::before,.burger span::after{display:block;width:22px;height:2px;background:#000;position:relative;content:""}
  .burger span::before{position:absolute;top:-7px}
  .burger span::after{position:absolute;top:7px}
  .nav .mini{height:40px;width:auto;display:none}
  .menu{display:flex;height:100%;flex:1;justify-content:center}
  .menu > li{position:relative;height:100%}
  .menu > li > a{display:flex;align-items:center;height:100%;padding:0 14px;font:500 15px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.3px}
  .menu > li > a:hover{color:var(--accent)}
  .menu .has-sub > a::after{content:"";margin-left:6px;border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
  .sub{position:absolute;top:100%;left:0;min-width:260px;background:#fff;border-top:3px solid var(--accent);
       box-shadow:0 8px 20px rgba(0,0,0,.12);opacity:0;visibility:hidden;transition:opacity .2s}
  .menu li:hover .sub{opacity:1;visibility:visible}
  .sub a{display:block;padding:12px 18px;border-bottom:1px solid var(--line);font:500 14px/1.35 Roboto,sans-serif}
  .sub a:hover{color:var(--accent)}
  .search{background:none;border:0;width:36px;height:36px;cursor:pointer}
  .search svg{width:18px;height:18px}

  /* ---------- Post cards ---------- */
  .thumb{position:relative;overflow:hidden;background:#141414;aspect-ratio:16/10}
  .thumb .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .4s}
  .post:hover .ph{transform:scale(1.05)}
  .cat{display:inline-block;font:700 12px Roboto,sans-serif;text-transform:uppercase;color:var(--accent);letter-spacing:.5px}
  .date{font-size:12px;color:var(--muted);margin-left:8px}
  .post h3{font:900 20px/1.2 Roboto,sans-serif;margin-top:6px;letter-spacing:-.3px}
  .post:hover h3{color:var(--accent)}

  /* Section head */
  .sec-head{display:flex;align-items:center;gap:14px;margin:44px 0 22px}
  .sec-head h4{font:700 26px Oswald,sans-serif;text-transform:uppercase;letter-spacing:.5px}
  .sec-head::after{content:"";flex:1;height:4px;background:var(--ink)}

  /* Entertainment block */
  .ent{display:grid;grid-template-columns:2fr 1fr;gap:30px}
  .feat .thumb{aspect-ratio:16/9}
  .feat .over{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff}
  .feat h3{font-size:36px;color:#fff}
  .feat .date{color:#ccc}
  .ent-side{display:flex;flex-direction:column;gap:24px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}
  .post .body{padding-top:10px}
  .ad{text-align:center}
  .ad small{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
  .ad img{margin:0 auto}
  .list-post{display:grid;grid-template-columns:140px 1fr;gap:14px;align-items:start}
  .list-post .thumb{aspect-ratio:4/3}
  .list-post h3{font-size:16px}
  .more{display:block;width:100%;margin:34px 0 0;padding:14px;border:2px solid var(--ink);text-align:center;font:700 14px Oswald,sans-serif;text-transform:uppercase;letter-spacing:1px;transition:.2s}
  .more:hover{background:var(--ink);color:#fff}

  /* Videos block */
  .videos{background:var(--dark);color:#fff;margin-top:56px;padding:10px 0 50px}
  .videos .sec-head::after{background:#fff}
  .vid-grid{display:grid;grid-template-columns:2fr 1fr;gap:30px}
  .vid-side{display:flex;flex-direction:column;gap:22px}
  .play{position:absolute;left:16px;bottom:16px;width:48px;height:48px;border-radius:50%;background:var(--accent);display:grid;place-items:center;z-index:2}
  .play::before{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
  .vid-side .play{width:34px;height:34px;left:10px;bottom:10px}
  .vid-side .play::before{border-left-width:10px;border-top-width:6px;border-bottom-width:6px;margin-left:3px}
  .videos .post h3{color:#fff}
  .videos .post:hover h3{color:var(--accent)}
  .videos .big h3{font-size:32px}
  .videos .vid-side .list-post h3{font-size:16px}

  .bottom-ad{padding:40px 0}
  .bottom-ad img{width:100%;max-width:970px;height:auto}

  /* Footer */
  footer{background:#000;color:#fff;text-align:center;padding:50px 16px 30px}
  footer .flogo{width:220px;margin:0 auto 22px}
  footer .socials{justify-content:center;margin-bottom:26px}
  footer p{font-size:13px;color:#999;letter-spacing:.5px}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


  /* ---------- StreetBuzz brand ---------- */
  .top{background:#0a0a0a;border-bottom:3px solid var(--accent)}
  .top .logo img{height:120px;width:auto;filter:drop-shadow(0 0 12px rgba(255,194,26,.25))}
  .tagline{font:700 20px/1.25 Oswald,sans-serif;text-transform:uppercase;letter-spacing:.5px;text-align:center;color:#fff}
  .tagline span{color:var(--accent)}
  .hero{background:#000}
  .hero img{width:100%;max-width:1400px;margin:0 auto;height:auto}
  .cat{color:var(--accent-ink)}
  .feat .cat,.videos .cat{color:var(--accent)}
  .post:hover h3{color:var(--accent-ink)}
  .videos .post:hover h3,.fly li a:hover,.sub a:hover{color:var(--accent)}
  .menu > li > a:hover{color:var(--accent-ink)}
  .sub a:hover{color:var(--accent-ink)}
  .sec-head h4{border-left:6px solid var(--accent);padding-left:12px}
  .play{background:var(--accent)}
  .play::before{border-left-color:#000}
  .socials a:hover{background:var(--accent);color:#000}
  .more{border-color:#000}
  .more:hover{background:var(--accent);color:#000;border-color:var(--accent)}
  .videos{background:#0a0a0a}
  .videos .sec-head h4{color:#fff}
  footer{border-top:3px solid var(--accent)}
  footer .flogo{width:260px}
  .motto{font:700 15px Oswald,sans-serif;text-transform:uppercase;letter-spacing:2px;color:var(--neon)!important;margin-bottom:10px}
  @media (max-width:960px){.tagline{display:none}.top .logo img{height:90px}}


  /* ---------- Video player ---------- */
  .player{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
  .player iframe,.poster,.poster img{position:absolute;inset:0;width:100%;height:100%;border:0}
  .poster{cursor:pointer;background:#000;padding:0}
  .poster img,.vid .thumb img{object-fit:cover}
  .poster:hover img{opacity:.85}
  .poster .play{width:72px;height:72px;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%)}
  .poster .play::before{border-left-width:22px;border-top-width:14px;border-bottom-width:14px;margin-left:6px}
  .vid{background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:6px;border-radius:4px}
  .vid .thumb img{position:absolute;inset:0;width:100%;height:100%}
  .vid.active{background:#1c1c1c;outline:1px solid var(--accent)}
  .yt-link{display:inline-block;margin-top:8px;font-size:13px;color:var(--neon)}
  .more-dark{border-color:#fff!important;color:#fff}
  .more-dark:hover{color:#000}

  /* Responsive */
  @media (max-width:960px){
    .menu{display:none}
    .nav .mini{display:block;margin:0 auto}
    .top .lead,.top .socials{display:none}
    .top .wrap{justify-content:center}
    .ent,.vid-grid{grid-template-columns:1fr}
    .feat h3{font-size:26px}
    .videos .big h3{font-size:24px}
  }
  @media (max-width:600px){
    .row2{grid-template-columns:1fr}
    .top .logo img{height:80px}
    .list-post{grid-template-columns:110px 1fr}
    .sec-head h4{font-size:22px}
  }

/* ==========================================================
   Added 2026-10-20: inner pages (articles, categories, contact, about)
   ========================================================== */
.page{padding-bottom:60px}
.crumbs{font-size:13px;color:var(--muted);margin:26px 0 0}
.crumbs a:hover{color:var(--accent-ink)}
.page-title{font:700 40px/1.1 Oswald,sans-serif;text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;border-left:6px solid var(--accent);padding-left:14px}
.page-lead{font-size:18px;color:#444;max-width:760px;margin-bottom:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid4 .post h3{font-size:17px}
.excerpt{font-size:14px;color:#555;margin-top:6px}
.sub-head{font:700 20px Oswald,sans-serif;text-transform:uppercase;margin:34px 0 16px;color:var(--accent-ink)}
.empty{border:2px dashed var(--line);padding:30px;text-align:center;color:#666;margin-top:20px}
.empty strong{display:block;font:700 18px Oswald,sans-serif;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.soon{position:absolute;right:10px;top:10px;background:#000;color:var(--accent);font:700 11px Roboto,sans-serif;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px}
div.post{cursor:default}
div.post:hover h3{color:inherit}
div.post:hover .ph{transform:none}

/* Article */
.article{max-width:820px;margin:0 auto}
.article .meta{font-size:13px;color:var(--muted);margin-bottom:18px}
.article .meta .cat{margin-right:8px}
.article h1{font:900 42px/1.12 Roboto,sans-serif;letter-spacing:-.5px;margin:10px 0 12px}
.article figure{margin:0 0 26px}
.article figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#141414}
.article figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.article-body{font-size:18px;line-height:1.7;color:#222}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote{margin:0 0 1.1em}
.article-body h2{font:700 26px/1.2 Oswald,sans-serif;text-transform:uppercase;margin:1.6em 0 .6em}
.article-body h3{font:700 21px/1.25 Roboto,sans-serif;margin:1.4em 0 .5em}
.article-body ul{list-style:disc;padding-left:1.4em}
.article-body ol{list-style:decimal;padding-left:1.4em}
.article-body li{margin-bottom:.4em}
.article-body a{color:var(--accent-ink);text-decoration:underline}
.article-body blockquote{border-left:4px solid var(--accent);padding:4px 0 4px 18px;font-style:italic;color:#444}
.article-body img{height:auto;margin:1em auto}
.related{margin-top:50px}

/* Placeholder (for copy not delivered yet) */
.placeholder{border:3px dashed #e0a800;background:#fff8e1;padding:26px;margin:24px 0;color:#5c4400}
.placeholder strong{display:block;font:700 18px Oswald,sans-serif;text-transform:uppercase;margin-bottom:8px}

/* Contact form */
.contact-grid{display:grid;grid-template-columns:3fr 2fr;gap:40px;margin-top:20px}
.form{display:grid;gap:18px}
.form label{display:block;font:700 13px Roboto,sans-serif;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.form input[type=text],.form input[type=email],.form select,.form textarea{width:100%;padding:12px 14px;border:2px solid #d5d5d5;border-radius:4px;font:400 16px Roboto,Arial,sans-serif;background:#fff;color:var(--ink)}
.form textarea{min-height:170px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--accent)}
.form .hint{font-size:12px;color:var(--muted);margin-top:4px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.btn{display:inline-block;background:#000;color:#fff;border:2px solid #000;padding:14px 30px;font:700 15px Oswald,sans-serif;text-transform:uppercase;letter-spacing:1px;cursor:pointer;transition:.2s;border-radius:2px}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#000}
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.notice{padding:16px 18px;border-radius:4px;font-size:15px}
.notice.error{background:#fdecea;border:1px solid #f5c2bd;color:#8a1c12}
.notice.ok{background:#fff8e1;border:1px solid var(--accent);color:#3d2e00}
.side-box{background:#0a0a0a;color:#fff;padding:26px;border-top:4px solid var(--accent)}
.side-box h2{font:700 22px Oswald,sans-serif;text-transform:uppercase;margin-bottom:10px}
.side-box p{color:#ccc;font-size:15px;margin-bottom:12px}
.side-box a{color:var(--accent)}
.thanks{text-align:center;max-width:640px;margin:40px auto 0;padding:40px 24px;border:3px solid var(--accent)}
.thanks h1{font:700 40px Oswald,sans-serif;text-transform:uppercase;margin-bottom:10px}
.thanks p{font-size:18px;color:#333;margin-bottom:22px}

/* Text-only ad (used when an ad image is missing) */
.ad-text{display:grid;place-items:center;aspect-ratio:1/1;max-width:300px;margin:0 auto;background:#000;color:#fff;border:3px solid var(--accent);padding:20px;text-align:center}
.ad-text b{display:block;font:700 34px/1 Oswald,sans-serif;text-transform:uppercase;letter-spacing:1px;color:var(--accent)}
.ad-text span{display:block;font-size:13px;color:#ccc;margin-top:10px}

@media (max-width:960px){
  .grid3{grid-template-columns:1fr 1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .article h1{font-size:32px}
}
@media (max-width:600px){
  .grid3,.grid4{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  .page-title{font-size:30px}
  .article h1{font-size:28px}
  .article-body{font-size:17px}
}
.dateline{font-size:15px;color:var(--accent-ink);font-weight:500}
.contact-grid .side-box{align-self:start}
.ph-photo .ph-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;height:auto;opacity:.9}
.article-body a{word-break:break-word}
.article figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}