/* Sonkawade Labs — Nim-style design system.
   One stylesheet for every page. The class names are the ones the existing
   markup already uses (.panel, .card, .btn, .prose, .ticks …) so the whole
   site changes look from this file alone.

   Nim's language: Geist, tracking-tight, a single narrow column, zinc
   neutrals, near-invisible chrome, motion that is felt rather than seen. */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap');

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* zinc scale, light */
  --bg: #ffffff;
  --surface: rgba(250, 250, 250, 0.6);
  --surface-solid: #fafafa;
  --ink: #09090b;      /* zinc-950 */
  --ink-2: #27272a;    /* zinc-800 */
  --ink-soft: #52525b; /* zinc-600 */
  --ink-faint: #71717a;/* zinc-500 */
  --line: #f4f4f5;     /* zinc-100 */
  --line-2: #e4e4e7;   /* zinc-200 */
  --ring: rgba(228, 228, 231, 0.5);
  --hover: #f4f4f5;
  --spot: #18181b;

  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 100px;

  --gap: 24px;
  --container: 720px;
  --section-gap: 96px;
}

/* Wide screens: let the column breathe instead of floating in whitespace. */
/* Fluid on large screens: ~86% of the window, capped so text lines
   on very wide monitors don't become unreadably long. */
@media (min-width: 1100px) {
  :root { --container: min(86vw, 1560px); }
}

html.dark {
  color-scheme: dark;

  --bg: #09090b;
  --surface: rgba(24, 24, 27, 0.5);
  --surface-solid: #18181b;
  --ink: #fafafa;
  --ink-2: #e4e4e7;
  --ink-soft: #a1a1aa;
  --ink-faint: #71717a;
  --line: #27272a;
  --line-2: #3f3f46;
  --ring: rgba(39, 39, 42, 0.6);
  --hover: rgba(39, 39, 42, 0.7);
  --spot: #fafafa;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  padding: 0 20px 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.02em; /* tracking-tight */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
img, svg { max-width: 100%; }

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

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.03em;
}

/* Nim is understated — the page name is a heading, not a billboard. */
h1 { font-size: clamp(2rem, 3.8vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.1875rem; font-weight: 450; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 550; }

.lede { color: var(--ink-soft); }

.eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.muted { color: var(--ink-soft); }

/* Nim centres nothing — it is a left-aligned reading column. The class stays
   so existing markup keeps working, but it only softens the alignment. */
.center { text-align: left; }
.center .btn-row { justify-content: flex-start; }

/* ---------- Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

.stack { display: block; }

.stack > *, .grid > * { min-width: 0; }

/* Sections are separated by space, not by cards on a coloured background. */
.panel {
  padding: 0;
  margin-top: var(--section-gap);
  background: none;
  border-radius: 0;
}

.panel:first-child { margin-top: 0; }

.panel--cream,
.panel--cream2,
.panel--ink { background: none; color: inherit; }

.panel--ink .eyebrow,
.panel--ink .muted,
.panel--ink .lede { color: var(--ink-soft); }

.section-head { margin-bottom: 20px; }
.section-head .lede { margin-top: 8px; }

.grid { display: grid; gap: 16px; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Header ---------- */

.site-header {
  position: static;
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px 0 32px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.brand {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}

/* Homepage only: the tagline under the wordmark, faded in per character. */
.brand-tagline {
  margin: 2px 0 0;
  font-size: 17px;
  color: var(--ink-soft);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-links a {
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: 16px;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.nav-links a:hover { color: var(--ink); background: var(--hover); }
.nav-links a[aria-current="page"] { color: var(--ink); }

/* The header CTA is quiet here — the page body carries the call to action.
   Descendant, not child: site.js wraps every .btn in a .magnetic span. */
.nav .btn {
  margin-left: 8px;
  padding: 5px 12px;
  font-size: 16px;
}

@media (max-width: 640px) {
  .site-header { padding-top: 48px; }
  .nav-links { width: 100%; margin-left: 0; margin-top: 4px; }
  .nav-links a { padding: 6px 8px; }
  .nav .btn { margin-left: 0; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 16px;
  font-weight: 450;
  letter-spacing: -0.01em;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}

.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--ink-2); }

.btn--light,
.btn--ghost {
  background: var(--line);
  color: var(--ink);
}

.btn--light:hover,
.btn--ghost:hover { background: var(--line-2); }

.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

/* Magnetic wrapper injected by site.js — the button drifts toward the cursor. */
.magnetic { display: inline-block; will-change: transform; }

/* ---------- Cards (spotlight hover, like Nim's work list) ---------- */

.card {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ring);
}

.card > * { position: relative; z-index: 1; }

/* The spotlight itself: a soft radial that follows the pointer. */
.card::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--mx, 50%);
  top: var(--my, 50%);
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--spot) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.card:hover::after { opacity: 0.06; }
html.dark .card:hover::after { opacity: 0.1; }

.card--bordered { background: none; }

.card h3, .card h4 { margin-bottom: 4px; }
.card p { color: var(--ink-soft); font-size: 17px; }

.card-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border-radius: var(--r-sm);
  background: var(--line);
  color: var(--ink-soft);
  font-size: 13px;
}

