/* =====================================================================
   faav.css — opt-in "faav" skin (minimal mono, flat near-black, cyan).
   Everything is scoped under html[data-skin="faav"], so with the skin OFF
   this file changes nothing and the classic site renders untouched.
   Toggled by the header button (see faav-theme inline script + header.ejs).
   ===================================================================== */

html[data-skin="faav"]{
  /* --- token overrides: flat near-black, keep the cyan accent --- */
  --bg:#0a0a0a;
  --bg-surface:#0d0d0d;
  --bg-card:#101014;
  --text:#d4d4d4;
  --text-muted:#8a8a8a;
  --blue:#00e5ff;              /* fold the 2nd accent into cyan so gradients read cyan */
  --blue-rgb:0, 229, 255;
  --gradient:none;
  color-scheme:dark;
  --faav-mono:"Inconsolata", ui-monospace, "SF Mono", Menlo, monospace;
  --faav-hair:rgba(255,255,255,.07);
  --faav-hair-2:rgba(255,255,255,.11);
  --faav-inline-bg:rgba(255,255,255,.05);
  --faav-inline-bd:rgba(255,255,255,.09);
  --faav-code-bg:rgba(255,255,255,.02);

  /* --cyan is the PRIMARY accent every component references. faav only ever
     set --blue, so --cyan silently stayed on the base palette's #4cc2ff and
     this skin shipped two different cyans. Fold them to the intended one. */
  --cyan:#00e5ff;              --cyan-rgb:0, 229, 255;
  --sky:#00e5ff;               --sky-rgb:0, 229, 255;
  --magenta:#00e5ff;           --magenta-rgb:0, 229, 255;
  --purple:#00e5ff;            --purple-rgb:0, 229, 255;
  --pink:#00e5ff;
  --accent-strong:#7fecff;
  /* neutral chrome */
  --border:rgba(255,255,255,.07);
  --border-glow:rgba(255,255,255,.11);
  --border-glow-rgb:255, 255, 255;
  --muted-rgb:138, 138, 138;
  --surface-rgb:10, 10, 10;
  --shadow-rgb:0, 0, 0;
  --tint-rgb:255, 255, 255;
  --gradient-text:none;
  --glow-cyan:transparent;
  --glow-magenta:transparent;
}

/* ---- flat surfaces: the landing components faav never reached -------------
   faav had no rules at all for the experience card, the CVE cards or the
   resume, so they kept the base theme's neon-era decoration: a rotating
   conic-gradient border, a flowing gradient bar and a per-category rainbow
   on the skills grid. Flatten them to hairline surfaces like the rest. */
html[data-skin="faav"] .experience-card-wrapper::before,
html[data-skin="faav"] .experience-card-wrapper::after,
html[data-skin="faav"] .experience-card::before {
  display:none !important; animation:none !important;
}
html[data-skin="faav"] .experience-card-wrapper{
  padding:0 !important; background:transparent !important; overflow:visible !important;
}
html[data-skin="faav"] .experience-card{
  background:transparent !important; border:1px solid var(--faav-hair) !important;
  border-radius:8px !important; box-shadow:none !important;
}
html[data-skin="faav"] .exp-timeline-dot{ animation:none !important; box-shadow:none !important; }
html[data-skin="faav"] .cve-card-item{
  background:transparent !important; border:1px solid var(--faav-hair) !important;
  border-radius:8px !important; box-shadow:none !important;
}
html[data-skin="faav"] .cve-badge-corner{ display:none !important; animation:none !important; }

/* resume: one accent instead of a six-colour rainbow */
html[data-skin="faav"] .rv-skills-grid .rv-skill-group,
html[data-skin="faav"] .rv-skills-grid .rv-skill-group:nth-child(1),
html[data-skin="faav"] .rv-skills-grid .rv-skill-group:nth-child(2),
html[data-skin="faav"] .rv-skills-grid .rv-skill-group:nth-child(3),
html[data-skin="faav"] .rv-skills-grid .rv-skill-group:nth-child(4),
html[data-skin="faav"] .rv-skills-grid .rv-skill-group:nth-child(5),
html[data-skin="faav"] .rv-skills-grid .rv-skill-group:nth-child(6){ --sk:0, 229, 255; }
html[data-skin="faav"] .rv-skills-grid .skill-tag{
  background:transparent !important; border:1px solid var(--faav-hair) !important;
  color:var(--text-muted) !important; border-radius:4px !important;
}
html[data-skin="faav"] .rv-skills-grid .skill-tag:hover{ transform:none !important; }
html[data-skin="faav"] .rv-exp-card,
html[data-skin="faav"] .rv-section{ background:transparent !important; box-shadow:none !important; }

