/* KADAM design tokens (ported verbatim from the design system). */
:root {
  --bone-50:#FCFAF4; --bone-100:#F5F2E9; --bone-200:#ECE8DB; --bone-300:#DED9C9; --bone-400:#C4BEAC; --bone-500:#A39C87;
  --ink-400:#6E6A5E; --ink-600:#46433A; --ink-800:#26241D; --ink-900:#16140E; --ink-950:#0B0A06;
  --dark-50:#0E0C09; --dark-100:#131108; --dark-200:#1A1714; --dark-300:#211E18; --dark-400:#2A2720; --dark-500:#363229;
  --blue-50:#E6EDFF; --blue-100:#C0D0FF; --blue-300:#7A9BFF; --blue-500:#1F5CFF; --blue-600:#0E4BFF; --blue-700:#0939CC;
  --molten-100:#FFE3D6; --molten-400:#FF7A4D; --molten-500:#FF5A26; --molten-600:#E54313;
  --cyan-400:#5BF1FF; --cyan-500:#00E5FF;
  --success-500:#22A362; --warning-500:#E08C1A; --danger-500:#F0372D;
  --canvas:var(--dark-50); --surface:var(--dark-200); --surface-sunken:var(--dark-100); --surface-card:var(--dark-300);
  --text-strong:#EDE9DF; --text-body:#C8C3B8; --text-muted:#7A756B; --text-faint:#4A4640; --text-on-accent:#FFFFFF;
  --line:rgba(237,233,223,.1); --line-strong:rgba(237,233,223,.22);
  --accent:var(--blue-500); --accent-hover:var(--blue-600); --accent-press:var(--blue-700);
  --font-display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;
  --border-hair:1px;
  --ls-tight:-0.02em; --ls-wide:0.08em; --ls-wider:0.18em;
  --text-lg:1.125rem; --text-base:1rem; --text-sm:0.875rem; --text-xs:0.75rem;
  --lh-snug:1.15; --lh-normal:1.5;
  --dur-fast:180ms; --dur-base:320ms; --dur-cine:720ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ring:0 0 0 3px var(--blue-100);

  /* Layout tokens */
  --space-section-x: clamp(20px,5vw,72px);
  --space-section-y: clamp(48px,7vw,104px);
  --space-hero-y: clamp(64px,9vw,128px);
  --space-stack-y: clamp(56px,8vw,120px);
  --space-footer-y: clamp(56px,8vw,128px);
  --max-width: 1480px;
  --gap-nav: 28px;
  --gap-section: 24px;
  --gap-grid: 20px;
  --gap-chips: 10px;
  --gap-buttons: 12px;
  --gap-social: 20px;
  --gap-role-col: 24px;
  --gap-project-col: 24px;
  --padding-role: 28px 8px;
  --padding-project: 28px 8px;
  --padding-stack: clamp(56px,8vw,120px) clamp(20px,5vw,72px);
  --border-divider: 1px solid var(--line);
  --border-bottom: 1px solid var(--line);
  --border-top: 1px solid var(--line);
  --radius-talk: var(--radius-md);
  --aspect-talk: 560 / 315;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; background:var(--canvas); color:var(--text-body); font-family:var(--font-body); font-size:var(--text-base); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text-strong); letter-spacing:var(--ls-tight); line-height:var(--lh-snug); margin:0; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--blue-500); color:#fff; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); }

/* KADAM components. */
.kdm-btn {
  --_bg:#EDE9DF; --_fg:#16140E; --_bd:transparent; --_bgh:#F5F2E9; --_bgp:#DED9C9;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; white-space:nowrap;
  font-family:var(--font-display); font-weight:var(--fw-medium);
  border:var(--border-hair) solid var(--_bd); background:var(--_bg); color:var(--_fg); border-radius:var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.kdm-btn:hover { background:var(--_bgh); }
.kdm-btn:active { background:var(--_bgp); transform:translateY(1px); }
.kdm-btn:focus-visible { outline:none; box-shadow:var(--ring); }
.kdm-btn--sm { height:34px; padding:0 14px; font-size:var(--text-sm); }
.kdm-btn--md { height:42px; padding:0 20px; font-size:var(--text-base); }
.kdm-btn--lg { height:52px; padding:0 28px; font-size:var(--text-lg); }
.kdm-btn--accent    { --_bg:var(--blue-500); --_bgh:var(--blue-600); --_bgp:var(--blue-700); color:#fff; }
.kdm-btn--warm      { --_bg:var(--molten-500); --_bgh:var(--molten-600); --_bgp:var(--molten-600); color:#fff; }
.kdm-btn--secondary { --_bg:transparent; --_fg:var(--text-strong); --_bd:rgba(237,233,223,.28); --_bgh:rgba(237,233,223,.08); --_bgp:rgba(237,233,223,.15); }
.kdm-btn--ghost     { --_bg:transparent; --_fg:var(--text-strong); --_bd:transparent; --_bgh:rgba(237,233,223,.07); --_bgp:rgba(237,233,223,.14); }
.kdm-btn--mono { font-family:var(--font-mono); text-transform:uppercase; letter-spacing:var(--ls-wide); font-weight:var(--fw-regular); }
.kdm-btn__bracket { opacity:.55; font-family:var(--font-mono); }

.kdm-eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:var(--ls-wider); text-transform:uppercase; color:var(--text-muted); line-height:1; }
.kdm-eyebrow__tick { width:18px; height:1.5px; background:var(--blue-500); flex:none; }
.kdm-eyebrow--accent { color:var(--blue-500); }
.kdm-eyebrow--ondark { color:var(--bone-400); }
.kdm-eyebrow--ondark .kdm-eyebrow__tick { background:var(--cyan-500); }
.kdm-eyebrow__idx { color:var(--blue-500); }

.kdm-badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; line-height:1; letter-spacing:var(--ls-wide); text-transform:uppercase; padding:5px 9px; border-radius:var(--radius-xs); border:var(--border-hair) solid transparent; white-space:nowrap; }
.kdm-badge--neutral { background:rgba(237,233,223,.1); color:var(--text-muted); border-color:rgba(237,233,223,.2); }
.kdm-badge--accent { background:rgba(31,92,255,.16); color:var(--blue-300); border-color:rgba(31,92,255,.4); }

.kdm-logo { font-family:var(--font-display); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--text-strong); }

