/* ==========================================================================
   nikhil-bhardwaj.com — "SIGNAL" design system v3
   Minimal · technical · dot-matrix motion. Dark-first, light mode supported.
   ========================================================================== */

/* ---------- TOKENS ---------- */
:root {
  --bg:        #09090b;
  --bg-2:      #0e0e11;
  --surface:   #131317;
  --surface-2: #17171c;
  --line:      rgba(255,255,255,0.09);
  --line-2:    rgba(255,255,255,0.16);
  --text:      #f4f4f2;
  --muted:     #9c9c99;
  --dim:       #67676a;
  --accent:    #e2683a;
  --accent-2:  #ffb38a;
  --accent-ink:#0a0a0b;
  --dot:       rgba(255,255,255,0.16);
  --dot-hot:   #e2683a;

  --shell: 1180px;
  --gut: 28px;
  --radius: 2px;

  --font: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

:root[data-theme="light"] {
  --bg:        #fbfbf9;
  --bg-2:      #f4f4f1;
  --surface:   #ffffff;
  --surface-2: #f7f7f4;
  --line:      rgba(0,0,0,0.11);
  --line-2:    rgba(0,0,0,0.22);
  --text:      #0c0c0d;
  --muted:     #57575a;
  --dim:       #8b8b8e;
  --accent:    #c75d2e;
  --accent-2:  #8a3c17;
  --accent-ink:#ffffff;
  --dot:       rgba(0,0,0,0.16);
  --dot-hot:   #c75d2e;
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.006em;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }

img, svg, canvas { display: block; max-width: 100%; }

/* ---------- LAYOUT PRIMITIVES ---------- */
.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gut);
  width: 100%;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.rule { height: 1px; background: var(--line); width: 100%; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.stuck { border-bottom-color: var(--line); }
.nav .inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 16px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
}
.brand .mark {
  width: 24px; height: 24px;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s var(--ease);
}
.brand .mark::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.brand:hover .mark { border-color: var(--accent); }
.brand:hover .mark::after { transform: translateY(0); }
.brand .mark span { position: relative; z-index: 1; color: var(--text); transition: color 0.35s var(--ease); }
.brand:hover .mark span { color: var(--accent-ink); }
footer .brand { font-size: 12px; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 7px 11px;
  position: relative;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px; bottom: 2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }

.nav-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
  transition: all 0.25s var(--ease);
}
.icon-btn:hover { border-color: var(--line-2); color: var(--text); }
.nav-burger { display: none; }

.nav-sheet {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 190;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 76px var(--gut) 24px;
  transform: translateY(-101%);
  transition: transform 0.5s var(--ease);
}
.nav-sheet.open { transform: translateY(0); }
.nav-sheet a {
  display: block;
  font-size: 26px;
  letter-spacing: -0.03em;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.nav-sheet a:last-child { border-bottom: 0; }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 120px 0 72px;
  overflow: hidden;
}
#dotfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero .shell { position: relative; z-index: 1; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  margin-bottom: 26px;
}
.pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
  flex: none;
}
.pulse::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  animation: ping 2.6s var(--ease-io) infinite;
}
@keyframes ping {
  0%   { transform: scale(0.6); opacity: 0.9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

h1.display {
  font-size: clamp(42px, 7.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 500;
  max-width: 15ch;
}
h1.display .em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(110%);
  animation: riseIn 0.95s var(--ease) forwards;
}
.line-mask:nth-of-type(2) > span { animation-delay: 0.08s; }
.line-mask:nth-of-type(3) > span { animation-delay: 0.16s; }
@keyframes riseIn { to { transform: translateY(0); } }

.hero-sub {
  margin-top: 28px;
  font-size: 17px;
  color: var(--muted);
  max-width: 46ch;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.42s forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) 0.55s forwards;
}

.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  cursor: pointer;
  background: transparent;
  color: var(--text);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--text);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.btn:hover { color: var(--bg); border-color: var(--text); }
