/* ============================================================
   PMDO — Poor Meadow Dyke Observatory
   Shared theme · Look A "Neon 1999"
   ------------------------------------------------------------
   Design tokens live in :root. Colours/type/spacing are all
   custom properties — a re-skin is a one-block change.

   HOW THIS SITE WORKS (for humans and AI agents):
   - Every page is a self-contained HTML file linking this CSS.
   - Page structure: <header> nav → <main> content → <footer>.
   - Blocks marked with  <!-- EDIT: ... -->  are the ones you
     change when updating content.
   - Nav + footer blocks are copy-pasted identically on every
     page — keep them in sync.
   - No build step, no JS required.
   ============================================================ */

/* ==================== TOKENS ==================== */
:root{
  --bg:        #050607;
  --panel:     #0b100d;
  --panel2:    #0e1512;
  --green:     #35e0a1;   /* primary neon — links, headings, actions */
  --cyan:      #4dd8ff;   /* secondary — accents, hover */
  --pink:      #ff5da2;   /* tertiary accent */
  --amber:     #ffd84d;   /* highlight accent */
  --text:      #cfeede;   /* body text */
  --dim:       #6fae92;   /* muted text */
  --line:      #1d4433;   /* borders */
  --glow-green: rgba(53,224,161,.5);
  --glow-cyan:  rgba(77,216,255,.5);

  --font-pixel: "Press Start 2P", monospace;   /* display labels, badges */
  --font-retro: "VT323", monospace;            /* headings, buttons */
  --font-mono:  "IBM Plex Mono", monospace;    /* body copy */

  --maxw: 1120px;
  --wrap-pad: 22px;
  --colw: 820px; /* body text column — page-head + next-up must match this */
  --radius: 0px;  /* 1999 = sharp corners */
}

/* ==================== RESET / BASE ==================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mono);
  font-size:15.5px;
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
}
/* CRT scanlines + vignette (subtle, whole site) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.4) 100%);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
a:hover{color:var(--cyan)}
::selection{background:var(--green);color:#04110b}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--wrap-pad);padding-right:var(--wrap-pad)}

/* ==================== SKIP LINK (a11y) ==================== */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--green);color:#04110b;
  padding:10px 18px;font-family:var(--font-retro);font-size:20px;z-index:300;
}
.skip-link:focus{left:8px;top:8px}

/* ==================== HEADER / NAV ==================== */
header.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(5,6,7,.92);backdrop-filter:blur(6px);
  border-bottom:2px solid var(--line);
}
/* NOTE: keep horizontal padding on the nav — the old "padding:14px 0" zeroed .wrap's
   side padding, so the header ran edge-to-edge when the browser got narrow */
