/* ============================================================================
   site.css — the ONE stylesheet for jonasfiers.eu.
   Linked by every page (index.html + blog/*.html) via a single <link>.

   Consolidated from what used to be four sources: index.html's two inline
   <style> blocks (fonts + homepage CSS), blog/blog.css, assets/tokens.css and
   assets/chrome.css. Merging them into one file removes a base-style divergence:
   -webkit-font-smoothing:antialiased was set on <body> only in blog.css, so the
   homepage rendered text slightly heavier. The unified base below gives every
   page the same antialiasing.

   Font url()s use root-relative paths (leading slash) so this one shared file
   resolves identically from '/' and from '/blog/'. The site is served from the
   web root, so /fonts/… is correct from every page.

   Section order:
     1. @font-face (×4)
     2. :root design tokens
     3. Unified base / reset  (*, html, body, a, .wrap)
     4. Shared chrome         (site header/nav + slim blog footer)
     5. Homepage-specific rules
     6. Blog / article rules
   ============================================================================ */

/* ── 1. FONTS ───────────────────────────────────────────────────────────────*/
@font-face{
  font-family:'Cabinet Grotesk';
  src:url('../fonts/CabinetGrotesk-Variable.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi';
  src:url('../fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight:300 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ── 2. DESIGN TOKENS ────────────────────────────────────────────────────────
   Single source of truth for the whole site's palette and type families. */
:root{
  --bg:#12172B;
  --surface:#1B2340;
  --surface-2:#232C52;
  --border:#2E3760;
  --text:#EDEFF7;
  --text-dim:#9AA3C0;
  --lime:#C6F135;
  --coral:#FF6F59;
  --pink:#E8437E;            /* PICASSO series accent */
  --mono:'JetBrains Mono', monospace;
  --sans:'Satoshi', sans-serif;
  --display:'Cabinet Grotesk', sans-serif;
}

/* ── 3. UNIFIED BASE / RESET ─────────────────────────────────────────────────
   One copy for every page. No -webkit-font-smoothing override — text renders
   with the browser default (heavier/subpixel on macOS), matching the original
   homepage; the blog previously forced antialiased, that's removed so the two
   render identically. */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.6;
}
a{color:inherit;}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}

/* ── 4. SHARED CHROME ────────────────────────────────────────────────────────
   The persistent header/nav bar and the slim blog footer, on every page.

   Deliberately does NOT redefine `.wrap` or bare `.contact-links`: the homepage
   uses those class names with a different layout, so only the chrome-scoped
   forms live here (`.site-header .wrap`, the `.site-footer`-scoped rules). The
   homepage has no `.site-header` / `.site-footer`, so nothing here touches it. */

/* SITE HEADER — persistent, links back to the portfolio */
.site-header{
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(18,23,43,0.82);
  backdrop-filter:blur(8px);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
  /* explicit so the header bar is uniform on every page regardless of each
     page's own .wrap width (homepage and blog now both use 760, see below) */
  max-width:760px;
}
.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:17px;
  text-decoration:none;
  color:var(--text);
  letter-spacing:-0.01em;
}
/* brand dot follows the current section: lime on portfolio, pink on writing */
.site-header.section-portfolio .brand span{color:var(--lime);}
.site-header.section-writing .brand span{color:var(--pink);}
.nav-links{
  display:flex;
  gap:22px;
  font-family:var(--mono);
  font-size:13.5px;
}
.nav-links a{
  color:var(--text-dim);
  text-transform:lowercase;
  text-decoration:none;
  transition:color 0.15s ease;
}
/* neutral grey at rest; the section you're in stays lit across ALL its pages
   (via the section-<name> class on <header>), and hovering any link lights it
   in its colour (portfolio = lime, writing = pink) */
.site-header.section-portfolio .to-portfolio,
.nav-links a.to-portfolio:hover{color:var(--lime);}
.site-header.section-writing .to-writing,
.nav-links a.to-writing:hover{color:var(--pink);}
/* underline marks the exact landing/home page of a section */
.nav-links a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px;}

