/*
Theme Name: Shiplog
Theme URI: https://example.com/shiplog
Author: Your Name
Author URI: https://example.com
Description: A premium, internationally-styled WordPress theme for programmers and bootstrapped startup founders. Built around a "build log" concept: a terminal-styled hero and command-line motifs paired with editorial serif typography. Article categories double as a syntax-highlighting color key, used consistently across tags, code blocks, and the post grid.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shiplog
Tags: blog, one-column, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

/* ==========================================================================
   2. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Core palette */
  --ink: #14171f;
  --ink-soft: #4a5063;
  --ink-faint: #8b91a3;
  --paper: #f1f2f5;
  --surface: #ffffff;
  --line: #dbdee5;
  --line-soft: #e8eaef;

  /* Syntax-token category system: every category gets one of these,
     reused for chips, the entry list, and code-block syntax colors. */
  --tok-keyword: #3b5ba9; /* Programming */
  --tok-string:  #c8862a; /* Grassroots / Startup */
  --tok-comment: #5f7a63; /* Tools & Resources */
  --tok-func:    #8a5a9c; /* Case Studies */

  /* Terminal / dark surfaces */
  --term-bg: #14171f;
  --term-bg-2: #1b1f29;
  --term-line: #2a2f3b;
  --term-text: #e7e9ee;
  --term-muted: #7c8394;
  --term-cursor: var(--tok-string);

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Scale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.5rem;
  --fs-hero: clamp(2.5rem, 6vw, 4.75rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;

  /* Misc */
  --radius: 4px;
  --radius-sm: 3px;
  --shadow-card: 0 1px 0 var(--line), 0 10px 30px -22px rgba(20, 23, 31, 0.4);
  --container: 1200px;
  --container-narrow: 760px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --header-h: 72px;
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "liga" 1, "kern" 1;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-family: var(--font-body); font-weight: 700; }

p {
  max-width: 38em;
}

a {
  text-decoration: none;
}

.entry-content a,
.site-footer a.text-link,
.comment-content a {
  color: var(--tok-keyword);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--tok-keyword) 35%, transparent);
  transition: text-decoration-color 0.15s var(--ease);
}

.entry-content a:hover,
.site-footer a.text-link:hover,
.comment-content a:hover {
  text-decoration-color: var(--tok-keyword);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.eyebrow .prompt {
  color: var(--tok-string);
  margin-right: var(--sp-1);
}

/* Focus states */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--tok-keyword);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: color-mix(in srgb, var(--tok-string) 30%, transparent);
}

/* Screen-reader only */
.screen-reader-text {
  position: absolute;
  left: -9999px;
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--sp-12);
}

.section--tight {
  padding-block: var(--sp-8);
}

.section--dark {
  background: var(--term-bg);
  color: var(--term-text);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}

.section-head__heading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.section-head__title {
  font-size: var(--fs-2xl);
}

.section--dark .section-head__title,
.section--dark .eyebrow {
  color: var(--term-text);
}

.section--dark .eyebrow {
  color: var(--term-muted);
}

.section-head__link {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.section-head__link:hover {
  color: var(--tok-keyword);
  border-color: var(--tok-keyword);
}

/* Scroll reveal */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   5. SITE HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s var(--ease);
}

.site-header.is-scrolled {
  box-shadow: 0 8px 24px -20px rgba(20, 23, 31, 0.5);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--header-h);
}

.site-branding {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink);
}

.site-branding img,
.site-branding .custom-logo {
  max-height: 36px;
  width: auto;
}

.site-branding .logo-mark {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--tok-string);
}

.site-branding .logo-text em {
  font-style: italic;
  color: var(--tok-keyword);
}

.site-description {
  display: none;
}

/* Primary nav */
.primary-navigation {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.primary-navigation ul {
  display: flex;
  list-style: none;
  gap: var(--sp-5);
}

.primary-navigation a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-block: var(--sp-1);
  transition: color 0.15s var(--ease);
}

.primary-navigation a:hover,
.primary-navigation .current-menu-item > a {
  color: var(--ink);
}

.primary-navigation .current-menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--tok-string);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.btn-subscribe {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.btn-subscribe:hover {
  background: var(--ink);
  color: var(--paper);
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   6. HERO / TERMINAL
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5) 35%, rgba(0,0,0,0.5) 75%, transparent);
  opacity: 0.6;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--sp-10);
  align-items: center;
  padding-block: var(--sp-12);
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin-block: var(--sp-4) var(--sp-5);
}

