/* GOBO base — @font-face + element defaults (modern reset; no CMSMS normalize-era cruft) */

/* Oswald (Google Fonts) @font-face — subset to woff2 + woff (woff2 preferred) */
/* One weight-normalised family for the body, plus distinct weight families
   mirroring the old Trade Gothic kit usage (headings/nav call them by name). */
/* font-display: block — text waits for the font instead of flashing a fallback */
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Regular.woff2') format('woff2'),
       url('../fonts/Oswald-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
/* register the rest of the range under the plain 'Oswald' family too, so
   <strong>/font-weight usage gets real faces (no faux-bold) */
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-ExtraLight.woff2') format('woff2'),
       url('../fonts/Oswald-ExtraLight.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Light.woff2') format('woff2'),
       url('../fonts/Oswald-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Medium.woff2') format('woff2'),
       url('../fonts/Oswald-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-SemiBold.woff2') format('woff2'),
       url('../fonts/Oswald-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald';
  src: url('../fonts/Oswald-Bold.woff2') format('woff2'),
       url('../fonts/Oswald-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald-ExtraLight';
  src: url('../fonts/Oswald-ExtraLight.woff2') format('woff2'),
       url('../fonts/Oswald-ExtraLight.woff') format('woff');
  font-weight: 200; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald-Light';
  src: url('../fonts/Oswald-Light.woff2') format('woff2'),
       url('../fonts/Oswald-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald-Medium';
  src: url('../fonts/Oswald-Medium.woff2') format('woff2'),
       url('../fonts/Oswald-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald-SemiBold';
  src: url('../fonts/Oswald-SemiBold.woff2') format('woff2'),
       url('../fonts/Oswald-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Oswald-Bold';
  src: url('../fonts/Oswald-Bold.woff2') format('woff2'),
       url('../fonts/Oswald-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: block;
}

/* Libre Franklin (Google Fonts) — body text (humanist sans; woff2 + woff) */
@font-face {
  font-family: 'LibreFranklin';
  src: url('../fonts/LibreFranklin-Regular.woff2') format('woff2'),
       url('../fonts/LibreFranklin-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'LibreFranklin';
  src: url('../fonts/LibreFranklin-Italic.woff2') format('woff2'),
       url('../fonts/LibreFranklin-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: block;
}
@font-face {
  font-family: 'LibreFranklin';
  src: url('../fonts/LibreFranklin-SemiBold.woff2') format('woff2'),
       url('../fonts/LibreFranklin-SemiBold.woff') format('woff');
  font-weight: 600; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'LibreFranklin';
  src: url('../fonts/LibreFranklin-SemiBoldItalic.woff2') format('woff2'),
       url('../fonts/LibreFranklin-SemiBoldItalic.woff') format('woff');
  font-weight: 600; font-style: italic; font-display: block;
}

/* base */
* , *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;   /* anchor jumps clear the sticky header */
}

body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 1.125rem;   /* 18px base body copy (rems elsewhere anchor to root, so headings/nav unaffected) */
  color: var(--color-dark-grey);   /* #434343 main text */
  background: var(--color-page);   /* #eee — white panels read against it */
  line-height: 1.68;     /* a little more leading — calm, unhurried reading */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1; margin: 0 0 .5em;
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-dark-grey); /* #434343 headings */
  text-wrap: balance;            /* no widowed words in a display heading */
}
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.6rem; }

p, ul, ol { margin: 0 0 1.35rem; }
p { text-wrap: pretty; }         /* avoids a lone word on the last line */
/* content links: brand green, no underline; go black on hover.
   Colour is --color-link, NOT --color-blue: the bright mint measured only ~1.6:1
   against the grey page backdrop, too washed out to read. Same brand hue, taken
   dark enough to read on a light backdrop. */
a { color: var(--color-link); text-decoration: none; transition: color var(--dur-quick) var(--ease); }
a:hover { color: var(--color-black); }

/* brand-tinted text selection — a small, quiet signature */
::selection { background: var(--color-blue); color: var(--color-black); }

img, svg { max-width: 100%; height: auto; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--color-dark-blue); outline-offset: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}