/* konnecting dots — design tokens
 * Source of truth: brand_kit_reference.html
 * Georgia for everything. Bone paper. Daylight Blue dot.
 */

:root {
  /* ── Color ─────────────────────────────────────────────── */
  --ink:           #1A1A1A;   /* Ink Black — body, primary logo */
  --bone:          #F5F1EA;   /* Bone White — background */
  --bone-card:    #FBF8F2;   /* card / stage fill */
  --blue:         #8B9DC3;   /* Daylight Blue — the dot, signature accent */
  --slate:         #4A5568;   /* Slate Blue — headers, links, secondary text */
  --sage:         #C5D3C8;   /* Pale Sage — dividers, captions, soft surfaces */
  --jade:         #7A9E8E;   /* Soft Jade — charts, positive */

  --hairline:      rgba(26,26,26,0.10);

  /* Semantic aliases */
  --bg:             var(--bone);
  --fg:             var(--ink);
  --fg-secondary:   var(--slate);
  --accent:         var(--blue);
  --border:         var(--hairline);
  --link:           var(--slate);

  /* ── Type ─────────────────────────────────────────────── */
  --serif: Georgia, 'Times New Roman', serif;
  --mono:  'SF Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Type scale */
  --fs-display: 92px;    /* cover */
  --fs-h1:      68px;    /* section display */
  --fs-h2:      42px;    /* page h1 */
  --fs-h3:      34px;    /* section heading */
  --fs-h4:      28px;    /* subhead (italic) */
  --fs-body:    18px;    /* body — Georgia 18/1.6 */
  --fs-small:   16px;
  --fs-caption: 13px;
  --fs-label:   12px;    /* mono tracked */
  --fs-micro:   11px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.6;
  --lh-loose:  1.65;

  --tracking-label:   0.2em;
  --tracking-kicker:  0.28em;
  --tracking-tight:  -0.01em;
  --tracking-display:-0.02em;

  /* ── Spacing ──────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Radii ────────────────────────────────────────────── */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;       /* default — cards, swatches */
  --radius-app-icon: 22px;  /* only the iOS-style app icon tile */

  /* ── Layout ───────────────────────────────────────────── */
  --measure-article: 640px;
  --measure-index:   1040px;
  --measure-page:    1180px;
  --header-h:        64px;

  /* ── Motion ───────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   250ms;
}

/* ── Dark mode ─────────────────────────────────────────────
 * Token swap only — every component reads these vars, so the
 * whole site (and the constellation) adapts automatically.
 */
:root[data-theme="dark"] {
  --ink:        #E8E3D9;   /* warm off-white — text & primary */
  --bone:       #14161B;   /* deep ink-navy — background */
  --bone-card:  #1C1F27;   /* raised surface */
  --blue:       #9DB0DB;   /* Daylight Blue, brightened */
  --slate:      #9AA6BA;   /* secondary text */
  --sage:       #38473F;   /* muted surface */
  --jade:       #7FB39E;
  --hairline:   rgba(232,227,217,0.14);
}

* { box-sizing: border-box; }

html, body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html { transition: background-color 320ms var(--ease-out, ease); }
body { transition: background-color 320ms var(--ease-out, ease), color 320ms var(--ease-out, ease); }

/* Theme toggle button */
.kd-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 999px; cursor: pointer; color: var(--slate);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.kd-theme-toggle:hover { color: var(--ink); border-color: var(--ink); }

/* Topic tag pill — hue set inline; text stays dark on the light-ish chip. */
.kd-tag {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #1A1A1A; padding: 5px 10px 4px; border-radius: 2px;
  white-space: nowrap;
}
.kd-topic-chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline); background: transparent; color: var(--slate);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kd-topic-chip:hover { color: var(--ink); border-color: var(--slate); transform: translateY(-1px); }
.kd-topic-chip .kd-topic-swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}
h1 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h3); }
h3 { font-size: var(--fs-h4); }

p {
  margin: 0 0 1em 0;
  color: var(--ink);
  text-wrap: pretty;
}

.kicker, .eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--slate);
}

.label, .sec-num {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue);
}

a {
  color: var(--slate);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ink); border-bottom-color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: var(--space-7) 0;
}