.hero__title em {
  font-style: italic;
  color: var(--tok-keyword);
}

.hero__lede {
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  max-width: 32em;
}

.hero__actions {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: var(--tok-keyword);
}

.btn--ghost {
  border-color: var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
}

.btn--ghost:hover {
  border-color: var(--tok-string);
  color: var(--tok-string);
}

.btn:active {
  transform: translateY(1px);
}

/* Terminal window */
.terminal {
  background: var(--term-bg);
  border: 1px solid var(--term-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgba(20, 23, 31, 0.6);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bg-2);
}

.terminal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--term-line);
}

.terminal__dot:nth-child(1) { background: var(--tok-string); }
.terminal__dot:nth-child(2) { background: var(--tok-comment); }
.terminal__dot:nth-child(3) { background: var(--tok-keyword); }

.terminal__title {
  margin-inline-start: var(--sp-2);
  color: var(--term-muted);
  font-size: var(--fs-xs);
}

.terminal__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-height: 220px;
}

.terminal__line {
  color: var(--term-text);
  line-height: 1.7;
}

.terminal__out {
  color: var(--term-muted);
  padding-left: var(--sp-4);
  transition: opacity 0.4s ease;
}

.terminal .prompt {
  color: var(--tok-string);
  margin-right: var(--sp-2);
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--term-cursor);
  margin-left: 2px;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .cursor.is-blinking {
    opacity: 1;
    animation: blink 1s step-end infinite;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }
}

/* ==========================================================================
   7. CATEGORY TOKENS / CHIPS
   ========================================================================== */

.chip {
  --tok: var(--tok-keyword);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tok);
  padding: 3px var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--tok) 35%, transparent);
  background: color-mix(in srgb, var(--tok) 8%, transparent);
  border-radius: var(--radius-sm);
}

.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tok);
}

.chip a {
  color: inherit;
}

/* ==========================================================================
   8. TERMLIST  ($ ls posts/ -la)
   ========================================================================== */

.termlist {
  border: 1px solid var(--term-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--term-bg);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.termlist__head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--term-line);
  color: var(--term-muted);
  background: var(--term-bg-2);
}

.termlist__head .prompt {
  color: var(--tok-string);
  margin-right: var(--sp-2);
}

.termlist__row {
  display: grid;
  grid-template-columns: 110px 110px 64px 130px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--term-line);
  transition: background 0.15s var(--ease);
}

.termlist__row:last-child {
  border-bottom: none;
}

.termlist__row:hover {
  background: var(--term-bg-2);
}

.termlist__perm,
.termlist__owner,
.termlist__size {
  color: var(--term-muted);
  font-size: var(--fs-xs);
}

.termlist__tag {
  --tok: var(--tok-keyword);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--tok);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

.termlist__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tok);
}

.termlist__name {
  color: var(--term-text);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  transition: color 0.15s var(--ease);
}

.termlist__row:hover .termlist__name {
  color: var(--tok-string);
}

.termlist__empty {
  padding: var(--sp-5);
  color: var(--term-muted);
}

/* ==========================================================================
   9. ARTICLE CARDS / GRID
   ========================================================================== */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.post-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.card:hover {
  transform: translateY(-3px);
  border-color: var(--card-tok, var(--tok-keyword));
}

.card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.card:hover .card__media img {
  transform: scale(1.03);
}

.card__pattern {
  width: 100%;
  height: 100%;
  --tok: var(--tok-keyword);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--tok) 14%, transparent) 0px,
      color-mix(in srgb, var(--tok) 14%, transparent) 1.5px,
      transparent 1.5px,
      transparent 16px);
  position: relative;
}

.card__pattern::after {
  content: attr(data-glyph);
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  color: color-mix(in srgb, var(--tok) 30%, transparent);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1;
}

.card__meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.card__entry {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.card__title {
  font-size: var(--fs-xl);
  line-height: 1.25;
}

.card__title a {
  transition: color 0.15s var(--ease);
}

.card__title a:hover {
  color: var(--card-tok, var(--tok-keyword));
}

.card__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  flex: 1;
}

.card__meta-bottom {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--sp-1);
}

.dot::before {
  content: "\00b7";
}

/* Topic / category cards */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.topic-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-tok, var(--tok-keyword));
}

.topic-card__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.topic-card__title {
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.topic-card__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

/* ==========================================================================
   10. SYNTAX KEY (category legend)
   ========================================================================== */

.syntax-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.syntax-key__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}

