/* Cornerstone Projects v1.3.0 */

#cagProjects{
  --ink:#0D0D0D;
  --paper:#FFFFFF;
  --muted:#B9B9B9;
  --gray:#8F8F8F;
  --accent:#8FC98F;
  --hair:#2B2B2B;
  --card:#141414;

  width:100%;
  background:var(--ink);
  color:var(--paper);
  font-family:"Inter Tight","Trebuchet MS",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:clamp(48px,7vh,92px) 0 clamp(56px,8vh,104px);
}
#cagProjects *{box-sizing:border-box}

/* Zero specificity reset, so theme styles on our markup fall away
   without competing with the rules below. */
#cagProjects :where(h1,h2,h3,p,a,span,div,img,dl,dt,dd){margin:0;padding:0;line-height:normal}
#cagProjects :where(a){color:inherit;box-shadow:none}
/* Not in the :where() reset. Plenty of themes force underlines on every link
   with !important, and a zero specificity rule loses that fight. */
#cagProjects a{text-decoration:none !important}
#cagProjects :where(img){max-width:100%;display:block;border-radius:0;box-shadow:none}

#cagProjects .cagpBoxed{width:100%;max-width:1400px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---------- heading ---------- */
#cagProjects .cagpLede{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px);
  align-items:end;
  margin:0 0 clamp(34px,5vh,58px) !important;
}
@media(max-width:900px){
  #cagProjects .cagpLede{grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
}
#cagProjects .cagpEyebrow{
  font-size:13px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin-bottom:16px !important;
}
#cagProjects .cagpTitle{
  font-size:clamp(34px,5vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1.02;color:var(--paper);
}
#cagProjects .cagpRule{display:block !important;width:62px;height:3px;background:var(--accent);margin-top:24px}
#cagProjects .cagpIntro{color:var(--muted);font-size:clamp(15px,1.2vw,18px);line-height:1.68;max-width:54ch}
#cagProjects .cagpIntro p+p{margin-top:14px !important}

/* ---------- category selector ---------- */
#cagProjects .cagpNav{
  display:flex !important;align-items:center;flex-wrap:wrap;
  gap:10px clamp(14px,2vw,22px);
  margin:0 0 clamp(22px,3vh,34px) !important;
}
#cagProjects .cagpNavLabel{
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#6E6E6E;padding-right:4px;
}
#cagProjects .cagpNavList{display:flex !important;flex-wrap:wrap;gap:8px}
#cagProjects .cagpNavLink{
  display:inline-flex !important;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--hair);border-radius:999px;
  font-size:13.5px;letter-spacing:-.01em;color:var(--muted);
  white-space:nowrap;transition:color .2s ease,border-color .2s ease,background .2s ease;
}
#cagProjects a.cagpNavLink:hover{color:var(--paper);border-color:#454545;background:#161616}
#cagProjects .cagpNavOn{
  color:var(--ink);background:var(--accent);border-color:var(--accent);font-weight:500;
}
#cagProjects .cagpNavNum{
  display:inline-block;font-size:10.5px;letter-spacing:.06em;
  color:#6E6E6E;
}
#cagProjects .cagpNavOn .cagpNavNum{color:rgba(13,13,13,.62)}
#cagProjects a.cagpNavLink:hover .cagpNavNum{color:#8F8F8F}
#cagProjects a.cagpNavLink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:620px){
  #cagProjects .cagpNav{gap:10px}
  #cagProjects .cagpNavLabel{width:100%}
  #cagProjects .cagpNavList{
    flex-wrap:nowrap;overflow-x:auto;width:100%;
    padding-bottom:4px;scrollbar-width:none;
  }
  #cagProjects .cagpNavList::-webkit-scrollbar{display:none}
}

#cagProjects .cagpBar{
  padding-bottom:14px;border-bottom:1px solid var(--hair);
  margin-bottom:clamp(20px,2.6vw,30px) !important;
}
#cagProjects .cagpCount{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

/* ---------- cards ---------- */
#cagProjects .cagpGrid{
  display:grid !important;
  grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));
  gap:clamp(12px,1.2vw,18px);width:100%;
}
@media(max-width:900px){#cagProjects .cagpGrid{grid-template-columns:minmax(0,1fr)}}

#cagProjects .cagpCard{
  display:flex !important;flex-direction:column;
  background:var(--card);overflow:hidden;
}
#cagProjects .cagpShot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#1A1A1A}
#cagProjects .cagpShot img{width:100%;height:100%;object-fit:cover;transition:transform .65s ease}
#cagProjects .cagpCard:hover .cagpShot img{transform:scale(1.04)}
#cagProjects .cagpNoShot{position:absolute;inset:0;background:#1A1A1A}

#cagProjects .cagpBody{
  display:flex !important;flex-direction:column;flex:1;
  padding:clamp(22px,2.2vw,34px);
}
#cagProjects .cagpNum{display:block;font-size:11.5px;letter-spacing:.18em;color:#5E5E5E;margin-bottom:12px}
#cagProjects .cagpName{
  display:block;font-size:clamp(20px,1.7vw,26px);font-weight:500;
  letter-spacing:-.02em;line-height:1.16;margin-bottom:19px;transition:color .2s ease;
}
/* Tighter when a paragraph follows, so the two read as one block. Browsers
   without :has() just keep the roomier gap, which is no loss. */
#cagProjects .cagpName:has(+ .cagpCopy){margin-bottom:11px}
#cagProjects .cagpCard:hover .cagpName{color:var(--accent)}
#cagProjects .cagpCopy{display:block;color:var(--muted);font-size:14.5px;line-height:1.66;margin-bottom:22px}

/* Pushed to the bottom so every card in a row ends on the same line,
   however long its paragraph runs. */
#cagProjects .cagpStats{
  display:flex !important;gap:24px;flex-wrap:wrap;
  border-top:1px solid #262626;padding-top:15px;margin-top:auto;
}
#cagProjects .cagpStat{display:block}
#cagProjects .cagpStatLabel{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6E6E6E;margin-bottom:5px}
#cagProjects .cagpStatValue{display:block;font-size:13.5px;color:var(--paper)}

#cagProjects .cagpGo{display:block;margin-top:17px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
#cagProjects .cagpCard:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

@media(prefers-reduced-motion:reduce){
  #cagProjects .cagpShot img,#cagProjects .cagpName{transition:none}
  #cagProjects .cagpCard:hover .cagpShot img{transform:none}
}