/* ============================================
   Guides — index listing and long-form articles
   Requires base.css
   ============================================ */

/* ---------- index listing ---------- */
.guide-list{
  border-top:1px solid var(--border-soft);
}
.guide-row{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:24px;
  align-items:start;
  padding:26px 0;
  border-bottom:1px solid var(--border-soft);
  text-decoration:none;
  transition:border-color 0.18s ease;
}
a.guide-row:hover{ border-bottom-color:var(--accent-line); }
a.guide-row:hover .guide-title{ color:var(--accent); }
.guide-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:19px;
  letter-spacing:-0.01em;
  transition:color 0.18s ease;
}
.guide-blurb{
  color:var(--text-dim);
  font-size:15px;
  margin-top:7px;
  max-width:64ch;
  line-height:1.6;
}
.guide-meta{
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--text-faint);
  white-space:nowrap;
  padding-top:5px;
}
@media (max-width:640px){
  .guide-row{ grid-template-columns:1fr; gap:8px; }
  .guide-meta{ padding-top:0; }
}

/* ---------- article ---------- */
/* Only the vertical padding — the shorthand would clobber .wrap's horizontal
   padding, which is what keeps body text off the screen edge on mobile. */
.article{
  padding-top:64px;
  padding-bottom:88px;
  border-top:none;
}
.article-head{
  max-width:72ch;
  margin-bottom:44px;
}
.article-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--accent);
  margin-bottom:14px;
}
.article-head h1{
  font-size:clamp(29px, 4.2vw, 44px);
  line-height:1.15;
}
.article-standfirst{
  margin-top:20px;
  color:var(--text-dim);
  font-size:clamp(16px, 1.6vw, 18.5px);
  line-height:1.6;
}
.article-byline{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--border-soft);
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--text-faint);
}

/* Sits under the guides-index standfirst. Smaller and dimmer than .hero-sub so
   it reads as a note about the guides rather than part of the pitch. */
.hero-note{
  margin-top:18px;
  /* Explicit: this sits inside the hero, which sets monospace. */
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  max-width:62ch;
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-faint);
}
.hero-note a{ color:var(--text-dim); }

.byline-note{
  display:block;
  margin-top:9px;
  /* Explicit, not inherit: the parent .article-byline is monospace, and three
     lines of 12.5px mono reads heavier than a footnote should. */
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  font-size:12.5px;
  line-height:1.55;
  max-width:60ch;
}

/* Long-form body. Measure is the point — ~68ch keeps lines readable. */
.prose{ max-width:72ch; }
.prose h2{
  font-size:clamp(21px, 2.4vw, 26px);
  margin:52px 0 16px;
  scroll-margin-top:90px;
}
.prose h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:18px;
  margin:36px 0 12px;
}
.prose p{
  color:var(--text-dim);
  font-size:16.5px;
  line-height:1.75;
  margin:0 0 20px;
}
.prose strong{ color:var(--text); font-weight:600; }
.prose em{ color:var(--text); font-style:italic; }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ text-decoration-thickness:2px; }
.prose ul, .prose ol{
  color:var(--text-dim);
  font-size:16.5px;
  line-height:1.75;
  margin:0 0 20px;
  padding-left:22px;
}
.prose li{ margin-bottom:9px; }
.prose li::marker{ color:var(--text-faint); }
.prose code{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.88em;
  background:var(--bg-inset);
  border:1px solid var(--border-soft);
  border-radius:4px;
  padding:1px 5px;
  color:var(--text);
}
.prose pre code{
  background:none; border:none; padding:0; font-size:inherit;
}

/* Pull-quote for the one-line lesson of a section */
.prose blockquote{
  margin:28px 0;
  padding:16px 22px;
  border-left:2px solid var(--accent);
  background:var(--bg-inset);
  border-radius:0 6px 6px 0;
}
.prose blockquote p{
  margin:0;
  color:var(--text);
  font-size:17px;
}

