/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Reset
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Settings & Variables
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

:root {
  /* Stop iOS Safari from increasing the default font-size when you switch a website from portrait to landscape */
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Position settings */
  position: relative;
  min-height: 100%;
  /* Font settings */
  font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  /* Colors */
  --c-black: rgb(8, 8, 8);
  --c-white: rgb(255, 255, 255);
    /* Spacing */
  --spacing-base: 8px;
  --container-size-base: 80px;
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Fonts Import
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

@font-face {
  font-family: 'MZ OTR Grotesk';
  src: url('/fonts/MZOTRGroteskVF.woff2') format('woff2');
  font-weight: 64 200;
  font-style: normal;
  /* Variable settings helper
  Light:      64 
  Sleek:      80
  Regular:    96
  Medium:     112
  SemiBold:   128
  Bold:       144
  Heavy:      160
  Black:      200 */
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Site Wrapper
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
body { /* Basic setting */
  position: relative;
  margin-top: 16px;
  margin-left: 8px;
  height: 100%;
  min-height: 100vh;
  
}

/*––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
Typography
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.t-copy {
  font-family: 'MZ OTR Grotesk';
  font-variation-settings: "wght" 128;
  font-size: 14px;
  letter-spacing: -0.01em;
  font-kerning: auto;
  line-height: 1em;
}

::before {
  content: "";
  margin-top: -4px;
  display: block;
  height: 0;
}

a, a:visited {
  color: rgb(8, 8, 8);
  text-decoration: none;
}

a:hover {
  color: rgb(168, 168, 168);
}