.page-head{padding:clamp(46px,7vw,88px) 0 0}
.page-head .eyebrow{margin-bottom:18px}
.page-head h1{font-size:clamp(31px,4.4vw,54px); letter-spacing:-.035em; max-width:18ch}
.page-head .lede{color:var(--dim); font-size:clamp(16px,1.5vw,18.5px); margin-top:18px; max-width:60ch}
.crumbs{display:flex; gap:10px; align-items:center; font-size:13.5px; color:var(--dim2);
  margin-bottom:20px; flex-wrap:wrap}
.crumbs a{color:var(--dim)}
.crumbs a:hover{color:var(--brand2)}

.about-grid{display:grid; gap:var(--gap); grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start}
.about-text{font-size:16.5px; color:var(--dim)}
.about-text p{margin:0 0 16px}
.about-text p:last-child{margin:0}
.about-text strong{color:var(--fg); font-weight:600}
.about-facts{display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
.about-facts > div{background:var(--panel); padding:20px 22px}
.about-facts .k{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim2)}
.about-facts .v{margin-top:7px; font-size:16.5px}

.person{display:flex; flex-direction:column; height:100%; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s}
.person:hover{border-color:var(--brand-line); transform:translateY(-3px); box-shadow:var(--shadow)}
.person .photo{aspect-ratio:4/5; background:var(--bg2); overflow:hidden}
.person .photo img{width:100%; height:100%; object-fit:cover; display:block}
.person .photo .ini{width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--mono); font-size:44px; font-weight:700; color:var(--brand2);
  background:radial-gradient(circle at 50% 35%,var(--brand-dim),transparent 65%)}
.person .body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:8px; flex:1}

.person.round{align-items:center; text-align:center; padding:30px 22px 26px;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 55%,var(--bg)))}
.person.round .body{padding:18px 0 0; align-items:center; text-align:center}
.person.round .skills,.person.round .links{justify-content:center}
.person.round .links{width:100%}
.avatar{
  position:relative; width:var(--size,168px); height:var(--size,168px);
  border-radius:50%; overflow:hidden; flex:none; background:var(--bg2);
  box-shadow:0 0 0 var(--ring-w,3px) var(--ring,var(--brand)),
             0 0 0 calc(var(--ring-w,3px) + 5px)
             color-mix(in srgb,var(--ring,var(--brand)) 18%,transparent);
  transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease;
}
.person.round:hover .avatar{transform:translateY(-3px) scale(1.02)}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar .ini{width:100%; height:100%; display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:calc(var(--size,168px) * .34);
  color:var(--ring,var(--brand2));
  background:radial-gradient(circle at 50% 35%,
    color-mix(in srgb,var(--ring,var(--brand)) 22%,transparent),transparent 68%)}
@media(max-width:700px){ .avatar{--size:140px} }
.person h3{font-size:18px}
.person .role{color:var(--brand2); font-size:14px}
.person .bio{color:var(--dim); font-size:14.5px; flex:1}
.person .skills{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.person .links{display:flex; gap:12px; padding-top:12px; margin-top:4px;
  border-top:1px solid var(--line); font-size:14px}

.cert{display:flex; flex-direction:column; height:100%; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s}
.cert:hover{border-color:var(--brand-line); transform:translateY(-3px); box-shadow:var(--shadow)}
.cert .sheet{aspect-ratio:3/4; background:var(--bg2); display:grid; place-items:center;
  overflow:hidden; cursor:zoom-in}
.cert .sheet img{width:100%; height:100%; object-fit:cover}
.cert .sheet .none{font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dim2)}
.cert .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1}
.cert h3{font-size:16px; line-height:1.35}
.cert .meta{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim2)}

.post{display:flex; flex-direction:column; height:100%; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  transition:border-color .25s, transform .25s, box-shadow .25s}
.post:hover{border-color:var(--brand-line); transform:translateY(-4px); box-shadow:var(--shadow)}
.post .cover{aspect-ratio:16/9; background:var(--bg2); overflow:hidden}
.post .cover img{width:100%; height:100%; object-fit:cover; display:block}
.post .cover .none{width:100%; height:100%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%,var(--brand-dim),transparent 65%);
  font-family:var(--mono); font-size:13px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--dim2)}
.post .body{padding:22px 24px 24px; display:flex; flex-direction:column; gap:10px; flex:1}
.post h3{font-size:19px; line-height:1.3}
.post .excerpt{color:var(--dim); font-size:15px; flex:1}
.post .meta{display:flex; gap:12px; align-items:center; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim2);
  padding-top:12px; border-top:1px solid var(--line)}

.post.wide{flex-direction:row; align-items:stretch}
.post.wide .cover{flex:0 0 44%; aspect-ratio:auto}
.post.wide .body{padding:28px 30px}
.post.wide h3{font-size:clamp(21px,2.2vw,28px)}

.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.filters button{padding:8px 15px; border-radius:999px; border:1px solid var(--line2);
  background:transparent; color:var(--dim); cursor:pointer; font-size:13.5px; min-height:38px;
  transition:.2s}
.filters button:hover{color:var(--fg); border-color:var(--brand-line)}
.filters button.on{background:var(--brand); border-color:var(--brand); color:var(--btn-fg);
  font-weight:600}

