/* ============================================================
   Caliko Design System — site stylesheet
   Ported from _ds/caliko-design-system-0b5caa17… + Caliko Home.dc.html
   Serves the marketing homepage and the blog.
   The one rule: COLOUR IS STATUS. Two brand pops — royal indigo
   (action) and terracotta (accent). Everything else warm neutral.
   ============================================================ */

:root {
  /* ---- Brand ramp 1 — royal indigo (ACTION only) ---- */
  --blue-50:#EEECFA; --blue-100:#DAD6F2; --blue-200:#C3BCEC; --blue-300:#A99FE8;
  --blue-400:#8074D6; --blue-500:#5E4FCF; --blue-600:#4B3DC0; --blue-700:#322A8F; --blue-800:#1F2E6E;

  /* ---- Brand pop 2 — terracotta ---- */
  --clay-50:#FBEEE8; --clay-100:#F6D6C6; --clay-200:#EEB699; --clay-300:#DD8B66;
  --clay-400:#D06B43; --clay-500:#C0552F; --clay-600:#A1431F; --clay-700:#7C3417;

  /* ---- Surfaces & text ---- */
  --bg:#FCFAF4; --paper:#FFFFFF; --white:#FFFFFF;
  --surface-warm:#F4F0E8; --well:#F7F3EC;
  --hairline:#ECE8DF; --line:#DDD8CC;
  --ink:#0A0A0B; --ink-2:#4A4A52; --text-body:#33333A; --text-muted:#6C6C74; --text-faint:#A6A6AC;

  /* ---- Status — semantic only ---- */
  --success:#2DAB73; --success-bg:#E3F4EC;
  --meeting:#3F7D52; --meeting-bg:#E7EFE4;
  --warning:#C0552F; --warning-bg:#FBEEE8;
  --danger:#C0552F;  --danger-bg:#FBEEE8;
  --info:#4B3DC0;    --info-bg:#EEECFA;
  --status-ontarget:var(--success);
  --status-abovetarget:var(--meeting);
  --status-offtrack:var(--clay-400);
  --tick:var(--clay-500);

  /* ---- Semantic aliases ---- */
  --text-link:var(--blue-600); --text-brand:var(--blue-600); --text-accent:var(--clay-500);
  --border-subtle:var(--hairline); --border-default:var(--line); --border-focus:var(--blue-600);
  --action-primary:var(--blue-600); --action-primary-hover:var(--blue-700); --action-primary-press:var(--blue-800);
  --action-accent:var(--clay-400); --action-accent-hover:var(--clay-500); --action-accent-press:var(--clay-600);

  /* ---- Type ---- */
  --font-sans:"Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:44px; --s9:64px; --s10:72px;
  --s-section:48px; --s-section-lg:96px;

  /* ---- Radius ---- */
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* ---- Shadows — soft and rare; structure comes from hairlines ---- */
  --shadow-sm:0 1px 2px rgba(10,10,11,.05);
  --shadow-md:0 4px 14px rgba(10,10,11,.06);
  --shadow-lg:0 14px 32px rgba(10,10,11,.08);
  --shadow-xl:0 26px 60px rgba(10,10,11,.12);
  --shadow-focus:0 0 0 3px rgba(75,61,192,.22);

  /* ---- Motion — restrained ---- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
  --ease-out:cubic-bezier(0.22,1,0.36,1);

  /* ---- Layout ---- */
  --container:1060px; --container-wide:1320px; --topbar-h:60px;
  --pad: clamp(20px, 4vw, 56px);
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--pad); }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 var(--pad); }
.section { padding: clamp(64px, 8vw, 100px) 0; border-top: 1px solid var(--hairline); }
section[id], [id]:not(body) { scroll-margin-top: 88px; }
.section-tight { padding: clamp(48px, 6vw, 72px) 0; }
.section--flush { border-top: none; }

/* ============================================================
   Type ramp
   ============================================================ */