.btn:hover::before { transform: translateY(0); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn.primary::before { background: var(--text); }
.btn.primary:hover { color: var(--bg); border-color: var(--text); }

.scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: var(--dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-cue .bar {
  width: 1px; height: 42px;
  background: linear-gradient(to bottom, var(--line-2), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue .bar::after {
  content: '';
  position: absolute;
  top: -42px; left: 0;
  width: 1px; height: 42px;
  background: var(--accent);
  animation: cueRun 2.4s var(--ease-io) infinite;
}
@keyframes cueRun { to { top: 42px; } }

/* ---------- TICKER ---------- */
.ticker {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 14px 0;
  background: var(--bg-2);
}
.ticker-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: slide 38s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 40px;
}
.ticker-track span::after {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- SECTION SYSTEM ---------- */
.section { padding: 108px 0; border-bottom: 1px solid var(--line); position: relative; }
.section-head {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  margin-bottom: 56px;
  align-items: start;
}
.section-head .tag {
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
.section-head .tag::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--accent);
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 46px);
  max-width: 19ch;
}
.section-head .lede {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
  max-width: 58ch;
}

/* ---------- SIDE RAIL ---------- */
.rail {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.rail.show { opacity: 1; pointer-events: auto; }
.rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rail a .tick {
  width: 14px; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease), background 0.3s var(--ease);
  flex: none;
}
.rail a .label {
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.35s var(--ease);
  white-space: nowrap;
}
.rail:hover a .label { opacity: 1; transform: translateX(0); }
.rail a:hover { color: var(--text); }
.rail a.active { color: var(--accent); }
.rail a.active .tick { width: 28px; background: var(--accent); }

/* ---------- STATS ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stat {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px 24px 22px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  position: relative;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.stat::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.stat:hover { background: var(--surface); }
.stat:hover::before, .stat.active::before { transform: scaleX(1); }
.stat.active { background: var(--surface); }
.stat .num {
  display: block;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.05em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.stat .lbl {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  min-height: 3em;
}
.stat .dots { display: flex; gap: 3px; margin-top: 16px; flex-wrap: wrap; }
.stat .dots i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--line-2);
  display: block;
  transform: scale(0);
  animation: dotPop 0.5s var(--ease) forwards;
}
.stat .dots i.on { background: var(--accent); }
@keyframes dotPop { to { transform: scale(1); } }
.stat .hint {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.3s var(--ease);
}
.stat:hover .hint { color: var(--accent); }

.stat-panel {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--surface);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease);
}
.stat-panel.show { max-height: 760px; }
.stat-panel .inner { padding: 30px 28px; }
.stat-panel .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.stat-panel .head .t { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.stat-panel .head button {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
}
.stat-panel .head button:hover { color: var(--accent); }
.stat-panel ul { list-style: none; display: grid; gap: 9px; }
.stat-panel ul li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14.5px;
}
.stat-panel ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
}
.stat-panel ul li b { color: var(--text); font-weight: 600; }
.stat-panel p { color: var(--muted); font-size: 14.5px; }
.stat-panel p + ul, .stat-panel ul + p { margin-top: 14px; }
.stat-panel .dim { color: var(--dim); font-style: italic; font-size: 13.5px; }
.stat-panel .timeline-mini { display: grid; gap: 14px; }
.stat-panel .timeline-mini li { padding-left: 18px; }
.stat-panel .timeline-mini li b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.stat-panel .timeline-mini li .body { color: var(--muted); font-size: 14px; margin-top: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ---------- NOW CARD + NODE GRAPH ---------- */
.now-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.now-copy { padding: 36px 34px; border-right: 1px solid var(--line); }
.now-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  padding: 5px 10px;
  margin-bottom: 22px;
}
.now-copy h3 { font-size: 26px; letter-spacing: -0.035em; }
.now-copy .role {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 10px;
}
.now-copy p { color: var(--muted); margin-top: 18px; font-size: 15px; }
.now-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.now-viz { padding: 28px; display: grid; place-items: center; background: var(--bg-2); }

.graph path, .graph line { stroke-linecap: round; }
.graph .wire {
  fill: none;
  stroke: var(--line-2);
  stroke-width: 1;
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 1.3s var(--ease-io);
}
.in .graph .wire { stroke-dashoffset: 0; }
.graph .node { fill: var(--surface); stroke: var(--line-2); stroke-width: 1; }
.graph .node-hot { fill: var(--accent); stroke: var(--accent); }
.graph text {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--muted);
}
.graph .packet { fill: var(--accent); }

