/* ============================================================
   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;
  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 ---- */
.wrap{max-width:820px;margin:0 auto;padding:30px 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;}
.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:var(--font-prose);font-size:22px;line-height:1.5;color:var(--dim);margin:0;max-width:60ch;}

/* 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 form ---- */
.cform{display:flex;flex-direction:column;gap:28px;margin-top:8px;}
.cfield label{display:block;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.cfield .req{color:var(--s-red);margin-left:3px;}
.topics{display:flex;flex-wrap:wrap;gap:9px;}
.topic-btn{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:13px;background:transparent;color:var(--dim);
  border:1px solid var(--rule);padding:8px 13px;cursor:pointer;}
.topic-btn:hover{border-color:var(--s-cyan);color:var(--s-cyan);}
.topic-btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg);}
.cfield input,.cfield textarea{width:100%;background:var(--card);border:2px solid var(--rule);
  color:var(--paper);font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:16px;padding:13px 14px;}
.cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--s-cyan);}
.cfield textarea{resize:vertical;}
.cfield.error input,.cfield.error textarea{border-color:var(--s-red);}
.err-msg{display:none;font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:12px;color:var(--s-red);margin-top:8px;}
.cfield.error .err-msg{display:block;}
.char-count{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);text-align:right;margin-top:6px;}
.char-count.warn{color:var(--s-red);}
.csubmit{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.priv{font-family:"Spline Sans Mono",ui-monospace,monospace;font-size:11px;color:var(--faint);max-width:38ch;line-height:1.6;}
.btn-send{font-family:"Press Start 2P",monospace;font-size:11px;background:var(--s-grn);color:var(--bg);
  border:none;padding:14px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;letter-spacing:.04em;}
.btn-send:hover{background:var(--s-cyan);}
.btn-send .arrow{font-size:13px;}
.btn-send .spinner{display:none;width:12px;height:12px;border:2px solid rgba(0,0,0,.3);border-top-color:var(--bg);border-radius:50%;animation:spin .6s linear infinite;}
.btn-send.loading .spinner{display:inline-block;}
.btn-send.loading .label,.btn-send.loading .arrow{opacity:.5;}
@keyframes spin{to{transform:rotate(360deg);}}
.csuccess{border:2px solid var(--s-grn);padding:32px;text-align:center;margin-top:8px;}
.csuccess .check{width:48px;height:48px;border:2px solid var(--s-grn);color:var(--s-grn);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;}
.csuccess h3{font-family:"Press Start 2P",monospace;font-size:14px;color:var(--paper);margin:0 0 12px;line-height:1.5;}
.csuccess p{color:var(--dim);margin:0 auto 18px;max-width:48ch;}
.back-link{font-family:"Spline Sans Mono",ui-monospace,monospace;color:var(--s-cyan);text-decoration:none;border-bottom:1px solid var(--s-cyan);}
.calt{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:48px;padding-top:28px;border-top:1px solid var(--rule);}
.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;}
.project-entry{display:grid;grid-template-columns:170px 1fr;gap:28px;padding:32px 4px;border-bottom:2px solid var(--rule);}
.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 ---- */
.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;}
  .calt{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;}
}