/* Baitham Labs — design tokens
   Monochrome + blue accent, per the generated design system.
   Light values on :root; dark redefines tokens only. */
:root{
  --bg:#FAFAFA;  --surface:#FFFFFF; --surface-2:#F4F4F5;
  --fg:#09090B;  --fg-muted:#52525B;
  --border:#E4E4E7; --accent:#2563EB; --accent-fg:#FFFFFF;
  --ring:#2563EB;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-6:3rem; --sp-8:4rem;
  --radius:12px;
  --measure:38rem;
  --font-head:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#09090B; --surface:#131316; --surface-2:#18181B;
    --fg:#FAFAFA; --fg-muted:#A1A1AA;
    --border:#27272A; --accent:#60A5FA; --accent-fg:#09090B;
    --ring:#60A5FA;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16px/1.65 var(--font-body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-head); line-height:1.2; letter-spacing:-.015em; margin:0}
p{margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:2px solid var(--ring); outline-offset:3px; border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-fg);
      padding:.65rem 1rem;border-radius:0 0 var(--radius) 0;z-index:100}
.skip:focus{left:0}

.wrap{width:100%; max-width:64rem; margin-inline:auto; padding-inline:clamp(1.25rem,5vw,2.5rem)}

/* header */
.site-header{border-bottom:1px solid var(--border); background:var(--bg);
             position:sticky; top:0; z-index:20}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between;
                   gap:var(--sp-2); min-height:64px}
.brand{display:inline-flex; align-items:center; gap:.6rem; color:var(--fg);
       font-family:var(--font-head); font-weight:600; letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand svg{display:block; color:var(--accent)}
.nav{display:flex; gap:var(--sp-2); align-items:center}
.nav a{color:var(--fg-muted); font-size:.9375rem; padding:.5rem .25rem;
       transition:color .2s ease}
.nav a:hover,.nav a[aria-current=page]{color:var(--fg); text-decoration:none}

/* hero */
.hero{padding-block:clamp(3.5rem,10vw,6rem) var(--sp-6)}
.eyebrow{font-family:var(--font-head); font-size:.8125rem; letter-spacing:.08em;
         text-transform:uppercase; color:var(--fg-muted); margin-bottom:var(--sp-2)}
.hero h1{font-size:clamp(2rem,6vw,3.25rem); font-weight:600; max-width:20ch}
.hero .lede{margin-top:var(--sp-3); font-size:clamp(1.0625rem,2.2vw,1.1875rem);
            color:var(--fg-muted); max-width:var(--measure)}

/* sections */
section{padding-block:var(--sp-6)}
section+section{border-top:1px solid var(--border)}
.section-head{margin-bottom:var(--sp-4)}
.section-head h2{font-size:clamp(1.25rem,3vw,1.5rem); font-weight:600}
.section-head p{margin-top:.5rem; color:var(--fg-muted); max-width:var(--measure)}

/* project grid */
.grid{display:grid; gap:var(--sp-2); grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr); gap:var(--sp-3)}}
.card{background:var(--surface); border:1px solid var(--border);
      border-radius:var(--radius); padding:var(--sp-3);
      transition:border-color .3s ease, transform .3s ease}
@media (hover:hover){.card:hover{border-color:var(--accent); transform:translateY(-2px)}}
.card h3{font-size:1.0625rem; font-weight:600; display:flex; align-items:center; gap:.5rem}
.card h3 svg{color:var(--accent); flex:none}
.card p{margin-top:.6rem; color:var(--fg-muted); font-size:.9375rem}
.tags{margin-top:var(--sp-2); display:flex; flex-wrap:wrap; gap:.4rem; padding:0; list-style:none}
.tags li{font-family:var(--font-head); font-size:.75rem; color:var(--fg-muted);
         background:var(--surface-2); border:1px solid var(--border);
         border-radius:999px; padding:.2rem .6rem}

/* prose (privacy / terms) */
.prose{max-width:var(--measure); padding-block:var(--sp-6)}
.prose h1{font-size:clamp(1.75rem,5vw,2.25rem); font-weight:600}
.prose .updated{margin-top:.6rem; color:var(--fg-muted); font-size:.9375rem}
.prose h2{font-size:1.125rem; font-weight:600; margin-top:var(--sp-4)}
.prose p,.prose ul{margin-top:var(--sp-2); color:var(--fg-muted)}
.prose li{margin-top:.35rem}
.prose strong{color:var(--fg); font-weight:600}
.callout{margin-top:var(--sp-3); padding:var(--sp-2) var(--sp-3);
         background:var(--surface-2); border-left:3px solid var(--accent);
         border-radius:0 var(--radius) var(--radius) 0}
.callout p{margin-top:0; color:var(--fg)}

/* footer */
.site-footer{border-top:1px solid var(--border); padding-block:var(--sp-4); margin-top:var(--sp-4)}
.site-footer .wrap{display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-3);
                   align-items:center; justify-content:space-between}
.site-footer p{color:var(--fg-muted); font-size:.875rem}
.site-footer nav{display:flex; gap:var(--sp-3)}
.site-footer nav a{color:var(--fg-muted); font-size:.875rem}
.site-footer nav a:hover{color:var(--fg)}

/* motion: entrance, disabled for reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0; transform:translateY(10px); animation:rise .5s ease forwards}
  .reveal:nth-child(2){animation-delay:.06s}
  .reveal:nth-child(3){animation-delay:.12s}
  .reveal:nth-child(4){animation-delay:.18s}
  @keyframes rise{to{opacity:1; transform:none}}
}

/* card footer link */
.card{display:flex; flex-direction:column}
.card .spacer{flex:1}
.card-link{margin-top:var(--sp-2); display:inline-flex; align-items:center; gap:.4rem;
           font-family:var(--font-head); font-size:.875rem; font-weight:500;
           color:var(--accent); align-self:flex-start; padding:.35rem 0}
.card-link svg{flex:none}
.badge{font-family:var(--font-head); font-size:.6875rem; letter-spacing:.04em;
       text-transform:uppercase; color:var(--fg-muted); border:1px solid var(--border);
       background:var(--surface-2); border-radius:999px; padding:.15rem .5rem; font-weight:500}
.card h3{gap:.5rem; flex-wrap:wrap}

.prose h3{font-family:var(--font-head); font-size:1rem; font-weight:600;
          margin-top:var(--sp-3); color:var(--fg)}
.prose ul ul{margin-top:.35rem}