.projects-intro { max-width:var(--content); margin:0 auto; padding:2.5rem 1.1rem 1.1rem; }.projects-intro h1 { max-width:850px; margin:0 0 .55rem; font:500 clamp(2.25rem,4vw,3.2rem)/1.06 var(--serif); letter-spacing:-.04em; }.projects-intro > p:not(.eyebrow) { max-width:720px; margin:0; color:var(--muted); font:1rem/1.55 var(--serif); }.project-stats { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.35rem; }.project-stats div { min-width:145px; padding:.8rem 1rem; border:1px solid var(--line); border-top:3px solid var(--teal); background:color-mix(in srgb,var(--paper) 84%,transparent); }.project-stats div:nth-child(2) { border-top-color:var(--violet); }.project-stats div:nth-child(3) { border-top-color:var(--amber); }.project-stats strong,.project-stats span { display:block; }.project-stats strong { color:var(--ink); font:500 1.35rem/1 var(--serif); }.project-stats span { margin-top:.3rem; color:var(--muted); font-size:.64rem; }.quick-links { display:flex; flex-wrap:wrap; gap:.4rem; max-width:var(--content); margin:0 auto 1.2rem; padding:0 1.1rem; }.quick-links a { padding:.38rem .6rem; border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:.68rem; text-decoration:none; }.quick-links a:hover { color:var(--ink); background:var(--paper-deep); }
.projects-toolbar { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:.8rem; align-items:center; max-width:var(--content); margin:0 auto 1.2rem; padding:0 1.1rem; }.projects-toolbar input { width:100%; min-height:38px; padding:.5rem .7rem; border:1px solid var(--line); border-radius:4px; color:var(--ink); background:var(--paper); }.filter-group { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.3rem; }.filter-button { padding:.42rem .55rem; border:1px solid var(--line); border-radius:4px; color:var(--muted); background:transparent; font-size:.62rem; cursor:pointer; }.filter-button.active,.filter-button:hover { color:#fff; border-color:var(--teal); background:var(--teal); }.project-group { max-width:var(--content); margin:0 auto 1.2rem; padding:1.2rem; border:1px solid var(--line); background:color-mix(in srgb,var(--paper) 86%,transparent); box-shadow:0 .3rem 1.1rem rgba(16,36,58,.05); }.group-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding-bottom:.85rem; border-bottom:1px solid var(--line); }.group-heading h2 { margin:0; font:500 1.55rem/1.1 var(--serif); letter-spacing:-.025em; }.section-toggle { border:1px solid var(--line); border-radius:4px; color:var(--muted); background:transparent; font-size:.65rem; cursor:pointer; }.section-toggle:hover { color:var(--ink); background:var(--paper-deep); }.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }.project-card { display:flex; min-width:0; flex-direction:column; min-height:230px; padding:1rem; border:1px solid var(--line); background:var(--paper-deep); }.project-card:hover { border-color:var(--teal); }.card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }.project-card h3 { margin:0; font:500 1.08rem/1.15 var(--serif); }.project-card > p { margin:.6rem 0 .8rem; color:var(--muted); font-size:.72rem; }.status { flex:none; padding:.15rem .3rem; border:1px solid currentColor; border-radius:3px; font-size:.56rem; }.status.live { color:var(--teal); }.status.wip { color:var(--amber); }.tags { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:auto; }.tags span { padding:.16rem .3rem; border:1px solid var(--line); border-radius:3px; color:var(--muted); font-size:.56rem; }.project-links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.8rem; padding-top:.65rem; border-top:1px solid var(--line); }.project-links a,.project-links span { color:var(--blue); font-size:.63rem; text-decoration:none; }.project-links a:hover { text-decoration:underline; }.project-links span { color:var(--muted); }.empty-state { max-width:var(--content); margin:1rem auto; padding:0 1.1rem; color:var(--muted); font:1rem var(--serif); }
@media(max-width:1050px) { .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }.project-group { position:relative; overflow:hidden; }.project-group::before { content:""; position:absolute; top:1.2rem; bottom:1.2rem; left:11px; width:2px; background:var(--teal); opacity:.7; }.project-group:nth-of-type(2)::before { background:var(--violet); }.project-group:nth-of-type(3)::before { background:var(--amber); }.project-group:nth-of-type(4)::before { background:var(--blue); }
@media(max-width:860px) { .projects-intro { padding:2rem .35rem 1rem; }.projects-intro h1 { font-size:2.35rem; }.project-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.project-stats div { min-width:0; }.project-stats div:last-child { grid-column:1/-1; }.quick-links { gap:.3rem; padding:0 .35rem; }.projects-toolbar { grid-template-columns:1fr; padding:0 .35rem; }.filter-group { justify-content:flex-start; }.project-group { margin-bottom:1rem; padding:1rem; }.project-grid { grid-template-columns:1fr; }.project-card { min-height:0; }.group-heading h2 { font-size:1.3rem; }.project-group::before { top:1rem; bottom:1rem; left:9px; } }