.h1 { font-size: clamp(46px, 7vw, 88px); line-height: 0.94; letter-spacing: -0.04em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.h2 { font-size: clamp(34px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; color: var(--ink); text-wrap: balance; }
.h3 { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; color: var(--ink); }
.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--text-muted); }
.body { font-size: 16.5px; line-height: 1.6; color: var(--text-body); }
.num-eyebrow { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--blue-600); display: inline-block; }
.num-eyebrow.clay { color: var(--clay-500); }
.num-eyebrow.muted { color: var(--text-muted); font-weight: 500; }
.mono-num { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.04em; }
.section-mark { display: flex; align-items: center; gap: 14px; }
.section-mark .mono-num { font-size: 20px; color: var(--blue-600); }
.section-mark.clay .mono-num { color: var(--clay-500); }

/* ============================================================
   Buttons — mirrors the DS Button component
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1; white-space: nowrap; padding: 10px 18px;
  border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--sm { padding: 7px 13px; font-size: 13.5px; gap: 6px; }
.btn--lg { padding: 13px 24px; font-size: 17px; gap: 9px; border-radius: var(--r-md); }
.btn--pill { border-radius: var(--r-pill); }
.btn--primary   { background: var(--action-primary); color: #fff; }
.btn--primary:hover  { background: var(--action-primary-hover); color: #fff; }
.btn--primary:active { background: var(--action-primary-press); }
.btn--accent    { background: var(--action-accent); color: #fff; }
.btn--accent:hover   { background: var(--action-accent-hover); color: #fff; }
.btn--contrast  { background: var(--ink); color: #fff; }
.btn--contrast:hover { background: #26262b; color: #fff; }
.btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--well); color: var(--ink); }
.btn--ghost     { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--well); color: var(--ink); }

/* ============================================================
   Chips & cards
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--r-pill); background: var(--paper); border: 1px solid var(--hairline);
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.chip.indigo  { background: var(--blue-50); border-color: transparent; color: var(--blue-700); }
.chip.clay    { background: var(--clay-50); border-color: transparent; color: var(--clay-600); }
.chip.success { background: var(--success-bg); border-color: transparent; color: var(--meeting); }
.card { background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-lg); }

/* ============================================================
   SkillBar — mirrors the DS SkillBar component
   ============================================================ */
.skillbar .skillbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.skillbar .skillbar-label { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.skillbar .skillbar-right { display: inline-flex; align-items: baseline; gap: 8px; }
.skillbar .skillbar-level { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.skillbar.below .skillbar-level { color: var(--clay-500); }
.skillbar .skillbar-value { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.skillbar .skillbar-track { position: relative; height: 8px; border-radius: var(--r-pill); background: var(--surface-warm); }
.skillbar .skillbar-clip { position: absolute; inset: 0; border-radius: var(--r-pill); overflow: hidden; }
.skillbar .skillbar-fill { height: 100%; border-radius: var(--r-pill); background: var(--status-ontarget); transition: width var(--dur-slow) var(--ease-out); }
.skillbar.tone-clay    .skillbar-fill { background: var(--status-offtrack); }
.skillbar.tone-success .skillbar-fill { background: var(--status-abovetarget); }
.skillbar .skillbar-tick { position: absolute; top: -2px; width: 2px; height: 12px; border-radius: 1px; background: var(--tick); transform: translateX(-1px); }

/* ============================================================
   Site header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.site-header .container { display: flex; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.site-header .brand { display: inline-flex; align-items: center; }
.site-header .brand img { height: 26px; display: block; }
.site-nav { margin-left: auto; display: flex; gap: clamp(18px, 2.6vw, 40px); align-items: center; }
.site-nav a { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
.site-nav a.here { color: var(--ink); font-weight: 600; }
.site-nav a.btn { color: #fff; }
.site-nav a.btn:hover { color: #fff; }

/* Header CTA — sits outside .site-nav so it stays in the bar when the nav
   collapses into a panel. This margin reproduces the nav's own gap, so the
   desktop layout is unchanged by moving it out. */
.site-header .nav-cta { margin-left: clamp(18px, 2.6vw, 40px); flex: none; }

/* Mobile nav toggle — revealed at the 860px breakpoint. */
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink); cursor: pointer;
}
.nav-toggle:hover { background: var(--well); }
.nav-toggle svg {
  width: 22px; height: 22px; display: block;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}
.nav-toggle .icon-close { display: none; }
.site-header.nav-open .nav-toggle .icon-open { display: none; }
.site-header.nav-open .nav-toggle .icon-close { display: block; }

/* ============================================================
   Site footer
   ============================================================ */
.site-footer { background: var(--ink); padding: 56px 0; }
.site-footer .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.site-footer .brand img { height: 30px; display: block; justify-self: start; }
.site-footer .email {
  font-family: var(--font-mono); font-size: 15px; color: #F6F1E6;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  justify-self: center;
}
.site-footer .email:hover { color: var(--clay-300); }
.site-footer .fine { font-size: 13.5px; color: rgba(246,241,230,0.55); justify-self: end; text-align: right; }
.site-footer .social { display: inline-flex; align-items: center; color: #F6F1E6; margin-left: 14px; vertical-align: middle; }
.site-footer .social:hover { color: var(--clay-300); }
.site-footer .social svg { width: 18px; height: 18px; display: block; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 14px; }
}
@media (max-width: 860px) {
  /* Nav collapses into a panel under the header. The CTA stays in the bar. */
  .nav-toggle { display: inline-flex; margin-left: 12px; }
  .site-header .nav-cta { margin-left: auto; }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    margin-left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    padding: 4px var(--pad) 14px;
  }
  .site-header:not(.nav-open) .site-nav { display: none; }
  .site-nav a {
    font-size: 16px; padding: 15px 2px;
    border-top: 1px solid var(--hairline);
  }
  .site-nav a:first-child { border-top: none; }

  .site-footer .container { grid-template-columns: 1fr; justify-items: start; gap: 18px; }
  .site-footer .email, .site-footer .fine { justify-self: start; text-align: left; }
}

