/* ---- CSS: mobile-first, minimal, accessible ---- */
:root{
  --bg: #ffffff; 
  --fg: #0a0a0a; 
  --muted:#6b7280; 
  --soft:#ececec; 
  --card:#fafafa; 
  --link:#0a0a0a;
  --accent:#0a0a0a; 
  --radius: 14px; 
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --maxw: 1040px; 
  --lh: 1.55; 
  --grid-gap: 16px;
}

@media (prefers-color-scheme: dark){
  :root{ 
    --bg:#0b0b0b; 
    --fg:#f5f5f5; 
    --muted:#9aa0a6; 
    --soft:#1a1a1a; 
    --card:#0f0f10; 
    --link:#f5f5f5; 
    --accent:#f5f5f5; 
  }
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; 
  background:var(--bg); 
  color:var(--fg); 
  line-height:var(--lh)
}
img{max-width:100%; height:auto}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw); margin:0 auto; padding:0 18px}

/* Skip link */
.skip{
  position:absolute; 
  left:-9999px; 
  top:auto; 
  width:1px; 
  height:1px; 
  overflow:hidden
}
.skip:focus{
  position:fixed; 
  top:10px; 
  left:10px; 
  z-index:9999; 
  padding:12px; 
  background:var(--accent); 
  color:var(--bg); 
  width:auto; 
  height:auto
}

/* Header */
header{
  position:sticky; 
  top:0; 
  z-index:40; 
  backdrop-filter:saturate(160%) blur(10px); 
  background:color-mix(in oklab, var(--bg) 85%, transparent); 
  border-bottom:1px solid var(--soft)
}
.nav{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  height:64px
}
.brand{
  display:flex; 
  gap:10px; 
  align-items:center; 
  font-weight:800; 
  letter-spacing:.2px
}
.logo{
  height:22px; 
  width:auto; 
  display:block
}
nav ul{
  list-style:none; 
  display:flex; 
  gap:18px; 
  margin:0; 
  padding:0
}
nav a{
  font-weight:600; 
  padding:6px 10px; 
  border-radius:10px
}
nav a:focus-visible{
  outline:2px solid var(--accent); 
  outline-offset:2px
}
nav a[aria-current="page"]{
  background:var(--soft)
}

/* Sections */
.hero{
  padding:80px 0 36px; 
  border-bottom:1px solid var(--soft)
}
.eyebrow{
  margin:0; 
  font-weight:700; 
  letter-spacing:.04em; 
  text-transform:uppercase; 
  color:var(--muted); 
  font-size:.85rem
}
h1{
  font-size: clamp(36px, 6vw, 56px); 
  line-height:1.06; 
  margin:.15em 0 .2em
}
.lede{
  font-size: clamp(18px, 2.6vw, 22px); 
  color:var(--muted)
}
.cta{
  display:flex; 
  gap:12px; 
  margin-top:26px; 
  flex-wrap:wrap
}
.btn{
  display:inline-flex; 
  align-items:center; 
  gap:10px; 
  padding:12px 16px; 
  border-radius:999px; 
  font-weight:700; 
  border:1px solid var(--accent); 
  background:var(--accent); 
  color:var(--bg);
  cursor:pointer;
  text-decoration:none
}
.btn.secondary{
  background:transparent; 
  color:var(--fg)
}
.btn:hover{
  transform:translateY(-1px)
}
.section{
  padding:56px 0
}
h2{
  font-size: clamp(26px, 4vw, 34px); 
  margin:0 0 10px
}

/* Work grid */
.filters{
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
  margin:8px 0 22px
}
.chip{
  padding:8px 12px; 
  border-radius:999px; 
  border:1px solid var(--soft); 
  background:transparent; 
  cursor:pointer; 
  font-weight:600;
  color:var(--fg);
  font-family:inherit;
  font-size:inherit
}
.chip[aria-pressed="true"], .chip.active{
  background:var(--fg); 
  color:var(--bg); 
  border-color:var(--fg)
}

.grid{
  display:grid; 
  grid-template-columns:1fr; 
  gap:var(--grid-gap)
}
@media (min-width:640px){ 
  .grid{
    grid-template-columns:repeat(2, 1fr);
  } 
}
@media (min-width:960px){ 
  .grid{
    grid-template-columns:repeat(3, 1fr);
  } 
}

.card{
  background:var(--card); 
  border-radius:var(--radius); 
  overflow:hidden; 
  box-shadow:var(--shadow); 
  display:flex; 
  flex-direction:column; 
  border:1px solid var(--soft)
}
.thumb{
  aspect-ratio:16/10; 
  background:linear-gradient(135deg, color-mix(in oklab, var(--bg) 90%, #bbb), var(--card)); 
  display:flex; 
  align-items:center; 
  justify-content:center
}
.body{
  padding:16px
}
.tags{
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  margin-top:8px
}
.tag{
  font:600 12px/1.6 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; 
  padding:4px 8px; 
  background:transparent; 
  border:1px dashed var(--soft); 
  border-radius:999px
}

/* Services */
.services{
  display:grid; 
  gap:var(--grid-gap); 
  grid-template-columns:1fr
}
@media (min-width:900px){ 
  .services{
    grid-template-columns:repeat(3, 1fr);
  } 
}
.service{
  padding:22px; 
  border:1px solid var(--soft); 
  border-radius:var(--radius); 
  background:var(--bg); 
  box-shadow:none
}
.service h3{
  margin:0 0 8px
}
.service ul{
  margin:8px 0 0 18px
}

/* About */
.about{
  display:grid; 
  gap:24px; 
  grid-template-columns:1fr
}
@media (min-width:900px){ 
  .about{
    grid-template-columns:360px 1fr;
  } 
}
.avatar{
  width:100%; 
  aspect-ratio:1; 
  border-radius:16px; 
  background:linear-gradient(135deg,#222,#000); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  color:#fff; 
  font-size:56px; 
  font-weight:900
}

/* Footer */
footer{
  border-top:1px solid var(--soft); 
  padding:36px 0; 
  margin-top:36px; 
  color:var(--muted); 
  font-size:14px
}
.footgrid{
  display:grid; 
  gap:16px; 
  grid-template-columns:1fr; 
  align-items:center
}
@media (min-width:800px){ 
  .footgrid{
    grid-template-columns:1fr auto auto auto
  } 
}

/* Motion */
@media (prefers-reduced-motion: no-preference){
  .btn{
    transition:transform .18s ease
  }
  .card{
    transition:transform .2s ease, box-shadow .2s ease
  }
  .card:hover{
    transform:translateY(-2px); 
    box-shadow:0 14px 36px rgba(0,0,0,.08)
  }
}
:focus-visible{
  outline: 2px solid var(--accent); 
  outline-offset: 2px
}