/* ============================================================================
   Data101 — production stylesheet
   Design tokens merged verbatim from the Data101 Design System (tokens/*.css),
   plus the page base styles and the booking-embed / fallback styling.
   The brand is a warm neutral ramp, no hue. Sharp corners. Quiet motion.
   ========================================================================== */

/* Webfonts — JetBrains Mono (mono/display). Body uses the system sans stack. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,400&display=swap');

:root {
  /* --- Colors: base ramp (no hue) --------------------------------------- */
  --ink:          #0B0B0C; /* near-black, the default */
  --paper:        #FBFBF9; /* warm off-white */
  --grey-900:     #0B0B0C;
  --grey-700:     #3A3A37;
  --grey-600:     #55554F;
  --grey-500:     #8C8C84; /* signal grey — the prompt, captions */
  --grey-400:     #9A9A92;
  --grey-300:     #C9C9C0;
  --grey-200:     #EAE9E2; /* hairlines */
  --grey-100:     #F2F1EC;

  /* Restrained functional accents (use sparingly, never decoratively) */
  --danger:       #B23A3A;
  --success:      #4E8A57;

  /* Semantic aliases */
  --text-primary:    var(--ink);
  --text-secondary:  var(--grey-600);
  --text-muted:      var(--grey-500);
  --text-faint:      var(--grey-400);
  --text-on-ink:     var(--paper);
  --text-on-ink-dim: #8C8C84;

  --surface:         var(--paper);
  --surface-sunken:  var(--grey-100);
  --surface-inverse: var(--ink);

  --border-hairline: var(--grey-200);
  --border-strong:   var(--ink);
  --border-dashed:   var(--grey-300);

  --prompt:          var(--grey-500); /* the ">" and cursor grey */

  /* --- Typography ------------------------------------------------------- */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-sans: 'Helvetica Neue', Arial, system-ui, sans-serif;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   800;

  --text-display:   58px;
  --text-h1:        38px;
  --text-h2:        28px;
  --text-h3:        20px;
  --text-lead:      18px;

  --text-body:      15px;
  --text-body-sm:   13px;
  --text-caption:   11px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-body:   1.7;

  --tracking-tight: -0.02em;
  --tracking-label: 0.26em;
  --tracking-wide:  0.34em;

  /* --- Spacing (4px base grid) ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --container:       1120px;
  --container-tight: 720px;

  /* --- Effects ---------------------------------------------------------- */
  --radius-none:  0px;   /* sharp corners are the brand */
  --radius-round: 50%;   /* only for avatars */

  --hairline: 1px solid var(--border-hairline);
  --rule:     1px solid var(--border-strong);

  --shadow-card: 0 1px 0 #ffffff, 0 30px 60px -40px rgba(0,0,0,0.35);
  --shadow-lift: 0 20px 40px -30px rgba(0,0,0,0.5);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur:      200ms;
}

/* ============================================================================
   Base — moved from the source page's inline <style>
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 88px; } /* offset for the sticky header on anchor jumps */

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--grey-600); }

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.cursor {
  display: inline-block;
  width: .5em; height: 1em;
  background: currentColor;
  margin-left: .1em;
  transform: translateY(.12em);
  animation: blink 1.1s steps(1) infinite;
}

/* No-JS notice (this page renders client-side, as in the source prototype) */
.noscript {
  max-width: 640px;
  margin: 96px auto;
  padding: 0 24px;
  font-family: var(--font-mono);
  color: var(--grey-600);
  line-height: 1.7;
}

/* ============================================================================
   Booking — self-hosted Cal.com inline embed with graceful fallback
   The Cal iframe is hidden until the booking page confirms it loaded
   (`linkReady` adds .cal-ready). Until then — and if the instance is
   unreachable — the on-brand fallback with a direct link is shown.
   ========================================================================== */
.cal-embed {
  position: relative;
  width: 700px;
  max-width: 100%;
  min-height: 600px;
  margin-top: 36px;
  border: 1px solid var(--border-hairline);
  background: var(--surface);
}
.cal-inline { width: 100%; min-height: 600px; }
.cal-inline iframe { display: none; width: 100% !important; border: 0; }
.cal-embed.cal-ready .cal-inline iframe { display: block; }

.cal-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
}
.cal-embed.cal-ready .cal-fallback { display: none; }
.cal-fallback-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.cal-fallback-link {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  border-bottom: 1px solid var(--grey-300);
  padding-bottom: 3px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cal-fallback-link:hover { color: var(--grey-700); border-color: var(--grey-500); }

/* ============================================================================
   Motion — respect reduced-motion preferences (quiet by default anyway)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor { animation: none; }
}