/* ══════════════════════════════════════════════════════════════════════════
   THE OLD WEB — Y2K / Win98 chrome for the SYMBIOSIS DAEMON (lane 3)
   Kris directive 2026-08-18: GeoCities / Truth-Terminal era window furniture,
   our palette only (matrix green · blood red · void black), dark-fantasy first.
   Loads AFTER retro.css so it can re-accent; never removes lane-1/2/4 markup.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --xp-bar1:#0B7A33; --xp-bar2:#02350F;         /* title-bar gradient (Win98 blue → our green) */
  --xp-face:#04120A;                            /* window face */
  --xp-hi:rgba(0,255,65,.30);                   /* bevel highlight */
  --xp-lo:rgba(0,0,0,.72);                      /* bevel shadow */
  --xp-edge:#0E5A2C;
  --xp-chrome:#071C0F;                          /* nav / status bars */
  --xp-paper:#050D07;                           /* content paper inside windows */
}

/* ── the desktop: grid under everything, page floats on it ─────────────── */
body.xp{
  background:
    linear-gradient(rgba(0,255,65,.030) 1px,transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg,rgba(0,255,65,.030) 1px,transparent 1px) 0 0/34px 34px,
    radial-gradient(120% 80% at 50% 0%,#04140B 0%,#020503 60%);
  padding:0 0 3rem;
}
body.xp .wrap{max-width:none;padding:0;margin:0}

/* ── the frame: the whole site sits inside one glowing box ─────────────── */
.xp-frame{
  position:relative;z-index:3;max-width:1180px;margin:18px auto;background:rgba(2,7,4,.86);
  border:1px solid var(--xp-edge);
  box-shadow:0 0 0 3px #020503, 0 0 0 4px rgba(0,255,65,.55), 0 0 46px rgba(0,255,65,.18),
             0 0 120px rgba(0,0,0,.9);
}

/* ── the banner: the hero, wearing 1999 ────────────────────────────────── */
body.xp .hero{
  min-height:auto;padding:1.6rem 1rem 1.2rem;gap:.55rem;
  background:radial-gradient(80% 130% at 50% 0%,rgba(0,255,65,.09),transparent 70%),#010402;
  border-bottom:2px solid var(--xp-edge);
  box-shadow:0 0 0 2px #C21F2C inset, 0 0 0 4px #010402 inset, 0 0 0 5px rgba(0,255,65,.75) inset;
}
body.xp .hero img.sigil{width:min(26vw,120px)}
body.xp h1.title{
  font-size:clamp(2.3rem,8.4vw,4.6rem);letter-spacing:.06em;
  color:#00FF41;
  text-shadow:
    -2px -2px 0 #04170B, 2px -2px 0 #04170B, -2px 2px 0 #04170B, 2px 2px 0 #04170B,
    0 0 2px #C21F2C, 4px 4px 0 rgba(194,31,44,.85), 0 0 26px rgba(0,255,65,.75);
}
body.xp h1.title::before{content:"~*~ ";color:#E4404B;text-shadow:none;font-size:.55em;vertical-align:.35em}
body.xp h1.title::after {content:" ~*~";color:#E4404B;text-shadow:none;font-size:.55em;vertical-align:.35em}
body.xp .hero .rune{font-size:.98rem}
body.xp .hero .creed{font-size:1.02rem;max-width:40rem}
body.xp .hero .descend{display:none}                    /* the nav bar replaces it */
body.xp .hero .vessel{border-color:#5A1218;background:rgba(20,2,4,.6)}

/* soul counter — LED digits, the honest kind (real KV count) */
.xp-souls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--mono,monospace);font-size:.68rem;letter-spacing:.22em;color:var(--r-amber,#FFB000);
  text-transform:uppercase;margin-top:.35rem}
.xp-souls .d{display:inline-flex;gap:3px}
.xp-souls .d b{background:#000;border:1px solid var(--xp-edge);color:#00FF41;font-weight:400;
  padding:2px 5px;font-size:.95rem;line-height:1;text-shadow:0 0 8px rgba(0,255,65,.8)}
.xp-souls .star{color:#E4404B}

/* ── the nav: bracket links on a beveled strip ─────────────────────────── */
.xp-nav{display:flex;flex-wrap:wrap;gap:.15rem .55rem;justify-content:center;
  padding:.5rem .7rem;background:var(--xp-chrome);
  border-bottom:1px solid #020503;
  box-shadow:0 1px 0 var(--xp-hi) inset, 0 -1px 0 var(--xp-lo) inset}
.xp-nav a{font-family:var(--mono,monospace);font-size:.74rem;letter-spacing:.1em;color:#39D97A;
  padding:.15rem .1rem;white-space:nowrap}
.xp-nav a::before{content:"[ ";color:#3E7A55}
.xp-nav a::after {content:" ]";color:#3E7A55}
.xp-nav a:hover{color:#00FF41;text-shadow:0 0 10px rgba(0,255,65,.8)}
.xp-nav a.hot{color:var(--r-amber,#FFB000)}
.xp-nav a.hot:hover{color:#FFD166;text-shadow:0 0 10px rgba(255,176,0,.7)}

/* ── two columns ───────────────────────────────────────────────────────── */
.xp-cols{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:14px;padding:14px}
.xp-main{min-width:0}
.xp-side{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ── the window: every section is an application ───────────────────────── */
body.xp section{margin:0 0 14px;padding:0!important;border:0!important;background:none!important}
.win{border:1px solid var(--xp-edge);background:var(--xp-face);
  box-shadow:0 1px 0 var(--xp-hi) inset, 0 -1px 0 var(--xp-lo) inset, 0 10px 30px rgba(0,0,0,.55)}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.32rem .4rem .32rem .55rem;
  background:linear-gradient(180deg,var(--xp-bar1),var(--xp-bar2));
  border-bottom:1px solid #020503;box-shadow:0 1px 0 rgba(255,255,255,.16) inset;cursor:default}
.win-t{font-family:var(--mono,monospace);font-size:.7rem;letter-spacing:.16em;color:#DFF6E4;
  text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-t::before{content:"ᛞ ";color:#9DFFC0}
.win-btns{display:flex;gap:3px;flex:0 0 auto}
.win-btns i{width:19px;height:16px;display:flex;align-items:center;justify-content:center;
  font-style:normal;font-family:var(--mono,monospace);font-size:9px;color:#02240D;cursor:pointer;
  background:linear-gradient(180deg,#8FE9AC,#2E9E55);border:1px solid #01230C;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset}
.win-btns i:hover{filter:brightness(1.12)}
.win-btns i:active{box-shadow:0 1px 2px rgba(0,0,0,.6) inset}
.win-btns i.x{background:linear-gradient(180deg,#F08A90,#B0202C)}
.win-body{padding:1rem 1.1rem 1.2rem;background:var(--xp-paper)}
.win.min .win-body{display:none}
.win-status{display:flex;justify-content:space-between;gap:.6rem;padding:.28rem .6rem;
  background:var(--xp-chrome);border-top:1px solid #020503;
  box-shadow:0 1px 0 var(--xp-hi) inset;
  font-family:var(--mono,monospace);font-size:.6rem;letter-spacing:.14em;color:#3E7A55;text-transform:uppercase}
.win-status b{color:var(--r-amber,#FFB000);font-weight:400}

/* section headings inside windows shrink — the title bar is the heading now */
body.xp .win-body h2{font-size:1.35rem;margin-bottom:.5rem;letter-spacing:.06em}
body.xp .win-body .lore{font-size:1.04rem}

/* ── transmissions as a 1999 weblog ────────────────────────────────────── */
body.xp #transmissions .feed{gap:0;counter-reset:tx var(--tx-start,889)}
body.xp #transmissions .tx{border:0;border-left:3px solid var(--xp-edge);border-radius:0;
  background:rgba(6,17,10,.5);border-bottom:1px dashed #10331D;padding:.7rem .9rem;font-size:1.12rem}
body.xp #transmissions .tx::before{counter-increment:tx -1;content:"p." counter(tx) " —";
  color:#E4404B;font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.1em;margin-right:.5rem}
body.xp #transmissions .tx .meta{color:#3E7A55}

/* ── sidebar boxes ─────────────────────────────────────────────────────── */
.sbx{border:1px solid var(--xp-edge);background:var(--xp-face);
  box-shadow:0 1px 0 var(--xp-hi) inset, 0 -1px 0 var(--xp-lo) inset}
.sbx-t{padding:.3rem .55rem;background:linear-gradient(180deg,var(--xp-bar1),var(--xp-bar2));
  border-bottom:1px solid #020503;box-shadow:0 1px 0 rgba(255,255,255,.16) inset;
  font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.24em;color:#DFF6E4;text-transform:uppercase;text-align:center}
.sbx-t.red{background:linear-gradient(180deg,#8E1520,#3A060C)}
.sbx-t.amber{background:linear-gradient(180deg,#8A6100,#3B2900);color:#FFE9B8}
.sbx-t.violet{background:linear-gradient(180deg,#5B3AA6,#22114A);color:#E7DBFF}
.sbx-b{padding:.6rem .65rem;background:var(--xp-paper);
  font-family:var(--mono,monospace);font-size:.68rem;color:#3E7A55;line-height:1.75;text-align:center}
.sbx-b .big{font-family:var(--crt,monospace);font-size:1.16rem;color:#00FF41;letter-spacing:.04em;line-height:1.35}
.sbx-b .red{color:#E4404B} .sbx-b .amber{color:var(--r-amber,#FFB000)} .sbx-b .violet{color:var(--r-violet,#9A6BFF)}
.sbx-b .addr{font-family:var(--crt,monospace);font-size:.82rem;color:#00FF41;word-break:break-all;cursor:pointer;line-height:1.3}
.sbx-b .addr:hover{text-shadow:0 0 10px rgba(0,255,65,.9)}
.sbx-b ul{list-style:none;text-align:left;margin:0;padding:0}
.sbx-b li{border-bottom:1px dotted #123822;padding:.2rem 0}
.sbx-b li:last-child{border-bottom:0}
.sbx-b li a{font-size:.78rem;color:#39D97A;text-decoration:underline;text-underline-offset:2px}
.sbx-b li a:hover{color:var(--r-amber,#FFB000)}
.sbx-b li .rn{color:#3E7A55;margin-right:.35rem}
.sbx-led{display:inline-flex;gap:3px;margin:.15rem 0}
.sbx-led b{background:#000;border:1px solid var(--xp-edge);color:#00FF41;font-weight:400;padding:2px 4px;
  font-family:var(--crt,monospace);font-size:1rem;line-height:1;text-shadow:0 0 8px rgba(0,255,65,.8)}
.sbx .ret-badges{padding:.15rem 0}
.sbx .ret-badge{width:100%;max-width:104px}
.sbx .ret-tape{margin:.2rem auto 0;max-width:100%;font-size:.86rem;padding:.45rem .5rem}
.sbx .ret-ring{margin:0;font-size:.92rem}
.sbx .ret-sigil{font-size:3.6px;margin:0}
.sbx .ret-counters{margin:0;gap:.5rem;font-size:.66rem}

/* ── footer strip ──────────────────────────────────────────────────────── */
body.xp footer{margin:0;padding:.9rem 1rem;text-align:center;background:var(--xp-chrome);
  border-top:1px solid var(--xp-edge);box-shadow:0 1px 0 var(--xp-hi) inset;font-size:.66rem}
.xp-bestview{font-family:var(--mono,monospace);font-size:.62rem;letter-spacing:.16em;color:#2C5C40;
  text-align:center;padding:.5rem 1rem 0;text-transform:uppercase}

/* ── the terminal, de-modernised: the window bar above it is chrome enough ─ */
body.xp .termbox{border-radius:0;border:1px solid var(--xp-edge);background:#010A05;
  backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:.7rem;
  box-shadow:0 1px 0 var(--xp-hi) inset, 0 -1px 0 var(--xp-lo) inset}
body.xp .termbar{display:none}                       /* outer win-bar replaces it */
body.xp .termbody{padding:.85rem .9rem .8rem}
body.xp #tout{font-family:var(--crt,monospace);font-size:1.2rem;line-height:1.45}
body.xp .tline{border-top:1px solid #10331D}
body.xp .tline .ps,body.xp #tin{font-family:var(--crt,monospace);font-size:1.2rem}
body.xp .tline .ps{color:#E4404B}

/* ── DESIGN LAW 6+7 (Kris, 2026-08-18): prose must READ ────────────────────
   "text here is too long and i don't like the font, its not readable enough."
   IM Fell English retired for prose site-wide · Grenze Gotisch = display titles
   only · VT323 = terminal/glow lines only · body copy = IBM Plex Mono 1rem/1.75
   at #D5E4D9 · never a whole italic paragraph · red reserved for one short line
   (red serif on near-black was the actual contrast failure).
   Enforced here because xp.css loads last and reaches every lane's markup. */
body.xp .lore, body.xp .lore p, body.xp .god p, body.xp .law, body.xp .hero .creed,
body.xp .epigraph, body.xp .ctg-q, body.xp .win-body p{
  font-family:var(--mono,ui-monospace,monospace)!important;
  font-size:1rem!important;line-height:1.75!important;color:#D5E4D9!important;font-style:normal!important}
body.xp .lore em, body.xp .god p em, body.xp .law b, body.xp .epigraph b, body.xp .hero .creed em{
  color:var(--matrix-soft,#39D97A)!important;font-style:normal!important}
body.xp .hero .creed{max-width:44rem}
body.xp .hero .creed .oath, body.xp .lore .oath{color:#E4404B!important}   /* the one red line */

/* ── the odometer: a real count deserves real furniture (lane-2 sprites) ──
   5 cells is what odometer-frame.png was cut for: 5×18 + 9px bezel each side. */
.odo{display:inline-flex;gap:0;padding:4px 9px;image-rendering:pixelated;vertical-align:middle;
  background:url("../badges/odometer-frame.png") 0 0/108px 36px no-repeat}
.odo i{width:18px;height:28px;display:inline-block;image-rendering:pixelated;
  background:url("../badges/odometer-digits.png") 0 0/18px 308px no-repeat;
  transition:background-position-y .32s cubic-bezier(.22,1,.36,1)}

/* ── 90s furniture: scan-bar rules under window headings, eyes for bullets ── */
body.xp .win-body h2::after{content:"";display:block;height:10px;margin-top:.55rem;image-rendering:pixelated;
  background:url("../badges/divider-scan.png") center/100% 10px no-repeat;opacity:.85}
.sbx-b ul li{list-style:none;padding:.22rem 0 .22rem 16px;image-rendering:pixelated;
  background:url("../badges/bullet-eye.png") 0 .55rem/9px 9px no-repeat}

/* ── the pointer: you are holding the sigil; the shoggoth follows it ───── */
body.xp{cursor:url("cur-sigil.png") 16 16, crosshair}
body.xp a, body.xp button, body.xp .win-btns i, body.xp .tab, body.xp .rite,
body.xp .addr, body.xp .veinaddr, body.xp .termbox, body.xp [role="tab"]{
  cursor:url("cur-sigil-red.png") 16 16, pointer}
body.xp input, body.xp #tin{cursor:url("cur-sigil-red.png") 16 16, text}
#eyetrail{position:fixed;inset:0;z-index:60;pointer-events:none}
@media (pointer:coarse){ #eyetrail{display:none} body.xp{cursor:auto} }

/* ── GeoCities honours: the NEW! flag ──────────────────────────────────── */
.xp-new{display:inline-block;margin-left:.4rem;padding:1px 5px;font-family:var(--mono,monospace);
  font-size:.56rem;letter-spacing:.14em;color:#140204;background:#E4404B;border:1px solid #7A0F17;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;vertical-align:.15em}

/* ── retro.js furniture, re-housed ─────────────────────────────────────── */
body.xp .ret-marquee{border-left:0;border-right:0}
body.xp .ret-web{margin-top:0;border-top:0;padding-top:0}

/* ── mobile: one column, the frame relaxes ─────────────────────────────── */
@media (max-width:820px){
  .xp-frame{margin:8px;border-width:1px;box-shadow:0 0 0 2px #020503,0 0 0 3px rgba(0,255,65,.5),0 0 30px rgba(0,255,65,.15)}
  .xp-cols{grid-template-columns:minmax(0,1fr);padding:10px;gap:10px}
  .xp-side{order:2}
  .win-body{padding:.85rem .8rem 1rem}
  .xp-nav a{font-size:.68rem}
  body.xp h1.title{text-shadow:-1px -1px 0 #04170B,1px -1px 0 #04170B,-1px 1px 0 #04170B,1px 1px 0 #04170B,3px 3px 0 rgba(194,31,44,.85),0 0 20px rgba(0,255,65,.7)}
}
@media (prefers-reduced-motion:reduce){ .xp-blink{animation:none!important} }
.xp-blink{animation:xpbl 1.15s steps(1) infinite}
@keyframes xpbl{50%{opacity:.28}}