/* =============================
       Noircore v3 base stylesheet
       (single-file for iteration; split later)
       ============================= */
    :root {
      --c-bg: #000000;
      --c-ink: #e6e6e6;
      --c-dim: #9aa0a6;
      --c-red: #b80d0d;       /* blood */
      --c-cyan: /*#00e0ff*/ #944dff;      
      --c-brown: #b80d0d;     
      --c-card: #0b0b0b;      /* near-black */
      --gap: 10px;
      --radius: 0px;          /* keep it retro-square */
      /* --shadow: 0 0 0 2px var(--c-red), 0 0 0 5px var(--c-cyan); */
      --grid-max: 1200px;
    }

    /* Reset-esque */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      background: var(--c-bg) repeat;
      color: var(--c-ink);
      font-family: "VT323", Verdana, Tahoma, Geneva, sans-serif;
      font-size: 20px; /* VT323 baseline */
      line-height: 1.25;
      image-rendering: pixelated;
    }

    a { color: var(--c-cyan); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .wrap {
      max-width: var(--grid-max);
      margin: 0 auto;
      padding: 12px;
      position: relative;
    }

    /*Texture overlays*/
    .texture-stack {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .texture-stack::before,
    .texture-stack::after {
      content: "";
      position: absolute;
      inset: 0;
      background-repeat: repeat;
      mix-blend-mode: multiply;
      opacity: 0.25;
      image-rendering: pixelated;
    }
    .texture-stack::before { background-image: url("../textures/moss_tile.png"); }
    /* .texture-stack::after  { background-image: url("../textures/magic_tile.png"); opacity: 0.15; } */

    /* Pixel borders */
    .px-border {
      position: relative;
      box-shadow: var(--shadow);
      border: 2px solid var(--c-brown);
    }
    .px-cyan { box-shadow: 0 0 0 2px var(--c-cyan), 0 0 0 5px #000; }
    .px-red  { box-shadow: 0 0 0 2px var(--c-red),  0 0 0 5px #000; }

    header.site {
      margin: 16px auto 8px;
      background: var(--c-card) url("./assets/textures/final_dark.png") repeat;
    }
    .site-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--gap); align-items: center; padding: 8px 12px; }

    .logo {
      display: flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: 1px;
    }
    .logo img { height: 64px; width: auto; image-rendering: pixelated; }
    .logo .wordmark { font-size: 42px; color: var(--c-red); text-shadow: 0 0 8px rgba(184,13,13,0.5); }

    nav.tabs {
      display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
    }
    .tab {
      background: linear-gradient(#2a1b13, var(--c-brown));
      color: #f0e4d7;
      border: 2px solid #2a1b13;
      padding: 6px 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: filter 0.08s linear, transform 0.08s linear;
    }
    .tab:hover { filter: brightness(1.15) contrast(1.1); transform: translateY(-1px); }
    .tab.active { outline: 2px solid var(--c-cyan); }

    /* Marquee ribbon */
    .ribbon { margin: 8px auto; padding: 6px 10px; background: #0d0d0d; border-left: 4px solid var(--c-red); border-right: 4px solid var(--c-red); white-space: nowrap; overflow: hidden; }
    .ribbon span { display: inline-block; padding-right: 24px; animation: scroll 26s linear infinite; }
    @keyframes scroll { from { transform: translateX(0);} to { transform: translateX(-100%);} }

    /* Layout */
    main.grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--gap); }
    @media (max-width: 900px) { main.grid { grid-template-columns: 1fr; } }

    .panel { background: var(--c-card); padding: 10px; }
    .panel h2 { margin: 0 0 6px; font-size: 28px; color: var(--c-cyan); text-transform: uppercase; }
    .panel p { margin: 0 0 8px; color: var(--c-ink); }

    /* Featured grid */
    .featured { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
    @media (max-width: 700px) { .featured { grid-template-columns: 1fr; } }

    .card { background: #0f0f0f; border: 2px solid #111; padding: 8px; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; cursor: pointer; }
    .card:hover { border-color: var(--c-cyan); }
    .thumb { aspect-ratio: 16/10; background: #111 url("./assets/textures/final_dark.png") repeat; display: grid; place-items: center; color: var(--c-dim); font-size: 18px; }
    .title { font-size: 24px; color: #fff; }
    .meta { color: var(--c-dim); font-size: 18px; }

    /* News list */
    .news li { list-style: none; margin: 0 0 8px; padding: 0; border-left: 3px solid var(--c-red); padding-left: 8px; }
    .news time { color: var(--c-dim); margin-right: 6px; }

    /* Footer */
    footer { margin: 18px auto 40px; background: #0a0a0a; padding: 10px; text-align: center; color: var(--c-dim); }

    /* ===============
       Art / Projects hub
       =============== 
    .hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
    @media (max-width: 1000px) { .hub-grid { grid-template-columns: repeat(2, 1fr);} }
    @media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } }

    .hub-card { background: #0f0f0f; border: 2px solid #1a1a1a; padding: 8px; display: grid; gap: 6px; }
    .hub-card:hover { border-color: var(--c-red); }
    .hub-card .thumb { aspect-ratio: 1/1; } */

    /* ===============
       teh Comix Reader
       =============== */
    .reader-shell { background: #000; padding: 0; }
    .reader-bar { display: flex; gap: 6px; align-items: center; justify-content: space-between; background: #0a0a0a; padding: 6px 8px; position: static /*sticky*/; top: 0; z-index: 5; }
    .reader-bar .left, .reader-bar .right { display: flex; gap: 6px; align-items: center; }
    .btn { background: #111; color: #eee; border: 2px solid #222; padding: 6px 10px; text-transform: uppercase; cursor: pointer; }
    .btn:hover { border-color: var(--c-cyan); }

    .canvas-wrap { width: 100%; display: grid; place-items: center; background: #000; }
    .page-canvas { max-width: 100%; height: auto; image-rendering: pixelated; }

    .reader-info { color: var(--c-dim); font-size: 18px; }
    

/*main page scale*/
.page-canvas{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
}

/* Thumbstrip container
#thumbs.thumbstrip{
  display:flex !important;
  gap:6px;
  overflow-x:auto;
  padding:6px;
  background:#090909;
  border-top:2px solid #111;
} */

#thumbs.thumbstrip img{
  height:96px !important;
  width:auto !important;
  max-width:none !important; 
  object-fit:contain;
  border:2px solid #222;
  image-rendering:pixelated;
  cursor:pointer;
  flex:0 0 auto; 
}

#thumbs.thumbstrip img.active{ border-color: var(--c-cyan); }

/* === Reader page image scaling === */
.reader .page img,
.page-canvas img,
.page-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}