/* ============================================================
   ALEXANDRU BADIU — ZX SPECTRUM THEME (shared)
   Black paper, bright-8 accents, rainbow tape border.
   ============================================================ */
:root{
  --bg:#000000;
  --paper:#f6f6f6;
  --ink:#eaeaea;
  --dim:#9a9a9a;
  --faint:#6a6a6a;
  /* Spectrum BRIGHT 8 */
  --s-blue:#0000ff;
  --s-red:#ff0000;
  --s-mag:#ff00ff;
  --s-grn:#00ff00;
  --s-cyan:#00ffff;
  --s-yel:#ffff00;
  --s-wht:#ffffff;
  --accent:var(--s-mag);
  --rule:#262626;
  --card:#0c0c0c;
  /* reading mode (long-form articles) */
  --font-prose:"Newsreader",Georgia,"Times New Roman",serif;
  --bg-read:#0c0c0c;
  --read-measure:100%; /* body fills the reading shell so it aligns with the header */
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  /* anchors .dive-floor to the bottom of the document rather than the viewport */
  position:relative;
  background:var(--bg);
  color:var(--ink);
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;}
em{font-style:italic;color:var(--paper);}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace;}
.pixel{font-family:"Press Start 2P",monospace;line-height:1.5;}

/* ---- Rainbow tape border frame (always-on chrome) ---- */
.tape-frame{position:fixed;inset:0;pointer-events:none;z-index:40;}
.tape-frame .bar{position:absolute;}
.tape-frame .top,.tape-frame .bot{left:0;right:0;height:8px;
  background:repeating-linear-gradient(90deg,
    var(--s-red) 0 14px,var(--s-yel) 14px 28px,var(--s-grn) 28px 42px,var(--s-cyan) 42px 56px);}
.tape-frame .top{top:0;}
.tape-frame .bot{bottom:0;}
.tape-frame .lft,.tape-frame .rgt{top:0;bottom:0;width:8px;
  background:repeating-linear-gradient(0deg,
    var(--s-blue) 0 14px,var(--s-mag) 14px 28px,var(--s-cyan) 28px 42px,var(--s-yel) 42px 56px);}
.tape-frame .lft{left:0;}
.tape-frame .rgt{right:0;}

/* ---- shell ---- */
/* Top padding matches the statusbar's sticky offset (8px), so the header starts
   at its collapsed size instead of drifting up through empty space on scroll. */
.wrap{max-width:820px;margin:0 auto;padding:8px 28px 80px;}
section{margin-top:72px;}

/* ---- status / sub nav ---- */
.statusbar{display:flex;align-items:center;justify-content:space-between;
  gap:14px;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--dim);
  padding:18px 0 12px;border-bottom:1px solid var(--rule);flex-wrap:wrap;
  position:sticky;top:8px;background:var(--bg);z-index:30;}
/* Extend the statusbar's bottom border across the whole viewport as a waterline,
   so the boat in the margin sits on a surface rather than floating. The .wrap is
   centred, so left:50% + margin-left:-50vw + width:100vw spans edge to edge; it
   rides the sticky statusbar automatically and stays flush with the border. */
.statusbar::after{content:"";position:absolute;bottom:-1px;left:50%;margin-left:-50vw;
  width:100vw;height:1px;background:var(--rule);pointer-events:none;}
.statusbar .left{display:flex;align-items:center;gap:10px;min-width:0;}
.statusbar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--dim);}
.statusbar .brand:hover{color:var(--s-yel);}
.blink{width:9px;height:14px;background:var(--s-grn);display:inline-block;
  animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0;}}
.statusbar .grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.statusbar button,.navlink{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;
  background:transparent;color:var(--dim);border:1px solid var(--rule);
  padding:5px 10px;cursor:pointer;letter-spacing:.04em;text-decoration:none;display:inline-block;}
.statusbar button:hover,.navlink:hover{color:var(--bg);background:var(--s-yel);border-color:var(--s-yel);}
.navlink.active{color:var(--bg);background:var(--accent);border-color:var(--accent);}

/* ---- avatar dither block ---- */
.avatar{flex:0 0 auto;width:128px;height:128px;position:relative;
  border:3px solid var(--ink);image-rendering:pixelated;background:var(--card);}