/* ============================================================
   BLOG
   ============================================================ */

/* ---- Blog index ---- */
.blog-head .container, .post-list .container { max-width: var(--container); }
.blog-head { padding: clamp(64px, 8vw, 104px) 0 clamp(36px, 5vw, 56px); }
.blog-head .num-eyebrow { margin-bottom: 22px; }
.blog-head h1 { max-width: 16ch; }
.blog-head .descriptor { margin-top: 26px; max-width: 56ch; font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--text-muted); }

.post-list { border-top: 1px solid var(--hairline); }
.post-row {
  display: block; text-decoration: none; color: inherit;
  padding: clamp(28px, 3.4vw, 40px) 0;
  border-bottom: 1px solid var(--hairline);
}
.post-row:last-child { border-bottom: none; }
.post-row .meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.post-row .date { font-size: 13px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.post-row .sep { color: var(--text-faint); }
.post-row .topic { font-size: 13px; font-weight: 600; color: var(--blue-600); }
.post-row h2 {
  font-size: clamp(24px, 3vw, 38px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.06; max-width: 24ch; color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.post-row:hover h2 { color: var(--blue-600); }
.post-row .dek { margin-top: 14px; max-width: 62ch; color: var(--text-muted); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; }

/* ---- Article ---- */
.measure { max-width: 780px; margin: 0 auto; padding: 0 var(--pad); }
article { padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 9vw, 110px); }
.post-eyebrow { margin-bottom: 18px; }
.post-title { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; line-height: 1.03; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.post-dek { margin-top: 20px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--text-muted); }

.byline { display: flex; align-items: center; gap: 12px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--hairline); font-size: 14px; }
.byline .who b { font-weight: 700; color: var(--ink); }
.byline .who .sep { color: var(--text-faint); margin: 0 6px; }
.byline .who .meta { color: var(--text-muted); }

.avatar {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--blue-50); color: var(--blue-700);
  font-weight: 800; font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; overflow: hidden;
}
.avatar.lg { width: 56px; height: 56px; border-radius: 15px; font-size: 17px; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-body {
  margin-top: clamp(32px, 4vw, 48px); max-width: 68ch;
  font-size: clamp(17px, 1.25vw, 18.5px); line-height: 1.72; color: var(--text-body);
}
.post-body p + p { margin-top: 1.3em; }
.post-body a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:hover { color: var(--blue-700); }
.post-body h2 { font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--ink); margin-top: 1.9em; margin-bottom: .5em; }
.post-body h3 { font-size: clamp(19px, 1.7vw, 22px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); margin-top: 1.6em; margin-bottom: .4em; }
.post-body ul, .post-body ol { margin: 1.1em 0; padding-left: 1.25em; }
.post-body li { margin-bottom: .5em; }
.post-body li::marker { color: var(--blue-600); }
.post-body strong { font-weight: 700; color: var(--ink); }
.post-body blockquote {
  margin: 1.7em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--clay-400);
  color: var(--ink); font-size: 1.06em; line-height: 1.55; font-style: normal;
}
.post-body blockquote cite {
  display: block; margin-top: .7em; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; font-style: normal; color: var(--clay-500);
}
.post-body figure { margin: 1.8em 0; }
.post-body img { border-radius: var(--r-lg); border: 1px solid var(--hairline); }
.post-body hr { border: none; border-top: 1px solid var(--hairline); margin: 2.2em 0; }

