/* v10_new: photo-only background, silver chrome borders both columns */
:root{
  --ink: #f2eadf;
  --ink-dim:#e8dccf;
  --accent: #ff2f92;
  --box:#1a1013;
  --box-2:#23161a;
  --leopard:#c4b18c;
}
/* full-screen fixed background that works on iOS */
.fixed-bg{
  position: fixed;
  inset: 0;
  z-index: -1;               /* sit behind everything */
  background: #000 center / cover no-repeat;
  will-change: transform;
}
/* set the actual image for the home page */
body.home .fixed-bg.home {
  /* CHANGE this to your file */
  background-image: url('/assets/bg_processed.jpg'); 
  /* .png/.gif is fine too */
}

/* Cute pill nav buttons */
.topnav{
  position:sticky; top:0; z-index:10;
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  padding:8px 12px; margin:8px auto;
}
.btn{
  --ring: rgba(200,200,200,.45);
  text-decoration:none; color:#fff;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(220,220,220,.8);
  background: linear-gradient(180deg, rgba(230,230,230,.18), rgba(0,0,0,.2));
  box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 3px transparent;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; letter-spacing:.3px;
}
.btn span{ font-family: 'Staatliches','Black Ops One', Impact, sans-serif; transform: translateY(-1px) }
.btn:hover{ box-shadow: 0 2px 0 rgba(0,0,0,.6), 0 0 0 3px var(--ring) }
.btn:active{ transform: translateY(1px) }

/* Layout */
.wrap{
  width:min(1100px, 94%);
  margin:12px auto 40px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
}
@media (max-width: 860px){ .wrap{ grid-template-columns:1fr } }

/* Panels base */
.sidebar .box, .content .box{
  background: radial-gradient(120% 120% at 0 0, rgba(26,16,19,.92) 0%, rgba(35,22,26,.92) 100%);
  border-radius:14px;
  padding:16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
}