/* ---- flatten: kill glows, gradients, animated backdrops ---- */
html[data-skin="faav"] *{ box-shadow:none !important; text-shadow:none !important; }
html[data-skin="faav"] .cursor-glow{ display:none !important; }
html[data-skin="faav"] .gradient-text{
  background:none !important;
  -webkit-background-clip:initial !important; background-clip:initial !important;
  -webkit-text-fill-color:currentColor !important;
  color:var(--cyan) !important;
}
html[data-skin="faav"] body{ background:var(--bg) !important; }
html[data-skin="faav"] :focus-visible{ outline:2px solid var(--cyan) !important; outline-offset:2px; }

/* ---- typography → Inconsolata (icons left alone) ---- */
html[data-skin="faav"] body,
html[data-skin="faav"] h1, html[data-skin="faav"] h2, html[data-skin="faav"] h3,
html[data-skin="faav"] h4, html[data-skin="faav"] h5, html[data-skin="faav"] h6,
html[data-skin="faav"] p, html[data-skin="faav"] a, html[data-skin="faav"] li,
html[data-skin="faav"] button, html[data-skin="faav"] input,
html[data-skin="faav"] textarea, html[data-skin="faav"] td, html[data-skin="faav"] th,
html[data-skin="faav"] label, html[data-skin="faav"] blockquote,
html[data-skin="faav"] .section-title, html[data-skin="faav"] .nav-logo-text,
html[data-skin="faav"] .post-title, html[data-skin="faav"] .blog-card-title-v2,
html[data-skin="faav"] pre, html[data-skin="faav"] code, html[data-skin="faav"] pre code{
  font-family:var(--faav-mono) !important;
  letter-spacing:0 !important;
}