.avatar canvas{display:block;width:100%;height:100%;image-rendering:pixelated;}
.avatar .tag{position:absolute;bottom:-1px;left:-1px;
  font-family:"Press Start 2P",monospace;font-size:7px;color:var(--bg);
  background:var(--s-yel);padding:4px 5px;letter-spacing:.05em;}

/* ---- page head ---- */
.page-head{margin-top:52px;}
.eyebrow{font-family:"Spline Sans Mono",ui-monospace,monospace;font-weight:600;font-size:12.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--s-mag);margin-bottom:16px;
  display:flex;align-items:center;gap:9px;}
.eyebrow::before{content:"";width:9px;height:9px;background:var(--s-mag);flex:0 0 auto;}
.page-head h1{font-family:"Press Start 2P",monospace;font-size:24px;line-height:1.4;margin:0 0 18px;
  color:var(--paper);text-shadow:3px 3px 0 var(--s-blue);}
.blurb{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:16px;line-height:1.7;color:var(--dim);margin:0;}

/* shared link style in prose */
.linkish,.prose a,.blurb a,.now-block a,.now-foot a,.writing-foot a{
  color:var(--s-cyan);text-decoration:none;border-bottom:2px solid var(--s-cyan);padding-bottom:1px;}
.linkish:hover,.prose a:hover,.blurb a:hover,.now-block a:hover,.now-foot a:hover,.writing-foot a:hover{
  color:var(--bg);background:var(--s-cyan);}

/* ---- section label ---- */
.slabel{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.slabel .k{font-family:"Press Start 2P",monospace;font-size:11px;color:var(--bg);
  background:var(--accent);padding:7px 9px;letter-spacing:.05em;white-space:nowrap;}
.slabel h2,.slabel h3{font-family:"Spline Sans Mono",ui-monospace,monospace;font-weight:700;font-size:20px;margin:0;color:var(--paper);}
.slabel .line{flex:1;height:2px;background:repeating-linear-gradient(90deg,var(--rule) 0 6px,transparent 6px 12px);}

/* ---- prose ---- */
.prose p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 20px;}
.prose p:last-child{margin-bottom:0;}

/* ---- timeline (bio) ---- */
.timeline{border-left:2px solid var(--rule);padding-left:26px;margin-left:6px;display:flex;flex-direction:column;gap:30px;}
.tl-entry{position:relative;}
.tl-entry::before{content:"";position:absolute;left:-33px;top:6px;width:10px;height:10px;
  background:var(--rule);}
.tl-entry.current::before{background:var(--s-grn);box-shadow:0 0 0 3px rgba(0,255,0,.18);}
.tl-when{font-family:"Press Start 2P",monospace;font-size:10px;color:var(--s-yel);margin-bottom:10px;letter-spacing:.04em;}
.tl-entry.current .tl-when{color:var(--s-grn);}
.tl-entry p{margin:0;font-size:16px;line-height:1.7;color:var(--dim);}

/* ---- posts mini (bio) ---- */
.posts-mini{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.posts-mini li{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--rule);}
.pm-date{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--faint);}
.pm-title{font-size:16px;color:var(--ink);}
.posts-mini li.draft .pm-title{color:var(--dim);}
.pm-meta{font-family:"Press Start 2P",monospace;font-size:8px;color:var(--bg);background:var(--s-cyan);padding:4px 6px;letter-spacing:.04em;}
.posts-mini li.draft .pm-meta{background:var(--rule);color:var(--dim);}
.writing-foot{margin-top:24px;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:13px;color:var(--dim);}

/* ---- now blocks ---- */
.now-block{margin-top:44px;}
.now-block h3{font-family:"Press Start 2P",monospace;font-size:12px;color:var(--s-mag);margin:0 0 16px;letter-spacing:.04em;}
.now-block p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 16px;}
.now-block p:last-child{margin-bottom:0;}
.now-stamp{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--faint);
  display:flex;align-items:center;gap:8px;}
.now-stamp .pulse{width:8px;height:8px;background:var(--s-grn);animation:blink 1.4s steps(2) infinite;}
.now-foot{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule);
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:13px;color:var(--dim);line-height:1.8;}

/* ---- uses lists ---- */
.uses-group{margin-top:44px;}
.uses-group h3{font-family:"Press Start 2P",monospace;font-size:12px;color:var(--s-yel);margin:0 0 18px;letter-spacing:.04em;}
.uses-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);}
.uses-list li{display:grid;grid-template-columns:230px 1fr;gap:18px;padding:16px 4px;border-bottom:1px solid var(--rule);align-items:baseline;}
.u-name{font-weight:600;color:var(--paper);font-size:16px;}
.u-note{font-size:14.5px;color:var(--dim);line-height:1.6;}
.u-note .since{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);margin-left:8px;
  border:1px solid var(--rule);padding:2px 6px;white-space:nowrap;}

