/* Refresh — the consolidated direction
   White and neutral greys, Metafori purple for what you can press (links,
   primary actions) plus one word per headline. Square corners, no colour coding by
   type, "How we work" as an interactive loop. */

:root {
  --radius: 0px;
  --radius-sm: 0px;


  /* No hue per project type — every category reads the same */
  --cat-collections: var(--brand);
  --cat-collections-tint: var(--brand-tint);
  --cat-onsite: var(--brand);
  --cat-onsite-tint: var(--brand-tint);
  --cat-digital: var(--brand);
  --cat-digital-tint: var(--brand-tint);
}

/* --- Type: Medium wherever the system used Regular ----------------------- */

body,
.lede,
.field--check span {
  font-weight: 500;
}

/* Eyebrows in quiet ink. They were purple, but purple is what you can press
   on this page — a coloured label at the top of a section reads as a control
   you can't use. The accent word in each headline keeps the purple. */
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink-60);
}
.chip[aria-pressed='true'] {
  background: var(--brand);
  border-color: var(--brand);
}

/* --- Work: projects, not cards ----------------------------------------------
   Only the link in each project's footer row is clickable. Hierarchy: title
   in ink, institution and description a step quieter, tags and link last. */

.project .frame:not(.frame--browser) {
  border: 0;
}
.project .frame > img,
.project:hover .frame > img {
  transform: none;
}
.project__client {
  margin-top: 8px;
}
.project__desc {
  margin-top: 16px;
  color: var(--ink-60);
}
.badge {
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px);
}