/*
 * Bitstream Gothic 720
 * URL: http://new.myfonts.com/fonts/bitstream/gothic-720/
 * MyFonts Webfont Build ID 864036, 2011-07-18T15:13:44-0400
 * Order: M3050605
 * License: http://www.myfonts.com/viewlicense?1056
*/

@font-face {
  font-family: "Gothic720BT-LightB";
  src: url("../fonts/style_1011.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Gothic720BT-LightItalicB";
  src: url("../fonts/style_1012.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Gothic720BT-RomanB";
  src: url("../fonts/style_1013.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Gothic720BT-ItalicB";
  src: url("../fonts/style_1014.woff") format("woff");
  font-style: italic;
}

@font-face {
  font-family: "Gothic720BT-BoldB";
  src: url("../fonts/style_1015.woff") format("woff");
  font-style: normal;
}

@font-face {
  font-family: "Gothic720BT-BoldItalicB";
  src: url("../fonts/style_1016.woff") format("woff");
  font-style: italic;
}

:root {

/* Colours */
--color-dark: #303943;
--color-gray-dk: #767676;
--color-gray-lt: hsl(0, 0%, 85%);
--color-primary: #006699; /* hsl(200,100,30) */
--color-bkgd: #F9FAFB;

/* Typography */
--sans-stack: system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, Lucida Grande, sans-serif;
--font-text: "Gothic720BT-RomanB";
--font-text-bold: "Gothic720BT-BoldB";
--font-text-italic: "Gothic720BT-ItalicB";

--font-size-base: 100%;
--font-size-xxl: calc(var(--font-size-base) * 1.75);
--font-size-xl: calc(var(--font-size-base) * 1.5);
--font-size-l: calc(var(--font-size-base) * 1.25);
--font-size-m: var(--font-size-base);
--font-size-s: calc(var(--font-size-base) * 0.875);
--font-size-xs: calc(var(--font-size-base) * 0.75);
--font-size-xxs: calc(var(--font-size-base) * 0.5625);

/* Layout */
--max-width: 1064px; /* this keeps the imagery at 100% (plus gutter and caption) */
--spacer: 1rem;

--border-default: 1px solid var(--color-gray-lt);
}

/*------------------------------------*\
    BASE
\*------------------------------------*/

html {
  box-sizing: border-box;
  font-size: var(--font-size-m);
  font: -apple-system-body;
  font-family: var(--font-text), var(--sans-stack);
  line-height: 1.4;
  letter-spacing: 3%;
  color: var(--color-dark);
}

img {
  width: 40%;
}

/*palm*/
@media screen and (min-width: 639px) {
  html {
    font-size: var(--font-size-l);
  }
}

/*lap*/
@media screen and (min-width: 769px) {
  html {
    font-size: var(--font-size-xl);
  }
  img {
    width: 33%;
  }
}

/*portable*/
@media screen and (min-width: 960px) {
  html {
    font-size: var(--font-size-xxl);
  }
}

body {
  margin: 0 auto;
  max-width: var(--max-width);
  padding: calc(var(--spacer) * 2) 8%;
  background-color: var(--color-bkgd);
   /* -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; */
}


/*------------------------------------*\
    TYPOGRAPHY
\*------------------------------------*/

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: hsl(from var(--color-primary) h s calc(l + 10));
}

a:active {
  color: hsl(from var(--color-primary) h s calc(l - 5));
  background-color: hsl(from var(--color-primary) h s calc(l + 60));
}

b,
strong {
  font-family: var(--font-text-bold);
  font-weight: normal;
}

i,
emphasis,
em {
  font-family: var(--font-text-italic);
  font-style: italic;
}

/*------------------------------------*\
    LAYOUT
\*------------------------------------*/

header {
  margin: 1rem 0;
}

article {
  border-top: var(--border-default);
  border-bottom: var(--border-default);
}