/* ---- contact ---- */
.cmail{margin-top:44px;display:flex;flex-direction:column;gap:12px;}
.cmail-label{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.07em;}
.cmail a{font-family:"Press Start 2P",monospace;font-size:20px;line-height:1.5;color:var(--s-cyan);
  text-decoration:none;border-bottom:3px solid var(--s-cyan);padding-bottom:6px;width:fit-content;
  word-break:break-all;}
.cmail a:hover{color:var(--bg);background:var(--s-cyan);}
@media (max-width:640px){.cmail a{font-size:13px;}}
.calt{margin-top:48px;padding-top:28px;border-top:1px solid var(--rule);}
.alt-links{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:16px;}
.alt{display:flex;flex-direction:column;gap:6px;}
.alt-label{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.07em;}
.alt a{color:var(--s-cyan);text-decoration:none;border-bottom:1px solid var(--s-cyan);width:fit-content;font-size:16px;}
.alt-note{font-size:13px;color:var(--dim);}

/* ---- projects page ---- */
.project-list{display:flex;flex-direction:column;border-top:2px solid var(--rule);margin-top:8px;}
/* scroll-margin clears the sticky statusbar when arriving on a #project anchor. */
.project-entry{display:grid;grid-template-columns:170px 1fr;gap:28px;padding:32px 4px;border-bottom:2px solid var(--rule);
  scroll-margin-top:84px;}
/* The last entry's rule would sit just above the .now-foot rule with only blank
   space between the two, so let the foot's border close the list instead. */
.project-entry:last-child{border-bottom:none;}
.project-entry:target{background:var(--card);box-shadow:-14px 0 0 var(--card),14px 0 0 var(--card);}
.project-entry:target .pe-name{color:var(--accent);}
.pe-thumb canvas{width:170px;height:114px;border:2px solid var(--rule);image-rendering:pixelated;display:block;}
.pe-idx{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--faint);margin-top:12px;letter-spacing:.04em;}
.pe-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px;}
.pe-name{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--paper);margin:0;line-height:1.5;}
.pe-status{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;
  padding:4px 8px;text-transform:uppercase;white-space:nowrap;}
.pe-status.active{background:var(--s-grn);color:var(--bg);}
.pe-status.wip{background:var(--s-yel);color:var(--bg);}
.pe-status.archived{background:var(--rule);color:var(--dim);}
.pe-meta{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--faint);
  margin-bottom:14px;display:flex;gap:9px;flex-wrap:wrap;align-items:center;}
.pe-meta .dot{color:var(--s-cyan);}
.pe-desc{font-size:15px;color:var(--dim);line-height:1.7;margin:0 0 16px;max-width:60ch;}
.pe-stack{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.pe-stack span{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--ink);
  border:1px solid var(--rule);padding:4px 9px;}
.pe-links{display:flex;gap:20px;flex-wrap:wrap;}
.pe-links a{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:13px;color:var(--s-cyan);
  text-decoration:none;border-bottom:2px solid var(--s-cyan);padding-bottom:1px;}
.pe-links a:hover{color:var(--bg);background:var(--s-cyan);}
@media (max-width:640px){
  .project-entry{grid-template-columns:1fr;gap:16px;}
  .pe-thumb canvas{width:100%;height:120px;}
  .pe-idx{display:none;}
}

/* ---- doors ---- */
.doors{display:flex;flex-direction:column;border-top:2px solid var(--rule);}
.door{display:flex;align-items:center;gap:18px;padding:22px 6px;text-decoration:none;
  border-bottom:2px solid var(--rule);transition:padding-left .15s ease,background .15s ease;}
.door:hover{padding-left:20px;background:linear-gradient(90deg,rgba(255,0,255,.08),transparent);}
.door .num,.door .door-num{font-family:"Press Start 2P",monospace;font-size:13px;color:var(--s-mag);min-width:34px;}
.door .body,.door .door-body{flex:1;display:flex;flex-direction:column;}
.door .kick,.door .door-kicker{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
.door .ttl,.door .door-title{font-family:"Spline Sans Mono",ui-monospace,monospace;font-weight:700;font-size:19px;color:var(--paper);}
.door .dsc,.door .door-desc{font-size:14px;color:var(--dim);margin-top:5px;}
.door .arr,.door .door-arrow{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--s-cyan);}

