/* ABOUTME: Shared stylesheet for the Oakferry studio site — self-hosted fonts plus base accessibility rules.
   ABOUTME: Linked by all four pages; per-page layout stays in each page's inline <style>.

   Fonts are served from this origin, not a CDN. The privacy policy claims data-controller
   status under UK and EU GDPR and states we ship no third-party SDKs; a CDN webfont request
   hands the visitor's IP to a third party before any of our own code runs. Only what the
   pages use is here: weights 400 and 500, upright only. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/fraunces-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/fraunces-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/instrument-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/instrument-sans-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

/* ---- accessibility base ---- */

/* Every link on this site sets text-decoration:none and its own colours, so the default
   focus ring is the only thing telling a keyboard user where they are. Make it deliberate
   and give it room, rather than relying on whatever the browser picks against a pill
   button that may be dark or light. */
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The hover transforms are small, but the preference is a request, not a suggestion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Text for screen readers only — used to say a link opens in a new tab, which sighted
   users learn from the arrow icon instead. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}