.nav{display:flex;align-items:center;gap:18px;padding:14px var(--wrap-pad);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand:hover{text-decoration:none}
.brand .logo{
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  border:2px solid var(--green);box-shadow:0 0 16px var(--glow-green);
}
.brand .logo img{width:100%;height:100%;object-fit:cover}
.brand .word{
  font-family:var(--font-pixel);font-size:15px;color:var(--green);
  text-shadow:0 0 12px var(--glow-green);letter-spacing:.04em;line-height:1.4;
}
.brand .word small{
  display:block;font-family:var(--font-retro);font-size:15px;color:var(--dim);
  letter-spacing:.14em;margin-top:5px;
}
.menu{display:flex;gap:2px;list-style:none;flex-wrap:wrap;align-items:center}
.menu a{
  display:block;font-family:var(--font-retro);font-size:22px;color:var(--text);
  text-decoration:none;padding:4px 12px;transition:color .1s;
}
.menu a:hover{color:var(--green);text-shadow:0 0 10px var(--glow-green)}
.menu .cur{color:var(--green);text-shadow:0 0 10px var(--glow-green)}
.menu a .caret{color:var(--dim);font-size:15px;margin-left:5px}
.menu a:hover .caret{color:var(--green)}
/* CSS-only dropdown submenus (hover + keyboard focus) */
.has-sub{position:relative}
.sub{
  display:none;position:absolute;top:100%;left:-14px;z-index:120;
  min-width:250px;background:var(--panel);border:2px solid var(--green);
  box-shadow:0 12px 30px rgba(0,0,0,.6),0 0 18px rgba(53,224,161,.18);
  list-style:none;padding:6px 0;
}
.sub li a{
  font-size:19px;color:var(--text);padding:5px 18px;
}
.sub li a:hover{color:var(--green);background:var(--panel2);text-shadow:0 0 10px var(--glow-green)}
.has-sub:hover > .sub,
.has-sub:focus-within > .sub{display:block}
/* random-page button */
.random-btn{
  font-family:var(--font-retro);font-size:20px;color:var(--amber) !important;
  border:2px solid var(--amber);padding:4px 14px;text-decoration:none;
  box-shadow:0 0 12px rgba(255,216,77,.3);
}
.random-btn:hover{
  background:var(--amber) !important;color:#1a1204 !important;
  text-shadow:none;box-shadow:0 0 22px rgba(255,216,77,.7);
}

/* ==================== BUTTONS ==================== */
.btn{
  display:inline-block;padding:12px 28px;font-family:var(--font-retro);
  font-size:24px;letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:.12s;
}
.btn.primary{
  color:var(--green);background:var(--panel);border:2px solid var(--green);
  box-shadow:inset 0 0 14px rgba(53,224,161,.1);
}
.btn.primary:hover{background:var(--green);color:#04110b;box-shadow:0 0 26px var(--glow-green);text-decoration:none}
.btn.ghost{color:var(--dim);border:2px solid var(--line);background:transparent}
.btn.ghost:hover{border-color:var(--cyan);color:var(--cyan);text-decoration:none}
.btn:active{transform:translate(1px,1px)}

/* ==================== MARQUEE TICKER ==================== */
.marquee{
  border-top:2px solid var(--line);border-bottom:2px solid var(--line);
  background:var(--panel);overflow:hidden;white-space:nowrap;padding:11px 0;
  position:relative;
}
.marquee .track{
  display:inline-block;animation:scroll 26s linear infinite;
  font-family:var(--font-retro);font-size:24px;color:var(--green);
  text-shadow:-1.5px 0 rgba(255,93,162,.55),1.5px 0 rgba(77,216,255,.55),0 0 12px rgba(53,224,161,.55);
}
.marquee .track span{margin:0 30px}
.marquee .track em{font-style:normal;color:var(--cyan)}
.marquee .track .am{color:var(--amber)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* CRT glitch on the ticker — the text keeps a constant faint RGB split
   (the "CRT look") and every 6 seconds it bursts: hard pink/cyan split,
   brightness flicker, and a static bar sweeping down. */
.marquee .track{animation:scroll 26s linear infinite, glitch 6s linear infinite}
@keyframes glitch{
  0%,22%,32%,60%,70%,100%{
    text-shadow:-1.5px 0 rgba(255,93,162,.55),1.5px 0 rgba(77,216,255,.55),0 0 12px rgba(53,224,161,.55);
    filter:none;
  }
  24%{text-shadow:-4px 0 var(--pink),4px 0 var(--cyan),0 0 18px var(--glow-green);filter:brightness(1.35)}
  26%{text-shadow:4px 0 var(--pink),-4px 0 var(--cyan);filter:brightness(1.7)}
  28%{text-shadow:-4px 1px var(--pink),4px -1px var(--cyan);filter:brightness(1.35)}
  30%{text-shadow:-1.5px 0 rgba(255,93,162,.55),1.5px 0 rgba(77,216,255,.55),0 0 12px rgba(53,224,161,.55)}
  62%{text-shadow:5px 0 var(--pink),-5px 0 var(--cyan),0 0 20px var(--glow-green);filter:brightness(1.4)}
  64%{text-shadow:-5px -1px var(--pink),5px 1px var(--cyan);filter:brightness(1.7)}
  66%{text-shadow:5px 1px var(--pink),-5px -1px var(--cyan)}
  68%{text-shadow:-1.5px 0 rgba(255,93,162,.55),1.5px 0 rgba(77,216,255,.55),0 0 12px rgba(53,224,161,.55)}
}
/* a thin static bar that sweeps down the ticker at each burst */
.marquee::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(53,224,161,.8),rgba(255,93,162,.6),transparent);
  animation:staticbar 6s linear infinite;
}
@keyframes staticbar{
  0%,23%,31%,61%,69%,100%{opacity:0;top:0}
  24%{opacity:.9;top:0}
  27%{opacity:.7;top:45%}
  30%{opacity:0;top:100%}
  63%{opacity:.9;top:0}
  66%{opacity:.6;top:70%}
  69%{opacity:0;top:100%}
}

/* ==================== HERO (home) ==================== */
.hero{padding:52px 0 34px;text-align:center}
.hero .est{
  display:inline-block;font-family:var(--font-pixel);font-size:10px;color:var(--cyan);
  border:1px solid var(--line);padding:7px 16px;margin-bottom:26px;letter-spacing:.14em;
  background:rgba(77,216,255,.05);
}
.hero h1{
  font-family:var(--font-retro);font-size:clamp(44px,7.4vw,84px);line-height:.95;
  color:var(--green);text-shadow:0 0 22px var(--glow-green),0 0 2px var(--glow-green);
  margin:0 auto 10px;max-width:22ch;font-weight:400;
}
.hero h1 i{font-style:italic;color:var(--cyan);text-shadow:0 0 22px var(--glow-cyan)}
.hero .sub{color:var(--dim);font-size:17px;max-width:640px;margin:14px auto 0}
.hero .sub b{color:var(--text)}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* circular CRT-framed hero image */
.hero-screen{
  width:min(440px,86vw);aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin:44px auto 0;position:relative;
  border:7px solid #10231b;
  box-shadow:0 0 0 2px var(--line),0 0 60px rgba(53,224,161,.28),inset 0 0 50px rgba(0,0,0,.65);
}
.hero-screen img{width:100%;height:100%;object-fit:cover}
.hero-screen::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 2px, transparent 2px 5px);
}
.hero-screen .scan{
  position:absolute;left:0;right:0;height:40%;top:-40%;
  background:linear-gradient(180deg, transparent, rgba(53,224,161,.10), transparent);
  animation:scan 5.5s linear infinite;pointer-events:none;
}
@keyframes scan{from{top:-40%}to{top:120%}}
.hero-caption{
  text-align:center;font-family:var(--font-retro);font-size:20px;color:var(--dim);
  margin-top:18px;letter-spacing:.1em;
}
.hero-caption b{color:var(--green)}

/* ==================== SECTION HEADS ==================== */
.sec{padding-top:64px}
.sec-head{display:flex;align-items:baseline;gap:16px;margin-bottom:8px;flex-wrap:wrap}
.sec-head .num{
  font-family:var(--font-retro);font-size:26px;color:var(--amber);
  text-shadow:0 0 10px rgba(255,216,77,.4);
}
.sec-head h2{
  font-family:var(--font-retro);font-size:42px;color:var(--text);
  text-shadow:0 0 14px rgba(53,224,161,.35);font-weight:400;
}
.sec-head h2 i{font-style:italic;color:var(--cyan)}
.sec-intro{color:var(--dim);max-width:720px;margin-bottom:30px}
.sec-intro b{color:var(--text)}

/* ==================== RABBIT-HOLE CARDS ==================== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.card{
  border:2px solid var(--line);background:var(--panel);padding:22px;
  position:relative;transition:.15s;display:block;
}
.card::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--acc,var(--green));opacity:.8;
}
.card:hover{
  border-color:var(--acc,var(--green));background:var(--panel2);
  box-shadow:0 0 26px rgba(53,224,161,.22);
}
.card .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card .icon{
  font-size:34px;line-height:1;color:var(--acc,var(--green));
  text-shadow:0 0 14px rgba(53,224,161,.5);
}
.card .idx{font-family:var(--font-pixel);font-size:8px;color:var(--dim);letter-spacing:.1em}
.card h3{font-family:var(--font-retro);font-size:30px;margin-bottom:8px;color:var(--text);font-weight:400}
.card p{color:var(--dim);font-size:13.5px;line-height:1.65}
.card .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.card .tags span{
  font-family:var(--font-retro);font-size:16px;color:var(--acc,var(--green));
  border:1px solid var(--line);padding:1px 9px;
}
.card .go{display:inline-block;margin-top:16px;font-family:var(--font-retro);font-size:21px;color:var(--acc,var(--green))}
.card:hover .go{text-shadow:0 0 10px rgba(53,224,161,.6)}

/* ==================== ABOUT STRIP ==================== */
.about{
  margin-top:70px;border:2px solid var(--line);background:var(--panel);
  display:flex;gap:26px;align-items:center;padding:28px;flex-wrap:wrap;
}
.about .a-logo{
  width:92px;height:92px;border-radius:50%;overflow:hidden;flex:none;
  border:2px solid var(--cyan);box-shadow:0 0 24px var(--glow-cyan);
}
.about .a-logo img{width:100%;height:100%;object-fit:cover}
.about .a-body{flex:1;min-width:240px}
.about .a-body h3{
  font-family:var(--font-retro);font-size:30px;color:var(--cyan);
  text-shadow:0 0 12px var(--glow-cyan);margin-bottom:6px;font-weight:400;
}
.about .a-body p{color:var(--dim);font-size:14.5px;max-width:640px}
.about .a-body b{color:var(--text)}
.about .a-btn{margin-left:auto}

/* ==================== 88×31 BADGES ==================== */
.badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.badge88{
  width:88px;height:31px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-pixel);font-size:7.5px;text-align:center;line-height:1.6;
}
.b1{background:#0a0f0c;color:var(--green);border:2px solid var(--green)}
.b2{background:#0a0d12;color:var(--cyan);border:2px solid var(--cyan)}
.b3{background:#120a10;color:var(--pink);border:2px solid var(--pink)}
.b4{background:#12100a;color:var(--amber);border:2px solid var(--amber)}
.b5{background:var(--green);color:#04110b}
.b6{background:#111;color:var(--text);border:2px solid var(--text)}

/* ==================== ARTICLE PAGES ==================== */
.page-head{padding:44px var(--wrap-pad) 8px}
.crumb{
  font-family:var(--font-retro);font-size:18px;color:var(--dim);letter-spacing:.08em;
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
}
.crumb a{color:var(--dim);text-decoration:none}
.crumb a:hover{color:var(--green)}
.crumb .sep{color:var(--line)}
.page-head h1{
  font-family:var(--font-retro);font-size:clamp(40px,6vw,64px);line-height:1;
  color:var(--green);text-shadow:0 0 22px var(--glow-green);
  margin-top:14px;font-weight:400;
}
.page-head .page-lede{color:var(--dim);max-width:720px;margin-top:10px;font-size:16px}
.page-rule{border:0;border-top:2px solid var(--line);margin:26px 0 0;position:relative}
.page-rule::after{
  content:"";position:absolute;top:-2px;left:0;width:120px;height:2px;
  background:var(--green);box-shadow:0 0 12px var(--glow-green);
}
/* article body */
.article{padding:34px var(--wrap-pad) 20px;max-width:var(--colw)}
.article h2{
  font-family:var(--font-retro);font-size:34px;color:var(--cyan);
  text-shadow:0 0 12px var(--glow-cyan);margin:34px 0 10px;font-weight:400;
}
.article h3{
  font-family:var(--font-retro);font-size:27px;color:var(--text);margin:26px 0 8px;font-weight:400;
}
.article p{margin:0 0 16px}
.article ul,.article ol{margin:0 0 16px 24px}
.article li{margin-bottom:6px}
.article a{text-decoration:underline;text-underline-offset:3px}
.article blockquote{
  border-left:4px solid var(--green);background:var(--panel);
  padding:14px 20px;margin:20px 0;color:var(--text);
}
.article blockquote p{margin:0}
.article figure{margin:26px 0}
.article figure img{
  border:2px solid var(--line);
  box-shadow:0 0 30px rgba(53,224,161,.12);
  background:#000;
}
.article figcaption{
  font-family:var(--font-retro);font-size:18px;color:var(--dim);
  margin-top:10px;letter-spacing:.06em;text-align:center;
}
/* side-by-side photo pair (e.g. hedge 6-months-later) */
.article .fig-duo{display:flex;gap:12px}
.article .fig-duo img{display:block;flex:1 1 0;min-width:0}
/* 404 page stamp */
.stamp404{
  margin:6px 0 26px;
  font-family:var(--font-pixel);
  font-size:64px;letter-spacing:8px;color:var(--green);
  text-shadow:0 0 26px var(--glow-green);
}
/* photo gallery (road trips etc.) — square tiles in a grid */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px 0}
.gallery figure{margin:0;border:2px solid var(--line);background:var(--panel)}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.gallery .gal-cap{padding:8px 10px;font-family:var(--font-pixel);font-size:9px;letter-spacing:.08em;color:var(--dim);text-transform:uppercase}
.gallery .gal-cap b{color:var(--green)}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}}

/* ==================== SLIDESHOW (retro TV) — replaces photo grids ==================== */
/* markup: a .gallery div with data-pmdo-slideshow + data-title; pmdo.js converts it
   into a stacked slideshow with a control bar. Square tiles -> 4:3 "screen". */
.slideshow{position:relative;margin:22px 0;border:2px solid var(--line);background:var(--panel);
  box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 18px rgba(53,224,161,.10)}
.slideshow .ss-viewport{position:relative;overflow:hidden;aspect-ratio:4/3;background:#000}
.slideshow .ss-viewport::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 5px);
}
.slideshow .ss-track{display:flex;height:100%;transition:transform .32s steps(6,end)}
.slideshow .ss-slide{flex:0 0 100%;height:100%}
.slideshow .ss-slide img{width:100%;height:100%;object-fit:cover;display:block}
.slideshow .ss-bar{
  display:flex;align-items:center;gap:10px;padding:7px 10px;
  border-top:2px solid var(--line);background:rgba(0,0,0,.42);
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.1em;
}
.slideshow .ss-title{color:var(--dim);text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.slideshow .ss-title b{color:var(--green)}
.slideshow .ss-count{color:var(--cyan);white-space:nowrap;font-family:var(--font-mono);font-size:12px}
.slideshow .ss-btn{
  font-family:var(--font-pixel);font-size:10px;cursor:pointer;
  color:var(--green);background:var(--panel);border:2px solid var(--green);
  padding:5px 10px;letter-spacing:.06em;
}
.slideshow .ss-btn:hover{background:var(--green);color:#04110b}
.slideshow .ss-btn:active{transform:translateY(1px)}
.slideshow .ss-auto{color:var(--dim);white-space:nowrap}
.slideshow .ss-auto.on{color:var(--amber)}
@media (prefers-reduced-motion: reduce){.slideshow .ss-track{transition:none}}

/* ==================== RETRO AUDIO PLAYER (fake engine sound) ==================== */
.article audio{display:block;width:100%;margin:16px 0;border:2px solid var(--line);
  background:var(--panel);padding:6px}
.article audio:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ==================== VIDEO EMBEDS (restored from original site) ==================== */
.article iframe{display:block;max-width:100%;margin:20px auto;border:2px solid var(--line);background:#000}
.article .video-embed{margin:24px 0}
.article .video-embed figcaption{
  margin-top:8px;text-align:center;
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.12em;color:var(--dim);
}
.article .video-embed figcaption b{color:var(--green)}

/* slideshow photo list (ALL N PHOTOS expander) */
.slideshow .ss-list{border-top:2px solid var(--line);padding:8px 12px;font-family:var(--font-mono);font-size:13px;color:var(--dim)}
.slideshow .ss-list summary{cursor:pointer;font-family:var(--font-pixel);font-size:9px;letter-spacing:.12em;color:var(--dim)}
.slideshow .ss-list summary:hover{color:var(--green)}
.slideshow .ss-list ul{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:4px}
.slideshow .ss-list b{color:var(--text)}

/* ---------- SLIDESHOW VARIANT: FILM PROJECTOR (data-style="film") ----------
   Old-projector feel (grounded in real projector behaviour):
   - frame change = shutter FLICKER (staccato opacity) + GATE WEAVE (subtle
     translate/rotate wobble as the frame settles through the gate)
   - a warm projector-LIGHT FLASH between frames (lamp pulse)
   - faint film GRAIN (noise, not lines — we replicate film, not a TV: the
     scanline overlay is removed) + soft vignette light fall-off
   - sprocket-hole strips along the top/bottom edges of the frame */
.slideshow.ss-film .ss-viewport{background:#05070a;box-shadow:inset 0 0 70px rgba(0,0,0,.55)}
.slideshow.ss-film .ss-track{transition:none}
/* sprocket strips (override the scanlines ::after with the bottom strip) */
.slideshow.ss-film .ss-viewport::before,
.slideshow.ss-film .ss-viewport::after{
  content:"";position:absolute;left:12px;right:12px;height:12px;z-index:3;pointer-events:none;
  background-image:radial-gradient(ellipse 7px 4px at 50% 50%, rgba(207,238,222,.17) 0 55%, transparent 62%);
  background-size:30px 100%;background-repeat:repeat-x;
}
.slideshow.ss-film .ss-viewport::before{top:1px}
.slideshow.ss-film .ss-viewport::after{bottom:1px}
/* faint film grain */
.slideshow.ss-film .ss-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* projector light flash between frames */
.slideshow.ss-film .ss-flash{
  position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(255,246,220,.9) 0%, rgba(255,246,220,.3) 55%, transparent 78%);
}
.slideshow.ss-film .ss-flash.go{animation:ssFlash .36s linear both}
@keyframes ssFlash{0%{opacity:0}30%{opacity:.4}100%{opacity:0}}
/* outgoing frame: wobbles through the gate (like the incoming frame), then ONE blink */
.slideshow.ss-film .ss-slide.ss-film-out{animation:ssFilmOut .44s ease-in both}
@keyframes ssFilmOut{
  0%{opacity:1;transform:scale(1) rotate(0)}
  20%{opacity:.9;transform:scale(1.014) rotate(.24deg)}
  40%{opacity:.55;transform:scale(1.02) rotate(-.2deg)}
  60%{opacity:.22;transform:scale(1.016) rotate(.14deg)}
  80%{opacity:.05;transform:scale(1.01) rotate(-.08deg)}
  100%{opacity:0;transform:scale(1.006) rotate(.04deg)}
}
/* incoming frame: single settle, one gentle gate-weave wobble */
.slideshow.ss-film .ss-slide.ss-film-in{animation:ssFilmIn .5s ease-out both}
@keyframes ssFilmIn{
  0%{opacity:.1;transform:scale(1.02) rotate(.28deg)}
  60%{opacity:.85;transform:scale(1.005) rotate(-.06deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@media (prefers-reduced-motion: reduce){
  .slideshow.ss-film .ss-slide.ss-film-out,.slideshow.ss-film .ss-slide.ss-film-in{animation:none}
}

/* ==================== EXTERNAL LINKS (bottom of article) ==================== */
.article .ext-links{margin-top:28px;padding-top:16px;border-top:1px dashed var(--line)}
.article .ext-links .ext-head{
  font-family:var(--font-pixel);font-size:9px;letter-spacing:.14em;color:var(--dim);margin-bottom:10px;
}
.article .ext-links ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px}
.article .ext-links a{font-family:var(--font-retro);font-size:21px}
.article .ext-links a:hover{color:var(--cyan)}

/* ==================== FOOTER QUIRK LINE (every page) ==================== */
.foot-quirk{
  margin:18px 0 0;text-align:center;
  font-family:var(--font-retro);font-size:19px;color:var(--dim);letter-spacing:.04em;
}
.foot-quirk b{color:var(--green)}
.article pre{
  background:var(--panel);border:1px solid var(--line);padding:16px 18px;
  overflow-x:auto;font-size:13.5px;margin:18px 0;line-height:1.55;
}
.article code{font-family:var(--font-mono);color:var(--cyan);background:rgba(77,216,255,.08);padding:1px 6px}
.article pre code{background:none;padding:0;color:var(--text)}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14px}
.article th{
  font-family:var(--font-retro);font-size:19px;color:var(--green);text-align:left;
  border-bottom:2px solid var(--green);padding:6px 10px;font-weight:400;
}
.article td{border-bottom:1px solid var(--line);padding:7px 10px;color:var(--text)}
.article tr:hover td{background:var(--panel2)}
.article .note{
  border:1px dashed var(--amber);background:rgba(255,216,77,.05);
  padding:14px 18px;margin:20px 0;color:var(--text);
}
.article .note b{color:var(--amber)}
/* "next up" / related links at the bottom of a page */
.next-up{
  margin:44px auto 10px;border:2px solid var(--line);background:var(--panel);
  padding:24px 22px;
  /* same side margin as the body text column, so the box's edges line up with the
     body text at every width (was left-pinned at the viewport edge) */
  width:calc(100% - 2*var(--wrap-pad));
  max-width:calc(var(--colw) - 2*var(--wrap-pad));
}
.next-up h2{
  font-family:var(--font-retro);font-size:26px;color:var(--amber);
  text-shadow:0 0 10px rgba(255,216,77,.4);margin-bottom:12px;font-weight:400;
}
.next-up ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px}
.next-up li a{
  font-family:var(--font-retro);font-size:21px;color:var(--green);text-decoration:none;
}
.next-up li a:hover{color:var(--cyan);text-shadow:0 0 10px var(--glow-cyan)}

/* body-column alignment: the page-head band (crumb/title/lede) and the next-up box
   used to span the full 1120px wrap while the .article text column is 820px, so the
   top and bottom sections never lined up with the body on any width. Now they do. */
.page-head{max-width:var(--colw)}

/* ==================== FOOTER ==================== */
footer.site-footer{margin-top:80px;border-top:2px solid var(--line);background:var(--panel)}
.foot{display:flex;gap:30px;align-items:center;padding:36px 0 24px;flex-wrap:wrap}
.foot .f-logo{width:74px;height:74px;border-radius:50%;overflow:hidden;border:2px solid var(--line);flex:none}
.foot .f-logo img{width:100%;height:100%;object-fit:cover}
.foot .f-main{flex:1;min-width:220px}
.foot .f-main h4{
  font-family:var(--font-retro);font-size:34px;color:var(--green);
  text-shadow:0 0 12px var(--glow-green);font-weight:400;
}
.foot .f-main p{color:var(--dim);font-size:13.5px;margin-top:4px}
.foot .f-main .mail{color:var(--cyan)}
.foot .f-nav{display:flex;flex-direction:column;gap:6px}
.foot .f-nav a{font-family:var(--font-retro);font-size:20px;color:var(--text);text-decoration:none}
.foot .f-nav a:hover{color:var(--green)}
.foot .f-nav .head{font-family:var(--font-pixel);font-size:8px;color:var(--dim);margin-bottom:4px;letter-spacing:.1em}
.foot-bar{
  border-top:1px solid var(--line);padding:16px 0;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--dim);
}
.foot-bar a{color:var(--dim);text-decoration:none}
.foot-bar a:hover{color:var(--green)}

/* ==================== SYSTEM PANEL (task manager + visitor info) ==================== */
.sys{
  margin:26px auto 0;max-width:var(--maxw);
  border:2px solid var(--green);background:var(--panel);
  box-shadow:0 0 30px rgba(53,224,161,.15);
}
.sys-titlebar{
  display:flex;align-items:center;gap:12px;padding:8px 14px;
  background:linear-gradient(90deg, rgba(53,224,161,.16), rgba(53,224,161,.04));
  border-bottom:2px solid var(--line);
  font-family:var(--font-pixel);font-size:9px;color:var(--green);letter-spacing:.12em;
}
.sys-titlebar .led{margin:0 4px 0 0}
.sys-titlebar .sys-ver{color:var(--dim);font-size:8px;margin-left:auto}
.sys-titlebar .sys-btns{
  display:flex;gap:5px;margin-left:10px;
}
.sys-titlebar .sys-btns i{
  width:16px;height:16px;border:1px solid var(--line);color:var(--dim);
  font-style:normal;font-size:10px;line-height:15px;text-align:center;font-family:var(--font-mono);
}
.sys-body{display:grid;grid-template-columns:1.25fr 1fr;gap:0}
.sys-tasks{list-style:none;padding:14px 18px;border-right:1px solid var(--line)}
.sys-tasks li{
  display:flex;align-items:center;gap:10px;padding:6px 0;
  font-family:var(--font-mono);font-size:13.5px;color:var(--text);
}
.sys-tasks .st{margin-left:auto;color:var(--dim);font-family:var(--font-retro);font-size:17px;letter-spacing:.08em}
.sys-tasks .st.run{color:var(--green);text-shadow:0 0 8px var(--glow-green)}
.sys-tasks .st.warn{color:var(--amber)}
.sys-visitor{padding:14px 18px;display:flex;flex-direction:column;justify-content:center}
.sys-visitor .kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--line)}
.sys-visitor .kv:last-child{border-bottom:0}
.sys-visitor .kv span{
  font-family:var(--font-pixel);font-size:8px;color:var(--dim);letter-spacing:.12em;
  align-self:center;
}
.sys-visitor .kv b{font-family:var(--font-retro);font-size:21px;color:var(--cyan);text-shadow:0 0 10px var(--glow-cyan);font-weight:400}
.sys-visitor .kv b.green{color:var(--green);text-shadow:0 0 10px var(--glow-green)}
.sys-visitor .kv b.amber{color:var(--amber);text-shadow:0 0 10px rgba(255,216,77,.4)}
/* status LEDs */
.led{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;animation:ledblink 2.6s steps(2,end) infinite}
.led.g{background:var(--green);box-shadow:0 0 8px var(--glow-green)}
.led.a{background:var(--amber);box-shadow:0 0 8px rgba(255,216,77,.5);animation-duration:1.4s}
.led.c{background:var(--cyan);box-shadow:0 0 8px var(--glow-cyan)}
.led.off{background:var(--dim);box-shadow:none;animation:none}
@keyframes ledblink{50%{opacity:.3}}
/* ==================== ODOMETER VISITOR COUNTER (footer) ==================== */
.odo{display:inline-flex;gap:2px;margin-left:6px;vertical-align:middle}
.odo .d{
  font-family:var(--font-retro);font-size:22px;line-height:1;
  color:var(--green);background:#030806;border:1px solid var(--line);
  padding:3px 5px 1px;box-shadow:inset 0 0 8px rgba(0,0,0,.8),0 0 8px rgba(53,224,161,.25);
  min-width:16px;text-align:center;
}
.foot-bar .counter{font-family:var(--font-retro);font-size:18px;color:var(--green);letter-spacing:.12em}
.foot-bar .counter b{color:var(--amber)}
/* ==================== ARTICLE META LINE ==================== */
.meta-line{
  font-family:var(--font-pixel);font-size:8.5px;color:var(--dim);letter-spacing:.14em;
  margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;
}
.meta-line b{color:var(--green);font-weight:400}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce){
  .marquee .track{animation:none}
  .marquee::after{animation:none;opacity:0}
  .hero-screen .scan{animation:none}
  .led{animation:none}
  html{scroll-behavior:auto}
}

/* ==================== RESPONSIVE ==================== */
@media(max-width:760px){
  .nav{gap:10px}
  .brand{margin-right:0;width:100%}
  .menu{width:100%;justify-content:flex-start}
  .random-btn{margin-left:auto}
  .sub{position:static;min-width:100%;border-color:var(--line);box-shadow:none;margin-top:2px}
  .has-sub:hover > .sub,.has-sub:focus-within > .sub{display:block}
  .about .a-btn{margin-left:0;width:100%}
  .about .btn{width:100%;text-align:center}
  .hero .sub{font-size:15.5px}
}

/* ==================== MOBILE NAV (hamburger + full-screen overlay) ==================== */
.nav-toggle{
  display:none;
  font-family:var(--font-retro);font-size:22px;color:var(--green);
  background:var(--panel);border:2px solid var(--green);padding:5px 18px;
  cursor:pointer;box-shadow:0 0 12px rgba(53,224,161,.25);letter-spacing:.06em;
}
.nav-toggle:hover{background:var(--green);color:#04110b}
.menu-bar{display:none}
body.menu-lock{overflow:hidden}
@media(max-width:900px){
  .nav-toggle{display:inline-block;margin-left:auto}
  /* backdrop-filter would trap position:fixed inside the header; drop it on small screens */
  header.site-header{backdrop-filter:none}
  /* #main-menu is the actual flex item; the <ul class=menu> lives inside it */
  #main-menu{width:100%}
  .menu{
    display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;
    margin-top:12px;padding-top:10px;border-top:2px solid var(--line);
  }
  /* ---- menu OPEN: fixed full-screen overlay that scrolls on its own ---- */
  header.site-header.nav-open #main-menu{
    position:fixed;inset:0;z-index:150;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg);
    box-shadow:inset 0 0 90px rgba(0,0,0,.65);
  }
  header.site-header.nav-open .menu-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:sticky;top:0;z-index:5;
    padding:14px 20px;border-bottom:2px solid var(--line);
    background:linear-gradient(90deg,rgba(53,224,161,.16),rgba(53,224,161,.04));
    font-family:var(--font-pixel);font-size:9px;color:var(--green);letter-spacing:.12em;
  }
  .menu-close{
    font-family:var(--font-retro);font-size:26px;line-height:1;color:var(--pink);
    background:none;border:2px solid var(--pink);width:46px;height:46px;cursor:pointer;
  }
  .menu-close:hover{background:var(--pink);color:#16040c}
  header.site-header.nav-open .menu{margin-top:0;padding-top:8px;border-top:none}
  header.site-header.nav-open ul.menu{display:flex}
  .menu > li{border-bottom:1px solid var(--line);padding:2px 0}
  .menu a{font-size:24px;padding:10px 20px}
  .menu a .caret{display:none}
  .sub{
    display:block;position:static;min-width:0;border:none;box-shadow:none;
    margin:2px 0 10px 18px;padding:0;background:none;
  }
  .sub li{border-bottom:0}
  .sub li a{font-size:20px;padding:8px 20px;color:var(--dim)}
  .sub li a:hover{color:var(--green)}
  .menu .random-btn{
    width:100%;text-align:center;border:0;box-shadow:none;background:none;
    color:var(--amber);font-size:24px;padding:14px 20px;
  }
}
/* narrow screens: keep side margins, stack the task manager, stop text collisions */
@media(max-width:720px){
  .sys-body{grid-template-columns:1fr}
  .sys-tasks{border-right:0;border-bottom:1px solid var(--line)}
  .sys-tasks li{font-size:12.5px}
  .sys-tasks .st{white-space:nowrap}
  .sys-visitor .kv b{font-size:19px}
  .foot-bar{justify-content:center;text-align:center;gap:14px 22px}
}
/* tiny screens: let the task-manager title bar wrap instead of crushing */
@media(max-width:560px){
  .sys-titlebar{flex-wrap:wrap;row-gap:8px;padding:8px 12px}
  .sys-titlebar .sys-ver{margin-left:0}
}