/* ── Wordmark primitive — the kd-wm class ───────────────── */
.kd-wm {
  font-family: var(--serif);
  font-weight: 400;
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.kd-wm .kd-wm-dot {
  display: inline-block;
  width: 0.52em;
  height: 0.52em;
  border-radius: 50%;
  background: var(--blue);
  vertical-align: baseline;
  position: relative;
  top: 0.04em;
  margin: 0 0.005em;
}
/* connecting line — JS sets left/width to span dot-center to dot-center */
.kd-wm .kd-wm-line {
  position: absolute;
  left: 0;
  width: 0;
  bottom: -0.18em;
  height: 0.09em;
  background-image: radial-gradient(circle 0.035em at center, var(--blue) 99%, transparent 100%);
  background-size: 0.17em 0.09em;
  background-repeat: repeat-x;
  background-position: left center;
}
.kd-wm.is-solid .kd-wm-line { background: var(--blue); background-image: none; height: 0.025em; }
.kd-wm.is-dashed .kd-wm-line {
  background-image: linear-gradient(to right, var(--blue) 55%, transparent 55%);
  background-size: 0.5em 0.04em; height: 0.04em;
}
.kd-wm.on-ink { color: var(--bone); }

/* ── The mark (kd) — two dots + line, decoupled from text ── */
.kd {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  --kd-dot: 28px;
  --kd-line: 70px;
  --kd-stroke: 4px;
  --kd-color: var(--blue);
}
.kd .kd-dot {
  width: var(--kd-dot);
  height: var(--kd-dot);
  border-radius: 50%;
  background: var(--kd-color);
  flex-shrink: 0;
}
.kd .kd-line {
  width: var(--kd-line);
  height: var(--kd-stroke);
  margin: 0 8px;
  background-image: radial-gradient(circle calc(var(--kd-stroke)/2) at center, var(--kd-color) 99%, transparent 100%);
  background-size: calc(var(--kd-stroke) * 2.4) var(--kd-stroke);
  background-repeat: repeat-x;
  background-position: center;
}
.kd.is-solid .kd-line { background: var(--kd-color); background-image: none; height: calc(var(--kd-stroke) * 0.6); }
.kd.kd-xl { --kd-dot: 96px;  --kd-line: 220px; --kd-stroke: 14px; }
.kd.kd-lg { --kd-dot: 48px;  --kd-line: 110px; --kd-stroke: 7px; }
.kd.kd-md { --kd-dot: 36px;  --kd-line: 80px;  --kd-stroke: 5.5px; }
.kd.kd-sm { --kd-dot: 18px;  --kd-line: 40px;  --kd-stroke: 3px; }

/* ══════════════════════════════════════════════════════════
   v2 — motion & polish (additive; brand tokens untouched)
   ══════════════════════════════════════════════════════════ */

/* Hero wordmark: the connecting line draws itself in on load,
   and the two dots ease up into place. */
@keyframes kd-line-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kd-dot-drop  { from { opacity: 0; transform: translateY(-6px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes kd-fade-up   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.kd-hero-wm .kd-wm-line { transform-origin: left center; animation: kd-line-draw 900ms var(--ease-out) 320ms both; }
.kd-hero-wm .kd-wm-dot  { animation: kd-dot-drop 520ms var(--ease-out) both; }
.kd-hero-wm .kd-wm-dot:nth-of-type(1) { animation-delay: 120ms; }
.kd-hero-wm .kd-wm-dot:nth-of-type(2) { animation-delay: 240ms; }

.kd-anim-up { animation: kd-fade-up 720ms var(--ease-out) both; }

/* Issue cards: lift + a blue read-cue that slides in on hover. */
.kd-card {
  position: relative;
  border-radius: var(--radius-2);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.kd-card::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 2px; background: var(--blue);
  transform: scaleY(0); transform-origin: top; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out);
}
.kd-card:hover {
  transform: translateX(6px);
  background: var(--bone-card);
  box-shadow: -18px 0 0 0 var(--bone-card);
}
.kd-card:hover::before { transform: scaleY(1); }
.kd-card-title { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.kd-card:hover .kd-card-title { text-decoration-line: underline; }
.kd-card .kd-arrow {
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.kd-card:hover .kd-arrow { opacity: 1; transform: none; }

/* Buttons: subtle press + accent bloom. */
.kd-btn { position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out); }
.kd-btn:hover  { transform: translateY(-1px); }
.kd-btn:active { transform: translateY(0); }
.kd-btn-ghost { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.kd-btn-ghost:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }

/* Nav links get a growing underline instead of a hard border swap. */
.kd-nav-link { position: relative; }
.kd-nav-link::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.kd-nav-link:hover::after, .kd-nav-link[data-active="true"]::after { transform: scaleX(1); }

/* Soft floating drift for the standalone mark. */
@keyframes kd-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.kd-float { animation: kd-float 5.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .kd-hero-wm .kd-wm-line, .kd-hero-wm .kd-wm-dot, .kd-anim-up, .kd-float { animation: none !important; }
  .kd-hero-wm .kd-wm-line { transform: none; }
}