/* ---------- tokens (measured from shadcn.com, adapted) ---------- */
:root{
  --background:#ffffff;
  --foreground:#09090b;
  --muted-bg:rgba(244,244,245,.5);
  --muted-fg:#71717a;
  --link:#404040;
  --border:#e4e4e7;
  --ring:#09090b;

  --control-bg:#e0e0e0;
  --control-border:#919191;
  --control-fg:#000000;
  --field-border:#e5e7eb;
  --placeholder:#9ca3af;

  --radius:0px;
  --gutter:24px;
  --block-gap:32px;
  --card-pad:16px;
  --column:26rem;

  --font-sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

@media (min-width:1024px){
  :root{ --gutter:48px; }
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ border-color:var(--border); }

html{
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  tab-size:4;
}

body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:14px;
  line-height:20px;
  font-feature-settings:"rlig" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6,p,blockquote,dl,dd,figure,pre{ margin:0; }
h1,h2,h3,h4,h5,h6{ font-size:inherit; font-weight:inherit; }
ul,ol,menu{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; vertical-align:middle; }
img,video{ max-width:100%; height:auto; }
button,[role="button"]{ cursor:pointer; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; }
::placeholder{ color:var(--placeholder); opacity:1; }

a{
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:4px;
}

:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:2px;
}

/* ---------- layout ---------- */
.page{
  flex:1;
  display:flex;
  padding:var(--gutter);
}

.column{
  display:flex;
  flex-direction:column;
  gap:var(--block-gap);
  width:var(--column);
  max-width:100%;
  min-width:0;
  text-align:left;
}

/* ---------- nav ---------- */
.nav{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:14px;
  line-height:20px;
}
.nav a{ color:var(--link); }
.nav span{ color:var(--foreground); }

/* ---------- intro ---------- */
.intro{
  font-size:15px;
  line-height:1.7;
  text-wrap:pretty;
  color:var(--foreground);
}
@media (min-width:640px){
  .intro{ font-size:14px; line-height:2; text-wrap:balance; }
}
.intro strong{ font-weight:500; }

/* ---------- card ---------- */
.card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:var(--card-pad);
  background:var(--muted-bg);
  border-radius:var(--radius);
  text-decoration:none;
  min-width:0;
}
/* div cards (not links) still need the foreground color explicitly —
   a.card gets it for free via the global a{color:var(--link)} rule,
   which is left alone on purpose: it's how card body text ends up
   #404040 while h2 reclaims full contrast. See design teardown §9. */
div.card{ color:var(--foreground); }
.card h2{
  font-size:18px;
  line-height:28px;
  font-weight:500;
  color:var(--foreground);
  text-decoration:underline;
  text-underline-offset:4px;
}
.card p{
  font-size:14px;
  line-height:20px;
}
.card > .muted{ margin-top:-4px; }

/* ---------- buttons & fields ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  height:40px;
  padding:0 16px;
  font-size:16px;
  line-height:24px;
  font-weight:400;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--control-fg);
  border-radius:var(--radius);
  text-decoration:none;
}
@media (min-width:640px){
  .btn{ height:28px; padding:0 8px; font-size:14px; line-height:20px; }
}
.btn--compact{ height:28px; padding:0 8px; font-size:14px; line-height:20px; }

.field-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.input{
  height:28px;
  padding:0 8px;
  min-width:0;
  flex:1 1 160px;
  font:inherit;
  font-size:14px;
  line-height:20px;
  background:var(--background);
  color:var(--foreground);
  border:1px solid var(--field-border);
  border-radius:var(--radius);
}

.muted{
  font-size:14px;
  line-height:20px;
  color:var(--muted-fg);
}

/* ---------- client work list ---------- */
.work-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:4px;
}
.work-item a{
  font-size:14px;
  font-weight:500;
  color:var(--foreground);
}
.work-item p{
  font-size:13px;
  line-height:18px;
  color:var(--muted-fg);
}

/* ---------- stack pills ---------- */
.pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:12px;
  line-height:1.5;
  padding:4px 10px 4px 8px;
  background:var(--control-bg);
  border:1px solid var(--control-border);
  color:var(--control-fg);
  border-radius:var(--radius);
}
.pill svg{
  width:13px;
  height:13px;
  flex:none;
  opacity:.85;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }
}