/* ---- footer ---- */
/* ---- decorative diving scene (Glug Glug, CRL 1984) ---- */
/* Purely ornamental: everything below is aria-hidden and pointer-events:none.
   Sprites are extracted by scripts/extract_sprites.py and scaled x3 with
   nearest-neighbour, so 16x32 diver -> 48x96 etc. The rail is a centred box the
   same width as .wrap, so sprites can be pinned just outside the text column
   with right:calc(100% + Npx) and never overlap content. */
.dive{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden;display:none;}
/* The rail holds the boat, hose and diver; on load it sails in from the left as
   one piece so the hose stays attached. The children's own transforms (scroll
   descent, header tracking) compose under this. .dive clips it while off-screen. */
.dive-rail{position:absolute;left:50%;top:0;bottom:0;width:820px;margin-left:-410px;}
/* Start value is viewport-relative so the boat begins just off the left edge on
   any width (the boat's right edge rests at 50vw-458px; -50vw+440px clears it). */
@keyframes rig-in{from{transform:translate3d(calc(-50vw + 440px),0,0);}to{transform:translate3d(0,0,0);}}
.dive img{display:block;image-rendering:pixelated;}
/* All sprites scale x2 (native px -> display px). The statusbar's bottom border
   is the waterline: the pink cabin rides above it, the green hull below. The boat
   is 40x16 -> 80x32, split evenly, so top:52 puts that split on the ~68px border
   (the header now starts collapsed, 22px higher than before). */
.dive-boat{position:absolute;right:calc(100% + 48px);top:52px;width:80px;height:32px;}
/* Clip runs from just under the hull to the foot of the viewport; the hose is a
   tall strip inside it whose bottom edge is translated up to the diver, so the
   dot pattern never stretches. Boat, hose and helmet centre all land at the same
   x: the diver's helmet sits 9px into its box and the boat's hose nub 13px into
   its, so the offsets below put all three at 115px from the content edge. */
.dive-hose-clip{position:absolute;right:calc(100% + 114px);top:84px;bottom:0;width:2px;overflow:hidden;}
.dive-hose{position:absolute;left:0;bottom:0;width:2px;height:300vh;
  background:repeating-linear-gradient(to bottom,var(--s-yel) 0 2px,transparent 2px 4px);
  will-change:transform;}
.dive-diver{position:absolute;right:calc(100% + 92px);top:98px;width:32px;height:64px;
  will-change:transform;}
/* Seabed and treasure are anchored to the document, not the viewport, so they
   sit at the true bottom of the page. */
.dive-floor{position:absolute;left:0;right:0;bottom:0;height:16px;z-index:0;
  pointer-events:none;background:url("/seabed.png") repeat-x left bottom;background-size:16px 16px;
  image-rendering:pixelated;}
/* All three seabed treasures, resting in a row on the floor in the right margin,
   opposite the diver. Anchored 20px past the content column so they never touch
   text; they need a wider viewport than the diver/boat, hence the 1320 gate. */
.dive-hoard{position:absolute;left:50%;margin-left:420px;bottom:16px;
  display:flex;gap:12px;align-items:flex-end;display:none;}
.dive-hoard img{display:block;image-rendering:pixelated;}
.dive-t1{width:48px;height:32px;}
.dive-t2{width:32px;height:32px;}
.dive-t3{width:48px;height:32px;}
@media (min-width:1200px){.dive{display:block;}}
@media (min-width:1320px){.dive-hoard{display:flex;}}
/* Fish sit at fixed points down the page, in the right margin just past the
   content column (left:50% + 420px clears the 820px column). Anchored to the
   document so they scroll with the page; each drifts a few px very slowly, out
   of sync via animation-delay. */
.dive-school{position:absolute;top:0;left:0;right:0;height:100%;z-index:0;
  pointer-events:none;overflow:hidden;display:none;}
/* Inner wrapper carries the load-time slide-in from the right, kept separate
   from the fish so their drift transform isn't overwritten. */
.dive-shoal{position:absolute;inset:0;}
/* Mirror of the boat: start just off the right edge on any width (the leftmost
   fish rests at 50vw+428px; 50vw-408px pushes it past the viewport). */