/* ---------- Project / list rows ---------- */

.rowlist { display: flex; flex-direction: column; }

.rowlist .row {
  display: block;
  margin: 0 -12px;
  padding: 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background-color 200ms ease;
}

.rowlist .row:hover { background: var(--hover); }

.row-links {
  margin-top: 6px;
  font-size: 15px;
}

.row .row-links { color: var(--ink-faint); }

.row-links a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color 150ms ease, border-color 150ms ease;
}

.row-links a:hover { color: var(--ink); border-color: var(--ink-faint); }

.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.row-title { font-weight: 450; font-size: 19px; color: var(--ink); }
.row-meta { font-size: 14px; color: var(--ink-faint); white-space: nowrap; }
.row p { margin: 2px 0 0; font-size: 17px; color: var(--ink-soft); }

.status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Lists ---------- */

.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }

.ticks li {
  position: relative;
  padding-left: 18px;
  font-size: 17px;
  color: var(--ink-soft);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}

/* ---------- Tabs ---------- */

.tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 -8px 20px;
  padding: 0 8px;
  background: none;
  border-radius: 0;
}

.tab {
  padding: 7px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}

.tab:hover { color: var(--ink); background: var(--hover); }
.tab[aria-selected="true"] { color: var(--ink); background: var(--line); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.tab-panel[hidden] { display: none; }
.tab-panel.is-entering { animation: fade-up 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Hero ---------- */

.hero {
  padding: 0;
  text-align: left;
}

.hero h1 { margin-bottom: 12px; max-width: none; }
.hero .lede { margin-bottom: 20px; }

.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}

.hero-note a { text-decoration: underline; text-underline-offset: 2px; }

.pill-tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 0;
  background: none;
  font-size: 13px;
  font-weight: 450;
  color: var(--ink-faint);
}

/* ---------- Product window mock ---------- */

.mock-wrap { perspective: none; margin-top: 32px; }

.mock {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ring);
  text-align: left;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }

.mock-title { margin-left: 8px; font-size: 12px; color: var(--ink-faint); }

.mock-body { display: grid; gap: 16px; padding: 16px; }

@media (min-width: 640px) { .mock-body { grid-template-columns: 1fr 1fr; } }

.chat { display: grid; gap: 8px; align-content: start; }

.bubble {
  max-width: 92%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--line);
  color: var(--ink-2);
}

.bubble--in { border-bottom-left-radius: 4px; }

.bubble--out {
  margin-left: auto;
  border-bottom-right-radius: 4px;
  background: var(--ink);
  color: var(--bg);
}

.bubble small { display: block; margin-top: 4px; font-size: 11px; opacity: 0.6; }

.letter {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--ring);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.letter-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-faint);
}