/* Lighter sidebar text */
.sidebar{ color:#ffffff; }
.sidebar a{ color:#e9f3ff; }
.sidebar a:hover{ color:#ffffff; text-shadow:0 0 10px rgba(255,255,255,.9); }

/* Silver chrome animated border both columns */
.sidebar .box, .content .box{
  border-width:5px;
  border-style:solid;
  border-image-source: url('assets/glitter_red_chaos.gif');
  border-image-slice: 12 fill;
  border-image-repeat: round;
  padding:14px;
  box-shadow: 0 0 14px rgba(255,255,255,.25);
}

/* Headings with edgy font */
.box h2, .post h3, .spec h4{
  font-family:'Black Ops One','Staatliches', Impact, sans-serif;
  letter-spacing:.5px;
}

/* Sparkle separators */
.sparkle{
  height:10px;
  margin:14px 0 18px;
  background-image: url('assets/red_sparkle.gif');
  background-repeat: repeat-x;
  background-size: auto 8px;
  filter: drop-shadow(0 0 6px rgba(255,60,100,.35));
}
.sparkle.slim{ height:8px; background-size:auto 6px }

/* Gallery */
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px }
.tile{ position:relative; display:block; border:1px solid rgba(220,220,220,.6); border-radius:10px; overflow:hidden; background:#000; text-decoration:none }
.tile img{ width:100%; height:180px; object-fit:cover; display:block }
.tile .cap{ position:absolute; left:8px; bottom:8px; font-size:12px; color:#fff; background:rgba(0,0,0,.55); padding:4px 8px; border-radius:6px }

/* Footer */
.site-footer{ text-align:center; color:#e7dde0; padding:26px 12px 60px }

/* Star */
.star-corner{
  position:fixed;
  left:18px; bottom:18px;
  width:110px; height:110px;
  background:url('assets/star_corner.gif') center/contain no-repeat;
  opacity:.95;
  filter: drop-shadow(0 0 10px rgba(255,180,180,.5));
  pointer-events:none; z-index:1;
}
/* === LOADING OVERLAY === */
#boot{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  opacity:1; pointer-events:auto; transition:opacity .45s ease;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color:#fbeaf0;
  background: #000; /* solid black base behind the gif */;
}

/* velvet base */
#boot::before{
  content:""; position:absolute; inset:0;
  background: transparent;
}

/* ocean gif */
.boot-bg{
  position:absolute; inset:0; opacity:.60; mix-blend-mode:screen;
  background: url('/assets/oceanflow.gif'); /* <— change if named different */
  background-size: 260px auto; background-repeat: repeat;
  filter: contrast(1.2) saturate(1.15) brightness(.9);
  animation: pan 18s linear infinite;
}
/* twinkly stars (no images) */
.boot-noise{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:
    radial-gradient(2px 2px at 12% 18%, #fff, transparent 55%),
    radial-gradient(2px 2px at 72% 8%,  #fff, transparent 55%),
    radial-gradient(2px 2px at 32% 72%, #fff, transparent 55%),
    radial-gradient(1px 1px at 48% 42%, #fff, transparent 55%),
    radial-gradient(1px 1px at 84% 64%, #fff, transparent 55%),
    radial-gradient(1.5px 1.5px at 18% 86%, #fff, transparent 55%),
    radial-gradient(1.5px 1.5px at 90% 32%, #fff, transparent 55%);
  animation: twinkle 2.2s ease-in-out infinite alternate;
  opacity:.8;
}

/* the glassy boot card */
.bootbox{
  width:min(92vw,720px);
  background: rgba(60,0,20,.40);
  border:1px solid #ff2a6d; border-radius:14px;
  box-shadow: 0 0 24px rgba(255,0,90,.35) inset, 0 8px 30px rgba(0,0,0,.45);
  backdrop-filter: blur(8px);
  padding: 18px 20px 16px;
}

/* header row */
.bootbox .title{ display:flex; align-items:center; gap:10px; font-size:18px; letter-spacing:.3px }
.led{ width:10px; height:10px; border-radius:50%; background:#ff2a6d;
      box-shadow:0 0 8px #ff2a6d, 0 0 18px #ff2a6d; animation: pulse 1.2s ease-in-out infinite; }

/* status line */
.status{ margin:10px 0 12px; opacity:.85; }

/* progress bar */
.bar{ position:relative; height:12px; border:1px solid #ff2a6d; border-radius:999px;
      background: rgba(255,0,90,.08); overflow:hidden; }
.fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background: linear-gradient(90deg, #ff2a6d, #ff89a8);
  box-shadow: 0 0 18px rgba(255,0,120,.45);
  animation: loadbar 1.6s ease-out forwards;
}
.shine{
  position:absolute; inset:0; background:
    linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.65) 35%, rgba(255,255,255,0) 70%);
  transform:translateX(-120%); filter: blur(.6px);
  animation: shine 1.6s .15s ease-out forwards;
}

.hint{ margin-top:10px; font-size:12px; opacity:.6 }

/* hide when page is ready */
body.loaded #boot{ opacity:0; pointer-events:none; }

/* keyframes */
@keyframes pan { to{ background-position: 600px 0 } }
@keyframes twinkle { to{ opacity:.4; filter: drop-shadow(0 0 6px #fff) } }
@keyframes pulse { 50%{ transform:scale(.86); opacity:.75 } }
@keyframes shine { to{ transform:translateX(120%) } }
@keyframes loadbar { to{ width:100% } }
/* === TEXT COLOR SAFETY NET (put at very end of style.css) === */
:root{
  --text:#fff;         /* bone white */
  --text-dim:#e9e9e9;  /* captions */
}

/* force base text + headings to white */
html, body { color: var(--text) !important; }

h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

/* links sometimes flip on mobile—keep them white too */
a, a:visited, a:active {
  color: var(--text) !important;
  -webkit-text-fill-color: