/* ============================================================
   Blog — extends assets/styles.css. Tokens are inherited; nothing
   here redefines a palette value.
   ============================================================ */

.sub-nav{position:sticky;top:0;z-index:40;display:flex;gap:20px;align-items:center;
  padding:16px 24px;background:rgba(10,11,9,.86);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--line)}
.sub-nav a{color:var(--muted);text-decoration:none;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sub-nav a:hover{color:var(--lime)}
/* a shell command, so it keeps its own case against the nav's uppercasing */
.sub-nav a.cmd{text-transform:none;letter-spacing:.06em}
.sub-nav .home{color:var(--text);font-family:var(--font-display);font-size:14px;
  letter-spacing:.04em;margin-right:auto;text-transform:none}
.sub-nav .home span{color:var(--lime)}

.page-intro{max-width:var(--maxw);margin:0 auto;padding:46px 24px 0}
.page-intro h1{font-family:var(--font-display);font-size:clamp(32px,6vw,58px);
  color:var(--text);margin:8px 0 0;line-height:1}
.page-intro p{color:var(--muted);max-width:60ch;margin-top:14px;font-size:17px;line-height:1.6}

/* ==========================================================================
   BACKGROUND STACK
   Four layers, back to front: the photo, the scanline sheet that pulls it
   toward the site's greens, a scrim that buys back the contrast the photo
   costs, and the mesh on top so its lines stay crisp against all of it.
   Fixed, so it holds still while the page scrolls over it.
   ========================================================================== */
.bgstack{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgstack > *{position:absolute;inset:0}
/* the source is a bright blue sky, so it is desaturated and darkened rather
   than hue-rotated: rotating blue by enough to reach green lands on violet */
.bg-photo{background:url("/assets/blog-bg.jpg") center/cover no-repeat;
  filter:saturate(.20) brightness(.36) contrast(1.06)}
.bg-over{background:url("/assets/crt-overlay.jpg") center/cover no-repeat;
  mix-blend-mode:overlay;opacity:.34}
.bg-scrim{background:
  radial-gradient(ellipse 120% 85% at 50% 42%,rgba(12,18,8,.24),rgba(10,11,9,.84) 80%),
  linear-gradient(180deg,rgba(10,11,9,.74),rgba(14,22,10,.52) 42%,rgba(10,11,9,.90))}
#mesh{display:block;width:100%;height:100%;pointer-events:auto;cursor:crosshair}
/* anything that is not background has to sit above it */
.page-intro,.section,.post{position:relative;z-index:1}

/* ---------- index: the shard rack ----------
   The notch is drawn by clipping a 1px plate and insetting the panel on top of
   it. A clip-path cuts the border off with the corner, so the plate showing
   through IS the hairline, diagonals included. */
.rack{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;
  list-style:none;margin:0;padding:0}
.shard{display:block;background:var(--line-2);padding:1px;
  --notch:16px;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,
    var(--notch) 100%,0 calc(100% - var(--notch)));
  transition:background .18s}
.shard:hover,.shard:focus-visible{background:var(--lime);outline:0}
.shard__in{display:block;position:relative;overflow:hidden;background:var(--panel);
  padding:18px 19px 16px;
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),100% 100%,
    var(--notch) 100%,0 calc(100% - var(--notch)));
  transition:background .18s}
.shard:hover .shard__in{background:var(--panel-2)}
/* a band parked off the top edge; it only travels on hover */
.shard__in::after{content:"";position:absolute;left:0;right:0;top:-60%;height:60%;
  pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(195,245,58,0),rgba(195,245,58,.13),rgba(195,245,58,0))}
.shard:hover .shard__in::after{opacity:1;animation:sweep .85s ease-out}
@keyframes sweep{from{transform:translateY(0)}to{transform:translateY(280%)}}

.shard__top{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.shard__id{color:var(--dim)}
.state{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--dim)}
.state .tick{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.shard.is-new .state{color:var(--lime)}
.shard.is-new .state .tick{background:var(--lime);box-shadow:0 0 9px var(--lime);
  animation:blip 1.9s infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.25}}