.letter-line { height: 6px; margin-bottom: 8px; border-radius: 3px; background: var(--line); }
.letter-line.short { width: 55%; }
.letter-line.mid { width: 78%; }

/* ---------- Price ---------- */

.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0 4px;
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
}

.price small { font-size: 13px; font-weight: 450; color: var(--ink-faint); }

.price-card { display: flex; flex-direction: column; gap: 12px; }
.price-card .ticks { margin-top: auto; }

.stat-value {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

/* ---------- Prose (legal pages) ---------- */

/* Legal text stays on a readable measure even though the page uses the
   full container — a 960px line of 16px text is too long to read. */
.prose { font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.prose > h2 { margin: 2rem 0 0.6rem; font-size: 1.125rem; color: var(--ink); }
.prose > h3 { margin: 1.6rem 0 0.5rem; font-size: 1rem; color: var(--ink); }
.prose > h4 { margin: 1.4rem 0 0.4rem; color: var(--ink); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.15rem; }
.prose li { margin-bottom: 0.35rem; }
.prose a { color: var(--ink); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

.note {
  padding: 14px 16px;
  margin: 1.25rem 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--ring);
}

.note p:last-child { margin-bottom: 0; }

.prose .small { font-size: 13.5px; color: var(--ink-faint); }
.prose .card { margin: 1rem 0; }

.lang-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 1rem 0 1.75rem; }

.lang-nav a {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--line);
  font-size: 13.5px;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.lang-nav a:hover { background: var(--line-2); }

code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--line);
  font-family: var(--font-mono);
  font-size: 0.875em;
  letter-spacing: 0;
}

.code-block {
  overflow-x: auto;
  margin: 0 0 1rem;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-solid);
  box-shadow: inset 0 0 0 1px var(--ring);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  letter-spacing: 0;
  white-space: pre;
}

/* ---------- Tables ---------- */

.table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
  border-radius: var(--r-md);
  box-shadow: inset 0 0 0 1px var(--ring);
}

table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  background: none;
}

th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; }
td { color: var(--ink-soft); }

th {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: var(--section-gap);
  padding: 16px 0 40px;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: inherit;
}

.footer-top {
  display: grid;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 0;
}

@media (min-width: 640px) {
  .footer-top { grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 24px; }
}

.footer-brand .brand { display: inline-block; margin-bottom: 6px; }
.footer-brand p { font-size: 13px; color: var(--ink-faint); }

.footer-col h4 {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-faint);
}

.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }

.footer-col a {
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 150ms ease;
}

.footer-col a:hover { color: var(--ink); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  justify-content: space-between;
  padding-top: 12px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* Theme switch — injected into .footer-bottom by site.js on every page. */
.theme-switch {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--line);
}

.theme-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-faint);
  cursor: pointer;
  transition: color 120ms ease;
}

.theme-switch button:hover { color: var(--ink-soft); }
.theme-switch button[data-checked="true"] { color: var(--ink); }
.theme-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.theme-switch svg { width: 15px; height: 15px; }

/* The sliding pill behind the selected icon. */
.theme-switch__thumb {
  position: absolute;
  top: 2px;
  left: 0;
  height: 24px;
  width: 26px;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--ring);
  transition: transform 200ms cubic-bezier(0.3, 0, 0.2, 1);
  pointer-events: none;
}

/* ---------- Reveal: staggered blur-in, Nim's entrance ---------- */

/* An animation with fill-mode "backwards", deliberately — the hidden state
   lives only inside the keyframe. The element's resting state is visible, so
   no-JS, no-animation and reduced-motion visitors all get a readable page;
   nothing can leave content stuck at opacity 0. */
html.js [data-reveal] {
  animation: reveal 300ms ease backwards;
  animation-delay: var(--reveal-delay, 0ms);
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
}

@media (min-width: 1500px) {
  body { font-size: 18px; }
  .card p, .row p, .ticks li { font-size: 17px; }
  .lede { font-size: 19px; }
  .prose { font-size: 17px; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html.js [data-reveal] { animation: none; }
}