/* FOOTER (slim, blog pages) */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:72px;
  padding:44px 0 60px;
  text-align:center;
}
.site-footer .back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  text-decoration:none;
  border:1px solid;
  padding:9px 16px;
  border-radius:8px;
  transition:background 0.15s ease, color 0.15s ease;
}
.site-footer .back.to-writing{color:var(--pink);border-color:var(--pink);}
.site-footer .back.to-writing:hover{background:var(--pink);color:var(--bg);}
.site-footer .back.to-portfolio{color:var(--lime);border-color:var(--lime);}
.site-footer .back.to-portfolio:hover{background:var(--lime);color:var(--bg);}
.site-footer .fine{
  margin-top:26px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--text-dim);
}

@media(max-width:640px){
  .nav-links{gap:16px;font-size:12.5px;}
}

/* ── 5. HOMEPAGE-SPECIFIC RULES ──────────────────────────────────────────────
   Everything from index.html's page CSS except the base/reset already unified
   above. Only the homepage carries these elements/classes. */

/* HERO */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
#graph-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0.55;
}
.hero-content{position:relative;z-index:2;}
.eyebrow{
  font-family:var(--mono);
  font-size:14px;
  color:var(--lime);
  margin:0 0 18px;
  letter-spacing:0.02em;
}
.home h1{
  font-family:var(--display);
  font-size:clamp(40px,7vw,72px);
  font-weight:700;
  margin:0 0 8px;
  line-height:1.05;
}
.home h1 span{color:var(--lime);}
.role{
  font-family:var(--display);
  font-size:clamp(18px,2.4vw,24px);
  color:var(--text-dim);
  font-weight:500;
  margin:0 0 28px;
}
.tagline{
  font-size:19px;
  max-width:520px;
  color:var(--text-dim);
  margin:0;
}

/* SECTIONS */
.home section{padding:72px 0;border-bottom:1px solid var(--border);}
.home section:last-of-type{border-bottom:none;}
.home h2{
  font-family:var(--display);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--text-dim);
  margin:0 0 28px;
  font-weight:600;
}
.about p{font-size:18px;color:var(--text);max-width:620px;}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 40px;margin-top:36px;}
.stat{max-width:none;}
.stat .num{font-family:var(--display);font-size:34px;font-weight:700;color:var(--lime);line-height:1;margin-bottom:8px;}
.stat .label{font-size:14px;color:var(--text-dim);line-height:1.45;}

/* EXPERIENCE — graph-style timeline */
.job{
  position:relative;
  padding-left:28px;
  margin-bottom:44px;
}
.job::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--lime);
}
.job::after{
  content:"";
  position:absolute;
  left:4px;
  top:16px;
  bottom:-44px;
  width:1px;
  background:var(--border);
}
.job:last-child::after{display:none;}
.cypher{
  display:block;
  font-family:var(--mono);
  font-size:13px;
  color:var(--lime);
  margin-bottom:6px;
}
.job h3{
  font-family:var(--display);
  font-size:21px;
  margin:0 0 4px;
  font-weight:600;
}
.job .meta{
  font-size:14px;
  color:var(--text-dim);
  margin-bottom:16px;
  font-family:var(--mono);
}
.project-node{
  position:relative;
  padding-left:22px;
  margin-bottom:14px;
  font-size:15.5px;
  color:var(--text);
}
.project-node::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--text-dim);
}
.project-node b{color:var(--text);font-weight:600;}

