/* ==========================================================================
   Refresh — shared layer for the three colour/services/card explorations.
   Loads after site.css; each refresh-vN.css only sets its palette and the
   pieces that differ. Fixes here apply to every variant.
   ========================================================================== */

:root {
  --radius: 14px;
  --radius-sm: 8px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Category hues — every variant redefines these */
  --cat-collections: var(--brand);
  --cat-collections-tint: var(--brand-tint);
  --cat-onsite: #c2410c;
  --cat-onsite-tint: #ffeadb;
  --cat-digital: #0f766e;
  --cat-digital-tint: #dcf3ef;
}

body {
  background: var(--paper);
}

/* --- UI fixes -------------------------------------------------------------- */

/* Hard 1px box around the reel read as a placeholder */
.hero__video {
  border: 0;
  border-radius: var(--radius);
}
/* Screenshots get soft corners so they stop looking like wireframe boxes */
.frame {
  border-radius: var(--radius);
  border-color: color-mix(in srgb, var(--ink) 8%, transparent);
}
.collage .frame {
  border-radius: var(--radius-sm);
}
/* Long headlines ragged badly on mid-width screens */
.display--lg,
.display--xl {
  text-wrap: balance;
}
.lede {
  text-wrap: pretty;
}
/* Sticky filter bar: blur instead of a flat slab that hid card tops */
.work-bar {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.chip {
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
/* Focus rings were invisible on the purple buttons */
.btn:focus-visible,
.chip:focus-visible,
.link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.btn {
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    transform 0.2s var(--ease);
}
.btn:active {
  transform: translateY(1px);
}
.btn .ico {
  transition: transform 0.25s var(--ease);
}
.btn:hover .ico {
  transform: translateX(3px);
}
/* Form fields: consistent radius with the rest of the refresh */
.field input,
.field textarea {
  border-radius: var(--radius-sm);
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.project[data-cats^='collections'] {
  --cat: var(--cat-collections);
  --cat-tint: var(--cat-collections-tint);
}
.project[data-cats^='onsite'] {
  --cat: var(--cat-onsite);
  --cat-tint: var(--cat-onsite-tint);
}
.project[data-cats^='digital'] {
  --cat: var(--cat-digital);
  --cat-tint: var(--cat-digital-tint);
}