/* ---- Inline CTA ---- */
.post-cta {
  margin-top: clamp(44px, 6vw, 60px); padding: 22px 24px;
  border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--well);
}
.post-cta .num-eyebrow { display: block; margin-bottom: 8px; font-size: 15px; }
.post-cta p { font-size: 15.5px; line-height: 1.55; color: var(--text-muted); }
.post-cta a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }
.post-cta a:hover { color: var(--blue-700); }

/* ---- Works cited ---- */
.post-sources { margin-top: clamp(40px, 5vw, 52px); padding-top: 26px; border-top: 1px solid var(--hairline); }
.post-sources .num-eyebrow { display: block; margin-bottom: 16px; font-size: 15px; }
.post-sources p { font-size: 14px; line-height: 1.6; color: var(--text-muted); padding-left: 1.7em; text-indent: -1.7em; margin-bottom: 11px; }
.post-sources p:last-child { margin-bottom: 0; }
.post-sources cite { font-style: italic; }
.post-sources a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.post-body a, .post-cta a { overflow-wrap: anywhere; }

/* ---- Author card ---- */
.author-card { display: flex; gap: 16px; align-items: flex-start; margin-top: clamp(44px, 6vw, 60px); padding-top: 28px; border-top: 1px solid var(--hairline); }
.author-name { font-weight: 700; font-size: 16px; color: var(--ink); }
.author-bio { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-muted); max-width: 54ch; }

.back-link { display: inline-block; margin-top: clamp(40px, 5vw, 56px); font-size: 14px; font-weight: 600; color: var(--text-muted); }
.back-link:hover { color: var(--blue-600); }

/* ---- Embedded stages flow (ai-stages-of-change-are-human) ---- */
.flowblock { margin-top: clamp(48px, 6vw, 64px); padding-top: 30px; border-top: 1px solid var(--hairline); }
.flowblock .label { display: block; margin-bottom: 22px; font-size: 15px; }
.flow { display: flex; flex-direction: column; }
.flow .stage {
  display: flex; align-items: center; gap: 16px; min-height: 78px;
  padding: 12px 24px 12px 12px; border-radius: var(--r-pill);
  background: var(--acc); color: #F6F5F0; box-shadow: var(--shadow-md);
}
.flow .disc {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(246,245,240,.16); border: 1.5px solid rgba(246,245,240,.5);
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700;
}
.flow .s-title { font-weight: 700; font-size: clamp(17px, 2vw, 20px); letter-spacing: -0.02em; line-height: 1.15; }
.flow .s-desc { margin-top: 4px; font-size: 13px; line-height: 1.4; opacity: .88; max-width: 52ch; }
.flow .vconn { width: 2px; height: 16px; margin-left: 38px; background: var(--line); }
.flow .r1 { --acc: var(--clay-400); }
.flow .r2 { --acc: var(--clay-600); }
.flow .r3 { --acc: var(--blue-600); }
.flow .r4 { --acc: var(--blue-800); }
.flow .r5 { --acc: var(--ink); }
.flow .r6 .stage { background: transparent; color: var(--ink); border: 1.6px dashed var(--line); box-shadow: none; }
.flow .r6 .disc { background: transparent; border: 1.5px dashed var(--line); color: var(--ink); font-size: 20px; }
.flowblock .loopnote { margin: 16px 0 0 38px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
@media (max-width: 600px) { .flow .stage { border-radius: var(--r-xl); } }