/* BITCHLOVE — house style, lifted from bitchlove.com so net.* matches the bar. */
:root {
  --room:#120d0b; --brick:#1b1310; --panel:#1c1512; --line:#33261f;
  --neon:#ff2e88; --amber:#f0a35e; --ink:#f2eae1; --ink2:#a89b92; --muted:#6b5f57;
  --live:#4ade80;
}
* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:radial-gradient(ellipse 90% 60% at 50% 12%, #241612 0%, var(--brick) 45%, var(--room) 100%);
  color:var(--ink); font-family:"IBM Plex Mono",monospace; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; padding:1.6rem 1.2rem 4rem;
}
a { color:var(--amber); }

/* ---- the sign ---- */
.sign {
  font-family:"Big Shoulders Display",sans-serif; font-weight:700; color:#fff;
  letter-spacing:.045em; line-height:.95; text-align:center; text-decoration:none;
  text-shadow:0 0 4px #fff,0 0 11px var(--neon),0 0 24px var(--neon),0 0 60px rgba(255,46,136,.5);
}
.sign.big { font-size:clamp(2.6rem,10vw,7rem);
            animation:strike 2.2s steps(1,end) 1, hum 3.4s ease-in-out 2.2s infinite; }
@keyframes strike {
  0%,4%{opacity:.08;text-shadow:none} 5%,7%{opacity:1} 8%,12%{opacity:.12;text-shadow:none}
  13%{opacity:1} 14%,19%{opacity:.1;text-shadow:none} 20%,62%{opacity:1}
  63%,65%{opacity:.35} 66%,100%{opacity:1} }
@keyframes hum {
  0%,100%{text-shadow:0 0 4px #fff,0 0 11px var(--neon),0 0 24px var(--neon),0 0 55px var(--neon),0 0 110px rgba(255,46,136,.55)}
  50%{text-shadow:0 0 4px #fff,0 0 9px var(--neon),0 0 20px var(--neon),0 0 46px var(--neon),0 0 90px rgba(255,46,136,.45)} }
@media (prefers-reduced-motion:reduce){ .sign.big{animation:none} }

.suffix { font-family:"Big Shoulders Display",sans-serif; font-weight:500;
          color:var(--amber); text-shadow:0 0 8px rgba(240,163,94,.55); }
.tagline { font-size:.8rem; letter-spacing:.16em; color:var(--ink2); text-align:center; margin-top:.5rem; }

/* ---- nav ---- */
nav.top { display:flex; gap:1.1rem; flex-wrap:wrap; justify-content:center; margin:1.4rem 0 .4rem;
          font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; }
nav.top a { color:var(--ink2); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; }
nav.top a:hover, nav.top a.on { color:var(--ink); border-bottom-color:var(--neon); }

/* ---- structure ---- */
.wrap { width:100%; max-width:680px; }
.wrap.wide { max-width:980px; }
.sect { margin-top:2.2rem; }
.sect > h2 { font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
             margin-bottom:.7rem; padding-bottom:.4rem; border-bottom:1px solid var(--line); }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px;
        padding:1.3rem 1.4rem; margin-top:1.2rem; }
.card h2 { font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--amber); margin-bottom:.9rem; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.tile { display:block; background:var(--panel); border:1px solid var(--line); border-radius:8px;
        padding:1.05rem 1.15rem; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.tile:hover { border-color:var(--neon); transform:translateY(-2px); }
.tile h3 { font-family:"Big Shoulders Display",sans-serif; font-weight:700; font-size:1.25rem;
           letter-spacing:.03em; color:var(--ink); margin-bottom:.3rem; }
.tile p { font-size:.74rem; line-height:1.55; color:var(--muted); }
.tile .go { display:inline-block; margin-top:.65rem; font-size:.6rem; letter-spacing:.22em;
            text-transform:uppercase; color:var(--amber); }

/* ---- the runtime slab: real values, not decoration ---- */
.slab { width:100%; border-collapse:collapse; font-size:.76rem; }
.slab tr + tr { border-top:1px solid var(--line); }
.slab th { text-align:left; font-weight:400; color:var(--ink2); padding:.5rem .6rem .5rem 0;
           letter-spacing:.1em; text-transform:uppercase; font-size:.62rem; white-space:nowrap; }
.slab td { text-align:right; padding:.5rem 0; color:var(--ink); word-break:break-all; }
.slab td.n { color:var(--amber); }

.pill { display:inline-block; padding:.18rem .55rem; border-radius:999px; font-size:.58rem;
        letter-spacing:.16em; text-transform:uppercase; border:1px solid var(--line); color:var(--ink2); }
.pill.live { border-color:#2f6b45; color:var(--live); background:#12261a; }
.pill.dev  { border-color:var(--neon); color:var(--neon); background:#280f1a; }

.muted { color:var(--muted); font-size:.72rem; line-height:1.6; }
code { font-family:inherit; background:#150f0d; border:1px solid var(--line);
       border-radius:4px; padding:.08rem .35rem; color:var(--amber); font-size:.9em; }

/* ---- the stack chain: nginx -> Kestrel -> systemd -> kernel, top to bottom ---- */
.chain { list-style:none; counter-reset:rung; }
.chain li {
  counter-increment:rung; position:relative; padding:.55rem 0 .55rem 2.1rem;
  font-size:.76rem; line-height:1.5;
}
.chain li + li { border-top:1px solid var(--line); }
.chain li::before {
  content:counter(rung); position:absolute; left:0; top:.55rem;
  width:1.35rem; height:1.35rem; border-radius:4px; border:1px solid var(--line);
  background:#150f0d; color:var(--muted); font-size:.6rem;
  display:flex; align-items:center; justify-content:center;
}
.chain li b { color:var(--ink); font-weight:500; }
.chain li span { color:var(--muted); display:block; margin-top:.15rem; font-size:.72rem; }

footer { margin-top:2.4rem; font-size:.62rem; letter-spacing:.18em; color:#4f443e; text-align:center; }
footer .neon { color:var(--neon); opacity:.75; }