/* SPLITTY featured card */
.splitty-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 30px;
}
.splitty-cat-peek{
  position:absolute;
  top:-16px;
  right:22px;
  width:50px;
  height:18px;
  overflow:hidden;
  transition:height 0.45s cubic-bezier(0.34,1.56,0.64,1);
  z-index:2;
}
.splitty-cat-peek:hover{height:58px;}
.splitty-cat{display:block;width:50px;height:50px;overflow:visible;}
.splitty-cat .cat-eye-group{
  animation:cat-blink 5s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.splitty-cat .cat-ear-left{transform-box:fill-box;transform-origin:bottom center;}
.splitty-cat .cat-ear-right{
  animation:cat-ear-twitch 9s ease-in-out infinite;
  transform-box:fill-box;
  transform-origin:bottom center;
}
.splitty-cat .cat-body{transform-box:fill-box;transform-origin:center;}
@keyframes cat-blink{0%,82%,100%{transform:scaleY(1);}88%{transform:scaleY(0.07);}}
@keyframes cat-ear-twitch{0%,65%,100%{transform:rotate(0deg);}70%{transform:rotate(-10deg);}76%{transform:rotate(4deg);}82%{transform:rotate(0deg);}}
.splitty-cat-peek:hover .splitty-cat .cat-body{animation:cat-body-bounce 0.7s ease-out;}
.splitty-cat-peek:hover .splitty-cat .cat-ear-left{animation:cat-ear-perk-left 0.7s ease-out;}
.splitty-cat-peek:hover .splitty-cat .cat-ear-right{animation:cat-ear-perk-right 0.7s ease-out;}
@keyframes cat-body-bounce{0%{transform:scale(1);}28%{transform:scale(1.09);}52%{transform:scale(0.96);}72%{transform:scale(1.03);}100%{transform:scale(1);}}
@keyframes cat-ear-perk-left{0%,100%{transform:rotate(0deg);}28%{transform:rotate(14deg);}}
@keyframes cat-ear-perk-right{0%,100%{transform:rotate(0deg);}28%{transform:rotate(-14deg);}}
@media (prefers-reduced-motion: reduce){
  .splitty-cat *{animation:none !important;}
  .splitty-cat-peek{transition:none;}
}
.splitty-card .cypher{color:var(--coral);}
.splitty-card h3{font-family:var(--display);font-size:22px;margin:0 0 10px;}
.splitty-card p{color:var(--text-dim);margin:0 0 18px;font-size:15.5px;}
.splitty-graph{margin:22px 0 8px;}
.splitty-graph svg{display:block;width:100%;max-width:280px;height:auto;margin:0 auto;}
.flow-edge{stroke-dasharray:5 5;animation:splitty-flow 1s linear infinite;}
.flow-edge.delay-1{animation-delay:0.4s;}
.flow-edge.delay-2{animation-delay:0.7s;}
@keyframes splitty-flow{to{stroke-dashoffset:-10;}}
@media (prefers-reduced-motion: reduce){
  .flow-edge{animation:none;}
}
.splitty-query{font-family:var(--mono);font-size:12.5px;color:var(--text-dim);margin:0 0 18px;opacity:0.85;}
.splitty-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  color:var(--coral);
  text-decoration:none;
  border:1px solid var(--coral);
  padding:9px 16px;
  border-radius:8px;
  transition:background 0.15s ease, color 0.15s ease;
}
.splitty-link:hover{background:var(--coral);color:var(--bg);}

/* Stack of personal-project cards */
.project-cards{display:flex;flex-direction:column;gap:32px;}

