/* TYPE SPACING — shared by index.html and media.html, loaded after the page styles.
   The big uppercase headings were set very tight (negative letter-spacing, line-height < 1),
   so words like "WHAT I DO" ran together. This opens them up. Tune here, not in each page. */

.section-heading,
.bring-title,
.bring-heading,
.contact-heading {
  letter-spacing: 0.01em;
  word-spacing: 0.12em;
  line-height: 1.08;
}

.mission-heading {
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
  line-height: 1.2;
}

.how2-title,
.stage-title,
.scrub-line {
  letter-spacing: 0.01em;
  word-spacing: 0.1em;
  line-height: 1.12;
}

.how2-num,
.bio-stat-num {
  letter-spacing: 0;
}

/* READABILITY — grey text on black was below WCAG AA (4.5:1) in places, and some labels were tiny */
.work-card-sub { color: rgba(255,255,255,0.68); }
.work-card-meta { opacity: 1; }
.contact-sub { color: rgba(255,255,255,0.72); }
.work-tag { font-size: 0.66rem; color: rgba(255,255,255,0.88); }
.footer-copy { font-size: 0.7rem; opacity: 0.8; }
.contact-link-label { font-size: 0.68rem; }

/* touch screens have no hover: show every work card in colour, not just the one mid-screen */
@media (hover: none) {
  .work-card .work-card-img img { filter: grayscale(0.15) brightness(1); }
}

/* only cards that open something get the hand cursor */
.work-body .work-card { cursor: default; }
.work-body .work-card-img[onclick], .work-body .bg-slider { cursor: pointer; }

/* keyboard users can see where they are */
a:focus-visible, button:focus-visible, .ev-card:focus-visible {
  outline: 2px solid #4FC3F7; outline-offset: 3px;
}