.cap{display:block;margin:13px 0 15px;height:5px;
  background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 6px)}
.cap i{display:block;height:100%;
  background:repeating-linear-gradient(90deg,var(--lime) 0 3px,transparent 3px 6px)}

.shard h2{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--text);
  margin:0;line-height:1.24;letter-spacing:-.01em;text-wrap:balance;transition:color .18s}
.shard:hover h2{color:var(--lime)}
.shard h2 .g{color:var(--teal)}
.shard p{margin:9px 0 0;font-size:15.5px;color:var(--muted);line-height:1.55}
.keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}
.pt{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:4px;padding:2px 7px}
.shard__foot{display:flex;align-items:baseline;gap:12px;margin-top:15px;padding-top:12px;
  border-top:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.mount{margin-left:auto;color:var(--lime)}
.empty{color:var(--muted);font-size:16px}

/* the punctuation in the masthead is a trigger; it should invite a press
   without announcing what it does */
.egg{font:inherit;color:var(--lime);background:none;border:0;padding:0 0 0 .06em;
  cursor:pointer;line-height:inherit;transition:opacity .15s}
.egg:hover{opacity:.66}
.empty code{font-family:var(--font-mono);font-size:14px;color:var(--lime);
  background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:2px 6px}

/* ---------- post ---------- */
.post{max-width:760px;margin:0 auto;padding:46px 24px 90px}
.post__back{font-family:var(--font-mono);font-size:12px;color:var(--dim);text-decoration:none;
  letter-spacing:.08em}
.post__back:hover{color:var(--lime)}
.post__head h1{font-family:var(--font-display);font-size:clamp(30px,5.2vw,46px);color:var(--text);
  line-height:1.08;margin:16px 0 0;letter-spacing:-.015em;text-wrap:balance}
.post__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;
  font-family:var(--font-mono);font-size:12px;color:var(--dim);letter-spacing:.04em}
.post__meta .dot{opacity:.5}
.post__tags{display:flex;gap:6px;flex-wrap:wrap}
.post__head{padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:34px}

/* Long-form reading column. Measure is the point: ~68 characters. */
.prose{color:var(--muted);font-size:17.5px;line-height:1.75}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 22px;max-width:68ch}
.prose h2{font-family:var(--font-display);font-size:26px;color:var(--text);margin:44px 0 14px;
  line-height:1.2;letter-spacing:-.01em}
.prose h3{font-family:var(--font-display);font-size:20px;color:var(--text);margin:34px 0 12px}
.prose h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lime);margin:30px 0 10px}
.prose a{color:var(--teal);text-decoration:none;border-bottom:1px solid rgba(41,193,214,.35)}
.prose a:hover{border-bottom-color:var(--teal)}
.prose strong{color:var(--text);font-weight:600}
.prose em{color:var(--text)}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px;max-width:68ch}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--lime)}
.prose blockquote{margin:26px 0;padding:2px 0 2px 20px;border-left:2px solid var(--lime);
  color:var(--text);font-size:18px;line-height:1.65}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:var(--font-mono);font-size:14.5px;color:var(--lime);
  background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.prose pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;overflow-x:auto;margin:0 0 24px;line-height:1.55}
.prose pre code{background:none;border:0;padding:0;color:var(--muted);font-size:13.5px}
.prose hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.prose img{max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px;display:block;
  overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:9px 13px;text-align:left}
.prose th{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);background:var(--panel)}
.prose figcaption{font-family:var(--font-mono);font-size:12px;color:var(--dim);margin-top:8px}

.post__foot{display:flex;gap:14px;flex-wrap:wrap;margin-top:52px;padding-top:26px;
  border-top:1px solid var(--line)}


/* ==========================================================================
   READER CHROME
   Code becomes a recovered fragment, a quote becomes flagged evidence, and the
   post closes on who wrote it and what he is doing now.
   ========================================================================== */