/* CATALOG-74 card */
.catalog74-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 30px;
}
.catalog74-card .cypher{color:#4AF626;}
.catalog74-card h3{font-family:var(--display);font-size:22px;margin:0 0 10px;}
.c74-glyph{font-family:var(--mono);color:#4AF626;}
.catalog74-card p{color:var(--text-dim);margin:0 0 18px;font-size:15.5px;}
.c74-terminal{
  background:#06120A;
  border:1px solid #1B3A20;
  border-radius:10px;
  padding:16px 18px;
  margin:22px 0 18px;
  overflow-x:auto;
}
.c74-terminal pre{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  line-height:1.7;
  color:#4AF626;
  white-space:pre;
}
.c74-terminal .dim{color:#2E9E1A;}
.c74-cursor{
  display:inline-block;
  width:7px;
  height:13px;
  background:#4AF626;
  vertical-align:-2px;
  animation:c74-blink 1s step-end infinite;
}
@keyframes c74-blink{0%,100%{opacity:1;}50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .c74-cursor{animation:none;}
}
.catalog74-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  color:#4AF626;
  text-decoration:none;
  border:1px solid #4AF626;
  padding:9px 16px;
  border-radius:8px;
  transition:background 0.15s ease, color 0.15s ease;
}
.catalog74-link:hover{background:#4AF626;color:var(--bg);}

/* PICASSO card */
.picasso-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 30px;
}
.picasso-card .cypher{color:#E8437E;}
.picasso-card h3{font-family:var(--display);font-size:22px;margin:0 0 10px;}
.picasso-card h3 .wip{
  display:inline-block;vertical-align:middle;margin-left:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:0.05em;text-transform:uppercase;white-space:nowrap;
  color:#E8437E;border:1px solid rgba(232,67,126,0.45);
  border-radius:999px;padding:2px 9px;
}
.picasso-card p{color:var(--text-dim);margin:0 0 18px;font-size:15.5px;}
.picasso-canvas{margin:22px 0 18px;}
.picasso-canvas svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;}
.picasso-byte{font-family:var(--mono);font-size:9px;fill:var(--text-dim);}
.picasso-swatch-label{font-family:var(--mono);font-size:9px;fill:var(--bg);}
.picasso-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  color:#E8437E;
  text-decoration:none;
  border:1px solid #E8437E;
  padding:9px 16px;
  border-radius:8px;
  transition:background 0.15s ease, color 0.15s ease;
}
.picasso-link:hover{background:#E8437E;color:var(--bg);}
.picasso-links{display:flex;flex-wrap:wrap;gap:12px;}
.picasso-link.ghost{color:var(--text-dim);border-color:var(--border);}
.picasso-link.ghost:hover{background:var(--surface-2);color:var(--text);border-color:var(--text-dim);}

.cv-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  color:var(--lime);
  text-decoration:none;
  border:1px solid var(--lime);
  padding:9px 16px;
  border-radius:8px;
  margin-top:26px;
  transition:background 0.15s ease, color 0.15s ease;
}
.cv-link:hover{background:var(--lime);color:var(--bg);}
.hero-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.hero-links .cv-link{margin-top:0;}
.writing-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:14px;
  color:#E8437E;
  text-decoration:none;
  border:1px solid #E8437E;
  padding:9px 16px;
  border-radius:8px;
  transition:background 0.15s ease, color 0.15s ease;
}
.writing-link:hover{background:#E8437E;color:var(--bg);}

/* SKILLS as node-label pills */
.pills{display:flex;flex-wrap:wrap;gap:10px;}
.pill{
  font-family:var(--mono);
  font-size:13.5px;
  color:var(--lime);
  background:var(--surface);
  border:1px solid var(--border);
  padding:7px 14px;
  border-radius:20px;
}

/* EDU / LANG */
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.list-item{margin-bottom:14px;font-size:15px;}
.list-item .label{color:var(--text-dim);font-family:var(--mono);font-size:12.5px;display:block;margin-bottom:2px;}
.langs span{
  display:inline-block;
  font-size:14.5px;
  color:var(--text-dim);
  margin:0 14px 8px 0;
}
.langs span b{color:var(--text);font-weight:500;}

/* FOOTER / CONTACT */
.contact{text-align:center;padding:60px 0 80px;}
.contact .eyebrow{justify-content:center;}
.contact h2{color:var(--text);font-size:26px;text-transform:none;letter-spacing:normal;font-family:var(--display);font-weight:600;}
.contact-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;margin-top:20px;font-family:var(--mono);font-size:14.5px;}
.contact-links a{color:var(--lime);text-decoration:none;}
.contact-links a:hover{text-decoration:underline;}

@media(max-width:640px){
  .stats{grid-template-columns:1fr;}
  .grid-two{grid-template-columns:1fr;}
  section{padding:52px 0;}
  .splitty-card, .catalog74-card, .picasso-card{padding:24px 20px;}
  .c74-terminal{padding:14px;}
  .c74-terminal pre{font-size:11.5px;}
}

/* ── 6. BLOG / ARTICLE RULES ─────────────────────────────────────────────────
   Everything from the old blog/blog.css except its @font-face, base/reset and
   tokens comment (all unified above). All selectors here are scoped to blog-only
   containers (.index-head, .post-card, .article-head, article.post, and the
   .site-footer footer), so they never touch the homepage and their specificity
   beats the bare homepage rules (h1/h2/.eyebrow/.contact-links). */

/* The footer's .contact-links styling is page-local to the blog footer: the
   class name is shared with the homepage, so it stays scoped to .site-footer. */
.site-footer .contact-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  margin-top:18px;font-family:var(--mono);font-size:13.5px;
}
.site-footer .contact-links a{color:var(--lime);text-decoration:none;}
.site-footer .contact-links a:hover{text-decoration:underline;}

/* ---- BLOG INDEX ---- */
.index-head{padding:64px 0 8px;}
.index-head .eyebrow{
  font-family:var(--mono);font-size:14px;color:var(--pink);
  margin:0 0 16px;letter-spacing:0.02em;
}
.index-head h1{
  font-family:var(--display);
  font-size:clamp(34px,6vw,54px);
  font-weight:700;line-height:1.05;margin:0 0 16px;
}
.index-head p.lede{
  font-size:18px;color:var(--text-dim);max-width:560px;margin:0;
}