/* ---------- WORK LIST ---------- */
.work-list { border-top: 1px solid var(--line); }
.work-row {
  display: grid;
  grid-template-columns: 76px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 8px 26px 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: padding-left 0.45s var(--ease);
}
.work-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--surface);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
  z-index: 0;
}
.work-row:hover::before { transform: scaleY(1); }
.work-row:hover { padding-left: 26px; }
.work-row > * { position: relative; z-index: 1; }
.work-row .idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--dim);
  transition: color 0.3s var(--ease);
}
.work-row:hover .idx { color: var(--accent); }
.work-row .t { font-size: 20px; letter-spacing: -0.025em; font-weight: 500; }
.work-row .s { color: var(--muted); font-size: 14px; margin-top: 5px; }
.work-row .go {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.4s var(--ease);
  white-space: nowrap;
}
.work-row:hover .go { opacity: 1; transform: translateX(0); color: var(--accent); }

/* ---------- TIMELINE ---------- */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 3px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
}
.timeline::after {
  content: '';
  position: absolute;
  left: 3px; top: 6px;
  width: 1px;
  height: 0;
  background: var(--accent);
  transition: height 1.6s var(--ease-io);
}
.timeline.in::after { height: calc(100% - 12px); }
.tl-item { padding: 0 0 34px; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: '';
  position: absolute;
  left: -28px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line-2);
  transition: all 0.4s var(--ease);
}
.tl-item:hover::before { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.tl-item .when {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.tl-item .what { font-size: 18px; letter-spacing: -0.02em; margin-top: 3px; font-weight: 500; }
.tl-item .what em { font-style: normal; color: var(--muted); font-weight: 400; }
.tl-item .desc { color: var(--muted); font-size: 14.5px; margin-top: 7px; max-width: 62ch; }

/* ---------- CARDS ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.card {
  background: var(--bg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  transition: background 0.4s var(--ease);
  position: relative;
}
.card:hover { background: var(--surface); }
.card .kicker { color: var(--dim); display: flex; gap: 10px; align-items: center; }
.card h3 { font-size: 19px; letter-spacing: -0.025em; line-height: 1.25; }
.card p { color: var(--muted); font-size: 14px; }
.card .go { margin-top: auto; color: var(--accent); }
.card .go .arrow { display: inline-block; transition: transform 0.35s var(--ease); }
.card:hover .go .arrow { transform: translateX(5px); }

/* ---------- CTA ---------- */
.cta { padding: 110px 0; text-align: center; position: relative; overflow: hidden; }
.cta h2 { font-size: clamp(32px, 5.4vw, 64px); letter-spacing: -0.045em; }
.cta p { color: var(--muted); margin: 20px auto 0; max-width: 48ch; }
.cta .hero-actions { justify-content: center; opacity: 1; animation: none; }

/* ---------- FOOTER ---------- */
footer {
  border-top: 1px solid var(--line);
  padding: 44px 0 34px;
  background: var(--bg-2);
}
footer .cols { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
footer .col-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
footer a { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.25s var(--ease); }
footer a:hover { color: var(--accent); }
footer .fine { color: var(--dim); margin-top: 30px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; }

/* ---------- MOTION UTILITIES ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: 0.08s; }
.reveal[data-d="2"] { transition-delay: 0.16s; }
.reveal[data-d="3"] { transition-delay: 0.24s; }
.reveal[data-d="4"] { transition-delay: 0.32s; }

/* cursor */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-dot { width: 5px; height: 5px; background: #fff; }
.cursor-ring {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,0.5);
  transition: width 0.3s var(--ease), height 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cursor-ring.hot { width: 52px; height: 52px; border-color: var(--accent); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1100px) { .rail { display: none; } }
@media (max-width: 900px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 40px; }
  .section-head .tag { padding-top: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .now-wrap { grid-template-columns: 1fr; }
  .now-copy { border-right: 0; border-bottom: 1px solid var(--line); }
  .card-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-burger { display: grid; }
}
@media (max-width: 620px) {
  :root { --gut: 18px; }
  .section { padding: 72px 0; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat .lbl { min-height: 0; }
  .work-row { grid-template-columns: 48px 1fr; gap: 14px; padding: 20px 8px; }
  .work-row .go { display: none; }
  .hero { min-height: 92svh; padding-top: 108px; }
  .now-copy, .stat-panel .inner { padding: 26px 20px; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .line-mask > span { transform: none; }
  .hero-sub, .hero-actions { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .timeline.in::after { height: calc(100% - 12px); }
}

/* SMIL packets follow the reduced-motion preference too */
@media (prefers-reduced-motion: reduce) { .graph .packet { display: none; } }

/* Align long-form blocks to the same content column as .section-head */
@media (min-width: 901px) {
  .timeline { margin-left: 220px; }
}

/* ==========================================================================
   PAGE SHELL — interior pages
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 148px 0 64px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero .shell { position: relative; z-index: 1; }
.page-hero canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  opacity: 0.85;
}
.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.page-hero h1 {
  font-size: clamp(36px, 6vw, 68px);
  letter-spacing: -0.045em;
  max-width: 17ch;
}
.page-hero .lede {
  margin-top: 20px;
  color: var(--muted);
  font-size: 17px;
  max-width: 62ch;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before { content: ''; width: 18px; height: 1px; background: currentColor; }
.section .lede { color: var(--muted); max-width: 62ch; }

/* generic typography inside content blocks */
.section p { color: var(--muted); }
.section p + p { margin-top: 14px; }
.section .body-col { max-width: 72ch; }
.section h3 { font-size: 21px; letter-spacing: -0.03em; margin-bottom: 8px; }
.dim { color: var(--dim); }
strong, b { color: var(--text); font-weight: 600; }

/* ==========================================================================
   ARTICLE / LONG-FORM
   ========================================================================== */
.article, .post { font-size: 16px; }
.article p, .post p { color: var(--muted); margin-bottom: 15px; line-height: 1.72; }
.article p.dim, .post p.dim { color: var(--dim); }
.article ul, .post ul, .ws-list { list-style: none; margin: 4px 0 18px; display: grid; gap: 9px; }
.article ul li, .post ul li, .ws-list li {
  position: relative; padding-left: 20px; color: var(--muted);
}
.article ul li::before, .post ul li::before, .ws-list li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.article ol, .post ol { margin: 4px 0 18px 20px; color: var(--muted); display: grid; gap: 8px; }
.post h2.section, .post h2 {
  font-size: 25px; letter-spacing: -0.035em; margin: 40px 0 14px;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.post h3 { font-size: 18px; margin: 24px 0 8px; }
.post .lead, .intro, .lead { font-size: 18px; color: var(--text); }
.pull, .mentor-pull, .quote-block {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 20px;
  margin: 24px 0;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.4;
}
.takeaway, .evolving-note, .tbl-note, .booking-note, .linkedin-note, .caption, .src {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.takeaway {
  border: 1px solid var(--line);
  padding: 14px 16px;
  margin-top: 22px;
  background: var(--surface);
}
.takeaway b { color: var(--accent); font-weight: 500; }
.closer { margin-top: 26px; font-size: 17px; color: var(--text); }
.codeline, .cm, .user-msg {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin: 14px 0;
  color: var(--muted);
  overflow-x: auto;
  white-space: pre-wrap;
}
code { font-family: var(--mono); font-size: 0.9em; color: var(--accent-2); background: var(--surface); padding: 1px 5px; border: 1px solid var(--line); }
.meta-row, .post-meta, .date, .b-meta, .repo-meta, .mc-meta, .blog-date, .when, .a-time, .pos {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.byline {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  margin: 18px 0 30px;
  color: var(--muted);
  font-size: 14px;
}
.byline b { color: var(--text); }
.byline a, .li-link, .post p a, .article p a, .section p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.byline a:hover, .li-link:hover, .post p a:hover, .article p a:hover, .section p a:hover { color: var(--accent-2); }
.more-writing {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* ==========================================================================
   CHARTS
   ========================================================================== */
.chart {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 22px 20px 16px;
  margin: 26px 0;
}
.chart-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-title::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.chart svg { width: 100%; height: auto; }
.chart .caption { margin-top: 12px; }
.mini-bar, .total, .neg { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* ==========================================================================
   PROJECT ACCORDION (/work)
   ========================================================================== */
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; }
.filter-pill, .tab-btn {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 14px;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.filter-pill:hover, .tab-btn:hover { border-color: var(--line-2); color: var(--text); }
.filter-pill.active, .tab-btn.active {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.project.is-hidden, .tab-pane { display: none; }
.tab-pane.active { display: block; }
.tab-nav { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; }

.project { border-top: 1px solid var(--line); }
.project:last-of-type { border-bottom: 1px solid var(--line); }
.project-head {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  grid-template-areas: "num title toggle" "num meta toggle" "num tags toggle";
  gap: 3px 20px;
  padding: 26px 14px 26px 12px;
  cursor: pointer;
  position: relative;
  transition: padding-left 0.4s var(--ease), background 0.4s var(--ease);
}
.project-head:hover { background: var(--surface); padding-left: 24px; }
.project-num {
  grid-area: num;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--dim);
  padding-top: 4px;
  transition: color 0.3s var(--ease);
}
.project-head:hover .project-num, .project.open .project-num { color: var(--accent); }
.project-title { grid-area: title; font-size: 21px; letter-spacing: -0.03em; font-weight: 500; }
.project-meta {
  grid-area: meta;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px;
}
.project-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.project-toggle {
  grid-area: toggle;
  font-family: var(--mono); font-size: 13px; color: var(--dim);
  align-self: center;
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}
.project.open .project-toggle { color: var(--accent); transform: rotate(45deg); }
.project-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s var(--ease); }
.project.open .project-body { grid-template-rows: 1fr; }
.project-body-inner { overflow: hidden; }
.project.open .project-body-inner { padding: 4px 14px 40px 82px; }
@media (max-width: 720px) {
  .project-head { grid-template-columns: 46px 1fr auto; padding: 20px 6px; gap: 2px 12px; }
  .project-title { font-size: 18px; }
  .project.open .project-body-inner { padding: 4px 6px 32px 6px; }
}

/* ==========================================================================
   CHIPS / TAGS
   ========================================================================== */
.tag, .tag-chip, .skill-chip, .blog-tag, .badge, .status, .chip, .b-eyebrow, .app-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s var(--ease);
}
.tag:hover, .tag-chip:hover, .skill-chip:hover { border-color: var(--accent); color: var(--accent); }
.badge, .status {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.chip-list, .skill-chips, .tags, .blog-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* ==========================================================================
   CARDS — posts, repos, apps, mentorship, booking
   ========================================================================== */
.post-cards, .repo-cards, .apps, .mentor-grid, .booking-cards, .contact-grid, .depth-grid, .facts, .stats-row, .ws-cols, .mentor-photos, .mentor-photos-2up, .mentor-photos-strip, .blogs-list, .post-list, .project-list {
  display: grid;
  gap: 1px;
}
.post-cards, .repo-cards, .apps, .booking-cards, .ws-cols, .mentor-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); background: var(--line); border: 1px solid var(--line); }
.post-card, .repo-card, .app-tile, .mentor-card, .booking-card, .writing-card, .around-link, .blog-row, .stat-item, .fact, .depth-cat, .faq-item {
  background: var(--bg);
  padding: 24px 22px;
  display: block;
  transition: background 0.35s var(--ease);
}
.post-card:hover, .repo-card:hover, .app-tile:hover, .mentor-card:hover, .booking-card:hover, .around-link:hover, .blog-row:hover { background: var(--surface); }
.post-title, .repo-name, .app-name, .b-title, .blog-title, .around-title, .mc-label {
  font-size: 18px; letter-spacing: -0.025em; font-weight: 500; color: var(--text); margin: 8px 0 6px;
  display: block;
}
.post-excerpt, .repo-desc, .app-line, .b-desc, .blog-sub, .around-sub, .desc, .sub {
  color: var(--muted); font-size: 14px;
}
.see-all, .app-go, .blog-arrow, .arrow, .b-cta, .post-link, .project-link {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.blogs-list, .post-list, .project-list { display: grid; gap: 0; }
.blog-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 12px;
}
@media (max-width: 720px) { .blog-row { grid-template-columns: 1fr; gap: 6px; } }

/* ==========================================================================
   SKILL METERS / DEPTH MAP
   ========================================================================== */
.skills-grid, .depth-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--line); border: 1px solid var(--line); }
.skill-group, .depth-cat { background: var(--bg); padding: 26px 24px; }
.depth-cat-title, .skill-group > .eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.skill-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 7px 0; }
.skill-name { font-size: 14px; color: var(--muted); }
.skill-dots, .skill-bar { display: flex; gap: 3px; }
.skill-dots .dot, .skill-bar .dot, .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--line-2); display: block; flex: none;
}
.skill-dots .dot.on, .skill-bar .dot.on, .dot.on { background: var(--accent); }
.depth-legend, .leg-item { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--dim); }
.depth-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.leg-item { display: flex; align-items: center; gap: 6px; }

/* ==========================================================================
   TIMELINE / ROLES (about)
   ========================================================================== */
.tl-item, .role-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.tl-item:first-child, .role-row:first-child { border-top: 1px solid var(--line); }
.tl-when, .role-row .when {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
  padding-top: 4px;
}
.tl-what, .role-row .what { font-size: 18px; letter-spacing: -0.025em; font-weight: 500; }
.org { color: var(--muted); font-weight: 400; }
@media (max-width: 720px) { .tl-item, .role-row { grid-template-columns: 1fr; gap: 6px; } }

/* ==========================================================================
   PHOTOS
   ========================================================================== */
.mentor-photos, .mentor-photos-2up, .mentor-photos-strip { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; background: none; border: 0; }
.mentor-photo { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.mentor-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; filter: grayscale(1) contrast(1.05); transition: filter 0.6s var(--ease), transform 0.8s var(--ease); }
.mentor-photo:hover img { filter: none; transform: scale(1.03); }
.ph-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.82), transparent);
  color: #f2f2f0;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ph-caption .num { color: var(--accent); margin-right: 8px; }

/* ==========================================================================
   FAQ / AGENDA
   ========================================================================== */
.faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faq-item .q { font-size: 16px; color: var(--text); font-weight: 500; margin-bottom: 8px; display: block; }
.faq-item .a { color: var(--muted); font-size: 14.5px; }
.agenda { border-top: 1px solid var(--line); }
.agenda-row {
  display: grid; grid-template-columns: 140px 1fr; gap: 20px;
  padding: 16px 10px; border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.agenda-row:hover { background: var(--surface); }
.a-time { padding-top: 2px; }
.a-what { color: var(--muted); font-size: 15px; }
@media (max-width: 620px) { .agenda-row { grid-template-columns: 1fr; gap: 4px; } }

/* ==========================================================================
   CTA BLOCKS / BUTTONS (legacy names)
   ========================================================================== */
.cta-row, .booking-actions, .ws-cta, .contact-links, .final-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.book-btn, .mc-btn, .primary, .b-cta.primary {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s var(--ease);
}
.book-btn:hover, .mc-btn:hover, .primary:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.book-btn-alt, .ghost {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--line-2); color: var(--text);
  display: inline-flex; align-items: center; gap: 10px; transition: all 0.3s var(--ease);
}
.book-btn-alt:hover, .ghost:hover { border-color: var(--accent); color: var(--accent); }
.explore-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); background: var(--line); border: 1px solid var(--line); gap: 1px; margin-top: 30px; }
.explore-cta a { background: var(--bg); padding: 22px 20px; display: block; transition: background 0.35s var(--ease); }
.explore-cta a:hover { background: var(--surface); }
.explore-cta .label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.explore-cta .desc { color: var(--muted); font-size: 14px; margin-top: 8px; }
.location, .soon, .placeholder { color: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }
.offer p { font-size: 16px; }