.frag{position:relative;margin:0 0 24px;background:var(--bg-2);border:1px solid var(--line)}
.frag::before,.frag::after{content:"";position:absolute;width:11px;height:11px;
  border:1px solid var(--lime);pointer-events:none}
.frag::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frag::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.frag__bar{display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.frag__bar .ext{margin-left:auto;color:var(--lime);letter-spacing:.14em;
  background:none;border:0;font:inherit;cursor:pointer}
.frag__bar .ext:hover{color:var(--lime-hot)}
.prose .frag pre{margin:0;border:0;border-radius:0;background:none}

.flag{margin:26px 0;padding:14px 18px;background:var(--panel);
  border-left:2px solid var(--teal)}
.flag .lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal);display:block;margin-bottom:7px}
.flag p{margin:0;color:var(--text);font-size:17px}
.flag p:last-child{margin-bottom:0}

.op{margin-top:52px;background:var(--line-2);padding:1px;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.op__in{background:var(--panel);padding:20px 22px;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.op__sig{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--line-2);
  font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--lime)}
.op__lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.op__name{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--text);
  margin-top:3px}
.op__now{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:9px;
  line-height:1.7}
.op__now b{color:var(--lime);font-weight:400}
.op__links{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em}
.op__links a{color:var(--teal)}
.op__links a:hover{color:var(--lime)}

/* ==========================================================================
   THE EGG
   Deliberately not in the site's design language: a 2000s joke popup looked
   like the OS it hijacked, so it gets period chrome and system fonts. The
   clash with everything else is the point.
   ========================================================================== */
.idiot{position:fixed;inset:0;z-index:200;display:none;overflow:hidden}
.idiot.on{display:block}
.win{position:absolute;width:230px;background:#c0c0c0;
  border:2px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;box-shadow:1px 1px 0 #000;
  font-family:'MS Sans Serif',Tahoma,Geneva,Verdana,sans-serif}
.win__bar{display:flex;align-items:center;gap:6px;padding:2px 3px;
  background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-size:11px;font-weight:700}
.win__bar span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__x{width:15px;height:14px;background:#c0c0c0;color:#000;
  border:1px solid;border-color:#dfdfdf #808080 #808080 #dfdfdf;
  font-size:9px;font-weight:700;line-height:1;display:grid;place-items:center;cursor:pointer}
/* the plate is the image, which animates itself; the body is only a frame */
.win__body{background:#000;padding:0;line-height:0}
.win__body img{display:block;width:100%;height:auto}
/* a still stand-in, for anyone who asked not to be shown motion */
.win__body.still{padding:16px 10px 18px;text-align:center;line-height:normal}
.win__body.still .txt{font-family:'Times New Roman',Times,serif;font-size:23px;color:#fff;
  line-height:1.05}
.win__body.still .faces{display:flex;justify-content:center;gap:15px;margin-top:15px}
.win__body.still .face{width:36px;height:36px;border-radius:50%;position:relative;
  border:2.5px solid #fff}
.win__body.still .face::before,.win__body.still .face::after{content:"";position:absolute;
  top:8px;width:8px;height:8px;border-radius:50%;border:2px solid #fff;box-sizing:border-box}
.win__body.still .face::before{left:5px}
.win__body.still .face::after{right:5px}
.win__body.still .face i{position:absolute;left:5px;right:5px;bottom:6px;height:11px;
  border:0 solid #fff;border-bottom-width:2.5px;border-radius:0 0 80% 80%}

.kidding{position:fixed;inset:0;z-index:210;display:none;place-items:center;
  background:var(--bg);text-align:center;padding:24px}
.kidding.on{display:grid}
.kidding p{font-family:var(--font-display);font-weight:700;color:var(--lime);
  font-size:clamp(30px,7vw,64px);margin:0;letter-spacing:-.02em}

@media (prefers-reduced-motion:reduce){
  .shard__in::after,.shard.is-new .state .tick{animation:none}
}