/* Carbon Fix — Learn plugin styles
   Brand tokens + the /learn hub and guide-article layouts.
   Self-contained: the templates render their own chrome, so these
   styles don't depend on (or fight) the active theme. */

:root {
  --cf-farm:#A4C87C; --cf-pasture:#9BBA6E; --cf-sandstone:#F5F4EC; --cf-white:#FFFFFF;
  --cf-biochar:#222725; --cf-black:#161D1A; --cf-forrest:#43977F; --cf-blue-gum:#717DB5;
  --cf-hay:#E5B375; --cf-rust:#D66867; --cf-leather:#90586A;
  --cf-green-on-light:#2c5a48;
  --border-hairline:rgba(34,39,37,0.14);
  --radius-md:6px; --radius-lg:12px; --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(22,29,26,.04),0 4px 16px rgba(22,29,26,.06);
  --shadow-raised:0 8px 28px rgba(22,29,26,.12);
  --cf-sans:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

.cfix-page * { box-sizing: border-box; }
.cfix-page { margin:0; font-family:var(--cf-sans); color:var(--cf-biochar); background:var(--cf-white); -webkit-font-smoothing:antialiased; }
.cfix-page a { color:inherit; }
.cfix-page img { max-width:100%; }
/* Lucide icon default — specific rules below override where needed */
.cfix-page svg.lucide { width:1.1em; height:1.1em; vertical-align:middle; stroke-width:1.75; flex:none; }
.cfix-wrap { max-width:1200px; margin:0 auto; }
html { scroll-behavior:smooth; }

/* Header */
.cfix-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); -webkit-backdrop-filter:saturate(140%) blur(8px); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--border-hairline); }
.cfix-header .cfix-wrap { padding:16px 40px; display:flex; align-items:center; justify-content:space-between; }
.cfix-header img { height:36px; display:block; }
.cfix-nav { display:flex; align-items:center; gap:34px; }
.cfix-nav a { font-size:15px; font-weight:500; text-decoration:none; color:var(--cf-biochar); opacity:.85; }

/* Buttons */
.cfix-page .cfix-btn { font-family:var(--cf-sans); font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:9px; padding:13px 26px; min-height:46px; border-radius:var(--radius-md); border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:all .14s ease; justify-content:center; }
.cfix-page .cfix-btn--primary { background:var(--cf-biochar); color:var(--cf-white); }
.cfix-page .cfix-btn--primary:hover { background:var(--cf-forrest); color:var(--cf-white); }
.cfix-page .cfix-btn--lg { padding:15px 30px; font-size:16px; }
.cfix-page .cfix-btn .lucide { width:18px; height:18px; }

/* ---------- Hub ---------- */
.cfix-hub-hero { background:var(--cf-sandstone); padding:64px 40px 52px; }
.cfix-eyebrow { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cf-forrest); margin:0 0 16px; }
.cfix-hub-hero h1 { font-weight:300; font-size:clamp(38px,4.6vw,58px); line-height:1.04; letter-spacing:-.015em; color:var(--cf-black); margin:0; max-width:760px; }
.cfix-hub-hero p.lead { font-weight:300; font-size:18px; line-height:1.6; color:var(--cf-biochar); max-width:600px; margin:20px 0 32px; }
.cfix-search { display:flex; align-items:center; gap:12px; background:var(--cf-white); border:1px solid var(--border-hairline); border-radius:var(--radius-md); padding:0 16px; height:54px; max-width:520px; box-shadow:var(--shadow-card); }
.cfix-search .lucide { width:20px; height:20px; color:rgba(34,39,37,.5); flex:none; }
.cfix-search input { border:0; outline:0; background:transparent; font-family:var(--cf-sans); font-weight:300; font-size:16px; color:var(--cf-biochar); width:100%; }

.cfix-filter { background:var(--cf-white); padding:28px 40px 0; position:sticky; top:69px; z-index:40; border-bottom:1px solid var(--border-hairline); }
.cfix-filter .cfix-wrap { display:flex; gap:10px; flex-wrap:wrap; padding-bottom:20px; }
.cfix-chip { font-family:var(--cf-sans); font-size:14px; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:var(--radius-pill); border:1.5px solid transparent; background:rgba(34,39,37,.06); color:var(--cf-biochar); text-decoration:none; transition:all .14s ease; }
.cfix-chip:hover { background:rgba(34,39,37,.1); }
.cfix-chip.is-active { background:var(--cf-biochar); color:var(--cf-white); border-color:var(--cf-biochar); }

.cfix-hub-body { background:var(--cf-white); padding:40px 40px 88px; }
.cfix-section-head { display:flex; align-items:baseline; justify-content:space-between; margin:0 0 22px; }
.cfix-section-head h2 { font-weight:500; font-size:24px; color:var(--cf-black); margin:0; }
.cfix-count { font-weight:300; font-size:14px; color:rgba(34,39,37,.55); }