.syntax-key__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--tok, var(--tok-keyword));
}

.section--dark .syntax-key__item {
  color: var(--term-muted);
}

/* ==========================================================================
   11. SUBSCRIBE / CLI FORM
   ========================================================================== */

.subscribe {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: flex-start;
}

.subscribe__cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 640px;
}

.subscribe__cmd .prompt {
  color: var(--tok-string);
  font-family: var(--font-mono);
}

.subscribe__flag {
  font-family: var(--font-mono);
  color: var(--term-muted);
  white-space: nowrap;
}

.subscribe__input {
  flex: 1;
  min-width: 200px;
  background: var(--term-bg-2);
  border: 1px solid var(--term-line);
  border-radius: var(--radius-sm);
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
}

.subscribe__input::placeholder {
  color: var(--term-muted);
}

.subscribe__submit {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--tok-string);
  color: var(--term-bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-5);
  transition: opacity 0.15s var(--ease);
}

.subscribe__submit:hover {
  opacity: 0.85;
}

.subscribe__note {
  font-size: var(--fs-sm);
  color: var(--term-muted);
  max-width: 36em;
}

.subscribe__note .prompt {
  color: var(--tok-comment);
  font-family: var(--font-mono);
}

/* ==========================================================================
   12. SITE FOOTER
   ========================================================================== */

.site-footer {
  background: var(--term-bg);
  color: var(--term-text);
  border-top: 1px solid var(--term-line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-12) var(--sp-8);
}

.footer-col__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--term-muted);
  margin-bottom: var(--sp-4);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-3);
  color: var(--term-text);
}

.footer-brand .logo-mark {
  font-family: var(--font-mono);
  color: var(--tok-string);
}

.footer-brand .logo-text em {
  font-style: italic;
  color: var(--tok-keyword);
}

.footer-tagline {
  color: var(--term-muted);
  font-size: var(--fs-sm);
  max-width: 28em;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-col a {
  font-size: var(--fs-sm);
  color: var(--term-text);
  transition: color 0.15s var(--ease);
}

.footer-col a:hover {
  color: var(--tok-string);
}

.footer-topics li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.footer-topics .syntax-key__swatch {
  flex-shrink: 0;
}

.site-footer-bottom {
  border-top: 1px solid var(--term-line);
  padding-block: var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--term-muted);
}

.site-footer-bottom .commit {
  color: var(--tok-comment);
}

/* ==========================================================================
   13. PAGE HEADER (archives, search, pages)
   ========================================================================== */

.page-header {
  padding-block: var(--sp-10) var(--sp-8);
  border-bottom: 1px solid var(--line);
}

.page-header__cmd {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  margin-bottom: var(--sp-3);
}

.page-header__cmd .prompt {
  color: var(--tok-string);
  margin-right: var(--sp-2);
}

.page-header__title {
  font-size: var(--fs-3xl);
}

.page-header__title .chip {
  vertical-align: middle;
  margin-left: var(--sp-3);
  font-size: var(--fs-sm);
}

.page-header__desc {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  max-width: 42em;
}

/* ==========================================================================
   14. SINGLE POST
   ========================================================================== */

.entry-header {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-block: var(--sp-10) var(--sp-6);
  text-align: center;
}

.entry-header .chip {
  margin-bottom: var(--sp-4);
}

.entry-title {
  font-size: clamp(2rem, 5vw, var(--fs-hero));
  line-height: 1.1;
}

.entry-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-faint);
  margin-top: var(--sp-4);
}

.entry-meta__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: var(--sp-1);
}

.entry-thumbnail {
  max-width: var(--container);
  margin-inline: auto;
  margin-bottom: var(--sp-10);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/8;
}

.entry-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-content {
  max-width: var(--container-narrow);
  margin-inline: auto;
  font-size: var(--fs-lg);
  line-height: 1.8;
}

.entry-content > * + * {
  margin-top: var(--sp-5);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-2);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.entry-content ul {
  list-style: none;
}

.entry-content ul > li {
  position: relative;
  padding-left: var(--sp-5);
}

.entry-content ul > li::before {
  content: "\25B8";
  position: absolute;
  left: 0;
  color: var(--tok-string);
  font-family: var(--font-mono);
}

.entry-content ol {
  list-style: none;
  counter-reset: ol-counter;
}

.entry-content ol > li {
  position: relative;
  padding-left: var(--sp-6);
  counter-increment: ol-counter;
}