@keyframes shoal-in{from{transform:translate3d(calc(50vw - 408px),0,0);}to{transform:translate3d(0,0,0);}}
.dive-fish{position:absolute;left:50%;width:48px;height:32px;image-rendering:pixelated;
  animation:fish-drift 17s ease-in-out infinite;}
/* x staggered so the three don't sit on one vertical line (safe band at 1200px
   is roughly margin-left 412-544: clears the content column, no overflow). */
.dive-fish-1{top:24%;margin-left:428px;}
.dive-fish-2{top:49%;margin-left:522px;animation-delay:-6s;}
.dive-fish-3{top:73%;margin-left:462px;animation-delay:-11s;}
@keyframes fish-drift{0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(-5px,2px,0);}}
@media (min-width:1200px){.dive-school{display:block;}}
/* The slide-in is attached to the reveal state, not paused/resumed, so it
   restarts cleanly every time the page is revealed. The home page reveals when
   the tape loader finishes (body gets .revealed); other pages carry .no-loader
   and reveal at once. Guarded by no-preference so reduced-motion skips it and
   the sprites simply appear in place. Replaying the tape re-runs the entrance. */
@media (prefers-reduced-motion:no-preference){
  .revealed .dive-rail,.no-loader .dive-rail{
    animation:rig-in 2.8s cubic-bezier(.2,.75,.3,1) both;}
  .revealed .dive-shoal,.no-loader .dive-shoal{
    animation:shoal-in 2.8s cubic-bezier(.2,.75,.3,1) .2s both;}
}
/* No scroll-driven movement: the diver stays where it starts, hose stays short,
   and the fish hold still. */
@media (prefers-reduced-motion:reduce){
  .dive-diver,.dive-hose{transform:none !important;}
  .dive-fish{animation:none;}
  /* The slide-in is only defined under no-preference, so nothing to disable. */
}
.foot-credit{margin-top:14px;font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:11px;color:var(--faint);line-height:1.6;}
.foot{margin-top:64px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--faint);}
.foot a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--rule);}
.foot a:hover{color:var(--s-yel);border-color:var(--s-yel);}

/* ---- entrance ---- */
.enter{opacity:0;transform:translateY(10px);}
.revealed .enter,.no-loader .enter{animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes rise{to{opacity:1;transform:none;}}

@media (max-width:640px){
  .uses-list li{grid-template-columns:1fr;gap:6px;}
  .posts-mini li{grid-template-columns:1fr;gap:6px;}
  .alt-links{grid-template-columns:1fr;}
  .page-head h1{font-size:19px;}
  .statusbar{position:static;}
}
@media (prefers-reduced-motion:reduce){
  .enter{opacity:1;transform:none;animation:none;}
}

/* ============================================================
   READING MODE — long-form articles ("Writing")
   The 8-bit chrome (tape frame, status bar, pixel eyebrows)
   still frames the page, but the reading surface itself is
   calm: softer paper, a proportional serif, generous measure.
   ============================================================ */
body.read{background:var(--bg-read);}

/* reading pages share the same shell width as the rest of the site */

/* ---- article header ---- */
.article-head{margin-top:44px;padding-bottom:26px;border-bottom:2px solid var(--rule);}
.article-head .eyebrow{margin-bottom:20px;}
.article-title{font-family:var(--font-prose);font-weight:600;font-size:42px;line-height:1.12;
  letter-spacing:-.015em;color:var(--paper);margin:0 0 22px;text-wrap:balance;}
.article-standfirst{font-family:var(--font-prose);font-size:22px;line-height:1.5;color:var(--dim);
  margin:0 0 26px;max-width:var(--read-measure);font-style:italic;}
.article-meta{display:flex;gap:11px;flex-wrap:wrap;align-items:center;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12.5px;color:var(--faint);}
.article-meta .dot{color:var(--s-cyan);}
.article-meta .tag{color:var(--s-yel);}
.article-meta .byline{color:var(--dim);}

/* ---- article body: the comfortable reading column ---- */
.article-body{font-family:var(--font-prose);font-size:20px;line-height:1.75;color:var(--ink);
  max-width:var(--read-measure);margin:36px 0 0;}
.article-body > *{max-width:var(--read-measure);}
.article-body p{margin:0 0 24px;}
.article-body h2{font-family:var(--font-prose);font-weight:600;font-size:27px;line-height:1.25;
  color:var(--paper);margin:52px 0 16px;padding-left:16px;border-left:4px solid var(--accent);}
.article-body h3{font-family:var(--font-prose);font-weight:600;font-size:21px;line-height:1.3;
  color:var(--paper);margin:40px 0 12px;}
.article-body a{color:var(--s-cyan);text-decoration:none;border-bottom:2px solid var(--s-cyan);padding-bottom:1px;}
.article-body a:hover{color:var(--bg);background:var(--s-cyan);}
.article-body strong{font-weight:700;color:var(--paper);}
.article-body em{font-style:italic;color:var(--paper);}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:24px;}
.article-body li{margin-bottom:10px;padding-left:4px;}
.article-body li::marker{color:var(--s-mag);}
.article-body hr{border:none;border-top:2px dashed var(--rule);margin:44px 0;max-width:var(--read-measure);}