/* Animations (from freelanceDev template). */
@keyframes fdFadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.fd-appear { animation: fdFadeUp 0.72s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes fdPulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
.fd-live { animation: fdPulse 2.4s ease-in-out infinite; }
.fd-tile { transition: border-color 320ms cubic-bezier(0.16,1,0.3,1), box-shadow 320ms cubic-bezier(0.16,1,0.3,1), transform 320ms cubic-bezier(0.16,1,0.3,1); }
.fd-tile:hover { border-color:var(--text-strong); box-shadow:0 8px 24px rgba(22,20,14,.09); transform:translateY(-3px); }
.fd-row { transition: background 320ms cubic-bezier(0.16,1,0.3,1), padding-left 320ms cubic-bezier(0.16,1,0.3,1); }
.fd-row:hover { background:rgba(237,233,223,.07); padding-left:24px; }
.fd-chip { transition: border-color 220ms ease, color 220ms ease; }
.fd-chip:hover { border-color:var(--blue-500); color:var(--blue-500); }

/* Page layout. */
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:18px var(--space-section-x); background:rgba(14,12,9,.88); backdrop-filter:blur(14px); border-bottom:var(--border-divider); }
.site-nav { display:flex; gap:var(--gap-nav); }
.nav-link { font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-body); transition:color 180ms ease; }
.nav-link:hover { color:var(--blue-500); }

.wrap { max-width:var(--max-width); margin:0 auto; padding:var(--space-section-y) var(--space-section-x); }
.lead { display:flex; flex-direction:column; gap:var(--gap-section); }
.lead h1 { font-weight:700; font-size:clamp(40px,7vw,88px); line-height:.98; letter-spacing:-.045em; max-width:16ch; }
.lead h1 .accent { color:var(--blue-500); }
.lead p { font-size:clamp(16px,1.4vw,20px); line-height:1.55; color:var(--text-muted); max-width:680px; margin:0; }

.section-head { display:flex; align-items:flex-end; gap:20px; margin-bottom:32px; }
.section-head h2 { font-weight:600; font-size:clamp(30px,4vw,52px); letter-spacing:-.03em; margin:10px 0 0; }

.role { display:grid; grid-template-columns:200px 1fr; gap:var(--gap-role-col); padding:var(--padding-role); border-top:var(--border-divider); }
.role:last-child { border-bottom:var(--border-divider); }
.role__meta { display:flex; flex-direction:column; gap:4px; }
.role__title { font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.02em; color:var(--text-strong); }
.role__when { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue-500); margin-top:6px; }
.role__body { font-size:15px; color:var(--text-muted); line-height:1.6; margin:0; max-width:70ch; }

.project { display:grid; grid-template-columns:260px 1fr; gap:var(--gap-project-col); padding:var(--padding-project); border-top:var(--border-divider); align-items:start; }
.project:last-child { border-bottom:var(--border-divider); }
.project__title { font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.02em; color:var(--text-strong); }
.project__body { font-size:15px; color:var(--text-muted); line-height:1.6; margin:0; max-width:70ch; }

.talk-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-grid); margin-top:8px; }
.talk-frame { position:relative; width:100%; aspect-ratio: var(--aspect-talk); border:var(--border-divider); border-radius:var(--radius-talk); overflow:hidden; background:var(--surface-card); }
.talk-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.site-footer { padding:var(--space-footer-y) var(--space-section-x) 48px; max-width:var(--max-width); margin:0 auto; }
.site-footer .row { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:64px; padding-top:26px; border-top:var(--border-divider); }
.social { display:flex; gap:var(--gap-social); }
.social a { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-body); }
.social a:hover { color:var(--blue-500); }

@media (max-width:760px) {
  .site-nav { display:none; }
  .role, .project { grid-template-columns:1fr; gap:10px; }
  .talk-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}