.entry-content ol > li::before {
  content: counter(ol-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--tok-string);
}

.entry-content blockquote {
  border-left: 3px solid var(--tok-keyword);
  padding-left: var(--sp-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--ink-soft);
}

.entry-content figure {
  text-align: center;
}

.entry-content img {
  border-radius: var(--radius);
  margin-inline: auto;
}

.entry-content figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-top: var(--sp-2);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
}

.entry-content th {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface);
}

/* Inline code */
.entry-content code,
.entry-content :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

/* Code blocks (Prism) */
.code-block {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--term-bg);
  border: 1px solid var(--term-line);
  font-size: var(--fs-base);
}

.code-block__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--term-line);
  background: var(--term-bg-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--term-muted);
}

.code-block__copy {
  background: none;
  border: 1px solid var(--term-line);
  border-radius: var(--radius-sm);
  color: var(--term-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 2px var(--sp-2);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.code-block__copy:hover,
.code-block__copy.is-copied {
  color: var(--tok-string);
  border-color: var(--tok-string);
}

.entry-content pre[class*="language-"],
.code-block pre {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 0.9em;
  line-height: 1.7;
  color: var(--term-text);
}

.entry-content pre code,
.code-block pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 1em;
}

/* Prism token colors mapped to the syntax-token system */
.token.keyword,
.token.tag,
.token.selector { color: var(--tok-keyword); }
.token.string,
.token.attr-value,
.token.regex { color: var(--tok-string); }
.token.comment,
.token.prolog,
.token.doctype { color: var(--tok-comment); font-style: italic; }
.token.function,
.token.class-name,
.token.builtin { color: var(--tok-func); }
.token.number,
.token.boolean,
.token.constant,
.token.deleted { color: var(--tok-string); }
.token.operator,
.token.punctuation,
.token.entity { color: var(--term-muted); }
.token.property,
.token.symbol,
.token.variable,
.token.attr-name { color: var(--term-text); }

/* Entry footer: tags + share */
.entry-footer {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.entry-footer .tag-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px var(--sp-2);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.entry-footer .tag-chip:hover {
  border-color: var(--tok-keyword);
  color: var(--tok-keyword);
}

.entry-footer .tag-chip::before {
  content: "#";
  color: var(--ink-faint);
  margin-right: 2px;
}

/* Author bio */
.author-bio {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-top: var(--sp-10);
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.author-bio__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
}

.author-bio__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-1);
}

.author-bio__bio {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

/* Related posts */
.related-posts {
  max-width: var(--container);
  margin-inline: auto;
  margin-top: var(--sp-12);
  padding-top: var(--sp-10);
  border-top: 1px solid var(--line);
}

/* ==========================================================================
   15. PAGES
   ========================================================================== */

.page .entry-header {
  text-align: left;
  padding-block: var(--sp-10) var(--sp-5);
}

.page .entry-content {
  max-width: var(--container-narrow);
  font-size: var(--fs-base);
}

/* ==========================================================================
   16. COMMENTS
   ========================================================================== */

.comments-area {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}

.comments-title,
.comment-reply-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-5);
}

.comment-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.comment-list .children {
  list-style: none;
  margin-top: var(--sp-5);
  padding-left: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.comment-body {
  display: flex;
  gap: var(--sp-4);
}

.comment-author .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}

.comment-author b {
  font-family: var(--font-display);
}

