:root{
    --header-blue-1:#c2e6bd;
    --header-blue-2:#6ea860;
    --navy:#163d1f;
    --red:#d81f1f;
    --link-blue:#0a6b2c;
    --ink:#111;
    --grey-a:#8fa0b8;
    --grey-b:#aab8ca;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    padding:16px 8px;
    background:#e9e9e9;
    font-family:Arial, Helvetica, sans-serif;
    color:var(--ink);
  }

  .site{
    max-width:734px;
    margin:0 auto;
    background:#fff;
    border:2px solid #000;
    overflow-x:auto;
  }
  .site-inner{min-width:700px;}

  a{color:var(--link-blue); text-decoration:none;}
  a:hover{text-decoration:underline;}
  a:focus-visible{outline:2px solid var(--red); outline-offset:1px;}

  /* ===== header ===== */
  .topbar{
    display:flex;
    align-items:stretch;
    background:var(--header-blue-1);
    background-image:
      repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 2px, transparent 2px 26px),
      linear-gradient(180deg, var(--header-blue-1), var(--header-blue-2));
    border-bottom:2px solid #000;
    overflow:hidden;
  }
  .logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    flex:1;
  }
  .logo{
    font-family:'Arial Black', Arial, sans-serif;
    font-size:38px;
    font-weight:900;
    letter-spacing:-1px;
    color:#fff;
    -webkit-text-stroke:1.5px #000;
    text-shadow:2px 2px 0 #000;
    line-height:1;
  }
  .logo .dotcom{font-size:20px;}
  .logo-badge{
    width:44px; height:44px; border-radius:50%;
    background:var(--red);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Arial Black', Arial, sans-serif;
    font-size:24px;
    border:2px solid #000;
    flex-shrink:0;
  }
  .header-photo{
    width:230px;
    flex-shrink:0;
    overflow:hidden;
    position:relative;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 60px);
    mask-image:linear-gradient(90deg, transparent, #000 60px);
  }
  .header-photo img{
    width:100%; height:100%;
    object-fit:cover;
    object-position:top center;
    filter:grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.85) contrast(1.05);
  }

  /* ===== nav ===== */
  .navbar{
    display:flex; flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:0;
    background:#fff;
    border-bottom:2px solid #000;
    padding:6px 4px;
  }
  .navbar-inner{
    border:1px dashed #666;
    display:flex; flex-wrap:wrap;
    justify-content:space-between;
    width:100%;
    padding:5px 14px;
  }
  .navbar a{
    font-size:11px;
    font-weight:bold;
    color:#000;
    text-transform:uppercase;
    padding:2px 10px;
    border-right:1px solid #999;
  }
  .navbar a:last-child{border-right:none;}
  .navbar a:hover{color:var(--red);}

  /* ===== layout ===== */
  .layout{display:flex; align-items:flex-start;}

  /* ---- left column ---- */
  .left-col{width:150px; flex-shrink:0; padding:8px; display:flex; flex-direction:column; gap:10px;}

  /* ===== CA hero bar ===== */
  .ca-hero{
    background:#000;
    border-top:3px solid var(--red);
    border-bottom:3px solid var(--red);
    padding:14px 16px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:center;
  }
  .ca-hero .ca-label{
    font-family:'Arial Black', Arial, sans-serif;
    color:var(--red);
    font-size:12px;
    letter-spacing:1px;
    flex-basis:100%;
  }
  .ca-hero .ca-value{
    font-family:'Courier New', monospace;
    font-weight:bold;
    color:#8ef07a;
    font-size:13px;
    background:#0d2a04;
    border:1px solid #2f6b1a;
    padding:9px 12px;
    word-break:break-all;
    max-width:420px;
  }
  .ca-hero button{
    font-family:Arial, sans-serif;
    font-weight:bold;
    font-size:12px;
    background:var(--red);
    color:#fff;
    border:2px solid #000;
    padding:9px 16px;
    cursor:pointer;
  }
  .ca-hero button:active{background:#a91414;}
  .ca-hero button:focus-visible{outline:2px solid #fff; outline-offset:2px;}

  .fees-banner{
    background:#f4d738;
    border-bottom:3px solid #000;
    padding:9px 16px;
    text-align:center;
    font-family:Arial, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:#111;
    line-height:1.5;
  }
  .fees-banner strong{color:var(--red);}

  .ad-slot{margin-top:10px;}
  .ad-slot .ad-label{
    font-size:8px;
    color:#999;
    text-align:center;
    letter-spacing:.5px;
    margin-bottom:3px;
  }
  .ad-slot img{width:100%; display:block; border:1px solid #000;}

  .feature-box-body{padding:10px 8px; text-align:center;}
  .feature-box-body .x-glyph{font-family:'Arial Black', Arial, sans-serif; font-size:20px; margin-bottom:4px;}
  .feature-box-body a{font-size:11px; font-weight:bold;}
  .feature-box-body p{font-size:9.5px; line-height:1.4; margin:0 0 6px; color:#333;}

  .graffiti-tag{text-align:center;}
  .graffiti-tag img{width:100%; max-width:140px; margin:0 auto; display:block;}

  .signup-box{
    background:#000;
    border:2px solid #000;
    padding:10px 8px;
    text-align:center;
  }
  .signup-box .headline{
    font-family:'Arial Black', Arial, sans-serif;
    color:var(--red);
    font-size:13px;
    line-height:1.3;
    margin-bottom:6px;
  }
  .signup-box a{
    color:#fff;
    font-size:10px;
    font-weight:bold;
    text-decoration:underline;
  }

  .nav-box{border:1px solid #000;}
  .nav-box-head{
    background:var(--navy);
    color:#fff;
    font-size:11px;
    font-weight:bold;
    text-align:center;
    padding:5px 4px;
    letter-spacing:.5px;
  }
  .nav-box ul{list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:6px;}
  .nav-box a{
    font-size:11px;
    font-weight:bold;
    color:var(--navy);
    text-transform:uppercase;
  }
  .nav-box a:hover{color:var(--red);}

  .token-facts{list-style:none; margin:0; padding:8px 10px;}
  .token-facts li{
    display:flex;
    justify-content:space-between;
    padding:4px 0;
    font-size:10.5px;
    font-weight:bold;
    color:var(--ink);
    border-bottom:1px dashed #ccc;
  }
  .token-facts li:last-child{border-bottom:none;}
  .token-facts li span{color:var(--navy);}

  .video-box-body{padding:8px; text-align:center;}
  .video-box-body video{
    width:100%;
    display:block;
    border:1px solid #000;
    margin-bottom:6px;
  }
  .video-box-body span{
    font-size:9.5px;
    font-weight:bold;
    color:var(--navy);
    font-style:italic;
  }
  .video-box-big{
    margin:18px 0 0;
  }
  .video-box-big .video-box-body{padding:10px;}
  .video-box-big .video-box-body span{font-size:12px;}

  /* ---- center column ---- */
  .center-col{flex:1; padding:8px 6px; min-width:0;}

  .exclusive-banner{
    background:var(--red);
    border:2px solid #000;
    color:#fff;
    font-family:'Arial Black', Arial, sans-serif;
    font-size:20px;
    padding:8px 14px;
    display:inline-block;
    margin:0 0 -14px 8px;
    position:relative;
    z-index:2;
    letter-spacing:.5px;
  }

  .more-stuff{
    font-weight:bold;
    color:var(--red);
    font-size:12px;
    text-align:right;
    margin-top:10px;
  }
  .more-stuff a{color:var(--red); text-decoration:underline; margin-left:4px;}

  .about-body{
    padding:12px;
    font-size:12px;
    line-height:1.7;
    color:var(--ink);
  }

  /* ---- right column ---- */
  .right-col{width:170px; flex-shrink:0; padding:8px; display:flex; flex-direction:column; gap:10px;}

  /* ===== photo album ===== */
  .photo-section{padding:16px; border-top:2px solid #000;}
  .photo-banner{
    background:var(--navy);
    border:2px solid #000;
    color:#fff;
    font-family:'Arial Black', Arial, sans-serif;
    font-size:18px;
    padding:8px 14px;
    display:inline-block;
    letter-spacing:.5px;
    margin-bottom:14px;
  }
  .photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
  }
  .photo-card{border:2px solid #000; background:#fff; padding:6px;}
  .photo-card img{width:100%; display:block; border:1px solid #000;}
  .photo-card .cap{
    font-weight:bold;
    color:var(--red);
    font-size:11px;
    text-align:center;
    margin-top:6px;
  }

  /* ===== rewards tracker ===== */
  .rewards-section{padding:16px; border-top:2px solid #000;}
  .rewards-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:12px;
    margin-bottom:14px;
  }
  .rewards-tile{
    border:2px solid #000;
    background:#f7f7f7;
    padding:14px 10px;
    text-align:center;
  }
  .rewards-tile .num{
    font-family:'Arial Black', Arial, sans-serif;
    font-size:20px;
    color:var(--navy);
  }
  .rewards-tile .label{
    font-size:9.5px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:.4px;
    color:#555;
    margin-top:4px;
  }
  .rewards-tile-main{background:var(--navy); border-color:#000;}
  .rewards-tile-main .num{color:#fff;}
  .rewards-tile-main .label{color:#cfe8cf;}
  .rewards-links{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
    font-size:11px;
    font-weight:bold;
    margin-bottom:8px;
  }
  .rewards-updated{font-size:9px; color:#888;}
  .live-dot{
    font-size:10px;
    color:#888;
    vertical-align:middle;
    margin-left:4px;
  }
  .live-dot.live-on{
    color:#39ff6a;
    animation:live-pulse 1.6s ease-in-out infinite;
  }
  @keyframes live-pulse{
    0%, 100%{opacity:1;}
    50%{opacity:.35;}
  }
  @media (prefers-reduced-motion: reduce){
    .live-dot.live-on{animation:none;}
  }

  /* ===== disclaimer footer ===== */
  .legal-footer{
    border-top:2px solid #000;
    padding:10px 14px 14px;
    background:#f2f2f2;
  }
  .legal-footer .title{
    font-size:10px;
    font-weight:bold;
    color:var(--red);
    margin-bottom:4px;
  }
  .legal-footer p{
    font-size:9px;
    line-height:1.6;
    color:#333;
    margin:0 0 4px;
  }
  .legal-footer .copyright{
    font-size:9px;
    color:#666;
    margin-top:8px;
    text-align:center;
  }

  /* ===== mobile ===== */
  @media (max-width:680px){
    .site{overflow-x:hidden;}
    .site-inner{min-width:0;}

    .topbar{align-items:center;}
    .logo-wrap{padding:10px 8px 10px 14px; gap:6px;}
    .logo{font-size:20px;}
    .logo-badge{width:32px; height:32px; font-size:17px;}
    .header-photo{
      width:64px;
      height:64px;
      flex-shrink:0;
      margin:0 14px 0 0;
      border-radius:50%;
      border:3px solid #000;
      -webkit-mask-image:none;
      mask-image:none;
    }
    .header-photo img{object-position:center 25%;}

    .navbar-inner{justify-content:center;}
    .navbar a{padding:4px 8px; border-right:none;}

    .ca-hero{padding:12px;}
    .ca-value{font-size:11px;}

    .layout{flex-direction:column;}
    .left-col, .right-col, .center-col{width:100%;}

    .video-box-big{margin-top:14px;}

    .right-col .ad-slot{display:none;}
  }