/* Pillar */
.cfix-pillar { text-decoration:none; display:grid; grid-template-columns:1.05fr 1fr; background:var(--cf-black); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:44px; }
.cfix-pillar .body { padding:48px 44px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.cfix-pillar .tagrow { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--cf-farm); }
.cfix-pillar h2 { font-weight:300; font-size:clamp(28px,3vw,38px); line-height:1.1; letter-spacing:-.015em; color:var(--cf-farm); margin:0; }
.cfix-pillar p { font-weight:300; font-size:16px; line-height:1.6; color:rgba(255,255,255,.82); margin:0; max-width:460px; }
.cfix-pillar .meta { display:flex; align-items:center; gap:16px; margin-top:6px; font-size:13px; color:rgba(255,255,255,.6); }
.cfix-pillar .meta .go { display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--cf-white); }
.cfix-pillar .media { position:relative; min-height:300px; background-image:repeating-linear-gradient(45deg,#1b2420 0 14px,#20302a 14px 28px); display:flex; align-items:center; justify-content:center; }
.cfix-pillar .media .lucide { width:64px; height:64px; color:rgba(164,200,124,.5); }

/* Card grid */
.cfix-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cfix-card { text-decoration:none; background:var(--cf-white); border:1px solid var(--border-hairline); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:box-shadow .22s ease; }
.cfix-card:hover { box-shadow:var(--shadow-raised); }
.cfix-card .media { height:128px; background-size:cover; background-position:center; background-image:repeating-linear-gradient(45deg,#e7e6dc 0 10px,#efeee6 10px 20px); position:relative; }
.cfix-card .icon { position:absolute; top:12px; left:12px; width:40px; height:40px; border-radius:var(--radius-md); background:var(--cf-white); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); }
.cfix-card .icon .lucide { width:20px; height:20px; color:var(--cf-green-on-light); }
.cfix-card .body { padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.cfix-tag { align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:var(--radius-pill); background:rgba(164,200,124,.28); color:var(--cf-green-on-light); }
.cfix-card h3 { font-weight:600; font-size:18px; line-height:1.25; color:var(--cf-black); margin:0; }
.cfix-card p { font-weight:300; font-size:14px; line-height:1.6; color:var(--cf-biochar); margin:0; }
.cfix-card .foot { margin-top:auto; padding-top:8px; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--cf-forrest); }
.cfix-card .foot .lucide { width:15px; height:15px; }
.cfix-card .foot .rt { margin-left:auto; font-weight:300; color:rgba(34,39,37,.55); }

/* Lead strip */
.cfix-leadstrip { background:var(--cf-farm); padding:64px 40px; }
.cfix-leadstrip .cfix-wrap { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.cfix-leadstrip h2 { font-weight:500; font-size:clamp(26px,3vw,34px); line-height:1.1; color:var(--cf-black); margin:0; max-width:560px; }
.cfix-leadstrip p { font-weight:300; font-size:16px; line-height:1.6; color:var(--cf-biochar); margin:14px 0 0; }
.cfix-leadstrip .cfix-btn--primary:hover { background:var(--cf-black); }

/* ---------- Article ---------- */
.cfix-art-hero { background:var(--cf-sandstone); padding:40px 40px 48px; }
.cfix-art-hero .inner { max-width:820px; margin:0 auto; }
.cfix-crumb { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:rgba(34,39,37,.6); margin-bottom:22px; }
.cfix-crumb a { text-decoration:none; color:rgba(34,39,37,.6); }
.cfix-crumb .here { color:var(--cf-green-on-light); }
.cfix-crumb .lucide { width:14px; height:14px; }
.cfix-art-tag { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-pill); background:rgba(113,125,181,.16); color:var(--cf-blue-gum); margin-bottom:18px; }
.cfix-art-hero h1 { font-weight:300; font-size:clamp(34px,4.2vw,52px); line-height:1.06; letter-spacing:-.015em; color:var(--cf-black); margin:0; }
.cfix-art-hero .dek { font-weight:300; font-size:20px; line-height:1.6; color:var(--cf-biochar); margin:20px 0 28px; }
.cfix-byline { display:flex; align-items:center; gap:18px; font-size:14px; color:rgba(34,39,37,.6); flex-wrap:wrap; }
.cfix-byline .who { display:inline-flex; align-items:center; gap:8px; }
.cfix-byline .av { width:30px; height:30px; border-radius:50%; background:var(--cf-farm); display:inline-flex; align-items:center; justify-content:center; color:var(--cf-black); font-weight:600; font-size:12px; }
.cfix-byline .bit { display:inline-flex; align-items:center; gap:6px; }
.cfix-byline .lucide { width:15px; height:15px; }

.cfix-art-heroimg { max-width:1100px; margin:-24px auto 0; padding:0 40px; }
.cfix-art-heroimg .ph { height:340px; border-radius:var(--radius-lg); background-size:cover; background-position:center; background-image:repeating-linear-gradient(45deg,#e7e6dc 0 12px,#efeee6 12px 24px); box-shadow:var(--shadow-card); }

.cfix-art-body { padding:52px 40px 80px; }
.cfix-art-body .inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:220px 1fr; gap:56px; align-items:start; }
.cfix-toc { position:sticky; top:96px; }
.cfix-toc .label { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(34,39,37,.5); margin:0 0 14px; }
.cfix-toc nav { display:flex; flex-direction:column; gap:12px; border-left:1px solid var(--border-hairline); }
.cfix-toc a { font-size:14px; font-weight:400; color:rgba(34,39,37,.7); text-decoration:none; padding-left:14px; margin-left:-1px; border-left:2px solid transparent; line-height:1.4; }
.cfix-toc a.is-active { font-weight:600; color:var(--cf-green-on-light); border-left-color:var(--cf-forrest); }

.cfix-prose { max-width:720px; }
.cfix-prose > p:first-child { font-size:20px; color:var(--cf-black); font-weight:400; }
.cfix-prose p { font-weight:300; font-size:18px; line-height:1.75; color:var(--cf-biochar); margin:0 0 24px; }
.cfix-prose h2 { font-weight:500; font-size:27px; line-height:1.2; color:var(--cf-black); margin:48px 0 16px; scroll-margin-top:90px; }
.cfix-prose h3 { font-weight:600; font-size:19px; color:var(--cf-black); margin:32px 0 10px; }
.cfix-prose ul { margin:0 0 24px; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.cfix-prose ul li { display:block; position:relative; padding-left:28px; font-weight:300; font-size:18px; line-height:1.6; color:var(--cf-biochar); }
.cfix-prose ul li::before { content:"\2192"; color:var(--cf-forrest); font-weight:600; position:absolute; left:0; }
.cfix-prose ol { margin:0 0 24px; padding-left:22px; }
.cfix-prose ol li { font-weight:300; font-size:18px; line-height:1.6; color:var(--cf-biochar); margin-bottom:10px; }
.cfix-prose a { color:var(--cf-forrest); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.cfix-prose strong { font-weight:600; color:var(--cf-black); }
.cfix-prose blockquote { margin:40px 0; padding:4px 0 4px 28px; border-left:4px solid var(--cf-farm); }
.cfix-prose blockquote p { font-weight:300; font-size:26px; line-height:1.35; letter-spacing:-.01em; color:var(--cf-black); margin:0; }
.cfix-prose img { border-radius:var(--radius-lg); margin:8px 0 28px; }
.cfix-inline-cta { background:var(--cf-black); border-radius:var(--radius-lg); padding:28px 30px; margin:36px 0 8px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.cfix-inline-cta h3 { font-weight:500; font-size:21px; color:var(--cf-farm); margin:0; }
.cfix-inline-cta p { font-weight:300; font-size:15px; color:rgba(255,255,255,.8); margin:8px 0 0; }

.cfix-related { background:var(--cf-sandstone); padding:64px 40px; }
.cfix-related .cfix-wrap { max-width:1100px; }
.cfix-related h2 { font-weight:500; font-size:26px; color:var(--cf-black); margin:0 0 26px; }
.cfix-related .cfix-grid { grid-template-columns:repeat(3,1fr); gap:22px; }
.cfix-related .cfix-card .body { padding:22px; }

/* Footer + General Advice Warning */
.cfix-footer { background:var(--cf-black); padding:56px 40px 40px; }
.cfix-footer .top { display:flex; justify-content:space-between; align-items:flex-start; gap:40px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.18); }
.cfix-footer .top img { height:38px; }
.cfix-footer .top nav { display:flex; gap:28px; flex-wrap:wrap; }
.cfix-footer .top nav a { font-size:15px; font-weight:500; color:rgba(255,255,255,.85); text-decoration:none; }
.cfix-gaw { border-top:1px solid var(--cf-farm); margin-top:28px; padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.cfix-gaw p { font-weight:300; font-size:12px; line-height:1.6; color:rgba(255,255,255,.62); margin:0; }
.cfix-gaw .cfix-ack { font-style:italic; }

/* Empty state */
.cfix-empty { text-align:center; padding:60px 0; color:rgba(34,39,37,.6); font-weight:300; font-size:17px; }

/* Responsive */
@media (max-width:900px) {
  .cfix-pillar { grid-template-columns:1fr; }
  .cfix-pillar .media { min-height:200px; }
  .cfix-grid, .cfix-related .cfix-grid { grid-template-columns:1fr 1fr; }
  .cfix-art-body .inner { grid-template-columns:1fr; gap:32px; }
  .cfix-toc { position:static; }
  .cfix-nav a:not(.cfix-btn) { display:none; }
}
@media (max-width:600px) {
  .cfix-grid, .cfix-related .cfix-grid { grid-template-columns:1fr; }
  .cfix-header .cfix-wrap, .cfix-hub-hero, .cfix-hub-body, .cfix-filter, .cfix-art-body, .cfix-footer, .cfix-leadstrip, .cfix-related { padding-left:20px; padding-right:20px; }
}