.comment-metadata {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.comment-content p {
  margin-top: var(--sp-2);
}

.reply a {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px var(--sp-2);
}

.comment-form {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.comment-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: var(--sp-1);
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.comment-form textarea {
  min-height: 140px;
  resize: vertical;
}

.form-submit input[type="submit"] {
  width: auto;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: var(--font-mono);
  font-weight: 600;
}

.form-submit input[type="submit"]:hover {
  background: var(--tok-keyword);
}

/* ==========================================================================
   17. PAGINATION
   ========================================================================== */

.pagination,
.post-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.pagination .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pagination .page-numbers:hover {
  border-color: var(--tok-keyword);
  color: var(--tok-keyword);
}

.pagination-list {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.post-navigation a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  max-width: 320px;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.15s var(--ease);
}

.post-navigation a:hover {
  border-color: var(--tok-keyword);
}

.post-navigation .nav-subtitle {
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

.post-navigation .nav-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.post-navigation .nav-next {
  text-align: right;
  margin-left: auto;
}

/* ==========================================================================
   18. SEARCH / 404
   ========================================================================== */

.search-form {
  display: flex;
  gap: var(--sp-2);
  max-width: 480px;
}

.search-form__label {
  flex: 1;
}

.search-form__input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.search-form__submit {
  font-family: var(--font-mono);
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
}

.search-form__submit:hover {
  background: var(--tok-keyword);
}

.error-404 {
  text-align: center;
  padding-block: var(--sp-12);
}

.error-404 .terminal {
  max-width: 560px;
  margin: 0 auto var(--sp-8);
  text-align: left;
}

.error-404__code {
  font-family: var(--font-display);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--line);
}

.error-404__title {
  font-size: var(--fs-2xl);
  margin-top: var(--sp-3);
}

.error-404__desc {
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}

.error-404 .search-form {
  margin: var(--sp-6) auto 0;
}

.error-404__actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* ==========================================================================
   20. DIRECTORY: STATS, BADGES, RATINGS
   ========================================================================== */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat__value {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.section--dark .stat__value { color: var(--term-text); }
.section--dark .stat__label { color: var(--term-muted); }

/* Generic pill badge: status / pricing / outcome */
.badge {
  --tok: var(--tok-keyword);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tok);
  background: color-mix(in srgb, var(--tok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tok) 30%, transparent);
  border-radius: 999px;
  padding: 3px var(--sp-3);
  white-space: nowrap;
}

/* Tech-stack / plain reference chip (no "#" prefix) */
.tech-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px var(--sp-3);
}

/* Star rating */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--line);
}

.rating__filled {
  color: var(--tok-string);
}

.rating__score {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-left: var(--sp-1);
}

/* ==========================================================================
   21. DIRECTORY CARDS (projects / tools / case studies)
   ========================================================================== */

.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
}

.dir-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.dir-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-tok, var(--tok-keyword));
}

.dir-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.dir-card__logo,
.dir-card__logo-fallback {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.dir-card__logo {
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
}

.dir-card__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--card-tok, var(--tok-keyword));
  background: color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 30%, transparent);
}

.dir-card__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dir-card__title {
  font-size: var(--fs-lg);
  line-height: 1.3;
}

.dir-card:hover .dir-card__title a {
  color: var(--card-tok, var(--tok-keyword));
}

.dir-card__title a,
.dir-card__tagline {
  transition: color 0.15s var(--ease);
}

.dir-card__tagline {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.dir-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  flex: 1;
}

.dir-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
}

.dir-card__stats {
  display: flex;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.dir-card__stats strong {
  color: var(--ink);
  font-weight: 600;
}

/* ==========================================================================
   22. DETAIL HERO (single project / tool / case study)
   ========================================================================== */

.detail-hero {
  padding-block: var(--sp-10) var(--sp-8);
  border-bottom: 1px solid var(--line);
}

.detail-hero__top {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
}

.detail-hero__logo,
.detail-hero__logo-fallback {
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.detail-hero__logo {
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper);
}

.detail-hero__logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-2xl);
  color: var(--card-tok, var(--tok-keyword));
  background: color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 30%, transparent);
}

.detail-hero__heading {
  flex: 1;
  min-width: 220px;
}

.detail-hero__title {
  font-size: var(--fs-3xl);
}

.detail-hero__tagline {
  margin-top: var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--ink-soft);
}

.detail-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.detail-hero__founder {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: var(--sp-3);
}

.detail-hero__founder a {
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 40%, transparent);
}

.detail-hero__stats {
  margin-top: var(--sp-8);
}

/* Pros / cons */
.pros-cons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.pros-cons__col {
  padding: var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}

.pros-cons__col h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

.pros-cons__col--pros h3 { color: var(--tok-comment); }
.pros-cons__col--cons h3 { color: var(--tok-string); }

.pros-cons__col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.pros-cons__col--pros li::before {
  content: "+";
  color: var(--tok-comment);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: var(--sp-2);
}

.pros-cons__col--cons li::before {
  content: "\2212";
  color: var(--tok-string);
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: var(--sp-2);
}

/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */

@media (max-width: 980px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
  }

  .post-grid,
  .post-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .termlist__row {
    grid-template-columns: 90px 1fr;
    grid-template-areas:
      "tag name"
      "size name";
    row-gap: var(--sp-1);
  }
  .termlist__perm,
  .termlist__owner { display: none; }
  .termlist__tag { grid-area: tag; }
  .termlist__size { grid-area: size; }
  .termlist__name { grid-area: name; }
}