/* ==================== HERO BUSY-NESS: starfield · boot terminal · stamp · live dot ==================== */
/* faint starfield across the whole site (dimden-style depth) */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 22px 34px, rgba(232,246,240,.95), transparent 65%),
    radial-gradient(2.5px 2.5px at 121px 96px, rgba(160,228,255,.85), transparent 65%),
    radial-gradient(3px 3px at 203px 22px, rgba(232,246,240,.75), transparent 65%),
    radial-gradient(1.5px 1.5px at 305px 142px, rgba(255,226,130,.75), transparent 65%),
    radial-gradient(2px 2px at 84px 182px, rgba(232,246,240,.65), transparent 65%),
    radial-gradient(2.5px 2.5px at 342px 64px, rgba(255,158,196,.60), transparent 65%),
    radial-gradient(1.5px 1.5px at 262px 198px, rgba(232,246,240,.55), transparent 65%),
    radial-gradient(2px 2px at 58px 118px, rgba(160,228,255,.55), transparent 65%),
    radial-gradient(1.5px 1.5px at 360px 170px, rgba(232,246,240,.50), transparent 65%);
  background-size:420px 240px;
  opacity:.55;
  animation:starTwinkle 7s ease-in-out infinite;
}
@keyframes starTwinkle{0%,100%{opacity:.40}50%{opacity:.75}}