/* Callout for the dangerous bit */
.warn{
  margin:28px 0;
  padding:18px 22px;
  border:1px solid var(--deny-line);
  border-left-width:2px;
  background:var(--deny-soft);
  border-radius:0 6px 6px 0;
}
.warn p{ margin:0; color:var(--text); font-size:16px; }
.warn .warn-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--deny);
  margin-bottom:7px;
}

/* Affirmative sibling of .warn, for pointing at the test harness. Deliberately
   not .warn: that one is red, and a red box reads as "you have a problem here"
   rather than "here is the tool". */
.toolbox{
  margin:28px 0;
  padding:18px 22px;
  border:1px solid var(--accent-line);
  border-left-width:2px;
  background:var(--accent-soft);
  border-radius:0 6px 6px 0;
}
.toolbox p{ margin:0; color:var(--text); font-size:16px; }
.toolbox p + p{ margin-top:10px; }
.toolbox .toolbox-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
  margin-bottom:7px;
}
.toolbox a{ color:var(--accent); }

/* Code blocks reuse the editor chrome from the Keystone page */
.snippet{
  margin:26px 0;
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  background:var(--bg-inset);
}
.snippet-bar{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  background:var(--bg-raised);
  border-bottom:1px solid var(--border-soft);
}
.snippet-bar .dot{ width:8px; height:8px; border-radius:50%; background:var(--border); }
.snippet-bar .filename{
  margin-left:8px;
  font-family:'IBM Plex Mono', monospace;
  font-size:11.5px;
  color:var(--text-faint);
}
.snippet-bar .tag{
  margin-left:auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.05em;
  padding:2px 7px;
  border-radius:3px;
}
.snippet-bar .tag.bad{ background:var(--deny-soft); color:var(--deny); }
.snippet-bar .tag.good{ background:var(--accent-soft); color:var(--accent); }
.snippet pre{
  margin:0;
  padding:16px 18px;
  overflow-x:auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  line-height:1.7;
  color:var(--text-dim);
}
.snippet pre .kw{ color:var(--accent); }
.snippet pre .fn{ color:#7fc9d9; }
.snippet pre .str{ color:#9bcf8f; }
.snippet pre .cm{ color:var(--text-faint); font-style:italic; }
.snippet pre .bad-line{ color:var(--deny); }

/* Comparison table */
.prose table{
  width:100%;
  border-collapse:collapse;
  margin:26px 0;
  font-size:15px;
}
.prose th, .prose td{
  text-align:left;
  padding:11px 14px;
  border-bottom:1px solid var(--border-soft);
  color:var(--text-dim);
  vertical-align:top;
}
.prose th{
  color:var(--text);
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:14px;
  border-bottom-color:var(--border);
}
.table-scroll{ overflow-x:auto; }

/* ---------- end-of-article product card ---------- */
.article-cta{
  margin-top:64px;
  max-width:72ch;
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(160deg, var(--bg-raised), var(--bg-inset));
  padding:30px;
}
.article-cta .cta-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
  margin-bottom:10px;
}
.article-cta h2{
  font-size:21px;
  margin:0 0 10px;
}
.article-cta p{
  color:var(--text-dim);
  font-size:15px;
  line-height:1.65;
  margin:0 0 20px;
}
.article-cta .btn{ margin-right:10px; }

/* The harness callout on the guides index. Full wrap width rather than the
   72ch of .article-cta, so it lines up with the guide list above it. */
.tool-cta{
  margin-top:44px;
  border:1px solid var(--accent-line);
  border-radius:12px;
  background:linear-gradient(160deg, var(--accent-soft), var(--bg-inset));
  padding:30px;
}
.tool-cta .cta-eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--accent);
  margin-bottom:10px;
}
.tool-cta h2{ font-size:21px; margin:0 0 10px; }
.tool-cta p{
  color:var(--text-dim);
  font-size:15px;
  line-height:1.65;
  margin:0 0 20px;
  max-width:68ch;
}

.article-nav{
  max-width:72ch;
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid var(--border-soft);
  font-size:14.5px;
}
.article-nav a{ color:var(--accent); text-decoration:none; }
.article-nav a:hover{ text-decoration:underline; }