.article{max-width:760px; margin:0 auto}
.article .cover{border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  margin:0 0 34px}
.article .cover img{width:100%; display:block}
.article-body{font-size:17px; line-height:1.75; color:var(--fg)}
.article-body > *:first-child{margin-top:0}
.article-body p{margin:0 0 20px; color:var(--dim)}
.article-body h2{font-size:clamp(22px,2.4vw,29px); margin:40px 0 16px}
.article-body h3{font-size:clamp(18px,2vw,22px); margin:32px 0 12px}
.article-body ul,.article-body ol{margin:0 0 20px; padding-left:22px; color:var(--dim)}
.article-body li{margin:0 0 9px}
.article-body a{color:var(--brand2); text-decoration:underline; text-underline-offset:3px}
.article-body img{border-radius:var(--r); border:1px solid var(--line); margin:8px 0 24px}
.article-body blockquote{margin:0 0 24px; padding:2px 0 2px 20px;
  border-left:3px solid var(--brand); color:var(--fg); font-size:18px}
.article-body code{font-family:var(--mono); font-size:14px; background:var(--bg2);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px}
.article-body pre{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; overflow:auto; margin:0 0 24px}
.article-body pre code{background:none; border:0; padding:0; font-size:13.5px}
.article-body hr{border:0; border-top:1px solid var(--line); margin:32px 0}
.article-meta{display:flex; gap:16px; flex-wrap:wrap; align-items:center; color:var(--dim2);
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  margin-bottom:30px}

@media(max-width:1080px){
  .about-grid{grid-template-columns:1fr}
  .post.wide{flex-direction:column}
  .post.wide .cover{flex:none; aspect-ratio:16/9}
}
@media(max-width:700px){
  .article-body{font-size:16.5px}
  .person .body,.cert .body,.post .body{padding:18px}
  .page-head{padding-top:34px}
}

.work-page{
  max-width:820px; margin:0 auto;
  
  padding:clamp(26px,5vw,54px) 0 clamp(56px,8vw,88px);
}
.work-page .back{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:22px;
  color:var(--dim); font-size:14px;
}
.work-page .back:hover{color:var(--brand2)}
.work-page h1{font-size:clamp(28px,4vw,46px); line-height:1.14; letter-spacing:-.03em;
  margin:0 0 14px}
.work-page .lede{color:var(--dim); font-size:clamp(16px,1.6vw,19px); line-height:1.6;
  margin:0 0 22px; max-width:60ch}
.work-page .body{font-size:16.5px; line-height:1.75}
.work-page .body > *:first-child{margin-top:0}
.work-page .body p{margin:0 0 18px; color:var(--dim)}
.work-page .body h2{font-size:clamp(20px,2.2vw,27px); margin:34px 0 14px; color:var(--fg)}
.work-page .body ul{margin:0 0 18px; padding-left:22px; color:var(--dim)}
.work-page .body li{margin:0 0 9px}

.work-go{margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.work-go .btn{min-height:48px; padding-inline:26px}

.work-page .tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.work-page .tag{
  padding:5px 13px; border-radius:999px; font-size:12.5px;
  border:1px solid var(--line2); color:var(--dim);
}

.work-cover{
  margin:0 0 30px; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:#000;
}
.work-cover img,.work-cover video{
  width:100%; display:block; aspect-ratio:16/9; object-fit:cover;
}

.work-cover video{aspect-ratio:auto 16/9}

.work-stage{
  position:relative; margin:0 0 30px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel);
  min-height:clamp(320px, 46vw, 540px); overflow:hidden;
}
.work-model{
  position:absolute; inset:0 0 74px 0; cursor:grab;
  touch-action:pan-y; opacity:0; transition:opacity .5s ease;
}
.work-model.ready{opacity:1}
.work-model.grabbed{touch-action:none}
.work-model:active{cursor:grabbing}
.work-model canvas{display:block; width:100%; height:100%; outline:none}
.work-tools{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; gap:10px;
}
.work-stage .scene-load{bottom:auto; top:50%; transform:translate(-50%,-50%)}

.work-page .gallery{
  display:grid; gap:16px; margin:30px 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.work-page .gallery figure{margin:0}
.work-page .gallery img,.work-page .gallery video{
  width:100%; display:block; border-radius:calc(var(--r) - 2px);
  border:1px solid var(--line);
}
.work-page .gallery figcaption{
  margin-top:8px; font-size:13px; color:var(--dim); line-height:1.45;
}

@media(max-width:700px){
  .work-stage{min-height:min(88vw,420px)}
  .work-model{inset:0 0 66px 0}
  .work-page{padding-top:20px}
  .work-page .body{font-size:16px}
  .work-go{margin-top:28px; padding-top:22px}
  .work-go .btn{width:100%; justify-content:center}
}

.notfound{padding:clamp(70px,14vw,150px) 0 clamp(60px,10vw,120px); text-align:center}
.notfound .code{
  font-family:var(--mono); font-size:clamp(64px,16vw,140px); line-height:1;
  font-weight:700; letter-spacing:-.04em;
  background:linear-gradient(180deg, var(--brand2), color-mix(in srgb,var(--brand) 30%,transparent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:18px;
}
.notfound h1{font-size:clamp(24px,5vw,36px); margin-bottom:14px}
.notfound .lede{max-width:520px; margin:0 auto 30px}
.nf-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.nf-contact{margin-top:32px; font-size:14.5px}
.nf-contact a{color:var(--brand2)}