.post-list{padding:40px 0 8px;display:flex;flex-direction:column;gap:20px;}
.post-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:26px 28px;
  text-decoration:none;
  color:inherit;
  transition:border-color 0.18s ease, transform 0.18s ease;
}
.post-card:hover{border-color:var(--pink);transform:translateY(-2px);}
.post-card .kicker{
  font-family:var(--mono);font-size:12.5px;color:var(--pink);
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
.post-card .kicker .muted{color:var(--text-dim);}
.post-card h2{
  font-family:var(--display);font-size:23px;font-weight:600;
  margin:0 0 10px;line-height:1.2;
}
.post-card p{margin:0;color:var(--text-dim);font-size:15.5px;}
.post-card.upcoming{opacity:0.62;}
.post-card.upcoming:hover{border-color:var(--border);transform:none;}
.post-card .soon{color:var(--text-dim);}

/* ---- ARTICLE ---- */
.article-head{padding:56px 0 0;}
.article-head .kicker{
  font-family:var(--mono);font-size:13px;color:var(--pink);
  display:flex;gap:14px;flex-wrap:wrap;margin:0 0 20px;
}
.article-head .kicker .muted{color:var(--text-dim);}
.article-head h1{
  font-family:var(--display);
  font-size:clamp(30px,5.4vw,46px);
  font-weight:700;line-height:1.08;margin:0 0 18px;letter-spacing:-0.01em;
}
.article-head .standfirst{
  font-size:19px;color:var(--text-dim);margin:0;max-width:620px;
}
.article-head .byline{
  margin:22px 0 0;font-family:var(--mono);font-size:13px;color:var(--text-dim);
}

article.post{padding:8px 0 0;}
article.post > *{max-width:none;}
article.post p{font-size:17.5px;color:var(--text);margin:24px 0;}
article.post h2{
  font-family:var(--display);font-size:26px;font-weight:600;
  margin:52px 0 8px;line-height:1.2;letter-spacing:-0.01em;
}
article.post h3{
  font-family:var(--display);font-size:19px;font-weight:600;margin:36px 0 6px;
}
article.post a.inline{color:var(--pink);text-decoration:none;border-bottom:1px solid rgba(232,67,126,0.4);}
article.post a.inline:hover{border-bottom-color:var(--pink);}
article.post strong{color:var(--text);font-weight:600;}
article.post em{color:var(--text);}
article.post code{
  font-family:var(--mono);font-size:0.86em;
  background:var(--surface-2);color:var(--lime);
  padding:2px 6px;border-radius:5px;white-space:nowrap;
}
article.post hr{
  border:none;border-top:1px solid var(--border);margin:48px 0;
}

/* code block */
.code-block{
  background:#0C1122;
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 20px;
  margin:28px 0;
  overflow-x:auto;
}
.code-block pre{
  margin:0;font-family:var(--mono);font-size:13px;line-height:1.7;
  color:var(--text);white-space:pre;
}
.code-block .cmt{color:var(--text-dim);}
.code-block .hl{color:var(--pink);}
.code-block .kw{color:var(--lime);}
.code-block .cap{
  display:block;margin-top:12px;font-family:var(--mono);
  font-size:12px;color:var(--text-dim);white-space:normal;line-height:1.5;
}

/* pull quote */
.pull{
  margin:40px 0;padding:4px 0 4px 24px;
  border-left:3px solid var(--pink);
}
.pull p{
  font-family:var(--display);font-size:23px;font-weight:500;line-height:1.35;
  color:var(--text);margin:0;
}

/* end-of-post series nav */
.series-next{
  margin-top:56px;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:26px 28px;
}
.series-next .label{
  font-family:var(--mono);font-size:12.5px;color:var(--pink);margin:0 0 14px;
  text-transform:uppercase;letter-spacing:0.08em;
}
.series-next ol{margin:0;padding-left:20px;}
.series-next li{margin:0 0 10px;font-size:15.5px;color:var(--text-dim);}
.series-next li.done{color:var(--text);}
.series-next li b{color:var(--text);font-weight:600;}
.series-next li .tag{
  font-family:var(--mono);font-size:11px;color:var(--pink);margin-left:8px;
}

@media(max-width:640px){
  article.post p{font-size:16.5px;}
  .article-head{padding:40px 0 0;}
  .code-block pre{font-size:12px;}
  .pull p{font-size:20px;}
}
@media (prefers-reduced-motion: reduce){
  .post-card:hover{transform:none;}
}
