/* ============================================================
   PROJECTS PAGE

   Loaded after main.css, which supplies the tokens, the sticky
   header, the boxed label and the subpage grain handling.
   ============================================================ */

.projects-head{
  padding: calc(52 * var(--u)) calc(56 * var(--u)) calc(30 * var(--u));
}

.projects-title{
  font-size: calc(58 * var(--u));
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: calc(2 * var(--u));
  text-transform: uppercase;
  margin: 0;
}

/* ----------------------------------------------------------
   FILTERS
   Boxed chips, the same treatment as the home page tabs.
   ---------------------------------------------------------- */
.filters{
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--u));
  padding: 0 calc(56 * var(--u)) calc(34 * var(--u));
}

.filter{
  cursor: pointer;
  font-family: var(--serif);
  text-transform: capitalize;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.filter:hover{
  background: var(--green);
  color: #f4f4f0;
  border-color: var(--green);
}
/* Selected reads as pressed: filled, not merely outlined */
.filter[aria-pressed="true"]{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ----------------------------------------------------------
   GRID
   ---------------------------------------------------------- */
.projects{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(26 * var(--u));
  padding: 0 calc(56 * var(--u)) calc(90 * var(--u));
  align-items: start;
}

/* A white card with a 1px ink border -- the guide's only device for setting
   something apart from the page. */
.project{
  background: var(--card);
  border: calc(1.5 * var(--u)) solid var(--line);
  padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u));
  display: flex;
  flex-direction: column;
  /* Deep links from home land on a card, so it must clear the sticky header */
  scroll-margin-top: calc(130 * var(--u));
}
.project[hidden]{ display: none; }

/* The accent marks which card you were sent to -- a targeted state, which is
   what the guide reserves the green for. */
.project:target{
  border-color: var(--green);
}

.project__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(14 * var(--u));
  margin-bottom: calc(14 * var(--u));
}

.project__title{
  font-size: calc(25 * var(--u));
  line-height: 1.2;
  font-weight: 400;
  margin: 0;
}

/* Category and status, top right */
.project__chips{
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  flex: 0 0 auto;
  padding-top: calc(3 * var(--u));
}
.chip{
  font-size: calc(13 * var(--u));
  line-height: 1;
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
  padding: calc(5 * var(--u)) calc(8 * var(--u));
  border: calc(1.5 * var(--u)) solid var(--line);
  white-space: nowrap;
  color: var(--ink-soft);
}
/* Active is the only state that earns the accent -- it is a live state, which
   is what the guide reserves the green for. */
.chip--active{
  border-color: var(--green);
  color: var(--green);
}
.chip--prospective{
  border-style: dashed;
}

.project__desc{
  font-size: calc(17 * var(--u));
  line-height: 1.55;
  margin: 0 0 calc(18 * var(--u));
}

/* Links sit on the floor of the card regardless of description length */
.project__links{
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u)) calc(14 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.4;
}
.project__links a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: calc(1 * var(--u));
  text-underline-offset: calc(3 * var(--u));
}
.project__links a:hover{ color: var(--green); }

/* Labels with no destination yet: still legible, visibly not clickable */
.project__links span{
  color: var(--ink-soft);
  text-decoration: underline dotted;
  text-decoration-thickness: calc(1 * var(--u));
  text-underline-offset: calc(3 * var(--u));
  cursor: default;
}

/* ----------------------------------------------------------
   EMPTY STATE
   Plurality and Adaptive have no projects yet, and both filters
   stay clickable, so the page has to say so.
   ---------------------------------------------------------- */
.projects-empty{
  padding: 0 calc(56 * var(--u)) calc(90 * var(--u));
  font-size: calc(19 * var(--u));
  color: var(--ink-soft);
}
.projects-empty[hidden]{ display: none; }

@media (max-width: 900px){
  .projects{ grid-template-columns: 1fr; }
}