<?php
//require_once("../members/gate.php");
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Live at TyClifford.com/Live â€” Members Area">
  <meta name="author" content="Ty Clifford">
  <meta name="keywords" content="Ty Clifford, Live, Podcast, Keyser, West Virginia, Nerd, TikTok">

  <meta property="og:url"         content="https://tyclifford.com/live/" />
  <meta property="og:type"        content="website" />
  <meta property="og:site_name"   content="Ty Clifford â€” Live! Hobbies are my hobby." />
  <meta property="og:title"       content="Live TC | TyClifford.com/Live" />
  <meta property="og:image"       content="" />
  <meta property="og:image:alt"   content="Live stream" />
  <meta name="twitter:site"        content="@_tyclifford" />
  <meta name="twitter:title"       content="Live TC | TyClifford.com/Live" />
  <meta name="twitter:description" content="Members live stream area â€” TyClifford.com">

  <title>Live â€” TyClifford.com</title>

  <link rel="shortcut icon" href="/images/ico/fa-bl.ico">
  <link rel="apple-touch-icon" href="/images/ico/fa-bl.jpg">

  <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@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">

  <style>
    /* â”€â”€ Reset & design tokens (mirrors gate.php exactly) â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:          #09090f;
      --surface:     #0f0f1a;
      --surface-2:   #141425;
      --border:      #1e1e38;
      --border-2:    #2a2a48;
      --text:        #e8e8f8;
      --text-2:      #9898c0;
      --text-3:      #58587a;

      --green:       #00e87a;
      --blue:        #00c8ff;
      --purple:      #b060ff;
      --red:         #ff3355;
      --orange:      #ff8800;
      --yellow:      #ffd040;

      --pat:         #ff424d;
      --pat-lite:    rgba(255,66,77,.10);
      --pat-border:  rgba(255,66,77,.32);
      --pat-glow:    rgba(255,66,77,.18);

      --libera:      #f6c915;   /* Liberapay yellow */
      --paypal:      #009cde;   /* PayPal blue */

      --r:           6px;
      --gap:         1.25rem;
      --page-pad:    1rem;
    }

    @media (min-width: 600px)  { :root { --page-pad: 1.5rem; } }
    @media (min-width: 1000px) { :root { --page-pad: 2rem;   } }

    html {
      font-size: 16px;
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100dvh;
      background: var(--bg);
      background-image:
        radial-gradient(ellipse 70% 50% at 20% 10%,  rgba(176,96,255,.05)  0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(0,200,255,.04)   0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 50% 50%,  rgba(255,66,77,.03)   0%, transparent 70%);
      font-family: 'Inter', system-ui, sans-serif;
      color: var(--text);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* scanline overlay */
    body::after {
      content: '';
      position: fixed; inset: 0; pointer-events: none; z-index: 999;
      background: repeating-linear-gradient(
        0deg, transparent 0px, transparent 3px,
        rgba(0,0,0,.06) 3px, rgba(0,0,0,.06) 4px
      );
    }

    /* â”€â”€ Animations â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    @keyframes rise {
      from { opacity: 0; transform: translateY(14px) scale(.98); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   }
    }
    @keyframes shimmer {
      from { background-position:   0% 50%; }
      to   { background-position: 200% 50%; }
    }
    @keyframes pulse-border {
      0%,100% { box-shadow: 0 0 0 0   var(--pat-glow); }
      50%      { box-shadow: 0 0 0 6px transparent;     }
    }
    @keyframes live-pulse {
      0%,100% { opacity: 1; }
      50%      { opacity: .4; }
    }

    /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       PAGE WRAPPER
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
    .page {
      width: 100%;
      max-width: 1100px;
      padding: var(--page-pad);
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      animation: rise .45s cubic-bezier(.22,.68,0,1.2) both;
    }

    /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       TOP BAR
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .topbar-brand {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .brand-name {
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--text);
    }
    .brand-sub {
      font-family: 'Share Tech Mono', monospace;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--text-3);
    }

    /* Live badge */
    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .25rem .65rem;
      background: rgba(255,51,85,.12);
      border: 1px solid rgba(255,51,85,.3);
      border-radius: 99px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .6rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--red);
      text-shadow: 0 0 8px rgba(255,51,85,.4);
    }
    .live-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--red);
      box-shadow: 0 0 6px rgba(255,51,85,.8);
      animation: live-pulse 1.4s ease-in-out infinite;
    }

    /* Social links in topbar */
    .topbar-social {
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .social-pill {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      padding: .35rem .75rem;
      background: rgba(255,255,255,.03);
      border: 1px solid var(--border-2);
      border-radius: 99px;
      font-family: 'Share Tech Mono', monospace;
      font-size: .65rem;
      letter-spacing: .08em;
      color: var(--text-3);
      text-decoration: none;
      transition: border-color .2s, color .2s, background .2s;
    }
    .social-pill:hover {
      border-color: var(--border-2);
      color: var(--text-2);
      background: rgba(255,255,255,.06);
    }
    .social-pill svg { flex-shrink: 0; }

    /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       STREAM CARD
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
    .stream-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: calc(var(--r) + 2px);
      overflow: hidden;
      position: relative;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.03),
        0 4px 50px rgba(0,0,0,.6);
    }

    /* rainbow top rule â€” same shimmer as gate.php panel-cta */
    .stream-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px; z-index: 2;
      background: linear-gradient(90deg,
        var(--pat), var(--purple), var(--blue), var(--green),
        var(--blue), var(--purple), var(--pat));
      background-size: 300% 100%;
      animation: shimmer 5s linear infinite;
    }

    /* 16:9 responsive container â€” no JS needed */
    .stream-ratio {
      position: relative;
      width: 100%;
      padding-top: 56.25%;   /* 9/16 */
      background: #000;
    }
    .stream-ratio iframe {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      border: 0;
      display: block;
    }

    /* â”€â”€ Stream footer bar â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .stream-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .75rem 1.1rem;
      border-top: 1px solid var(--border);
      flex-wrap: wrap;
    }

    .stream-meta {
      font-family: 'Share Tech Mono', monospace;
      font-size: .65rem;
      letter-spacing: .1em;
      color: var(--text-3);
    }
    .stream-meta span { color: var(--text-2); }

    /* eyebrow used inside stream footer */
    .eyebrow {
      font-family: 'Share Tech Mono', monospace;
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
    }
    .eyebrow-green { color: var(--green); text-shadow: 0 0 10px rgba(0,232,122,.5); }
    .eyebrow-green::before { content: '> '; opacity: .5; }

    /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       SUPPORT + INFO GRID
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
    .lower-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
    }
    @media (min-width: 640px) {
      .lower-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (min-width: 900px) {
      .lower-grid { grid-template-columns: 2fr 1fr 1fr; }
    }

    /* shared card shell */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: calc(var(--r) + 2px);
      padding: 1.4rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: .9rem;
      position: relative;
      overflow: hidden;
    }

    /* subtle corner accent â€” mirrors gate.php .card::after */
    .card::after {
      content: '';
      position: absolute;
      bottom: -1px; right: -1px;
      width: 14px; height: 14px;
      border-bottom: 2px solid var(--purple);
      border-right:  2px solid var(--purple);
      border-radius: 0 0 calc(var(--r) + 2px) 0;
      opacity: .5;
    }

    .card-title {
      font-size: .95rem;
      font-weight: 700;
      letter-spacing: -.01em;
      color: var(--text);
      line-height: 1.2;
    }
    .card-body {
      font-size: .85rem;
      color: var(--text-2);
      line-height: 1.7;
    }
    .card-body strong { color: var(--text); font-weight: 600; }
    .card-body a {
      color: var(--pat);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,66,77,.25);
      transition: border-color .15s;
    }
    .card-body a:hover { border-color: rgba(255,66,77,.6); }

    /* â”€â”€ Support card Patreon left-stripe â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .card-patreon {
      background: var(--surface);
      border-color: var(--pat-border);
      box-shadow: 0 0 30px rgba(255,66,77,.05);
    }
    .card-patreon::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg,
        var(--pat), var(--purple), var(--blue), var(--green),
        var(--blue), var(--purple), var(--pat));
      background-size: 300% 100%;
      animation: shimmer 5s linear infinite;
    }

    /* â”€â”€ Donate button stack â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .donate-stack {
      display: flex;
      flex-direction: column;
      gap: .55rem;
    }

    /* Base donate button */
    .btn-donate {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      padding: .75rem 1.1rem;
      border-radius: var(--r);
      font-family: 'Inter', sans-serif;
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .02em;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform .15s, box-shadow .2s, filter .15s;
      min-height: 44px;
    }
    .btn-donate::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.1) 0%, transparent 60%);
      pointer-events: none;
    }
    .btn-donate:hover  { transform: translateY(-1px); filter: brightness(1.08); }
    .btn-donate:active { transform: scale(.98); filter: brightness(.96); }

    /* Patreon */
    .btn-patreon-donate {
      background: var(--pat);
      color: #fff;
      box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset,
                  0 4px 18px rgba(255,66,77,.3);
      animation: pulse-border 3s ease-in-out infinite;
    }

    /* Liberapay */
    .btn-libera {
      background: var(--libera);
      color: #1a1400;
      box-shadow: 0 4px 18px rgba(246,201,21,.2);
    }

    /* PayPal */
    .btn-paypal {
      background: var(--paypal);
      color: #fff;
      box-shadow: 0 4px 18px rgba(0,156,222,.2);
    }

    /* â”€â”€ Info / about card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .card-about { background: var(--surface-2); }

    /* â”€â”€ Social links card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ */
    .card-social { background: var(--surface-2); }

    .social-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }
    .social-list a {
      display: flex;
      align-items: center;
      gap: .65rem;
      padding: .6rem .8rem;
      border: 1px solid var(--border-2);
      border-radius: var(--r);
      font-family: 'Share Tech Mono', monospace;
      font-size: .78rem;
      color: var(--text-2);
      text-decoration: none;
      transition: border-color .2s, color .2s, background .2s;
    }
    .social-list a:hover {
      border-color: var(--green);
      color: var(--text);
      background: rgba(0,232,122,.04);
    }
    .social-list a svg { flex-shrink: 0; color: var(--text-3); transition: color .2s; }
    .social-list a:hover svg { color: var(--green); }

    /* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       PAGE FOOTER
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
    .page-footer {
      padding: .5rem 0 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      flex-wrap: wrap;
      border-top: 1px solid var(--border);
    }

    .footer-note {
      font-family: 'Share Tech Mono', monospace;
      font-size: .63rem;
      color: var(--text-3);
      letter-spacing: .06em;
      text-align: center;
    }
    .footer-note::before { content: '// '; opacity: .4; }
    .footer-note a {
      color: var(--text-3);
      text-decoration: none;
      transition: color .15s;
    }
    .footer-note a:hover { color: var(--text-2); }
  </style>
</head>

<body>

<main class="page" role="main">

  <!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       TOP BAR
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
  <header class="topbar">
    <div class="topbar-brand">
      <div>
        <div class="brand-name">Ty Clifford</div>
        <div class="brand-sub">tyclifford.com / live</div>
      </div>
      <!-- <div class="live-badge" aria-label="Live stream">
        <span class="live-dot" aria-hidden="true"></span>
        Live
      </div>-->
    </div>

    <nav class="topbar-social" aria-label="Social links">
      <a class="social-pill" href="https://github.com/snick512" target="_blank" rel="noopener" aria-label="GitHub">
        <!-- GitHub icon -->
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61
                   c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77
                   5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0
                   0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77
                   a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7
                   A3.37 3.37 0 0 0 9 18.13V22"/>
        </svg>
        GitHub
      </a>
      <a class="social-pill" href="mailto:ty@tyclifford.com" aria-label="Email Ty">
        <!-- Email icon -->
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <rect x="2" y="4" width="20" height="16" rx="2"/>
          <polyline points="2,4 12,13 22,4"/>
        </svg>
        Email
      </a>
    </nav>
  </header>

  <!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       STREAM CARD
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
  <section class="stream-card" aria-label="Live stream">
    <!-- Pure CSS 16:9 ratio â€” no layout-shift JS needed -->
    <div class="stream-ratio">
      <iframe
        src="https://stream.place/embed/tyclifford.com"
        allowfullscreen
        allow="autoplay; fullscreen"
        title="Ty Clifford live stream"
      ></iframe>
    </div>

    <div class="stream-footer">
      <p class="eyebrow eyebrow-green">Stream</p>
      <p class="stream-meta">Keyser, WV / <span>tyclifford.com</span></p>
    </div>
  </section>

  <!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       LOWER GRID â€” Support Â· About Â· Social
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
  <div class="lower-grid">

    <!-- â”€â”€ Support card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ -->
    <div class="card card-patreon">
      <div>
        <p class="eyebrow eyebrow-green" style="margin-bottom:.35rem">Support the stream</p>
        <h2 class="card-title">Hobbies are my hobby.</h2>
      </div>

      <p class="card-body">
        If you're enjoying the stream, consider throwing a few bucks in the jar.
        <strong>Patreon</strong> members keep this going - even a free membership helps.
        You can also tip via PayPal, no account needed.
      </p>

      <div class="donate-stack">

        <a class="btn-donate btn-patreon-donate"
           href="https://go.tyclifford.com/patreon"
           target="_blank" rel="noopener noreferrer"
           aria-label="Become a Patreon supporter">
          <!-- Patreon P icon -->
          <svg width="12" height="14" viewBox="0 0 12 14" fill="white" aria-hidden="true">
            <ellipse cx="7.5" cy="4.8" rx="4.5" ry="4.5"/>
            <rect x="0" y="0" width="2.8" height="14" rx="1.2"/>
          </svg>
          Become a Patron
        </a>

        <a class="btn-donate btn-paypal"
           href="https://www.paypal.com/donate/?hosted_button_id=ZDJ9TXPPMNZ6U"
           target="_blank" rel="noopener noreferrer"
           aria-label="Tip via PayPal">
          <!-- PayPal P icon -->
          <svg width="13" height="15" viewBox="0 0 24 28" fill="white" aria-hidden="true">
            <path d="M7.8 27H3.5L6.3 9.5h7.6c3.1 0 5.3.7 6.4 2 1.1 1.3
                     1.3 3 .5 5.1-.9 2.4-2.4 4.2-4.5 5.3-2 1-4.5 1.5-7.3
                     1.5H7l-.8 3.6zm1.1-6.5h1.6c1.5 0 2.8-.3 3.8-.9 1-.6
                     1.7-1.5 2.1-2.7.4-1.2.2-2-.5-2.6-.7-.5-1.9-.8-3.6-.8H10L8.9
                     20.5z"/>
          </svg>
          Tip via PayPal
        </a>


      </div>
    </div>

    <!-- â”€â”€ About card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ -->
    <div class="card card-about">
      <p class="eyebrow eyebrow-green" style="margin-bottom:.1rem">About</p>
      <h2 class="card-title">Ty Clifford</h2>
      <p class="card-body">
        Based in <strong>Keyser, West Virginia</strong>. Nerd, tinkerer, and
        creator. Hobbies are my hobby â€” from tech and podcasting to whatever
        rabbit hole I fell into this week.
        <br><br>
        Follow along on <a href="https://go.tyclifford.com/patreon" target="_blank" rel="noopener">Patreon</a>
        and join the conversation.
      </p>
    </div>

    <!-- â”€â”€ Social links card â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€â”€ -->
    <div class="card card-social">
      <p class="eyebrow eyebrow-green" style="margin-bottom:.1rem">Links</p>
      <h2 class="card-title">Find me online</h2>
      <ul class="social-list" aria-label="Social media links">
        <li>
          <a href="https://github.com/snick512" target="_blank" rel="noopener">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0
                       0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0
                       20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38
                       13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0
                       5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44
                       7A3.37 3.37 0 0 0 9 18.13V22"/>
            </svg>
            github.com/snick512
          </a>
        </li>
        <li>
          <a href="mailto:ty@tyclifford.com">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <rect x="2" y="4" width="20" height="16" rx="2"/>
              <polyline points="2,4 12,13 22,4"/>
            </svg>
            ty@tyclifford.com
          </a>
        </li>
        <li>
          <a href="https://go.tyclifford.com/patreon" target="_blank" rel="noopener">
            <svg width="14" height="14" viewBox="0 0 12 14" fill="currentColor" aria-hidden="true">
              <ellipse cx="7.5" cy="4.8" rx="4.5" ry="4.5"/>
              <rect x="0" y="0" width="2.8" height="14" rx="1.2"/>
            </svg>
            patreon.com/tyclifford
          </a>
        </li>
      </ul>



    </div>

  </div><!-- /lower-grid -->

  <!-- â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
       PAGE FOOTER
       â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• -->
  <footer class="page-footer" role="contentinfo">
    <p class="footer-note">TyClifford.com &nbsp;Â·&nbsp; members area</p>
    <p class="footer-note">hobbies are my hobby</p>
    <p class="footer-note">
      <a href="mailto:ty@tyclifford.com">ty@tyclifford.com</a>
    </p>
  </footer>

</main>

</body>
</html>
