/* Bamboo Flags — design tokens and the few component styles that Tailwind
   utilities can't express cleanly (buttons, tags, inputs, article prose). */

:root {
  --bf-bg:#f3f5fe; --bf-surface:#e4e7f5; --bf-surface-2:#cfd3e5;
  --bf-ink:#292b31; --bf-ink-muted:#3f424d; --bf-ink-subtle:#595d6c;
  --bf-line:#cfd3e5; --bf-line-strong:#b2b6ca;
  --bf-accent:#796cbf; --bf-accent-ink:#5d5294; --bf-accent-tint:#e7e5fe; --bf-accent-line:#b5abfc;
  --bf-divider:color-mix(in srgb, #292b31 16%, transparent);
  --bf-tag-accent-bg:#e7e5fe; --bf-tag-accent-ink:#423a6a;
  --bf-tag-neutral-bg:#cfd3e5; --bf-tag-neutral-ink:#292b31;
  --bf-article-ink:#292b31;
}
.dark {
  --bf-bg:#161826; --bf-surface:#232532; --bf-surface-2:#292b31;
  --bf-ink:#e9e9ed; --bf-ink-muted:#cfd3e5; --bf-ink-subtle:#b2b6ca;
  --bf-line:#3f424d; --bf-line-strong:#595d6c;
  --bf-accent:#9184d9; --bf-accent-ink:#d2cefd; --bf-accent-tint:#2b2741; --bf-accent-line:#5d5294;
  --bf-divider:color-mix(in srgb, #e9e9ed 16%, transparent);
  --bf-tag-accent-bg:#423a6a; --bf-tag-accent-ink:#f5f4ff;
  --bf-tag-neutral-bg:#3f424d; --bf-tag-neutral-ink:#f3f5fe;
  --bf-article-ink:#f3f5fe;
}

/* ── Base ─────────────────────────────────────────────── */
html { scroll-behavior:smooth; }
body { -webkit-font-smoothing:antialiased; text-wrap:pretty; }
:focus-visible { outline:2px solid var(--bf-accent); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
.tnum { font-feature-settings:'tnum'; }

.bg-page-glow {
  background:
    radial-gradient(1100px 640px at 90% -160px, color-mix(in srgb, #2b2741 80%, transparent), transparent 60%),
    var(--bf-bg);
}
.bg-page-flat { background:var(--bf-bg); }
.rule-fade { height:1px; background:linear-gradient(to right, transparent, var(--bf-divider) 48px calc(100% - 48px), transparent); }

/* Translucent fills (Tailwind's /opacity modifier doesn't work on CSS-var colours) */
.fill-surface-50 { background:color-mix(in srgb, var(--bf-surface) 50%, transparent); }
.fill-surface-60 { background:color-mix(in srgb, var(--bf-surface) 60%, transparent); }
.fill-surface-70 { background:color-mix(in srgb, var(--bf-surface) 70%, transparent); }
.fill-featured {
  background:linear-gradient(180deg, color-mix(in srgb, var(--bf-accent-tint) 80%, transparent), color-mix(in srgb, var(--bf-surface) 60%, transparent));
}
.fill-section {
  background:
    radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, #353b80 70%, transparent), transparent 64%),
    #262a60;
}

/* ── Buttons (outlined; never filled) ─────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-weight:500; font-size:14px; line-height:1.2; color:var(--bf-ink);
  background:transparent; border:1px solid transparent; border-radius:8px;
  padding:5.6px 10px; text-decoration:none; cursor:pointer;
  transition:background-color .2s, color .2s, border-color .2s;
}
.btn-lg { padding:12px 20px; font-size:15px; min-height:44px; }
.btn-primary { color:var(--bf-accent); border-color:var(--bf-accent); }
.btn-primary:hover { background:color-mix(in srgb, var(--bf-accent) 12%, transparent); }
.btn-primary:active { background:color-mix(in srgb, var(--bf-accent) 22%, transparent); }
.btn-secondary { border-color:var(--bf-divider); }
.btn-secondary:hover { background:color-mix(in srgb, var(--bf-ink) 7%, transparent); }
.btn-secondary:active { background:color-mix(in srgb, var(--bf-ink) 14%, transparent); }
.btn-ghost { color:var(--bf-accent); }
.btn-ghost:hover { background:color-mix(in srgb, var(--bf-accent) 10%, transparent); }
.btn-ghost:active { background:color-mix(in srgb, var(--bf-accent) 18%, transparent); }
/* On the indigo section band (same in both colour modes) */
.btn-band { color:#e7e5fe; border-color:#d2cefd; padding:14px 22px; font-size:15px; min-height:44px; }
.btn-band:hover { background:color-mix(in srgb, #d2cefd 12%, transparent); }

/* ── Tags ─────────────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; font-size:11px; letter-spacing:.02em;
  padding:3px 10px; border-radius:6px; line-height:1.4; white-space:nowrap;
}
.tag-accent { background:var(--bf-tag-accent-bg); color:var(--bf-tag-accent-ink); }
.tag-neutral { background:var(--bf-tag-neutral-bg); color:var(--bf-tag-neutral-ink); }
.tag-outline { border:1px solid var(--bf-accent); color:var(--bf-accent-ink); }

/* ── Kicker: "01 — Services" with a 28px accent dash ──── */
.kicker {
  display:flex; align-items:center; gap:12px; font-size:12px; line-height:1.4;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bf-accent); font-feature-settings:'tnum';
}
.kicker::before { content:''; width:28px; height:1px; background:currentColor; flex:none; }
.label-caps { font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* ── Forms ────────────────────────────────────────────── */
.input {
  width:100%; min-height:44px; padding:8px 12px; font:inherit; font-size:14px;
  color:var(--bf-ink); caret-color:var(--bf-accent); background:var(--bf-surface);
  border:1px solid var(--bf-divider); border-radius:8px;
}
.input:hover { border-color:color-mix(in srgb, var(--bf-ink) 45%, transparent); }
.input:focus-visible { border-color:var(--bf-accent); outline-offset:0; }
textarea.input { min-height:120px; resize:vertical; }

/* ── Header ───────────────────────────────────────────── */
.nav-link { color:var(--bf-ink-muted); text-decoration:none; transition:color .2s; }
.nav-link:hover { color:var(--bf-ink); }
.nav-link[aria-current="page"], .nav-link[data-current="true"] { color:var(--bf-accent-ink); }
[aria-expanded="true"] > .caret { transform:rotate(180deg); }
.caret { transition:transform .2s; }

/* ── Home: task ledger ────────────────────────────────── */
.ledger-row { transition:background-color .4s; }
.ledger-row .ledger-bar { background:transparent; transition:background-color .4s; }
.ledger-row .ledger-task { color:var(--bf-ink); transition:color .4s; }
.ledger-row .tag-accent { display:none; }
.ledger-row.is-done .ledger-bar { background:var(--bf-accent); }
.ledger-row.is-done .ledger-task { color:var(--bf-ink-subtle); }
.ledger-row.is-done .tag-accent { display:inline-flex; }
.ledger-row.is-done .tag-neutral { display:none; }
.ledger-row.is-active { background:color-mix(in srgb, var(--bf-accent-tint) 80%, transparent); }

/* ── Blog filter pills ────────────────────────────────── */
.pill {
  min-height:36px; padding:0 14px; border:1px solid var(--bf-line); border-radius:999px;
  font:inherit; font-size:13px; color:var(--bf-ink); background:transparent; cursor:pointer;
}
.pill[aria-pressed="true"] { background:#423a6a; border-color:#5d5294; color:#f5f4ff; }

/* ── Blog article body ────────────────────────────────── */
.prose-bf { font-size:18px; line-height:1.7; color:var(--bf-article-ink); }
.prose-bf > * + * { margin-top:0; }
.prose-bf p { margin:0 0 1.1em; }
.prose-bf h2 {
  margin:1.9em 0 .5em; font-weight:500; font-size:clamp(23px,2.4vw,28px);
  line-height:1.25; letter-spacing:-.015em; color:var(--bf-ink);
}
.prose-bf h3 { margin:1.6em 0 .4em; font-weight:500; font-size:20px; line-height:1.3; color:var(--bf-ink); }
.prose-bf a, .link-bf {
  color:var(--bf-accent-ink); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:color-mix(in srgb, var(--bf-accent) 70%, transparent);
}
.prose-bf a:hover, .link-bf:hover { color:#e7e5fe; text-decoration-color:#e7e5fe; }
.prose-bf strong { font-weight:500; color:var(--bf-ink); }
.prose-bf ul, .prose-bf ol { margin:0 0 1.1em; padding-left:1.3em; }
.prose-bf ul { list-style:disc; }
.prose-bf ol { list-style:decimal; }
.prose-bf li { margin:.35em 0; }
.prose-bf li::marker { color:var(--bf-accent); }
.prose-bf blockquote {
  margin:1.5em 0; padding:4px 0 4px 22px; border-left:2px solid var(--bf-accent);
  font-size:21px; line-height:1.5; color:var(--bf-ink);
}
.prose-bf blockquote p:last-child { margin-bottom:0; }
.prose-bf blockquote footer { margin-top:10px; font-size:14px; color:var(--bf-ink-subtle); }
.prose-bf code { font-size:.88em; padding:.1em .35em; border-radius:4px; background:var(--bf-surface); }
.prose-bf pre { margin:0 0 1.1em; padding:16px; border-radius:8px; background:var(--bf-surface); overflow-x:auto; }
.prose-bf pre code { padding:0; background:none; }
.prose-bf hr { border:0; height:1px; margin:2em 0; background:var(--bf-line); }
.prose-bf img { max-width:100%; border-radius:8px; }
.prose-bf table { display:block; overflow-x:auto; margin:1.5em 0; border-collapse:collapse; font-size:16px; line-height:1.4; }
.prose-bf th, .prose-bf td { padding:10px 16px 10px 0; border-bottom:1px solid var(--bf-line); text-align:left; vertical-align:top; }
.prose-bf th { font-weight:500; font-size:14px; color:var(--bf-ink-subtle); border-bottom-color:var(--bf-line-strong); }
.prose-bf td:not(:first-child), .prose-bf th:not(:first-child) { text-align:center; white-space:nowrap; }

/* "What to do this week" — the payoff of every post */
.todo-card {
  margin-top:2.2em; padding:clamp(20px,3vw,32px); border:1px solid var(--bf-accent-line); border-radius:14px;
  background:linear-gradient(180deg, var(--bf-accent-tint), color-mix(in srgb, var(--bf-surface) 60%, transparent));
}
.prose-bf .todo-card h2 {
  margin:0 0 20px; font-size:clamp(22px,2.2vw,26px); letter-spacing:-.01em;
  display:flex; align-items:center; gap:14px;
}
.prose-bf .todo-card h2::before { content:''; width:28px; height:2px; background:var(--bf-accent); flex:none; }
.prose-bf .todo-card > p { font-size:17px; }
.prose-bf .todo-card > :last-child { margin-bottom:0; }
.prose-bf ol.todo-list { list-style:none; padding:0; margin:0; }
.prose-bf ol.todo-list > li {
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 10px; align-items:baseline;
  margin:0; padding:14px 0; border-top:1px solid color-mix(in srgb, var(--bf-accent-line) 60%, transparent);
}
.todo-num { font-size:15px; font-weight:500; color:var(--bf-accent-ink); font-feature-settings:'tnum'; }
.todo-body { display:flex; flex-direction:column; gap:4px; }
.prose-bf .todo-action { font-weight:500; font-size:18px; line-height:1.45; color:var(--bf-ink); }
.todo-detail { font-size:16px; line-height:1.55; color:var(--bf-ink-muted); }

/* Reading progress bar */
.read-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:50; pointer-events:none; }
.read-progress > span { display:block; height:100%; width:0; background:var(--bf-accent); }

/* Cal.com embed: reserve space so the embed can't shift the layout */
.cal-frame { min-height:560px; }