/* ============================================================================
   KAAM.COM · BLOG · new site theme (Sep 2026)
   Mirrors /next/home tokens: warm white canvas · navy only where the product
   runs · teal = the one action · gold earned only · no borders on rounded cards
   · uppercase mono = labels only.
   Type: Bricolage Grotesque display · Plus Jakarta Sans body · IBM Plex Mono labels.
   Direction: Broadsheet (Rishi picked A of three, 10 Sep 2026).
   ========================================================================== */
:root{
  --canvas:#FCFBF8; --paper:#FFFFFF; --ink:#232A46; --ink-2:#3B4262; --muted:#6B7186; --faint:#A6AABB;
  --teal:#177A8C; --teal-d:#0F5B69; --teal-t:#E6F1F2; --gold:#E9B949; --gold-d:#8F6208; --gold-t:#FBF1D6;
  --navy:#1B2140; --navy-2:#232A46; --navy-3:#151A2E;
  --line:rgba(35,42,70,.10); --line-2:rgba(35,42,70,.06);
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --shadow:0 12px 30px rgba(35,42,70,.10), inset 0 1px 0 rgba(255,255,255,.85);
  --shadow-lg:0 30px 70px rgba(35,42,70,.18), inset 0 1px 0 rgba(255,255,255,.85);
  --ease:cubic-bezier(.22,.7,.3,1);
  --f-disp:"Bricolage Grotesque",system-ui,sans-serif; --f-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(18px,4.5vw,48px); --max:1240px; --read:700px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
body>*{max-width:100vw}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-disp);letter-spacing:-.028em;line-height:1.06;font-weight:700;text-wrap:balance}
::selection{background:var(--teal);color:#fff}
.lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500}
.lbl.teal{color:var(--teal)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.em{color:var(--teal);font-style:normal}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap;transition:transform .18s var(--ease),background .18s}
.btn:active{transform:translateY(1px)}
.btn.teal{background:var(--teal);color:#fff;box-shadow:0 8px 20px rgba(23,122,140,.22)} .btn.teal:hover{background:var(--teal-d)}
.btn.ghost{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(35,42,70,.16);background:var(--paper)}
.btn.sm{height:38px;padding:0 14px;font-size:13px}

/* nav + footer: shared site chrome (/assets/home/site-chrome.css) */

/* ============================================================================
   ARTICLE
   ========================================================================== */
.ahead{max-width:var(--max);margin:0 auto;padding:clamp(28px,5vw,64px) var(--gutter) 0}
.article-hero-inner{max-width:900px}
.a-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:18px}
.article-hero h1{font-size:clamp(2.1rem,4.8vw,4rem);line-height:1.02;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
.a-kicker{margin-top:20px;font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:720px;text-wrap:pretty}
.a-byline{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:26px;font-size:13px;color:var(--muted)}
.a-byline .author{color:var(--ink);font-weight:600}
.a-byline .dot{width:3px;height:3px;border-radius:50%;background:var(--faint)}
.article-hero-image{margin-top:clamp(26px,4vw,44px)}
.article-hero-image img{width:100%;border-radius:var(--r-lg);aspect-ratio:16/9;object-fit:cover;box-shadow:var(--shadow-lg)}

.article-body{padding:clamp(28px,4vw,52px) var(--gutter) 0}
.article-body-inner{max-width:var(--read);margin:0 auto;font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.article-body-inner>p,.article-body-inner>ul,.article-body-inner>ol,.article-body-inner>figure,.article-body-inner>hr,.article-body-inner>pre,.article-body-inner>table{margin-bottom:1.55em}
.article-body-inner>h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.03em;color:var(--ink);margin:2.3em 0 .8em;line-height:1.1}
.article-body-inner>h3{font-size:1.2rem;color:var(--ink);margin:1.8em 0 .6em}
.article-body-inner>h4{font-size:1rem;color:var(--ink);margin:1.6em 0 .5em}
.article-body-inner a{color:var(--teal-d);box-shadow:inset 0 -1px 0 rgba(23,122,140,.35);transition:box-shadow .15s}
.article-body-inner a:hover{box-shadow:inset 0 -2px 0 var(--teal)}
.article-body-inner strong{color:var(--ink);font-weight:600}
.article-body-inner em{color:var(--ink)}
.article-body-inner ul,.article-body-inner ol{padding-left:1.3em}
.article-body-inner li{margin-bottom:.45em}
.article-body-inner hr{border:0;height:1px;background:var(--line);margin:2.6em auto;width:120px}
.article-body-inner code{font-family:var(--f-mono);font-size:.86em;background:var(--paper);padding:.12em .4em;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}
.article-body-inner pre{background:var(--navy);color:#E8ECF7;border-radius:var(--r-md);padding:18px 20px;overflow:auto;font-size:.9em}
.article-body-inner pre code{background:transparent;box-shadow:none;padding:0}
.article-body-inner table{width:100%;border-collapse:collapse;font-size:.92em}
.article-body-inner th,.article-body-inner td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.article-body-inner th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.article-body-inner figure img{border-radius:var(--r-md)}
.article-body-inner figcaption{font-size:13px;color:var(--muted);margin-top:10px}
/* drop cap */
.layout-article .article-body-inner>p:first-of-type::first-letter{font-family:var(--f-disp);font-weight:800;font-size:3.9em;line-height:.78;float:left;margin:.08em .12em 0 0;color:var(--ink)}
/* pull quote: display type, one teal rule, no card */
.pullquote{margin:2.4em 0;padding-top:22px;position:relative;font-family:var(--f-disp);font-weight:700;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.25;letter-spacing:-.025em;color:var(--ink);text-wrap:pretty}
.pullquote::before{content:"";position:absolute;top:0;left:0;width:44px;height:2px;background:var(--teal);border-radius:2px}
.pullquote p{margin:0}
.pullquote .pq-attrib{display:block;margin-top:12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
/* callout: white card, shadow, no border */
.callout{margin:2em 0;padding:20px 22px;background:var(--paper);border-radius:var(--r-md);box-shadow:var(--shadow);font-size:.95em;color:var(--ink-2)}
.callout strong{color:var(--ink)}
/* listicle / how-to numbers */
.layout-listicle .article-body-inner>h2,.layout-how-to .article-body-inner>h2{position:relative;padding-top:26px}
.layout-listicle .article-body-inner>h2::before,.layout-how-to .article-body-inner>h2::before{content:attr(data-num);position:absolute;top:0;left:0;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;color:var(--teal);font-weight:500}
/* case study */
.case-brand-strip,.case-kpi-strip{max-width:var(--read);margin:28px auto 0;padding:0 var(--gutter)}
.case-brand-strip-inner{display:flex;align-items:center;gap:14px;font-family:var(--f-disp);font-weight:700;color:var(--ink)}
.case-brand-strip .label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.case-brand-strip img{height:32px;width:auto}
.case-kpi-strip-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.case-kpi{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--shadow);padding:18px}
.case-kpi .v{display:block;font-family:var(--f-disp);font-weight:800;font-size:1.9rem;letter-spacing:-.04em;color:var(--teal)}
.case-kpi .l{font-size:12.5px;color:var(--muted)}
/* share */
.article-share-top{max-width:var(--read);margin:22px auto 0;padding:0 var(--gutter)}
.article-share-top-inner{display:flex;align-items:center;gap:12px}
.share-mini-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.share-icons{display:flex;gap:8px;flex-wrap:wrap}
.share-btn-icon,.share-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:36px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:13px;transition:background .15s,color .15s}
.share-btn{padding:0 14px}
.share-btn-icon:hover,.share-btn:hover{background:var(--ink);color:#fff}
.share-btn-copied{background:var(--teal)!important;color:#fff!important}
.article-share{margin:56px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.article-share .share-label{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:12px}
.share-buttons{display:flex;gap:8px;flex-wrap:wrap}
/* sources */
.article-sources{margin-top:32px;background:var(--paper);border-radius:var(--r-md);box-shadow:var(--shadow);font-size:14px}
.article-sources>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:14px 18px;cursor:pointer;color:var(--ink);font-weight:600}
.article-sources>summary::-webkit-details-marker{display:none}
.article-sources .src-icon{color:var(--teal);display:inline-flex}
.article-sources .src-count{font-family:var(--f-mono);font-size:10.5px;background:var(--teal-t);color:var(--teal-d);padding:2px 8px;border-radius:999px}
.article-sources .src-chevron{margin-left:auto;color:var(--muted);transition:transform .2s}
.article-sources[open] .src-chevron{transform:rotate(180deg)}
.article-sources .src-list{padding:0 18px 16px 38px;color:var(--ink-2)}
.article-sources .src-list li{padding:6px 0;border-top:1px solid var(--line-2)}
.article-sources .src-list a{color:var(--ink-2)} .article-sources .src-list a:hover{color:var(--teal-d)}
.article-sources .src-arrow{color:var(--faint);margin-left:4px}
/* CTA: the product runs here, so this is the one navy stage on the page */
.cta-card{margin:40px 0 0;padding:34px 32px;background:linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 58%,var(--navy-3) 100%);border-radius:var(--r-lg);color:#fff;box-shadow:var(--shadow-lg)}
.cc-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500}
.cc-headline{font-family:var(--f-disp);font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;line-height:1.08;margin-top:12px}
.cc-headline em{font-style:normal;color:var(--gold)}
.cc-body{margin-top:14px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.6;max-width:520px}
.cc-button{display:inline-flex;align-items:center;gap:9px;margin-top:22px;height:44px;padding:0 20px;border-radius:999px;background:var(--teal);color:#fff;font-weight:600;font-size:14px}
.cc-button:hover{background:#1E93A8}
.soft-cta{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.soft-cta a{color:var(--teal-d)}
/* related */
.related{max-width:var(--max);margin:64px auto 0;padding:0 var(--gutter)}
.related-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.related-card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform .2s var(--ease)}
.related-card:hover{transform:translateY(-2px)}
.rc-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:500}
.related-card h3{font-size:1.15rem;letter-spacing:-.02em}
.related-card p{font-size:13.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.notfound{max-width:var(--read);margin:0 auto;padding:80px var(--gutter);text-align:center}
.notfound h1{font-size:3rem} .notfound p{margin:14px 0 24px;color:var(--muted)}

/* ============================================================================
   INDEX
   ========================================================================== */
.blog-index-hero{max-width:var(--max);margin:0 auto;padding:clamp(34px,6vw,80px) var(--gutter) clamp(24px,4vw,44px)}
.bi-eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:500;margin-bottom:18px}
.blog-index-hero h1{font-size:clamp(2.3rem,5.6vw,4.6rem);letter-spacing:-.04em;line-height:.98;font-weight:800;max-width:900px}
.blog-index-hero p{margin-top:18px;font-size:1.1rem;color:var(--muted);max-width:560px}
.blog-list{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.post-card{display:flex;flex-direction:column;color:var(--ink)}
.post-card-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg)}
.post-card-eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:500}
.post-card-body h2{font-size:1.35rem;letter-spacing:-.025em;margin-top:8px;line-height:1.12}
.post-card-body p{margin-top:10px;color:var(--muted);font-size:14.5px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-meta{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.post-card-meta .sep{width:3px;height:3px;border-radius:50%;background:var(--faint)}

/* ---- Broadsheet (Rishi, 10 Sep 2026): one lead story, then a dense list -- */
.blog-list-grid{display:grid;gap:0}
.post-card{padding:28px 0;border-top:1px solid var(--line)}
.post-card:not(:first-child){display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
.post-card:not(:first-child) .post-card-image img{aspect-ratio:4/3;border-radius:var(--r-md)}
.post-card:not(:first-child) h2{font-size:1.45rem}
.post-card:first-child{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center;border-top:0;padding-top:0;padding-bottom:40px}
.post-card:first-child .post-card-image img{box-shadow:var(--shadow-lg)}
.post-card:first-child h2{font-size:clamp(1.8rem,3.2vw,2.7rem);letter-spacing:-.035em}
.post-card:first-child p{-webkit-line-clamp:4;font-size:16px}
@media(max-width:760px){.post-card:first-child,.post-card:not(:first-child){grid-template-columns:1fr;gap:16px}}
.article-hero-image img{aspect-ratio:2/1}