/* blinking block cursor after the hero title */
.hero h1::after{
  content:"";display:inline-block;width:.45em;height:.7em;margin-left:.15em;
  vertical-align:-.06em;background:var(--green);box-shadow:0 0 16px var(--glow-green);
  animation:cursorBlink 1.1s steps(2,start) infinite;
}
@keyframes cursorBlink{50%{opacity:0}}

/* boot terminal — types itself on load */
.term{
  max-width:620px;margin:30px auto 0;padding:13px 18px;text-align:left;
  border:1px solid var(--line);background:rgba(11,16,13,.72);
  box-shadow:inset 0 0 26px rgba(0,0,0,.45),0 0 20px rgba(53,224,161,.10);
  font-family:var(--font-mono);font-size:13px;line-height:1.85;color:var(--dim);
  letter-spacing:.05em;
}
.term-line{white-space:nowrap;overflow:hidden}
.term .prompt{color:var(--cyan)}
.term .ok{color:var(--green);text-shadow:0 0 8px var(--glow-green)}
.term .status{color:var(--text)}
.term .ch{display:inline-block;opacity:0}
.term .ch.on{opacity:1}
.term-cursor{
  display:inline-block;width:8px;height:14px;margin-left:3px;vertical-align:-2px;
  background:var(--green);box-shadow:0 0 10px var(--glow-green);
  animation:cursorBlink 1s steps(2,start) infinite;
}

