/* ============================================================================
   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{ min-height:340px; position:relative; overflow:hidden; background:var(--ink-teal); }
.featured .img picture{ position:absolute; inset:0; display:block; }
.featured .img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.featured .img::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(14,54,67,.42), rgba(14,54,67,.04) 46%, rgba(14,54,67,0) 70%); }
.featured .img .badge{ position:absolute; top:20px; left:20px; z-index:2; 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; box-shadow:0 4px 14px rgba(14,54,67,.28); }
.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; overflow:hidden; background:var(--ink-teal); }
.pcard .thumb picture{ position:absolute; inset:0; display:block; }
.pcard .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:transform .3s ease; }
.pcard:hover .thumb img{ transform:scale(1.04); }
.pcard .thumb::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, rgba(14,54,67,.46) 0%, rgba(14,54,67,.10) 32%, rgba(14,54,67,0) 60%); }
.pcard .thumb .cat{ position:absolute; top:13px; left:13px; z-index:2;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 2px 10px rgba(14,54,67,.22); }
.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; }

.noresults{ font-size:15.5px; color:var(--ink-soft); padding:8px 0 20px; }
.linklike{ background:none; border:none; padding:0; font:inherit; color:var(--teal-mid); font-weight:700; cursor:pointer; text-decoration:underline; }

/* 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); }

/* ---------- documentary photo header (shared across posts) ---------- */
.phero{ position:relative; min-height:clamp(360px,54vh,540px); display:flex; align-items:flex-end;
  overflow:hidden; background-size:cover; background-position:center right; background-repeat:no-repeat;
  border-bottom:1px solid var(--line); }
.phero .phero-in{ position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; width:100%;
  padding:0 28px 44px; color:#fff; }
.phero .crumbs{ font-family:var(--jakarta); font-size:13px; font-weight:600; color:rgba(255,255,255,.72); margin-bottom:16px; }
.phero .crumbs a{ color:rgba(255,255,255,.92); }
.phero .arttitle{ color:#fff; margin-top:14px; max-width:20ch; text-shadow:0 1px 24px rgba(14,54,67,.35); }
.phero .arttitle .k{ color:var(--gold); }
.phero .artsub{ color:rgba(244,246,247,.92); max-width:56ch; margin-top:14px; }
.phero .artmeta{ border-bottom:none; padding-bottom:0; margin-top:22px; }
.phero .byline .nm{ color:#fff; } .phero .byline .sub{ color:rgba(255,255,255,.74); }
.phero .byline .av{ border-color:var(--gold); }
.phero .meta{ color:rgba(255,255,255,.74); } .phero .meta .dot{ background:rgba(255,255,255,.6); }
.phero .cat{ background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(4px); }

/* 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 — unified with the rest of the marketing site */
footer.on-dark{ background:var(--ink-teal); color:rgba(244,246,247,.72); padding:66px 0 34px; margin-top:40px; }
footer.on-dark .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.12); }
.foot-logo{ display:inline-block; margin-bottom:18px; }
.foot-logo img{ height:48px; width:auto; }
.foot-finch{ width:32px; height:26px; margin-bottom:16px; }
.foot-brand p{ font-size:14.5px; color:rgba(244,246,247,.6); max-width:290px; line-height:1.62; }
.foot-col h4{ font-family:var(--jakarta); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin-bottom:18px; font-weight:700; }
.foot-col a{ display:block; font-size:14.5px; color:rgba(244,246,247,.72); margin-bottom:11px; transition:color .2s; }
.foot-col a:hover{ color:var(--gold); }
.foot-bottom{ padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:13px; color:rgba(244,246,247,.5); }
.foot-bottom .tm{ color:var(--gold); font-weight:700; }
@media (max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media (max-width:600px){ .foot-grid{ grid-template-columns:1fr; gap:30px; } }

/* 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; }
  .phero{ min-height:360px; background-position:72% center; } .phero .phero-in{ padding-bottom:32px; }
}
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } body{ font-size:16px; } }