@media (max-width: 720px) {
  .pros-cons {
    grid-template-columns: 1fr;
  }

  .primary-navigation,
  .site-description {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .site-navigation.is-open .primary-navigation {
    display: flex;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--sp-4) var(--sp-5);
    gap: var(--sp-3);
  }

  .site-navigation.is-open .primary-navigation ul {
    flex-direction: column;
    gap: var(--sp-3);
    width: 100%;
  }

  .post-grid,
  .post-grid--2 {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .section {
    padding-block: var(--sp-8);
  }

  .section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .author-bio {
    flex-direction: column;
  }

  .post-navigation {
    flex-direction: column;
  }
  .post-navigation .nav-next {
    text-align: left;
    margin-left: 0;
  }
}

/* ==========================================================================
   24. READING PROGRESS BAR
   ========================================================================== */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--tok-string);
  z-index: 60;
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .reading-progress {
    transition: none;
  }
}

/* ==========================================================================
   25. TABLE OF CONTENTS ("$ cat outline.md")
   ========================================================================== */

.toc {
  max-width: var(--container-narrow);
  margin: var(--sp-8) auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.toc summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}

.toc summary::-webkit-details-marker {
  display: none;
}

.toc summary .prompt {
  color: var(--tok-string);
  margin-right: var(--sp-2);
}

.toc[open] summary {
  border-bottom: 1px solid var(--line);
}

.toc__list {
  list-style: none;
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.toc__item a {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  transition: color 0.15s var(--ease);
}

.toc__item a:hover {
  color: var(--tok-keyword);
}

.toc__item--h2 a::before {
  content: "\25B8 ";
  color: var(--tok-string);
  font-family: var(--font-mono);
}

.toc__item--h3 {
  padding-left: var(--sp-6);
}

.toc__item--h3 a::before {
  content: "\2013 ";
  color: var(--ink-faint);
  font-family: var(--font-mono);
}

/* ==========================================================================
   26. SHARE ROW ("$ ./share.sh --to")
   ========================================================================== */

.share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  max-width: var(--container-narrow);
  margin: var(--sp-8) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.share-row__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.share-row__link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 3px var(--sp-3);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.share-row__link:hover {
  border-color: var(--tok-keyword);
  color: var(--tok-keyword);
}

.share-row__link.is-copied {
  border-color: var(--tok-string);
  color: var(--tok-string);
}

/* ==========================================================================
   27. ROADMAP (学习路线图)
   ========================================================================== */

.roadmap-page {
  padding-block: var(--sp-10);
}

.roadmap-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.roadmap-filter-btn {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.roadmap-filter-btn:hover,
.roadmap-filter-btn.is-active {
  border-color: var(--tok-string);
  color: var(--tok-string);
  background: color-mix(in srgb, var(--tok-string) 8%, transparent);
}

.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--sp-8);
}

.roadmap-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.roadmap-card:hover {
  transform: translateY(-3px);
  border-color: var(--card-tok, var(--tok-keyword));
}

.roadmap-card__header {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.roadmap-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  background: color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-tok, var(--tok-keyword)) 25%, transparent);
  flex-shrink: 0;
}

.roadmap-card__meta {
  flex: 1;
  min-width: 0;
}

.roadmap-card__title {
  font-size: var(--fs-lg);
  line-height: 1.2;
  margin-bottom: var(--sp-1);
}

.roadmap-card__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
}

.roadmap-steps {
  padding: var(--sp-4) var(--sp-5);
  counter-reset: step;
}

.roadmap-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  position: relative;
}

.roadmap-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--line-soft);
}

.roadmap-step__num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  flex-shrink: 0;
  counter-increment: step;
  position: relative;
  z-index: 1;
  border: 2px solid var(--line);
  color: var(--ink-faint);
  background: var(--surface);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.roadmap-step--done .roadmap-step__num {
  border-color: var(--tok-comment);
  color: var(--tok-comment);
  background: color-mix(in srgb, var(--tok-comment) 10%, transparent);
}

.roadmap-step--active .roadmap-step__num {
  border-color: var(--tok-string);
  color: var(--tok-string);
  background: color-mix(in srgb, var(--tok-string) 10%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tok-string) 15%, transparent);
}

.roadmap-step__body {
  flex: 1;
  padding-top: 4px;
}

.roadmap-step__name {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.roadmap-step--active .roadmap-step__name {
  color: var(--tok-string);
}

.roadmap-step__desc {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: 2px;
}

.roadmap-step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

.roadmap-step__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px var(--sp-2);
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}