/* rotating stamp badge over the hero image */
.hero-fig{position:relative;display:inline-block;margin:44px auto 0}
.hero-fig .hero-screen{margin-top:0}
.stamp{
  position:absolute;top:-28px;right:-10px;width:136px;height:136px;z-index:3;
  animation:stampSpin 40s linear infinite;
  filter:drop-shadow(0 0 12px rgba(53,224,161,.35));
  pointer-events:none;
}
@keyframes stampSpin{to{transform:rotate(360deg)}}

/* LIVE dot on the figure caption */
.live-dot{
  display:inline-block;width:9px;height:9px;margin-right:10px;vertical-align:1px;border-radius:50%;
  background:var(--green);box-shadow:0 0 10px var(--glow-green);
  animation:cursorBlink 1.4s steps(2,start) infinite;
}

@media(max-width:720px){
  .stamp{width:96px;height:96px;top:-16px;right:0}
  .term{margin:24px auto 0}
}

@media (prefers-reduced-motion: reduce){
  body::after,.hero h1::after,.term-cursor,.live-dot,.stamp,.marquee .track,.marquee::after,.hero-screen .scan{animation:none}
  .term .ch{opacity:1}
}

/* ==================== MOON WIDGET (hero figure) ==================== */
.moon-widget{
  position:absolute;top:-26px;left:-36px;width:178px;z-index:3;
  background:rgba(11,16,13,.94);border:2px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.6),0 0 20px rgba(77,216,255,.14);
  pointer-events:none;
}
.mw-titlebar{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  border-bottom:1px solid var(--line);
  font-family:var(--font-pixel);font-size:8px;letter-spacing:.14em;color:var(--cyan);
  background:linear-gradient(90deg,rgba(77,216,255,.16),rgba(77,216,255,.03));
}
.mw-body{display:flex;align-items:center;gap:10px;padding:10px 12px}
.mw-svg{width:62px;height:62px;flex:none;filter:drop-shadow(0 0 10px rgba(200,230,215,.28))}
.mw-info{min-width:0}
.mw-info b{display:block;font-family:var(--font-retro);font-weight:400;font-size:19px;line-height:1.05;color:var(--text);letter-spacing:.04em}
.mw-info span{display:block;margin-top:4px;font-family:var(--font-mono);font-size:11px;color:var(--dim);letter-spacing:.1em}
@media (max-width:720px){
  .moon-widget{top:-16px;left:-8px;width:146px}
  .mw-body{gap:8px;padding:8px 10px}
  .mw-svg{width:46px;height:46px}
  .mw-info b{font-size:15px}
  .mw-info span{font-size:9.5px}
}