/* =========================================================================
   /changelog/  ·  Salience design system restyle
   -------------------------------------------------------------------------
   Shipped from this repo and linked into the page by
   deploy/refresh_static_chrome.py, which swaps the page's inline <style> block
   for a link to this file on every deploy. Loads after the site stylesheet and
   /carl-extras.css (which owns the shared template: container aliases, hero,
   H1 scale, lead, .cp-main base). Every class the markup uses is preserved,
   so nothing dangles on the index or the per-entry pages.

   What was wrong: a radial-gradient wash behind the page, 14px radii on the
   cards and 999px pill chips on the tags, tag-fix painted in off-brand
   rgba(251,146,60) Tailwind orange, `.btn-primary` setting #111111 text on a
   #000000 field (invisible), and green month labels shouting over the
   entries they were meant to file.
   ========================================================================= */

.cp-main *,.cp-main *::before,.cp-main *::after{box-sizing:border-box;margin:0;padding:0}
.cp-main{scroll-behavior:smooth}
.cp-main{background-image:none}

/* Layout: the shared container frame (1180px, responsive gutters) under this
   page's own class name; vertical rhythm sits on the inner <main>. The old
   130px top padding compensated for a fixed header that no longer exists. */
.cp-main .container{max-width:1180px;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
@media(min-width:640px){.cp-main .container{padding-left:2rem;padding-right:2rem}}
@media(min-width:1024px){.cp-main .container{padding-left:3rem;padding-right:3rem}}
.cp-main main{padding:3rem 0 6rem}

/* Lead. The H1 above it is the shared scale from carl-extras.css. */
.cp-main .lede{
  max-width:62ch;color:rgba(0,0,0,0.75);
  font-size:0.9375rem;line-height:1.75;margin:0 0 3rem;
}
.cp-main .lede a{color:var(--color-accent-ink,#2c7a2c);text-decoration:none}
.cp-main .lede a:hover{text-decoration:underline;text-underline-offset:3px}
.cp-main .feed-link{color:var(--color-accent-ink,#2c7a2c)}
.cp-main .feed-link:hover{color:var(--color-ink,#000)}

/* Month sections: a hairline rule and a quiet microlabel, not a green
   heading. The label files the entries; the entries carry the weight. */
.cp-main .month{
  margin-top:4rem;padding-top:1.5rem;
  border-top:1px solid var(--color-hairline,#e6e6e6);
}
.cp-main .month:first-of-type{margin-top:0;border-top:0;padding-top:0}
.cp-main .month-label{
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.68rem;font-weight:500;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--color-muted,#6b6b6b);margin-bottom:1.5rem;
}

/* Entries: white paper cards on a hairline, sharp. Hover firms the border
   and washes the field with the accent tint; nothing moves. */
.cp-main .entry{
  background:var(--color-paper,#fff);
  border:1px solid var(--color-hairline,#e6e6e6);
  padding:1.75rem 2rem;margin-bottom:1.25rem;
  transition:border-color .2s,background .2s;
}
.cp-main .entry:hover{
  border-color:var(--color-ink,#000);
  background:rgba(140,243,122,0.08);
}

/* Meta row: mono data register */
.cp-main .entry-meta{
  display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;
  margin-bottom:0.9rem;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.72rem;
  color:var(--color-muted,#6b6b6b);
}
.cp-main .entry-date{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Tags: the sharp mono uppercase badge register from the other pages.
   Feature takes the accent field, improvement the second accent, and fix the
   warn register: warn text and border on paper, not a tinted orange pill. */
.cp-main .entry-tag{
  display:inline-block;white-space:nowrap;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.5625rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  padding:0.2rem 0.5rem;border:1px solid transparent;
}
.cp-main .tag-feature{background:var(--color-accent,#8cf37a);color:var(--color-ink,#000)}
.cp-main .tag-improvement{background:var(--color-accent-2,#8ff6ff);color:var(--color-ink,#000)}
.cp-main .tag-fix{
  background:var(--color-paper,#fff);
  color:var(--color-warn,#8a5a0a);border-color:var(--color-warn,#8a5a0a);
}
.cp-main .entry-tag-chip{
  display:inline-block;white-space:nowrap;
  background:var(--color-paper,#fff);
  border:1px solid var(--color-hairline,#e6e6e6);
  color:var(--color-muted,#6b6b6b);
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.625rem;
  padding:0.15rem 0.5rem;
}

/* Title and summary */
.cp-main .entry-title{
  font-family:var(--font-display);
  font-size:clamp(1.15rem,1.8vw,1.25rem);font-weight:500;
  letter-spacing:-0.02em;line-height:1.3;margin-bottom:0.5rem;
}
.cp-main .entry-title a{color:var(--color-ink,#000);text-decoration:none;transition:color .2s}
.cp-main .entry-title a:hover{color:var(--color-accent-ink,#2c7a2c)}
.cp-main .entry-summary{color:rgba(0,0,0,0.75);font-size:0.875rem;line-height:1.75}

.cp-main .entry-image{
  margin:1rem 0 0.25rem;overflow:hidden;
  border:1px solid var(--color-hairline,#e6e6e6);
}
.cp-main .entry-image img{display:block;width:100%;height:auto}

.cp-main .entry-link{
  display:inline-block;margin-top:1rem;text-decoration:none;
  color:var(--color-accent-ink,#2c7a2c);
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.78rem;
}
.cp-main .entry-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Per-entry page: the same card register, prose measure inside it */
.cp-main .entry-page{
  background:var(--color-paper,#fff);
  border:1px solid var(--color-hairline,#e6e6e6);
  padding:2.25rem 2.5rem;
}
.cp-main .entry-page .entry-image{margin:1.5rem 0}
.cp-main .entry-page-body{color:rgba(0,0,0,0.8);font-size:0.9375rem;line-height:1.75}
.cp-main .entry-page-body p{margin-bottom:1rem}
.cp-main .entry-page-body a{color:var(--color-accent-ink,#2c7a2c);text-decoration:none}
.cp-main .entry-page-body a:hover{text-decoration:underline;text-underline-offset:3px}
/* The inverted code register: accent green on ink, as on the tool pages. */
.cp-main .entry-page-body code{
  font-family:var(--font-mono);font-size:0.8125rem;
  background:var(--color-ink,#000);color:var(--color-accent,#8cf37a);
  padding:0.1rem 0.4rem;
}
.cp-main .entry-page-body pre{
  font-family:var(--font-mono);font-size:0.8125rem;line-height:1.8;
  background:var(--color-ink,#000);color:var(--color-accent,#8cf37a);
  border:0;padding:1.2rem;overflow-x:auto;margin-bottom:1rem;
}
.cp-main .entry-page-body pre code{background:transparent;padding:0;color:var(--color-accent,#8cf37a)}
.cp-main .entry-page-body ul,.cp-main .entry-page-body ol{margin:0 0 1rem 1.4rem}
.cp-main .entry-page-body li{margin-bottom:0.4rem;color:rgba(0,0,0,0.8)}
.cp-main .entry-page-body h2,
.cp-main .entry-page-body h3,
.cp-main .entry-page-body h4{
  font-family:var(--font-display);font-weight:500;letter-spacing:-0.02em;
  color:var(--color-ink,#000);margin:1.75rem 0 0.75rem;
}
.cp-main .entry-page-body h2{font-size:1.35rem}
.cp-main .entry-page-body h3{font-size:1.1rem}
.cp-main .entry-page-body h4{font-size:0.95rem}

.cp-main .back-link{
  display:inline-block;margin-top:2rem;text-decoration:none;
  color:var(--color-accent-ink,#2c7a2c);
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.78rem;
}
.cp-main .back-link:hover{text-decoration:underline;text-underline-offset:3px}

/* Primary button: ink field, paper text (the old block set #111111 text on a
   #000000 field, so the label was invisible), accent on hover. */
.cp-main .btn-primary{
  display:inline-block;cursor:pointer;border:0;text-decoration:none;
  background:var(--color-ink,#000);color:var(--color-paper,#fff);
  padding:0.8rem 1.6rem;
  font-family:var(--font-sans,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);font-size:0.8rem;font-weight:400;
  transition:background .25s,color .25s;
}
.cp-main .btn-primary:hover{background:var(--color-accent,#8cf37a);color:var(--color-ink,#000);text-decoration:none}

/* Footer link row (chrome mirrors the marketing pages) */
.cp-main .footer-links{
  display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;
  margin-bottom:1.25rem;
}

@media(max-width:640px){
  .cp-main .entry{padding:1.25rem 1.1rem}
  .cp-main .entry-page{padding:1.5rem 1.25rem}
}
@media(prefers-reduced-motion:reduce){.cp-main *{transition-duration:0.01ms!important}}