.roadmap-card__footer {
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.roadmap-card__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.roadmap-card__progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--card-tok, var(--tok-keyword));
  transition: width 0.6s var(--ease);
}

.roadmap-card__progress-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ==========================================================================
   28. LEADERBOARD / RANKINGS (排行榜)
   ========================================================================== */

.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.leaderboard-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s var(--ease);
}

.leaderboard-row:last-child {
  border-bottom: none;
}

.leaderboard-row:hover {
  background: var(--paper);
}

.leaderboard-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}

.leaderboard-rank__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--line);
  line-height: 1;
}

.leaderboard-row--top1 .leaderboard-rank__num { color: #f6c000; font-size: var(--fs-2xl); }
.leaderboard-row--top2 .leaderboard-rank__num { color: #aab4be; }
.leaderboard-row--top3 .leaderboard-rank__num { color: #c87533; }

.leaderboard-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.leaderboard-title {
  font-weight: 600;
  font-size: var(--fs-base);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s var(--ease);
}

.leaderboard-row:hover .leaderboard-title {
  color: var(--tok-keyword);
}

.leaderboard-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaderboard-stat {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--tok-string);
  white-space: nowrap;
  text-align: right;
}

.leaderboard-stat small {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: var(--fs-xs);
}

.leaderboard-header {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

/* ==========================================================================
   29. SEO COMPARISON PAGE (聚合对比页)
   ========================================================================== */

.comparison-hero {
  padding-block: var(--sp-10) var(--sp-8);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.comparison-hero__tag {
  margin-bottom: var(--sp-4);
}

.comparison-hero__title {
  font-size: clamp(2rem, 5vw, var(--fs-3xl));
  line-height: 1.1;
}

.comparison-hero__lede {
  font-size: var(--fs-lg);
  color: var(--ink-soft);
  max-width: 38em;
  margin: var(--sp-3) auto 0;
}

.comparison-hero__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  flex-wrap: wrap;
}

/* Comparison table */
.comparison-table-wrap {
  overflow-x: auto;
  margin-block: var(--sp-8);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--surface);
  min-width: 620px;
}

.comparison-table thead {
  background: var(--paper);
  border-bottom: 2px solid var(--line);
}

.comparison-table th {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: left;
  white-space: nowrap;
}

.comparison-table th:first-child {
  color: var(--ink-soft);
}

.comparison-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

.comparison-table tr:hover td {
  background: color-mix(in srgb, var(--paper) 50%, transparent);
}

.comparison-table .feature-name {
  font-weight: 600;
  color: var(--ink);
}

.check-yes { color: var(--tok-comment); font-size: var(--fs-lg); }
.check-no  { color: var(--ink-faint); font-size: var(--fs-lg); }
.check-partial { color: var(--tok-string); font-size: var(--fs-lg); }

/* Winner highlight column */
.comparison-table th.is-winner,
.comparison-table td.is-winner {
  background: color-mix(in srgb, var(--tok-string) 6%, transparent);
  border-left: 2px solid var(--tok-string);
  border-right: 2px solid var(--tok-string);
}

.comparison-table thead th.is-winner {
  color: var(--tok-string);
  border-top: 2px solid var(--tok-string);
}

.comparison-table tr:last-child td.is-winner {
  border-bottom: 2px solid var(--tok-string);
}

/* FAQ accordion */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  font-size: var(--fs-base);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  color: var(--tok-string);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item__body {
  padding: 0 var(--sp-5) var(--sp-4);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

/* ==========================================================================
   30. STATS / NUMBERS STRIP (数据展示条)
   ========================================================================== */

.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.stats-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--line);
}

.stats-strip__item:last-child {
  border-right: none;
}

.stats-strip__value {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.stats-strip__suffix {
  font-size: var(--fs-2xl);
  color: var(--tok-string);
  font-weight: 700;
  margin-left: 2px;
}

.stats-strip__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   31. NEWSLETTER INLINE (行内订阅卡片)
   ========================================================================== */

.inline-subscribe {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  background: var(--term-bg);
  border: 1px solid var(--term-line);
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin-block: var(--sp-10);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.inline-subscribe__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--tok-string);
}

.inline-subscribe__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--term-text);
}

.inline-subscribe__desc {
  font-size: var(--fs-sm);
  color: var(--term-muted);
}

