/* ============================================================================
   No Problem Parenting — Blog design system (6B language)
   Plus Jakarta Sans + Manrope · teal #134a5b · gold #f7ca15 · goldfinch.
   Shared across the blog index + all post templates.
   ============================================================================ */
:root{
  --teal:#134a5b; --teal-mid:#2d7088; --ink-teal:#0e3643;
  --gold:#f7ca15; --gold-deep:#f2ad20; --gold-text:#856310;
  --cream:#eef1f0; --cream-soft:#fbfaf7; --warm:#f6efdd;
  --ink:#2c2f31; --ink-soft:#54585b; --ink-faint:#8a8e91;
  --line:#e7ecef; --white:#fff;
  --shadow-card:0 1px 2px rgba(14,54,67,.04),0 14px 32px -20px rgba(14,54,67,.28);
  --shadow-lg:0 30px 70px -38px rgba(14,54,67,.5);
  --jakarta:'Plus Jakarta Sans',system-ui,sans-serif; --manrope:'Manrope',system-ui,sans-serif;
  --wrap:1180px; --read:720px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{ font-family:var(--manrope); color:var(--ink-soft); background:var(--cream-soft); line-height:1.72; -webkit-font-smoothing:antialiased; font-size:17px; }
h1,h2,h3,h4{ font-family:var(--jakarta); color:var(--ink-teal); letter-spacing:-.02em; line-height:1.15; }
img{ max-width:100%; display:block; }
a{ color:var(--teal); text-decoration:none; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ---------- top nav ---------- */
.nav{ position:sticky; top:0; z-index:40; background:rgba(251,250,247,.88); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.nav .row{ max-width:var(--wrap); margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:24px; }
.nav .logo img{ height:38px; width:auto; }
.nav .links{ display:flex; gap:22px; margin-left:8px; }
.nav .links a{ font-family:var(--jakarta); font-weight:600; font-size:14.5px; color:var(--ink-soft); }
.nav .links a:hover, .nav .links a.on{ color:var(--ink-teal); }
.nav .cta{ margin-left:auto; }
.btn-gold{ display:inline-flex; align-items:center; gap:9px; background:var(--gold); color:var(--ink-teal); padding:11px 20px; border-radius:11px; font-family:var(--jakarta); font-weight:800; font-size:14.5px; border:none; cursor:pointer; box-shadow:0 12px 26px -12px rgba(242,173,32,.55); transition:transform .18s,background .18s; }
.btn-gold:hover{ background:var(--gold-deep); transform:translateY(-2px); }
.btn-gold svg{ width:16px; height:16px; stroke:var(--ink-teal); fill:none; stroke-width:2.5; }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; background:var(--white); color:var(--teal); border:1.5px solid rgba(19,74,91,.18); padding:10px 18px; border-radius:11px; font-family:var(--jakarta); font-weight:700; font-size:14px; cursor:pointer; }
.btn-ghost:hover{ border-color:var(--teal); }

/* ---------- shared bits ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--jakarta); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.eyebrow svg{ width:18px; height:14px; }
.cat{ display:inline-flex; align-items:center; font-family:var(--jakarta); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.cat-foundations{ background:rgba(45,112,136,.12); color:var(--teal); }
.cat-mindset{ background:rgba(247,202,21,.18); color:var(--gold-text); }
.cat-routines{ background:rgba(47,143,107,.14); color:#2f8f6b; }
.cat-scripts{ background:rgba(178,39,31,.10); color:#b4271f; }
.cat-qa{ background:rgba(45,112,136,.1); color:var(--teal-mid); }
.meta{ font-size:13.5px; color:var(--ink-faint); display:flex; align-items:center; gap:8px; }
.meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--ink-faint); }
.byline{ display:flex; align-items:center; gap:11px; }
.byline .av{ width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:center top; border:2px solid var(--gold); flex:none; background:var(--teal); }
.byline .nm{ font-family:var(--jakarta); font-weight:700; font-size:14.5px; color:var(--ink-teal); }
.byline .sub{ font-size:12.5px; color:var(--ink-faint); }

/* ---------- index: hero ---------- */
.bloghero{ background:radial-gradient(90% 70% at 12% 0%, rgba(247,202,21,.08), transparent 55%), linear-gradient(180deg,var(--cream-soft),var(--white)); padding:60px 0 36px; border-bottom:1px solid var(--line); }
.bloghero h1{ font-size:clamp(34px,5vw,52px); font-weight:800; max-width:16ch; }
.bloghero .lede{ font-size:19px; color:var(--ink-soft); max-width:54ch; margin-top:16px; }
.searchrow{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }
.search{ display:flex; align-items:center; gap:11px; background:var(--white); border:1.5px solid var(--line); border-radius:13px; padding:13px 17px; min-width:340px; flex:1; max-width:460px; box-shadow:var(--shadow-card); }
.search svg{ width:19px; height:19px; stroke:var(--ink-faint); fill:none; stroke-width:2; }
.search input{ border:none; outline:none; font-family:var(--manrope); font-size:15.5px; color:var(--ink); width:100%; background:none; }
.cats{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.cchip{ font-family:var(--jakarta); font-size:13.5px; font-weight:700; color:var(--ink-soft); background:var(--white); border:1px solid var(--line); padding:9px 15px; border-radius:100px; cursor:pointer; box-shadow:var(--shadow-card); transition:all .16s; }
.cchip:hover{ border-color:var(--teal-mid); color:var(--ink-teal); }
.cchip.on{ background:var(--ink-teal); color:#fff; border-color:var(--ink-teal); }

/* ---------- index: featured ---------- */
.section{ padding:46px 0; }
.sec-h{ font-family:var(--jakarta); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:20px; }
.featured{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; border-radius:24px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-lg); background:var(--white); }
.featured .img{ background:linear-gradient(150deg,var(--teal),var(--ink-teal)); min-height:340px; position:relative; display:flex; align-items:flex-end; padding:26px; }
.featured .img .badge{ position:absolute; top:20px; left:20px; background:var(--gold); color:var(--ink-teal); font-family:var(--jakarta); font-weight:800; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:6px 13px; border-radius:100px; }
.featured .img .finch{ width:120px; height:96px; opacity:.9; margin:auto; }
.featured .body{ padding:34px 34px; display:flex; flex-direction:column; }
.featured h2{ font-size:30px; font-weight:800; margin:14px 0 12px; }
.featured p{ font-size:16.5px; color:var(--ink-soft); }
.featured .byline{ margin-top:auto; padding-top:22px; }

/* ---------- index: grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pcard{ background:var(--white); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column; transition:transform .18s,box-shadow .18s; }
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pcard .thumb{ height:168px; position:relative; display:flex; align-items:center; justify-content:center; }
.pcard .thumb .cat{ position:absolute; top:13px; left:13px; }
.th-teal{ background:linear-gradient(150deg,var(--teal),var(--ink-teal)); }
.th-warm{ background:linear-gradient(150deg,var(--warm),#fbf7ee); }
.th-gold{ background:linear-gradient(150deg,#fde9a0,var(--gold)); }
.th-deep{ background:linear-gradient(150deg,var(--ink-teal),#07222b); }
.pcard .thumb svg.ic{ width:46px; height:46px; opacity:.92; }
.pcard .pbody{ padding:18px 19px 20px; display:flex; flex-direction:column; flex:1; }
.pcard h3{ font-size:18.5px; font-weight:800; margin:4px 0 8px; line-height:1.25; }
.pcard p{ font-size:14.5px; color:var(--ink-soft); flex:1; }
.pcard .pfoot{ margin-top:15px; }

/* tag cloud */
.tags{ display:flex; gap:9px; flex-wrap:wrap; }
.tag{ font-family:var(--jakarta); font-size:13px; font-weight:700; color:var(--teal-mid); background:rgba(45,112,136,.08); padding:7px 13px; border-radius:8px; }
.tag:hover{ background:rgba(45,112,136,.16); }

/* ---------- article ---------- */
.arthead{ padding:46px 0 8px; }
.arthead .crumbs{ font-family:var(--jakarta); font-size:13px; font-weight:600; color:var(--ink-faint); margin-bottom:18px; }
.arthead .crumbs a{ color:var(--teal-mid); }
.artwrap{ max-width:var(--read); margin:0 auto; padding:0 28px; }
.arttitle{ font-size:clamp(30px,4.4vw,46px); font-weight:800; line-height:1.1; max-width:20ch; }
.artsub{ font-size:20px; color:var(--ink-soft); margin-top:16px; max-width:60ch; }
.artmeta{ display:flex; align-items:center; gap:16px; margin-top:24px; padding-bottom:26px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.prose{ max-width:var(--read); margin:0 auto; padding:30px 28px 10px; }
.prose p{ font-size:18px; color:var(--ink); margin:0 0 22px; }
.prose h2{ font-size:27px; font-weight:800; margin:42px 0 14px; }
.prose h3{ font-size:21px; font-weight:800; margin:30px 0 10px; color:var(--teal); }
.prose ul, .prose ol{ margin:0 0 22px; padding-left:24px; }
.prose li{ font-size:18px; color:var(--ink); margin-bottom:10px; }
.prose a{ border-bottom:2px solid rgba(45,112,136,.3); }
.prose strong{ color:var(--ink-teal); }
.prose blockquote{ border-left:4px solid var(--gold); padding:6px 0 6px 24px; margin:30px auto; font-family:var(--jakarta); font-size:23px; font-weight:700; color:var(--ink-teal); line-height:1.4; letter-spacing:-.01em; }
.prose figure{ margin:34px auto; }
.prose figure .ph{ border-radius:18px; min-height:300px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-card); }
.prose figure figcaption{ font-size:13.5px; color:var(--ink-faint); text-align:center; margin-top:11px; font-style:italic; }
.prose .lead{ font-size:21px; line-height:1.6; color:var(--ink-soft); }

/* callout / step boxes */
.callout{ background:var(--warm); border:1px solid rgba(242,173,32,.3); border-radius:16px; padding:22px 24px; margin:30px auto; }
.callout .eyebrow{ margin-bottom:8px; }
.callout p{ margin:0; font-size:16.5px; }
.step{ display:flex; gap:16px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin:0 auto 16px; max-width:var(--read); box-shadow:var(--shadow-card); }
.step .num{ width:42px; height:42px; border-radius:12px; background:var(--gold); color:var(--ink-teal); font-family:var(--jakarta); font-weight:800; font-size:19px; display:flex; align-items:center; justify-content:center; flex:none; }
.step h3{ margin:2px 0 6px; font-size:19px; color:var(--ink-teal); }
.step p{ margin:0; font-size:16px; }

/* TOC (pillar) */
.toc{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:14px auto 8px; box-shadow:var(--shadow-card); }
.toc .t{ font-family:var(--jakarta); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }
.toc ol{ margin:0; padding-left:20px; }
.toc li{ font-family:var(--jakarta); font-weight:600; font-size:16px; margin-bottom:9px; }
.toc a{ color:var(--ink-teal); border:none; }
.toc a:hover{ color:var(--teal-mid); }

/* script cards (listicle) */
.scriptcard{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:0 auto 16px; max-width:var(--read); box-shadow:var(--shadow-card); }
.scriptcard .when{ font-family:var(--jakarta); font-weight:800; font-size:18px; color:var(--ink-teal); display:flex; gap:12px; align-items:center; }
.scriptcard .when .n{ width:30px; height:30px; border-radius:9px; background:rgba(45,112,136,.1); color:var(--teal); font-size:14px; display:flex; align-items:center; justify-content:center; flex:none; }
.scriptcard .say{ margin-top:14px; padding:15px 18px; background:var(--warm); border-radius:12px; font-family:var(--jakarta); font-weight:700; font-size:17.5px; color:var(--ink-teal); font-style:italic; }
.scriptcard .why{ margin-top:12px; font-size:15px; color:var(--ink-soft); }

/* visual post gallery */
.fullbleed{ position:relative; height:clamp(320px,52vh,520px); display:flex; align-items:flex-end; }
.gal{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; margin:34px auto; padding:0 28px; }
.gal .cell{ border-radius:16px; min-height:240px; box-shadow:var(--shadow-card); display:flex; align-items:flex-end; padding:18px; }
.gal .cell span{ background:rgba(14,54,67,.55); color:#fff; font-family:var(--jakarta); font-weight:700; font-size:13.5px; padding:7px 13px; border-radius:8px; backdrop-filter:blur(4px); }
.gal .cell.tall{ grid-row:span 2; min-height:auto; }

/* author + next */
.endcard{ background:linear-gradient(168deg,var(--teal),var(--ink-teal)); border-radius:22px; padding:34px; margin:46px auto; max-width:var(--read); color:rgba(244,246,247,.9); text-align:center; }
.endcard h3{ color:#fff; font-size:24px; }
.endcard p{ margin:10px 0 18px; }
.relrow{ max-width:var(--wrap); margin:0 auto; padding:10px 28px 70px; }

/* footer */
.foot{ background:var(--ink-teal); color:rgba(244,246,247,.7); padding:40px 0; margin-top:30px; }
.foot .row{ max-width:var(--wrap); margin:0 auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot a{ color:var(--gold); }

/* finch motif */
.finch .bird{ fill:var(--gold-deep); } .finch .twig{ fill:none; stroke:var(--teal); stroke-width:2.2; stroke-linecap:round; opacity:.7; }
.on-dark .finch .bird{ fill:var(--gold); } .on-dark .finch .twig{ stroke:var(--gold); opacity:.5; }

@media (max-width:900px){
  .featured{ grid-template-columns:1fr; } .grid{ grid-template-columns:1fr 1fr; }
  .nav .links{ display:none; } .gal{ grid-template-columns:1fr; } .gal .cell.tall{ grid-row:auto; }
}
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } body{ font-size:16px; } }