/* pull quote — big, cyan, still serif */
.article-body blockquote{margin:36px 0;padding:6px 0 6px 24px;border-left:3px solid var(--s-mag);}
.article-body blockquote p{font-family:var(--font-prose);font-style:italic;font-size:24px;line-height:1.45;
  color:var(--paper);margin:0;}
.pullquote{font-family:var(--font-prose);font-style:italic;font-size:27px;line-height:1.35;
  color:var(--s-cyan);margin:44px 0;padding:0;border:none;text-wrap:balance;}

/* inline + block code — mono, terminal-flavoured */
.article-body code{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:.8em;
  background:#141414;border:1px solid var(--rule);padding:1px 6px;color:var(--s-cyan);}
.article-body pre{background:var(--card);border:2px solid var(--rule);padding:20px 22px;
  overflow-x:auto;margin:0 0 26px;}
.article-body pre code{background:none;border:none;padding:0;color:var(--ink);
  font-size:13.5px;line-height:1.7;display:block;}

/* figures */
.article-body figure{margin:36px 0;}
.article-body figure canvas,.article-body figure img{display:block;width:100%;
  border:2px solid var(--rule);image-rendering:pixelated;}
.article-body figcaption{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12.5px;
  color:var(--faint);margin-top:12px;text-align:center;line-height:1.6;}

/* article footer: prev/next + back to writing */
.article-foot{margin-top:56px;padding-top:26px;border-top:2px solid var(--rule);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:13px;}
.article-foot a{color:var(--s-cyan);text-decoration:none;border-bottom:1px solid var(--s-cyan);padding-bottom:1px;}
.article-foot a:hover{color:var(--bg);background:var(--s-cyan);}
.article-foot .nx{text-align:right;}
.article-foot .nx-kick,.article-foot .pv-kick{display:block;font-size:10px;color:var(--faint);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;border:none;}

/* ---- WRITING index (article listing) ---- */
.writing-list{display:flex;flex-direction:column;border-top:2px solid var(--rule);margin-top:8px;}
.wl-entry{display:grid;grid-template-columns:118px 1fr;gap:26px;padding:30px 6px;
  border-bottom:2px solid var(--rule);text-decoration:none;
  transition:padding-left .15s ease,background .15s ease;}
.wl-entry:hover{padding-left:18px;background:linear-gradient(90deg,rgba(255,0,255,.07),transparent);}
.wl-date{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--s-yel);
  line-height:1.7;margin-top:6px;letter-spacing:.03em;}
.wl-entry.draft .wl-date{color:var(--faint);}
.wl-title{font-family:var(--font-prose);font-weight:600;font-size:25px;line-height:1.2;
  color:var(--paper);margin:0 0 10px;letter-spacing:-.01em;}
.wl-entry.draft .wl-title{color:var(--dim);}
.wl-excerpt{font-family:var(--font-prose);font-size:16.5px;line-height:1.6;color:var(--dim);
  margin:0 0 14px;max-width:58ch;}
.wl-meta{display:flex;gap:11px;flex-wrap:wrap;align-items:center;
  font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--faint);}
.wl-meta .tag{color:var(--s-cyan);}
.wl-meta .dot{color:var(--rule);}
.wl-meta .badge{color:var(--bg);background:var(--rule);padding:3px 7px;
  font-size:10px;letter-spacing:.04em;}
.wl-entry.draft .wl-meta .badge{background:var(--s-yel);color:var(--bg);}

@media (max-width:640px){
  .wl-entry{grid-template-columns:1fr;gap:10px;}
  .article-title{font-size:30px;}
  .article-body{font-size:17.5px;}
}