.inline-subscribe__form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.inline-subscribe__input {
  flex: 1;
  min-width: 200px;
  background: var(--term-bg-2);
  border: 1px solid var(--term-line);
  border-radius: var(--radius-sm);
  color: var(--term-text);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--sp-3) var(--sp-4);
}

.inline-subscribe__input::placeholder { color: var(--term-muted); }

.inline-subscribe__btn {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--tok-string);
  color: var(--term-bg);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s var(--ease);
}

.inline-subscribe__btn:hover { opacity: 0.85; }

/* ==========================================================================
   32. AUTHOR CARD (作者卡片 — 扩展版)
   ========================================================================== */

.author-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.author-card__banner {
  height: 80px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tok-keyword) 30%, var(--paper)) 0%,
    color-mix(in srgb, var(--tok-string) 25%, var(--paper)) 100%
  );
}

.author-card__body {
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: -32px;
}

.author-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--surface);
}

.author-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
}

.author-card__bio {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.author-card__stats {
  display: flex;
  gap: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
}

.author-card__socials {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.author-card__social-link {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px var(--sp-2);
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.author-card__social-link:hover {
  border-color: var(--tok-keyword);
  color: var(--tok-keyword);
}

/* ==========================================================================
   33. TOOL FEATURED CARD (工具精选 — 大卡)
   ========================================================================== */

.tool-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.tool-featured-card {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.tool-featured-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-tok, var(--tok-comment));
}

.tool-featured-card__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  object-fit: cover;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.tool-featured-card__logo-fb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--card-tok, var(--tok-comment));
  background: color-mix(in srgb, var(--card-tok, var(--tok-comment)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-tok, var(--tok-comment)) 25%, transparent);
  flex-shrink: 0;
}

.tool-featured-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.tool-featured-card__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  transition: color 0.15s var(--ease);
}

.tool-featured-card:hover .tool-featured-card__name {
  color: var(--card-tok, var(--tok-comment));
}

.tool-featured-card__tagline {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
}

.tool-featured-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ==========================================================================
   34. BREADCRUMBS (面包屑)
   ========================================================================== */

.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: var(--sp-6);
}

.breadcrumbs a {
  color: var(--ink-faint);
  transition: color 0.15s var(--ease);
}

.breadcrumbs a:hover { color: var(--tok-keyword); }

.breadcrumbs__sep {
  color: var(--line);
}

.breadcrumbs__current {
  color: var(--ink-soft);
}

/* ==========================================================================
   35. TAG CLOUD (标签云)
   ========================================================================== */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tag-cloud__item {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  padding: 4px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--surface);
  transition: all 0.15s var(--ease);
}

.tag-cloud__item::before {
  content: "# ";
  color: var(--ink-faint);
}

.tag-cloud__item:hover {
  border-color: var(--tok-keyword);
  color: var(--tok-keyword);
  background: color-mix(in srgb, var(--tok-keyword) 6%, transparent);
}

/* ==========================================================================
   36. CASE TIMELINE (创业时间线)
   ========================================================================== */

.case-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.timeline-item {
  display: grid;
  grid-template-columns: 80px 2px 1fr;
  gap: 0 var(--sp-4);
  padding-bottom: var(--sp-5);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  text-align: right;
  padding-top: 4px;
}

.timeline-track {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tok-string);
  flex-shrink: 0;
  margin-top: 4px;
}

.timeline-line {
  flex: 1;
  width: 2px;
  background: var(--line);
  margin-top: var(--sp-1);
}

.timeline-item:last-child .timeline-line {
  display: none;
}

.timeline-content {
  padding-bottom: var(--sp-2);
}

.timeline-event {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink);
}

.timeline-detail {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin-top: 2px;
}

.timeline-metric {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--tok-string);
  margin-top: var(--sp-1);
  display: inline-block;
  padding: 1px var(--sp-2);
  background: color-mix(in srgb, var(--tok-string) 10%, transparent);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   37. RESPONSIVE — new components
   ========================================================================== */

@media (max-width: 980px) {
  .stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-strip__item:nth-child(2) {
    border-right: none;
  }

  .stats-strip__item:nth-child(3) {
    border-top: 1px solid var(--line);
  }

  .tool-featured {
    grid-template-columns: 1fr;
  }

  .roadmap-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .stats-strip {
    grid-template-columns: 1fr 1fr;
  }

  .leaderboard-row {
    grid-template-columns: 44px 1fr auto;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
  }

  .comparison-table th,
  .comparison-table td {
    padding: var(--sp-2) var(--sp-3);
  }
}