/* Kin — editorial-financial aesthetic
   Cream paper, ink black, restrained gold accent (money). Serif heads, sans body, mono numbers.
   Influences: NYT The Daily, Stripe Press, Bloomberg Markets endpapers.
*/

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper: #f5f1e8;
  --paper-soft: #ebe5d6;
  --ink: #0e0d0a;
  --ink-soft: #3d3a32;
  --ink-mute: #7d786b;
  --rule: #d4cdb9;
  --gold: #9c7c2e;
  --gold-soft: #c4a35a;
  --gold-tint: #ede2c7;
  --green: #2d5e44;
  --red: #98342a;
  --serif: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--gold); }
button { font-family: inherit; cursor: pointer; }

/* Buttons */
.btn { font-size: 14px; padding: 10px 18px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 2px; font-weight: 500; letter-spacing: 0.005em; transition: all 150ms; }
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; background: var(--ink-mute); border-color: var(--ink-mute); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.btn.gold:hover { background: var(--ink); border-color: var(--ink); }
.btn.lg { padding: 14px 28px; font-size: 16px; }

/* Inputs */
input, textarea, select { font-family: inherit; font-size: 14px; background: #fdfbf5; border: 1px solid var(--rule); padding: 10px 14px; border-radius: 2px; width: 100%; color: var(--ink); outline: none; transition: border-color 120ms; }
input:focus, textarea:focus, select:focus { border-color: var(--ink); }
textarea { resize: vertical; min-height: 100px; font-family: var(--mono); font-size: 13px; line-height: 1.55; }
label { font-size: 12px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--mono); display: block; margin-bottom: 6px; }

/* Layout */
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 32px; }

/* Masthead */
.masthead { border-bottom: 1px double var(--ink); padding: 28px 0 24px; }
.masthead-row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.brand { font-family: var(--serif); font-weight: 600; font-size: 36px; letter-spacing: -0.015em; line-height: 1; }
.brand em { font-style: italic; color: var(--gold); font-weight: 500; }
.tagline { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); margin-top: 4px; }
.masthead .pill { display: inline-flex; gap: 6px; align-items: center; font-family: var(--mono); font-size: 11px; padding: 4px 10px; background: var(--gold-tint); color: var(--gold); border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em; }
.masthead .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

.nav-row { display: flex; gap: 32px; margin-top: 16px; font-size: 13px; }
.nav-row a { color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.nav-row a.active { color: var(--ink); border-bottom-color: var(--ink); }
.nav-row a:hover { color: var(--ink); }

/* Hero */
.hero { padding: 80px 0 96px; text-align: center; }
.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 88px;
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
@media (max-width: 720px) { .hero h1 { font-size: 56px; } }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero .lede {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 40px;
}
.hero .lede strong { color: var(--ink); font-weight: 500; }
.hero .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); margin: 80px 0 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 720px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } }
.hero-stats .stat { background: var(--paper); padding: 28px 20px; text-align: center; }
.hero-stats .stat .num { font-family: var(--serif); font-size: 36px; font-weight: 500; color: var(--ink); display: block; margin-bottom: 4px; }
.hero-stats .stat .lab { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; }

/* Sections */
section { padding: 64px 0; }
.section-eyebrow { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.section-eyebrow::before { content: ''; width: 32px; height: 1px; background: var(--ink-mute); }
.section-title { font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 28px; max-width: 720px; }
.section-title em { font-style: italic; color: var(--gold); }

.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 32px; }
@media (max-width: 880px) { .three-col { grid-template-columns: 1fr; gap: 36px; } }
.col h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.col h3 .num { font-family: var(--mono); font-size: 12px; color: var(--gold); margin-right: 8px; }
.col p { color: var(--ink-soft); }

/* Cards */
.card { background: #fdfbf5; border: 1px solid var(--rule); padding: 24px; border-radius: 2px; }
.card.elevated { box-shadow: 0 1px 0 rgba(14,13,10,0.04), 0 12px 32px -16px rgba(14,13,10,0.12); }

/* Skill list (marketplace) */
.skill-list { display: grid; gap: 16px; margin-top: 32px; }
.skill-row { background: #fdfbf5; border: 1px solid var(--rule); padding: 20px 24px; border-radius: 2px; display: grid; grid-template-columns: 1fr auto auto; gap: 24px; align-items: center; transition: border-color 150ms; }
.skill-row:hover { border-color: var(--ink); }
.skill-row .desc { display: flex; flex-direction: column; gap: 4px; }
.skill-row .desc .type { font-family: var(--mono); font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; }
.skill-row .desc .name { font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--ink); }
.skill-row .desc .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-top: 4px; }
.skill-row .desc .meta a { color: var(--ink-soft); text-decoration: none; }
.skill-row .price { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); }
.skill-row .price .unit { font-size: 13px; color: var(--ink-mute); margin-left: 4px; }

