/* ============================================================
   WORK — the title wall. Requires foundation.css + nav.css.
   A light wall with black type. Two mediums above the titles;
   pointing at one leaves only its works in black.
   ============================================================ */

body.wall {
  --wall: #e6e6e3;
  --ink: #141414;
  --ink-faint: rgba(20, 20, 20, 0.2);
  --ink-dim: rgba(20, 20, 20, 0.45);
  background: var(--wall);
  color: var(--ink);
  min-height: 100vh;
}

/* the nav is built for dark pages; recolour it for the wall */
body.wall .site-nav__mark { color: var(--ink); }
body.wall .site-nav__links a { color: rgba(20, 20, 20, 0.5); }
body.wall .site-nav__links a[aria-current="page"] { color: var(--ink); }

/* ---- The two mediums ---- */
.mediums {
  display: flex;
  gap: 1.4rem;
  margin: 0;
  padding: 5rem 1.75rem 0;
  list-style: none;
}

.mediums button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.2s var(--ease);
}

.mediums button.is-on { color: var(--color-red); }

/* ---- The titles ---- */
.titles {
  margin: 0;
  padding: 1.75rem 1.75rem 3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 6.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}

.titles a {
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.titles a:hover,
.titles a:focus-visible { color: var(--color-red); }

.sl {
  color: var(--ink-faint);
  font-weight: 300;
  margin: 0 0.12em;
}

/* filtering: everything fades except the chosen medium's works */
body.filtering .titles a { color: var(--ink-faint); }
body.filtering .titles a.match { color: var(--ink); }
body.filtering .titles a.match:hover,
body.filtering .titles a.match:focus-visible { color: var(--color-red); }

/* ---- Footer ---- */
.site-footer {
  padding: 0 1.75rem 1.5rem;
}

.site-footer a {
  font-size: 0.75rem;
  color: var(--ink-dim);
  transition: color var(--dur) var(--ease);
}

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--color-red); }

@media (max-width: 640px) {
  .mediums { padding: 4.5rem 1rem 0; }
  .titles {
    font-size: 2.3rem;
    line-height: 1.05;
    padding: 1.25rem 1rem 3rem;
  }
  .sl { display: none; }
  .titles a { display: block; margin-bottom: 0.9rem; }
  .site-footer { padding: 0 1rem 1rem; }
}