body:has(.project-grid) .hub-header{z-index:1;margin-bottom:.25rem;position:relative}
:is(html:has(.project-grid),html:has(.friend-grid)){height:auto;min-height:100dvh;overflow:hidden auto}
:is(body:has(.project-grid),body:has(.friend-grid)){align-items:flex-start;height:auto;min-height:100dvh;overflow:hidden visible}
.project-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;width:100%;max-width:640px;margin-bottom:1.5rem;display:grid}
.project-card{background:var(--surface);border:1px solid var(--surface-hi);color:var(--text);border-radius:16px;flex-direction:column;gap:.7rem;padding:1rem;text-decoration:none;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;display:flex}
.project-card:hover{background:var(--surface-hi);border-color:var(--accent);box-shadow:0 6px 20px var(--accent);transform:translateY(-3px)}.project-card:has(:focus-visible){background:var(--surface-hi);border-color:var(--accent);box-shadow:0 6px 20px var(--accent);transform:translateY(-3px)}
.project-card-main{min-width:0;color:inherit;align-items:flex-start;gap:.9rem;text-decoration:none;display:flex}
.project-card-live{letter-spacing:.04em;text-transform:uppercase;background:var(--sky);border:1px solid var(--sky);color:var(--bg-deep);white-space:nowrap;border-radius:999px;align-self:flex-end;padding:.32rem .8rem;font-size:.72rem;font-weight:600;text-decoration:none;transition:filter .15s,transform .15s}
.project-card-live:hover,.project-card-live:focus-visible{filter:brightness(1.12);transform:translateY(-1px)}
.project-card-img{object-fit:cover;border:2px solid var(--warning);width:56px;height:56px;box-shadow:0 4px 14px var(--accent);border-radius:14px;flex-shrink:0}
.project-card-body{flex-direction:column;gap:.35rem;min-width:0;display:flex}
.project-card-head{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}
.project-card-title{color:var(--text);font-size:1rem;font-weight:600}
.project-card-status{letter-spacing:.04em;text-transform:uppercase;background:var(--bg-deep);border:1px solid var(--success);color:var(--success);white-space:nowrap;border-radius:999px;padding:.15rem .55rem;font-size:.66rem;font-weight:600}
.project-card-status.closed{border-color:var(--danger);color:var(--danger)}
.project-card-bio{color:var(--text-muted);margin:0;font-size:.85rem;line-height:1.45}
.project-card-bio.is-placeholder{opacity:.65;font-style:italic}