html { -webkit-text-size-adjust: 100%; }
    :root{
      --bg:#ffffff;
      --text:#111;
      --muted:#666;
      --ink:#0f0f0f;
      --line:#e6e6e6;
      --brand:#111;
      --accent:#000; /* black/white theme */
      --link:#111;   /* dark links */
      --link-hover:#444;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--text);
      background:var(--bg);
      font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    }

    /* ===== Header / Nav (shared) ===== */
    header.site-header{
      background:#111;
      color:#fff;
    }
    .site-header .nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      max-width:1200px;
      margin:0 auto;
      padding:12px 16px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      text-decoration:none;
      color:#fff;
    }
    .brand-mark{
      font-family:"Shojumaru", system-ui;
      font-size:28px;
      letter-spacing:.5px;
      white-space:nowrap;
    }
    .primary-nav{
      display:flex;
      align-items:center;
      gap:20px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .primary-nav a{
      color:#fff;
      text-decoration:none;
      padding:8px 10px;
      border-radius:6px;
    }
    .primary-nav a:hover{ background:#222; }

    /* Dropdown */
    .has-submenu{ position:relative; }
    .submenu{
      display:none;
      position:absolute;
      top:100%;
      left:0;
      background:#1b1b1b;
      list-style:none;
      padding:8px 0;
      margin:6px 0 0;
      min-width:200px;
      border:1px solid #2c2c2c;
      border-radius:8px;
      z-index:50;
    }
    .submenu a{ display:block; padding:8px 12px; }
    .has-submenu:hover .submenu{ display:block; }

    /* ===== Page Title / Intro ===== */
    .hero{
      max-width:1000px;
      margin:40px auto 16px;
      padding:0 16px;
      text-align:center;
    }
    .hero h1{
      margin:0 0 8px;
      font-family:"Shojumaru", system-ui;
      font-size:40px;
      letter-spacing:.4px;
      color:var(--ink);
    }
    .hero p{
      margin:0 auto;
      max-width:800px;
      color:var(--muted);
    }

    /* ===== Content ===== */
    main{
      max-width:1000px;
      margin:28px auto 56px;
      padding:0 16px;
    }
    .card{
      border:1px solid var(--line);
      border-radius:14px;
      padding:22px;
      box-shadow:0 0 0 1px rgba(0,0,0,.02), 0 6px 20px rgba(0,0,0,.04);
      margin-bottom:18px;
      background:#fff;
    }
    .card h2{
      margin:0 0 10px;
      font-size:22px;
      letter-spacing:.2px;
    }
    .card p{ margin:8px 0; }
    .card ul{
      margin:8px 0 0 20px;
    }
    .muted{ color:var(--muted); }

    .two-col{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
    }
    @media (max-width: 840px){
      .two-col{ grid-template-columns:1fr; }
    }

    .notice{
      background:#f7f7f7;
      border:1px dashed var(--line);
      border-radius:12px;
      padding:14px 16px;
      color:#444;
    }

    a{ color:var(--link); }
    a:hover{ color:var(--link-hover); }

    /* ===== Footer (two columns; left = brand + description + links + socials) ===== */
    footer.site-footer{
      border-top:1px solid var(--line);
      background:#111;
      color:#fff;
      margin-top:60px;
    }
    .footer-inner{
      max-width:1200px;
      margin:0 auto;
      padding:28px 16px;
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap:28px;
      align-items:flex-start;
    }
    @media (max-width: 900px){
      .footer-inner{ grid-template-columns:1fr; }
    }

    .footer-left{ /* brand + description + links + socials */
      display:flex;
      flex-direction:column;
      gap:0; /* we’ll control spacing with specific margins */
    }

    .footer-logo{
      font-family:"Shojumaru", system-ui;
      font-size:28px;
      line-height:1.2;
      letter-spacing:.5px;
      text-align:center; /* centered within its column? keep left to match About theme; change to center if you desire */
    }
    .footer-tag{
      margin-top:20px;       /* exactly 20px under "Ad Games" */
      color:#cfcfcf;
      max-width:560px;
      text-align: center;
    }

    /* 50px gap above the links list, per requirement */
    .footer-links{
      margin-top:50px;
      display:flex;
      flex-wrap:wrap;
      gap:18px 28px;
      align-items:center;
      list-style:none;
      padding:0;
    }
    .footer-links a{
      color:#fff;
      text-decoration:none;
      padding:6px 0;
    }
    .footer-links a:hover{ color:#cfcfcf; }

    /* Socials: 50px gap from description is achieved by being after footer-links; reduce gap to ~50px total using margin */
    .socials{
      margin:16px 0 0;          /* small gap under links list */
      display:flex;
      gap:14px;
      list-style:none;
      padding:0;
      align-items: center;
    }
    .socials a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:32px; height:32px;
      border:1px solid #2b2b2b;
      border-radius:50%;
      color:#fff; text-decoration:none;
      background:#1a1a1a;
    }
    .socials a:hover{ background:#222; }

    /* Right column (contact) */
    .contact-col h4{
      margin:0 0 12px;
      font-size:18px;
      align-text: center;
    }
    .contact-col form{
      display:grid;
      gap:10px;
    }
    .contact-col input,
    .contact-col textarea{
      width:100%;
      border:1px solid #2b2b2b;
      background:#0f0f0f;
      color:#fff;
      border-radius:8px;
      padding:10px 12px;
      font:inherit;
    }
    .contact-col textarea{ resize:vertical; }
    .contact-col button{
      background:#fff;
      color:#111;
      border:0;
      border-radius:8px;
      padding:10px 12px;
      font-weight:600;
      cursor:pointer;
    }
    .footer-col{
      text-align: center;
    }
    .footer-col a{
      color:#fff;
    }
    .contact-col button:hover{ background:#e9e9e9; }
    .fineprint{ color:#bbb; font-size:.92rem; }

    .footer-bottom{
      border-top:1px solid #2b2b2b;
      max-width:1200px;
      margin:0 auto;
      padding:12px 16px 18px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      color:#cfcfcf;
    }
    .footer-bottom a{
      color:#cfcfcf;
      text-decoration:none;
    }
    .footer-bottom a:hover{ color:#fff; }

    .sr-only{
      position:absolute!important;
      width:1px;height:1px;
      padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0;
    }
    /* --- Center the brand column (logo, tag, links, socials) --- */
.site-footer .footer-brand{
  display: flex;
  flex-direction: column;
  align-items: center; /* horizontally center all children */
  text-align: center;  /* center text inside them */
}

/* Ad Games wordmark */
.site-footer .footer-logo{
  font-family: "Shojumaru", system-ui;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: .5px;
  margin: 0; /* remove stray gaps */
}

/* Description under the logo (20px gap) */
.site-footer .footer-tag{
  margin-top: 20px;
  max-width: 640px;
  color: #cfcfcf;
}

/* Links list: inline, centered */
.site-footer .footer-col ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center the list row(s) */
  gap: 14px 24px;
  padding: 0;
  margin: 50px 0 0; /* keep ~50px above socials (adjust as you like) */
}
.site-footer .footer-col ul li{ margin: 0; }

/* Social icons centered under the links */
.site-footer .socials{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 16px 0 0; /* you can increase to add more space under links */
}
.site-footer .socials a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid #2b2b2b;
  background: #1a1a1a;
  color: #fff; text-decoration: none;
}
.site-footer .socials a:hover{ background:#222; }
/* keep existing rules; add this */
.has-submenu.open .submenu { display: block; }

/* === Mobile overrides: Community Guidelines === */
.hero { padding: clamp(24px, 7vw, 40px) 16px; text-align: center; }
.hero h1 { font-size: clamp(28px, 8.5vw, 44px); }
.muted   { font-size: clamp(14px, 3.8vw, 18px); }

main { padding: 0 16px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){
  .two-col { grid-template-columns: 1fr; }
}

.card { padding: clamp(14px, 4.2vw, 22px); }

/* Footer contact fields remain readable on phones */
.contact-col input,
.contact-col textarea,
.contact-col button { font-size: 16px; }