/* --- BASIC, READABLE STYLES (all in one file) --- */

    /* Page background + default font (very "mid-2000s") */
    body {
      margin: 0;
      font-family: DejaVuSansMono, monospace;
      background: #141018;               /* deep night */
      color: #f2eadb;                    /* warm paper */
      background-image:
        radial-gradient(circle at 20% 10%, rgba(255, 214, 102, 0.18), transparent 40%),
        radial-gradient(circle at 80% 0%, rgba(255, 255, 255, 0.08), transparent 35%),
        linear-gradient(180deg, #0b1020, #070a12);
    }

    /* Centered “site frame” like older fixed-width layouts */
    .wrap {
      max-width: 980px;                 /* desktop size */
      margin: 0 auto;                   /* centers */
      padding: 12px;
    }

    /* A shiny-ish container */
    .frame {
      border: 2px solid #d7b35d;        /* gold */
      background: rgba(0, 0, 0, 0.35);
      box-shadow: 0 0 0 3px rgba(255, 214, 102, 0.12);
    }

    /* Header / banner */
    header {
      position: relative;

      padding: 14px 12px;
      border-bottom: 2px solid rgba(215, 179, 93, 0.7);
      background:
        linear-gradient(180deg, rgba(215, 179, 93, 0.25), rgba(0, 0, 0, 0.25));
    }


    #last-updated {
      position: absolute;        /* lets us float it over the header */
      top: 12px;                 /* same padding as header */
      right: 12px;               /* same padding from right edge */
      font-size: 11px;           /* small, understated */
      color: rgba(245, 241, 230, 0.6); /* slightly muted warm paper */
      font-style: italic;        /* subtle, old-web vibe */
    }


    .banner {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }

    .logo {
      width: 60px;
      height: 60px;
      border: 2px solid rgba(245, 241, 230, 0.45);
      background: rgba(255, 255, 255, 0.08);
      display: grid;
      place-items: center;
      font-weight: bold;
      letter-spacing: 1px;
    }
      
     .logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
}

    h1 {
      margin: 0;
      font-size: 24px;
      color: #ffd666;                    /* gold */
      text-shadow: 0 1px 0 rgba(0,0,0,0.8);
    }

    .tagline {
      margin: 4px 0 0;
      color: rgba(245, 241, 230, 0.85);
      font-size: 13px;
    }

    /* Nav bar (classic row of links) */
    nav {
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      border-bottom: 2px solid rgba(215, 179, 93, 0.45);
      background: rgba(255, 214, 102, 0.08);
      padding: 6px;
      margin-top: 11px;
    }

    nav ul {
      margin: 0;
      padding: 8px 10px;
      list-style: none;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    nav a {
      color: #f5f1e6;
      text-decoration: none;
      padding: 4px 8px;
      border: 1px solid rgba(245, 241, 230, 0.25);
      background: rgba(0, 0, 0, 0.25);
      font-size: 13px;
    }

    nav a:hover {
      background: rgba(255, 214, 102, 0.18);
      border-color: rgba(255, 214, 102, 0.75);
    }

    /* Three-column layout */
    .columns {
      display: grid;
      grid-template-columns: 220px 1fr 220px; /* left, main, right */
      gap: 12px;
      padding: 12px;
    }

    /* Make it mobile-friendly: stack columns */
    @media (max-width: 820px) {
      .columns {
        grid-template-columns: 1fr;     /* stack */
      }
    }

    /* Two-column layout for Odd Days */
    body.odd-days .columns {
      grid-template-columns: 220px 1fr;
    }

    /* “Box” panels like old personal sites */
    .box {
      border: 1px solid rgba(245, 241, 230, 0.28);
      background: rgba(0, 0, 0, 0.25);
      margin-bottom: 12px;
    }

    .box h2 {
      margin: 0;
      padding: 8px 10px;
      font-size: 14px;
      letter-spacing: 0.5px;
      border-bottom: 1px solid rgba(245, 241, 230, 0.18);
      background: rgba(255, 214, 102, 0.10);
      color: #ffd666;
      text-transform: uppercase;
    }

    .box .content {
      padding: 10px;
      font-size: 13px;
      line-height: 1.45;
    }

    /* Little “button” badges (88x31 vibes) */
    .buttons {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .btn88 {
      height: 31px;
      border: 1px solid rgba(245, 241, 230, 0.35);
      background: rgba(255, 255, 255, 0.06);
      display: grid;
      place-items: center;
      font-size: 11px;
      letter-spacing: 0.3px;
    }

    /* Posts */
    .post {
      padding: 10px;
      border-bottom: 1px dashed rgba(245, 241, 230, 0.25);
    }
    .post:last-child { border-bottom: 0; }

    .post-title {
      margin: 0 0 6px;
      font-size: 16px;
      color: #ffd666;
    }

    .meta {
      font-size: 11px;
      opacity: 0.8;
      margin-bottom: 8px;
    }

/* New odddays posts glow */
body.odd-days .spark {
  animation: glow-spark 1.5s ease-in-out infinite alternate;
  border-left: 3px solid #ffd666; /* subtle gold highlight */
  padding-left: 6px;
}

@keyframes glow-spark {
  from { box-shadow: 0 0 3px rgba(255, 214, 102, 0.4); }
  to { box-shadow: 0 0 8px rgba(255, 214, 102, 0.9); }
}

    /* Footer */
    footer {
      padding: 10px 12px;
      border-top: 2px solid rgba(215, 179, 93, 0.45);
      background: rgba(0, 0, 0, 0.25);
      font-size: 12px;
      opacity: 0.9;
    }

    /* Simple link style */
    a { color: #b7e4ff; }
    a:hover { color: #ffffff; }

    /* Optional: an old-school “marquee” area */
    .marquee {
      border: 1px solid rgba(255, 214, 102, 0.35);
      background: rgba(0, 0, 0, 0.35);
      margin: 10px 12px 0;
      padding: 6px;
      font-size: 12px;
    }
      
    #odd-days-link {
          position: relative; /* anchor for badge */
      }      
      
      /* "NEW!" badge for nav */
    .new-badge {
      position: absolute;
      top: -6px;
      right: -6px;

      padding: 1px 5px;
      font-size: 9px;
      font-weight: bold;
      color: #000;
      background: #ffd666;
      border: 1px solid #d7b35d;

      text-transform: uppercase;
      pointer-events: none; /* click still goes to link */
      animation: glow 1.8s ease-in-out infinite alternate;
    }

    @keyframes glow {
      from { box-shadow: 0 0 4px rgba(255, 214, 102, 0.4); }
      to   { box-shadow: 0 0 8px rgba(255, 214, 102, 0.9); }
    }