/* Joel Smalley — landing page, restyled to Rubytech design tokens.
   Palette + scale from rubytech-design-tokens v2.0.0 (light-first,
   warm-grey near-monochrome). Layout structure ported from the
   original Next.js globals.css; sage-green accent removed entirely. */

:root{
  /* warm-grey neutral scale */
  --n-0:#ffffff; --n-50:#fafaf8; --n-100:#f5f5f3; --n-150:#eeeee9;
  --n-200:#e0e0db; --n-300:#d5d5d0; --n-400:#b5b5b0; --n-500:#a0a09a;
  --n-600:#888888; --n-700:#666666; --n-800:#3a3a3a; --n-850:#2a2a2a;
  --n-900:#1a1a1a; --n-1000:#000000;

  /* semantic */
  --bg:#f5f5f3; --bg-soft:#fafaf8;
  --text:#1a1a1a; --text-muted:#a0a09a; --text-dim:#b5b5b0;
  --text-secondary:#3a3a3a; --text-tertiary:#666666; --text-faint:#b5b5b0;
  --border:#e0e0db; --line:#d5d5d0;

  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:var(--font-sans);
  background:var(--bg-soft);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:640px;
  width:100%;
}

h1,h2{
  font-family:var(--font-sans);
  font-weight:500;
  letter-spacing:-0.025em;
  color:var(--text);
}

h1{
  font-size:3.25rem;
  margin-bottom:0.25rem;
  line-height:1.1;
  letter-spacing:-0.035em;
  padding-bottom:0.6rem;
  border-bottom:1px solid var(--border);
}

.role{
  font-size:1rem;
  color:var(--text-tertiary);
  margin-top:1rem;
  margin-bottom:1.75rem;
  line-height:1.6;
  font-weight:400;
}

.role strong{
  color:var(--text);
  font-weight:600;
}

.bio{
  font-size:1.05rem;
  line-height:1.8;
  color:var(--text-secondary);
  margin-bottom:2rem;
  font-weight:400;
}

h2{
  font-size:1.3rem;
  margin-bottom:0.75rem;
  padding-bottom:0.3rem;
  border-bottom:1px solid var(--border);
}

.links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  margin-bottom:2rem;
}

.links li{
  font-size:1rem;
  line-height:1.7;
  color:var(--text-secondary);
  padding-left:1.2rem;
  position:relative;
}

.links li::before{
  content:"\2022";
  position:absolute;
  left:0;
  color:var(--text-dim);
}

.links a{
  color:var(--text);
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color 0.15s ease;
}

.links a:hover{
  border-bottom-color:var(--n-900);
  color:var(--text);
}

.links .meta{
  color:var(--text-muted);
  font-size:0.9rem;
}

blockquote{
  border-left:3px solid var(--n-900);
  padding-left:1rem;
  margin-top:2rem;
  font-size:1rem;
  color:var(--text-tertiary);
  font-style:italic;
  line-height:1.7;
}

blockquote cite{
  display:block;
  font-style:normal;
  font-size:0.85rem;
  color:var(--text-muted);
  margin-top:0.25rem;
}

.cursor{
  display:inline-block;
  width:2px;
  height:1.15em;
  background:var(--n-900);
  margin-left:2px;
  vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
}

@keyframes blink{
  50%{opacity:0}
}

[data-stream]{
  visibility:hidden;
}

[data-stream].streamed{
  visibility:visible;
}

@media (max-width:520px){
  body{
    padding:1.5rem;
    align-items:flex-start;
    padding-top:2.5rem;
  }
  h1{
    font-size:2.25rem;
  }
  .bio{
    font-size:1rem;
  }
}