/* ==========================================================================
   404
   ========================================================================== */
.section.cta .lede { margin: 0 auto; }

/* ==========================================================================
   SKILL BLOCKS (about / depth map)
   ========================================================================== */
.skill-bar { display: flex; gap: 3px; }
.skill-bar .block {
  width: 11px; height: 7px;
  background: var(--line-2);
  display: block; flex: none;
  transition: background 0.3s var(--ease);
}
.skill-bar .block.on { background: var(--accent); }
.skill-row:hover .block.on { background: var(--accent-2); }
.evolving-note { margin-bottom: 14px; display: block; }
.depth-cat .skill-chips { margin-top: 4px; }

/* ==========================================================================
   ARTIFACT TILES
   ========================================================================== */
.apps { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.app {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transition: background 0.35s var(--ease);
}
.app:hover { background: var(--surface); }
.app-tile {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  display: block;
  padding: 0;
}
.app-tile svg { width: 100%; height: auto; display: block; }
.app-tile .badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.app-body { display: flex; align-items: baseline; gap: 12px; padding: 20px 20px 0; }
.app-name { margin: 0; }
.app-line { color: var(--muted); font-size: 14px; padding: 8px 20px 0; }
.app-go { padding: 16px 20px 20px; margin-top: auto; }
.app.placeholder { opacity: 0.55; }
.app.placeholder .app-tile {
  min-height: 150px; display: grid; place-items: center; background: var(--surface);
}

/* ==========================================================================
   CONTENT BLOCKS (blogs index, mentorship, workshops)
   ========================================================================== */
.around-block + .around-block { margin-top: 44px; }
.around-title {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.around-sub { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.around-link {
  display: inline-block; margin-top: 18px; padding: 12px 18px;
  border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: all 0.3s var(--ease);
}
.around-link:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.blogs-intro { color: var(--muted); margin-bottom: 20px; }
.blogs-empty { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.blog-arrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); transition: color 0.3s var(--ease); }
.blog-row:hover .blog-arrow { color: var(--accent); }
.mentor-intro { max-width: 68ch; }
.mentor-intro ul { list-style: none; display: grid; gap: 9px; margin-top: 14px; }
.mentor-intro ul li { position: relative; padding-left: 20px; color: var(--muted); }
.mentor-intro ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mentor-context { color: var(--dim); font-size: 14px; margin-top: 14px; }
.booking { margin-top: 10px; }
.booking-card .b-title { margin: 10px 0 8px; }
.booking-card .b-cta { display: inline-block; margin-top: 16px; }
.facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); background: var(--line); border: 1px solid var(--line); margin: 8px 0 30px; }
.fact { text-align: left; }
.f-num { display: block; font-size: 30px; letter-spacing: -0.04em; font-weight: 500; }
.f-lbl { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.ws-cols h3 { margin-bottom: 10px; }
.offer p { color: var(--muted); margin-bottom: 14px; max-width: 68ch; }

/* ==========================================================================
   TABLES (blog posts)
   ========================================================================== */
.post table, .section table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 13.5px;
}
.post table th, .section table th {
  text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim); font-weight: 500;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
}
.post table td, .section table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.post table td.num, .post table th.num, .section table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.post table td.pos { color: #6fbf8b; }
.post table td.neg { color: var(--accent); }
.post table tr.total td { border-top: 1px solid var(--line-2); color: var(--text); font-weight: 600; }
.post table tr:hover td { background: var(--surface); }

/* ==========================================================================
   POST HEADER BITS
   ========================================================================== */
.post .meta-row { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 4px; }
.post .tags { margin-top: 30px; }
.post h2:first-of-type { margin-top: 26px; }
.pattern { display: flex; align-items: baseline; gap: 12px; }
.pat-num { font-family: var(--mono); font-size: 11px; color: var(--accent); }
.question { color: var(--text); font-size: 17px; margin-top: 12px; }

/* ==========================================================================
   CONTACT LIST
   ========================================================================== */
.contact-grid {
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.contact-grid dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
  padding-top: 20px;
}
.contact-grid dd {
  font-size: 19px; letter-spacing: -0.02em; color: var(--text);
  padding: 4px 0 20px;
  border-bottom: 1px solid var(--line);
}
.contact-grid dd a { color: var(--text); position: relative; }
.contact-grid dd a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.contact-grid dd a:hover { color: var(--accent); }
.contact-grid dd a:hover::after { transform: scaleX(1); }
@media (min-width: 721px) {
  .contact-grid { display: grid; grid-template-columns: 200px 1fr; }
  .contact-grid dt { border-bottom: 1px solid var(--line); padding: 22px 0 20px; }
  .contact-grid dd { padding: 20px 0; }
}

/* ==========================================================================
   NAV BOT (NIKO, assets/bot.js)
   ========================================================================== */
.nb-group { display: flex; align-items: center; gap: 10px; }
.nb-wrap {
  display: inline-flex;
  align-items: center;
  animation: nb-float 4s ease-in-out infinite;
  cursor: default;
  flex-shrink: 0;
  color: var(--text);
}
@keyframes nb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .nb-wrap { animation: none; } }
@media (max-width: 620px) { .nb-wrap { display: none; } }