/* =====================  shared chrome: header / nav  ===================== */
html[data-skin="faav"] .site-header{ background:var(--bg) !important; border-bottom:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .navbar,
html[data-skin="faav"] .navbar.scrolled{ background:var(--bg) !important; backdrop-filter:none !important; border-bottom:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .site-header::before{
  content:""; position:fixed; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--cyan), #0a3a44); z-index:9999;
}
html[data-skin="faav"] .nav-logo-icon{ border:1px solid var(--cyan) !important; background:transparent !important; border-radius:5px !important; }
html[data-skin="faav"] .nav-logo-icon .gradient-text{ color:var(--cyan) !important; }
html[data-skin="faav"] .nav-logo-text{ color:var(--text) !important; }
html[data-skin="faav"] .nav-logo-text .logo-highlight{ color:var(--cyan) !important; }
html[data-skin="faav"] .nav-link{ color:var(--text-muted) !important; font-size:14px !important; }
html[data-skin="faav"] .nav-link:hover, html[data-skin="faav"] .nav-link.active{ color:var(--cyan) !important; }
html[data-skin="faav"] .nav-cta{
  background:transparent !important; color:var(--cyan) !important;
  border:1px solid var(--cyan) !important; border-radius:6px !important;
}
html[data-skin="faav"] .nav-cta:hover{ background:rgba(var(--cyan-rgb),.09) !important; }
/* one theme control stays visible in every mode; show faav glyph in cyan */
html[data-skin="faav"] .theme-toggle{ color:var(--cyan) !important; }
html[data-skin="faav"] .theme-hint{ border-color:var(--cyan) !important; }

/* =====================  blog index → minimal text list  ===================== */
html[data-skin="faav"] .blog-page .section-title{ text-align:left !important; font-size:22px !important; margin-bottom:4px !important; }
html[data-skin="faav"] .blog-page .section-title::after{ display:none !important; }
html[data-skin="faav"] .blog-page .page-subtitle{ text-align:left !important; color:var(--text-muted) !important; font-size:14px !important; margin:0 0 20px !important; }

/* filter pills + search → flat/minimal */
html[data-skin="faav"] .filter-pills{ justify-content:flex-start !important; }
html[data-skin="faav"] .pill{
  background:transparent !important; border:1px solid var(--faav-hair-2) !important;
  color:var(--text-muted) !important; border-radius:6px !important; font-size:12.5px !important;
}
html[data-skin="faav"] .pill:hover{ border-color:var(--cyan) !important; color:var(--text) !important; }
html[data-skin="faav"] .pill.active{ border-color:var(--cyan) !important; color:var(--cyan) !important; background:transparent !important; }
html[data-skin="faav"] .search-bar{ background:transparent !important; border:1px solid var(--faav-hair-2) !important; border-radius:8px !important; }

/* the grid becomes a single-column list */
html[data-skin="faav"] .blog-grid-v2{ display:block !important; }
html[data-skin="faav"] .blog-card-v2{
  background:transparent !important; border:0 !important; border-top:1px solid var(--faav-hair) !important;
  border-radius:0 !important; padding:22px 0 !important; margin:0 !important;
  display:block !important; transform:none !important; box-shadow:none !important;
}
html[data-skin="faav"] .blog-grid-v2 .blog-card-v2:last-child{ border-bottom:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .blog-card-v2:hover{ transform:none !important; }
html[data-skin="faav"] .blog-card-cover{ display:none !important; }
html[data-skin="faav"] .blog-card-content{ padding:0 !important; }
html[data-skin="faav"] .blog-meta{ color:#4a4a4a !important; font-size:12.5px !important; letter-spacing:.5px !important; margin-bottom:7px !important; }
html[data-skin="faav"] .blog-card-title-v2{ font-size:19px !important; font-weight:700 !important; color:var(--text) !important; margin:0 0 6px !important; }
html[data-skin="faav"] .blog-card-v2:hover .blog-card-title-v2{ color:var(--cyan) !important; }
html[data-skin="faav"] .blog-tags-v2{ margin-top:9px !important; gap:6px !important; }
html[data-skin="faav"] .blog-tag-cat{ color:var(--cyan) !important; background:transparent !important; border:1px solid rgba(var(--cyan-rgb),.4) !important; border-radius:4px !important; font-size:11.5px !important; padding:1px 8px !important; }
html[data-skin="faav"] .blog-tag{ color:var(--text-muted) !important; background:transparent !important; border:1px solid var(--faav-hair) !important; border-radius:4px !important; font-size:11.5px !important; padding:1px 8px !important; }
html[data-skin="faav"] .blog-tag:hover{ color:var(--cyan) !important; border-color:var(--cyan) !important; }

/* =====================  post / article  ===================== */
html[data-skin="faav"] .post-title{ font-size:32px !important; font-weight:700 !important; color:#fff !important; line-height:1.14 !important; }
html[data-skin="faav"] .post-header{ position:relative; }
html[data-skin="faav"] .post-title::after{ content:""; display:block; width:48px; height:2px; background:var(--cyan); margin:15px 0 4px; }
html[data-skin="faav"] .post-back{ color:var(--text-muted) !important; }
html[data-skin="faav"] .post-back:hover{ color:var(--cyan) !important; }
html[data-skin="faav"] .blog-tags .skill-tag{ background:transparent !important; border:1px solid var(--faav-hair) !important; color:var(--text-muted) !important; border-radius:4px !important; }
html[data-skin="faav"] .blog-tags .skill-tag:first-child{ color:var(--cyan) !important; border-color:rgba(var(--cyan-rgb),.4) !important; }

html[data-skin="faav"] .post-content{ color:var(--text) !important; }
html[data-skin="faav"] .post-content a{ color:var(--cyan) !important; font-weight:700 !important; text-decoration:none !important; }
html[data-skin="faav"] .post-content a:hover{ text-decoration:underline !important; }
html[data-skin="faav"] .post-content h2{
  font-size:25px !important; font-weight:700 !important; color:#e8e8e8 !important;
  border-bottom:1px solid var(--faav-hair) !important; padding-bottom:10px !important; margin:36px 0 16px !important;
}
html[data-skin="faav"] .post-content h2::before{ content:"> "; color:var(--cyan); }
html[data-skin="faav"] .post-content h3{ font-size:19px !important; font-weight:700 !important; color:#e8e8e8 !important; margin:28px 0 12px !important; }
html[data-skin="faav"] .post-content h3::before{ content:"> "; color:var(--cyan); }

/* inline code + flat code blocks (overrides the deep-blue cyan-accent blocks) */
html[data-skin="faav"] .post-content :not(pre) > code{
  background:var(--faav-inline-bg) !important; border:1px solid var(--faav-inline-bd) !important;
  border-radius:4px !important; padding:2px 7px !important; color:#ececec !important; font-size:.92em !important;
}
html[data-skin="faav"] .post-content pre{
  background:var(--faav-code-bg) !important; border:1px solid var(--faav-hair) !important;
  border-radius:8px !important; padding:18px 22px !important; box-shadow:none !important;
}
html[data-skin="faav"] .post-content pre::before,
html[data-skin="faav"] .post-content pre::after{ display:none !important; }  /* kill the cyan top accent */
html[data-skin="faav"] .post-content pre code{ color:var(--text) !important; font-size:13px !important; }
html[data-skin="faav"] .code-head{ background:transparent !important; border-bottom:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .code-lang{ color:#8b99b0 !important; }

/* callouts */
html[data-skin="faav"] .post-content blockquote{
  border-left:3px solid var(--cyan) !important;
  background:rgba(var(--cyan-rgb),.05) !important;
  border-radius:0 8px 8px 0 !important; padding:14px 18px !important; color:#cfcfcf !important;
}

/* images: hairline border, no cyan hover frame */
html[data-skin="faav"] .post-content .post-figure,
html[data-skin="faav"] .post-content img{ border:1px solid var(--faav-hair) !important; border-radius:8px !important; }
html[data-skin="faav"] .post-content .post-figure::after{ display:none !important; }

/* tables */
html[data-skin="faav"] .post-content table{ border-collapse:collapse !important; }
html[data-skin="faav"] .post-content th, html[data-skin="faav"] .post-content td{ border:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .post-content th{ background:rgba(255,255,255,.02) !important; color:#e8e8e8 !important; }

/* table of contents */
html[data-skin="faav"] .toc-sidebar{ background:transparent !important; border:0 !important; }
html[data-skin="faav"] .toc-sidebar h4{ color:var(--text-muted) !important; letter-spacing:1.5px !important; text-transform:uppercase !important; font-size:11px !important; }
html[data-skin="faav"] .toc-sidebar a{ color:var(--text-muted) !important; border-left:2px solid transparent !important; }
html[data-skin="faav"] .toc-sidebar a:hover{ color:var(--cyan) !important; }
/* motion.js spyTOC() sets `is-active`; targeting `.active` meant the faav TOC
   never highlighted the section you were reading. Match both. */
html[data-skin="faav"] .toc-sidebar a.is-active,
html[data-skin="faav"] .toc-sidebar a.active{ color:#e8e8e8 !important; border-left-color:var(--cyan) !important; }

/* share + prev/next */
html[data-skin="faav"] .post-share .share-btn,
html[data-skin="faav"] .post-nav-link{ background:transparent !important; border:1px solid var(--faav-hair) !important; border-radius:6px !important; }
html[data-skin="faav"] .post-share .share-btn:hover,
html[data-skin="faav"] .post-nav-link:hover{ border-color:var(--cyan) !important; }
html[data-skin="faav"] .post-nav-title{ color:var(--text) !important; }
html[data-skin="faav"] .post-nav-link:hover .post-nav-title{ color:var(--cyan) !important; }

/* =====================  footer  ===================== */
html[data-skin="faav"] .footer{ background:var(--bg) !important; border-top:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .footer a{ color:var(--text-muted) !important; }
html[data-skin="faav"] .footer a:hover{ color:var(--cyan) !important; }
html[data-skin="faav"] .footer-logo .logo-bracket{ color:var(--cyan) !important; }

/* =====================  buttons (landing + forms)  ===================== */
html[data-skin="faav"] .btn, html[data-skin="faav"] .btn-primary{
  background:transparent !important; color:var(--cyan) !important;
  border:1px solid var(--cyan) !important; border-radius:6px !important;
}
html[data-skin="faav"] .btn:hover, html[data-skin="faav"] .btn-primary:hover{ background:rgba(var(--cyan-rgb),.09) !important; }

/* =====================  landing page: variable-level reskin (v1)  =====================
   The bespoke landing components (terminal, hall-of-fame, cve/ai/cert/project cards)
   inherit the flat/cyan tokens above. Cards get flattened to hairline surfaces here;
   finer per-section polish comes in a follow-up pass. */
html[data-skin="faav"] .section-title{ text-transform:none !important; }
html[data-skin="faav"] .terminal-window,
html[data-skin="faav"] .cert-card-v2, html[data-skin="faav"] .project-card,
html[data-skin="faav"] .hof-item, html[data-skin="faav"] .tip-card,
html[data-skin="faav"] .pub-card-v2, html[data-skin="faav"] .about-info-item{
  background:var(--bg-card) !important; border:1px solid var(--faav-hair) !important;
  border-radius:8px !important; box-shadow:none !important;
}

/* hero: drop the big blue radial halo behind the avatar; keep a clean cyan ring */
html[data-skin="faav"] .hero::before{ background:none !important; }
html[data-skin="faav"] .hero-photo-wrapper::before{ background:conic-gradient(from 0deg, rgba(var(--cyan-rgb),.7), rgba(var(--cyan-rgb),.05) 40%, rgba(var(--cyan-rgb),.7)) !important; filter:none !important; }

/* homepage "Blogs" section -> faav text list (match /blog) */
html[data-skin="faav"] .pub-grid-v2{ display:block !important; max-width:820px; margin:0 auto; }
html[data-skin="faav"] .pub-card-v2{
  position:relative !important; background:transparent !important; border:0 !important;
  border-top:1px solid var(--faav-hair) !important; border-radius:0 !important;
  padding:22px 0 !important; margin:0 !important; display:block !important;
  box-shadow:none !important; transform:none !important;
}
html[data-skin="faav"] .pub-grid-v2 .pub-card-v2:last-child{ border-bottom:1px solid var(--faav-hair) !important; }
html[data-skin="faav"] .pub-card-v2:hover{ transform:none !important; }
html[data-skin="faav"] .pub-cover{ display:none !important; }
html[data-skin="faav"] .pub-card-body{ padding:0 !important; }
html[data-skin="faav"] .pub-meta-v2{ color:#4a4a4a !important; font-size:12.5px !important; letter-spacing:.5px !important; margin-bottom:7px !important; }
html[data-skin="faav"] .pub-title-v2{ font-size:19px !important; font-weight:700 !important; color:var(--text) !important; margin:0 0 6px !important; }
html[data-skin="faav"] .pub-card-v2:hover .pub-title-v2{ color:var(--cyan) !important; }
html[data-skin="faav"] .pub-excerpt{ color:#a8a8a8 !important; font-size:14px !important; max-width:62ch; margin:0 0 8px !important; }

/* whoami: flatten the info-item icon chips (drop the blue gradient) */
html[data-skin="faav"] .about-info-item .ai-badge{
  background:rgba(var(--cyan-rgb),.08) !important;
  border:1px solid rgba(var(--cyan-rgb),.25) !important;
  color:var(--cyan) !important;
}

/* ============ Comments (faav) ============ */
html[data-skin="faav"] .comments-section{ max-width:816px; }
/* Related writeups (in-column) — flat mono treatment. */
html[data-skin="faav"] .post-related{ max-width:816px; border-top:1px solid var(--faav-hair); }
html[data-skin="faav"] .post-related-title{ color:#e8e8e8; font-size:15px; text-transform:uppercase; letter-spacing:1px; }
html[data-skin="faav"] .post-related-title::before{ content:"> "; color:var(--cyan); }
html[data-skin="faav"] .post-related-card{ background:transparent; border:1px solid var(--faav-hair); border-radius:6px; }
html[data-skin="faav"] .post-related-card:hover{ border-color:var(--cyan); transform:none; background:transparent; }
html[data-skin="faav"] .post-related-name{ color:var(--text); }
html[data-skin="faav"] .comments-title{ font-size:25px; font-weight:700; color:#e8e8e8; border-bottom:1px solid var(--faav-hair); padding-bottom:10px; }
html[data-skin="faav"] .comments-title::before{ content:"> "; color:var(--cyan); }
html[data-skin="faav"] .comments-title .comments-count{ color:var(--cyan); }
html[data-skin="faav"] .comment-form{ background:var(--faav-code-bg); border:1px solid var(--faav-hair); border-radius:8px; }
html[data-skin="faav"] .comment-input{ background:rgba(255,255,255,.02); border:1px solid var(--faav-hair-2); border-radius:6px; color:var(--text); }
html[data-skin="faav"] .comment-input:focus{ border-color:var(--cyan); }
html[data-skin="faav"] .comment-submit{ background:transparent; color:var(--cyan); border:1px solid var(--cyan); border-radius:6px; font-weight:700; }
html[data-skin="faav"] .comment-submit:hover{ background:rgba(var(--cyan-rgb),.09); filter:none; }
html[data-skin="faav"] .comment{ background:transparent; border:0; border-top:1px solid var(--faav-hair); border-radius:0; padding:14px 0; }
html[data-skin="faav"] .comment-author{ color:var(--cyan); }
html[data-skin="faav"] .comment-time{ color:#4a4a4a; }
html[data-skin="faav"] .comment-body-text{ color:var(--text); }
html[data-skin="faav"] .comment-note.is-error{ color:#ff6b6b; }

/* ---- Comments: likes + replies (faav) ---- */
html[data-skin="faav"] .comment-like,
html[data-skin="faav"] .comment-reply-btn,
html[data-skin="faav"] .comment-cancel{ color:#8a8a8a; }
html[data-skin="faav"] .comment-like:hover,
html[data-skin="faav"] .comment-like.liked,
html[data-skin="faav"] .comment-reply-btn:hover{ color:var(--cyan); }
html[data-skin="faav"] .comment-replies{ border-left:2px solid var(--faav-hair-2); margin-left:16px; }
html[data-skin="faav"] .comment.is-reply{ background:transparent; border:0; border-top:0; padding:2px 0; }
html[data-skin="faav"] .comment-cancel{ background:transparent; border:1px solid var(--faav-hair-2); border-radius:6px; }
html[data-skin="faav"] .comment-cancel:hover{ color:var(--text); border-color:var(--cyan); }

/* like button (faav) */
html[data-skin="faav"] .comment-like{ color:#9aa5bd; }
html[data-skin="faav"] .comment-like .like-heart svg{ fill:none; stroke:currentColor; stroke-width:1.9; }
html[data-skin="faav"] .comment-like.liked .like-heart svg{ fill:currentColor; }
html[data-skin="faav"] .comment-like:hover,
html[data-skin="faav"] .comment-like.liked{ color:var(--cyan); }

/* ===== Reading progress + rail + reactions (faav) ===== */
/* faav only styled the post-page bar, so the site-wide `.scroll-progress`
   still rendered the base blue fire-line everywhere else. Style the real one
   and drop its ember/haze pseudo-elements, which are not a flat-skin look. */
html[data-skin="faav"] .scroll-progress{
  background:linear-gradient(90deg, var(--cyan), #0a3a44) !important;
  box-shadow:none !important; border-radius:0 !important;
}
html[data-skin="faav"] .scroll-progress::before,
html[data-skin="faav"] .scroll-progress::after{ display:none !important; }
html[data-skin="faav"] .post-reactions{ border-top:1px solid var(--faav-hair); }
html[data-skin="faav"] .reaction{ background:var(--faav-code-bg); border:1px solid var(--faav-hair-2); border-radius:6px; }
html[data-skin="faav"] .reaction:hover,
html[data-skin="faav"] .reaction.reacted{ border-color:var(--cyan); }
html[data-skin="faav"] .reaction.reacted{ background:rgba(var(--cyan-rgb),.09); }
html[data-skin="faav"] .rail-share .share-btn{ background:transparent; border:1px solid var(--faav-hair-2); border-radius:6px; }
html[data-skin="faav"] .rail-share .share-btn:hover{ border-color:var(--cyan); }
html[data-skin="faav"] .rail-related-link{ background:transparent; border:1px solid var(--faav-hair); border-radius:6px; }
html[data-skin="faav"] .rail-related-link:hover{ border-color:var(--cyan); }
html[data-skin="faav"] .rail-related-title{ color:var(--text); }



/* ---- Gradient-clipped text: keep it visible --------------------------------
   Base CSS paints .gradient-text, .about-stat-number, .cert-name(-v2) and
   .rv-cert-abbr with `background: var(--gradient-text)` +
   `-webkit-text-fill-color: transparent`, i.e. the text is a window onto a
   gradient. This skin sets --gradient-text:none, so that window shows nothing
   and the text vanishes. Overriding `color` alone does NOT fix it - the
   transparent fill wins. Reset the whole clip mechanism. */
html[data-skin="faav"] .about-stat-number,
html[data-skin="faav"] .cert-name,
html[data-skin="faav"] .cert-name-v2,
html[data-skin="faav"] .rv-cert-abbr {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--cyan) !important;
}