/* ─────────────────────────────────────────────────────────────────────────
   The Duke of AI — projects pages

   Loaded alongside css/folio.css, which already supplies the nav, the
   footer, the editorial header and the page scaffolding. Only the pieces
   unique to the projects live here.
   ───────────────────────────────────────────────────────────────────────── */

/* ---------- buttons ----------
   The pill styles live in the homepage's inline CSS, which these pages don't
   load. Copied verbatim so a "View project" button matches every other button
   on the site. If the homepage pills change, change these too. */
  .pill{
    display:inline-flex; align-items:center; gap:.5em;
    font-family:var(--text); font-size:17px; font-weight:400; letter-spacing:-.01em;
    border-radius:980px; padding:11px 22px;
    cursor:pointer; border:1px solid transparent;
    transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .pill-fill{ background:var(--gold); color:#0a0a0b; }
  .pill-fill:hover{ background:var(--gold-hi); }
  .pill-outline{ background:transparent; border-color:var(--gold); color:var(--gold); }
  .pill-outline:hover{ background:var(--gold-soft); }
  .pill-sm{ font-size:14px; padding:7px 15px; }
/* ---------- the index grid ---------- */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(200px,22vw,250px),1fr));
  gap:clamp(16px,2vw,22px);
}

.p-card{
  position:relative;
  aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:22px;
  text-align:center;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:8px;
  transition:transform .3s ease, border-color .3s ease;
}
.p-card:hover{ transform:translateY(-3px); border-color:var(--gold); }

.p-card h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(15px,1.3vw,18px); line-height:1.25;
  letter-spacing:.02em; text-transform:uppercase;
  color:var(--paper);
  text-wrap:balance;
}

/* the whole card is the target; the pill just shows where to aim */
.p-card a.p-go::after{ content:""; position:absolute; inset:0; border-radius:8px; }
.p-card a.p-go:focus-visible{ outline:none; }
.p-card:focus-within{ border-color:var(--gold); }
.p-card:focus-within .p-go{ outline:2px solid var(--gold); outline-offset:3px; }

/* ---------- an individual project page ---------- */
.project-head{ text-align:left; }
.project-head .emblem{ width:clamp(52px,6vw,72px); margin-bottom:clamp(20px,3vw,28px); opacity:.9; }

.project-body{ margin-top:clamp(34px,5vw,54px); }

/* the holding state, until each project is written up */
.project-holding{
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:clamp(34px,6vw,64px) clamp(22px,4vw,40px);
  text-align:center;
  background:var(--surface);
}
.project-holding p{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.05rem,.92rem + .5vw,1.28rem);
  color:var(--secondary);
  max-width:40ch; margin:0 auto;
  text-wrap:balance;
}

@media (max-width:560px){
  .projects-grid{ grid-template-columns:repeat(2,1fr); }
}