/* Stat ticker */
.ticker { font-family: var(--mono); font-size: 12px; color: var(--ink-mute); padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; gap: 32px; overflow: hidden; }
.ticker span { white-space: nowrap; }
.ticker .num { color: var(--ink); font-weight: 500; }

/* Forms */
.field { margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Toast / status */
.error { padding: 12px 16px; border: 1px solid #d9b4a8; background: #f3dfd8; color: var(--red); border-radius: 2px; font-size: 13px; margin: 12px 0; }
.success { padding: 12px 16px; border: 1px solid #b3cdaf; background: #d9e8d3; color: var(--green); border-radius: 2px; font-size: 13px; margin: 12px 0; }

/* Spinner */
.spinner { display: inline-block; width: 12px; height: 12px; border: 1.5px solid var(--ink-mute); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Streaming cursor */
.cursor { display: inline-block; color: var(--gold); animation: blink 0.8s steps(2) infinite; margin-left: 2px; }
@keyframes blink { to { opacity: 0; } }

/* Skill row fade-in (staggered) */
.skill-row { animation: rowIn 320ms ease-out both; }
.skill-row:nth-child(1) { animation-delay: 0ms; }
.skill-row:nth-child(2) { animation-delay: 60ms; }
.skill-row:nth-child(3) { animation-delay: 120ms; }
.skill-row:nth-child(4) { animation-delay: 180ms; }
.skill-row:nth-child(5) { animation-delay: 240ms; }
.skill-row:nth-child(6) { animation-delay: 300ms; }
.skill-row:nth-child(7) { animation-delay: 360ms; }
.skill-row:nth-child(8) { animation-delay: 420ms; }
@keyframes rowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Hero stats reveal */
.hero-stats .stat .num { transition: color 200ms; }

/* Mobile polish */
@media (max-width: 600px) {
  .container, .container-narrow { padding: 0 20px; }
  .masthead { padding: 20px 0 16px; }
  .brand { font-size: 28px; }
  .nav-row { gap: 18px; flex-wrap: wrap; font-size: 12px; }
  .nav-row a { padding-bottom: 1px; }
  .hero { padding: 48px 0 56px; }
  .hero h1 { font-size: 44px; }
  .hero .lede { font-size: 17px; }
  .hero .cta-row { flex-direction: column; }
  .hero .cta-row .btn { width: 100%; }
  .section-title { font-size: 30px; }
  .skill-row { grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .skill-row .price { font-size: 18px; }
  .skill-row button { width: 100%; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hero-stats .stat { padding: 20px 14px; }
  .hero-stats .stat .num { font-size: 28px; }
  .footer .row { flex-direction: column; gap: 8px; }
  table.kv-table td { font-size: 12px; }
}

/* Pulse for "live" indicators */
.pulse { display: inline-block; width: 8px; height: 8px; background: var(--green); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

/* Job execution panel */
.execution-panel { background: var(--ink); color: var(--paper); padding: 24px 28px; border-radius: 2px; font-family: var(--mono); font-size: 13px; line-height: 1.7; }
.execution-panel .step { display: flex; gap: 12px; align-items: flex-start; opacity: 0.4; transition: opacity 200ms; }
.execution-panel .step.active { opacity: 1; }
.execution-panel .step.done { opacity: 0.7; }
.execution-panel .step .marker { font-size: 11px; color: var(--gold-soft); flex-shrink: 0; min-width: 70px; }
.execution-panel .step .text { flex: 1; }
.execution-panel .output { margin-top: 16px; padding-top: 16px; border-top: 1px solid #2a2723; font-family: var(--sans); white-space: pre-wrap; line-height: 1.6; }

/* Badge */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 100px; }
.badge.ok { background: var(--gold-tint); color: var(--gold); }
.badge.ok::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* Footer */
.footer { border-top: 1px solid var(--rule); padding: 40px 0 80px; margin-top: 80px; font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 14px; }
.footer .row { display: flex; gap: 24px; flex-wrap: wrap; align-items: baseline; }
.footer a { color: var(--ink-soft); }

/* Wallet table */
.kv-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.kv-table tr { border-bottom: 1px solid var(--rule); }
.kv-table tr:last-child { border-bottom: none; }
.kv-table td { padding: 10px 0; font-family: var(--mono); font-size: 13px; }
.kv-table td.k { color: var(--ink-mute); }
.kv-table td.v { text-align: right; color: var(--ink); }
.kv-table td.v a { color: var(--ink); }