@font-face { font-family: "Anton"; src: url("fonts/Anton-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

/* Colors sampled from the channel art (brand/). */
:root {
  --bg: #2b2766;
  --bg-deep: #1d1a4a;
  --card: #36317a;
  --ink: #ffffff;
  --muted: #c9c6f0;
  --teal: #22e3c4;
  --yellow: #ffc83d;
  --pink: #ff6fb5;
  --outline: #14122f;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #2b2766; }
body { min-height: 100vh; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(34, 227, 196, 0.16), transparent 32%),
    radial-gradient(circle at 88% 30%, rgba(255, 111, 181, 0.14), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(255, 200, 61, 0.12), transparent 40%);
  background-attachment: fixed;
  color: var(--ink);
  font: 500 17px/1.55 "Montserrat", system-ui, sans-serif;
}
a { color: var(--teal); }
a:focus-visible, .social:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* ---- hero ---- */
.hero { padding: 28px 0 8px; }
.banner { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 3px solid var(--outline); box-shadow: 0 10px 0 var(--outline); }
/* Wide screens show the banner (which has the title in it); the real heading
   stays for screen readers. Phones show the heading instead of a tiny banner. */
.hero-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; text-align: center; }
.logo { width: 112px; height: 112px; border-radius: 28px; border: 3px solid var(--outline); box-shadow: 0 6px 0 var(--outline); }
h1 {
  font: 400 clamp(44px, 13vw, 72px)/0.95 "Anton", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 18px 0 10px;
  text-shadow: 0 4px 0 var(--outline);
}
h1 .pop { color: var(--yellow); }
.tagline { color: var(--teal); font-weight: 800; font-size: 19px; margin: 0; }
@media (max-width: 640px) {
  .banner { display: none; }
  .hero-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; padding: 28px 0 8px; }
}

/* ---- follow links ---- */
h2 { font: 400 30px/1.1 "Anton", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.5px; margin: 40px 0 16px; }
.socials { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.social {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--card); color: var(--ink); text-decoration: none;
  border: 3px solid var(--outline); box-shadow: 0 6px 0 var(--outline);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.social:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--outline); background: #403a8c; }
.social:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--outline); }
.social .icon {
  flex: none; width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--accent, var(--teal)); color: var(--outline);
  border: 3px solid var(--outline);
}
.social .icon svg { width: 28px; height: 28px; }
.social .name { font-weight: 800; font-size: 19px; display: block; }
.social .handle { color: var(--muted); font-size: 15px; display: block; overflow-wrap: anywhere; }
.social .go { margin-left: auto; font: 400 26px/1 "Anton", sans-serif; color: var(--accent, var(--teal)); }
.yt { --accent: var(--yellow); }
.tt { --accent: var(--pink); }
.ig { --accent: var(--teal); }
.th { --accent: var(--yellow); }
.x  { --accent: var(--pink); }

/* ---- about ---- */
.about { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .about { grid-template-columns: 1fr; } }
.point { background: var(--bg-deep); border-radius: var(--radius); padding: 18px; border: 3px solid var(--outline); }
.point b { display: block; font-size: 18px; margin-bottom: 4px; color: var(--yellow); }
.point p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---- footer + text pages ---- */
footer { margin: 48px 0 32px; color: var(--muted); font-size: 14px; text-align: center; }
footer a { color: var(--muted); }
.page { padding: 32px 0; }
.page h1 { font-size: clamp(38px, 10vw, 56px); }
.page h2 { font-size: 24px; margin-top: 28px; }
.page p, .page li { color: var(--muted); }
.back { font-weight: 800; text-decoration: none; }

@media (prefers-reduced-motion: reduce) { .social { transition: none; } .social:hover, .social:active { transform: none; } }