@import './vars.css';

/* FONTS -------------------------------------------------------------------- */

/*
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal (Regular)
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)
950 Extra Black (Ultra Black)
*/

@font-face {
  font-family: "Space Grotesk";
  font-weight: 400;
  src: url("/fonts/SpaceGrotesk-SemiBold.woff2") format('woff2')
}

@font-face {
  font-family: 'Space Grotesk';
  font-weight: 600;
  src: url('/fonts/SpaceGrotesk-Bold.woff2') format('woff2');
}


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

* {
  box-sizing: border-box;
}

body,
input,
button,
select,
textarea {
  font-family: var(--font);
  font-weight: var(--weight-regular);
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

html {
  font-size: 15px;
}

@media (min-width: 1600px) {
  html {
    font-size: 18px;
  }
}

body {
  margin: 0;
  padding: 0;
  color: var(--color);
  background: var(--bg-color);
}

p,
h1,
h2,
h3,
h4,
h5,
ul,
ol,
pre,
code,
hr,
table {
  margin-top: 0;
  margin-bottom: var(--block-bottom);
}

img {
  display: block;
}

figure {
  margin: 0 0 var(--block-bottom) 0;
}

hr {
  height: 2px;
  margin: 3rem 0;
  border: none;
  border-bottom: 2px dashed var(--border-color);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  word-spacing: 0.01em;
}

h1 {
  margin-left: -0.05em;
  font-size: 3.5rem;
  line-height: 1em;
}

h2 {
  margin-top: calc(var(--block-bottom) * 2);
  margin-left: -0.03em;
  font-size: 1.5rem;
  line-height: 1.15em;
}

h2.subtitle {
  margin-top: var(--block-bottom);
  color: var(--muted-color);
}

h2.subtitle + h2 {
  margin-top: var(--block-bottom);
}

h3 {
  font-size: 1.25rem;
  line-height: var(--line-height-heading);
}

@media (min-width: 1200px) {
  h1 {
    font-size: 4.5rem;
  }

  h2 {
    font-size: 2rem;
  }
}

@media (min-width: 1600px) {
  h1 {
    font-size: 5rem;
  }
}

a {
  text-decoration: none;
  color: var(--color);
  background-color: var(--link-bg-color);
  border-radius: var(--radius-sm);
  text-decoration: none;

  /* If link wraps to new line, have border radius close and restart */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a:hover {
  background-color: var(--link-bg-hover-color);
  text-decoration: none;
}

/*
For links inline, add some padding on the left and right for the bg color.
We don't want this for images that are linked.
*/
p a,
li a {
  padding: 0 5px;
}


a.reset {
  background-color: transparent;
}

a.reset:hover {
  background-color: transparent;
  text-decoration: underline;
}

button:hover {
  cursor: pointer;
}

p {
  line-height: var(--line-height);
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  hyphenate-limit-lines: 2;
  hyphenate-limit-last: always;
  hyphenate-limit-zone: 8%;
}

p:first-of-type {
  margin-top: 0;
}

ul,
ol {
  padding-left: 12px;
}

ul {
  list-style: square;
}

li {
  margin: 0 0 0.5em 1em;
  line-height: var(--line-height);
}

pre,
code {
  font-family: Menlo, Monaco, Consolas, Courier, monospace;
}

pre {
  overflow: auto;
  padding: 16px var(--gutter);
  border-radius: var(--radius-lg);
  font-size: 0.8125rem;
  line-height: 1.6em;
  background-color: #eee;
}

p > code,
li > code {
  padding: 2px 6px;
  border: 1px solid var(--border-color-light);
  font-size: 0.8125rem;
  border-radius: var(--radius);
  line-height: 12px;
}

/* Nav ------------ */

.nav {
  display: flex;
  overflow-x: auto;
  margin: var(--gutter) 0 calc(var(--gutter) * 4) 0;
  padding: 0 var(--gutter);
  transition: opacity 0.2s, transform 0.2s;
}

.nav__list {
  display: flex;
  margin-bottom: var(--gutter);
  margin-right: var(--gutter);
}

.nav__item {
  display: inline-block;
  padding: 0.65em 0.35em;
  margin-right: 0.5em;
  color: var(--muted-color);
  border-radius: var(--radius);
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: var(--weight-bold);
  background-color: transparent;
}

.nav__item:hover {
  text-decoration: none;
  background-color: var(--hover-bg-color);
}

.nav__divider {
  display: none;
}

@media (min-width: 800px) {
  .nav {
    display: block;
    position: fixed;
    left: 0;
    padding: 0;
    margin: 0 0 0 var(--gutter);
  }

  .nav__list {
    display: block;
    margin-right: 0;
    margin-bottom: var(--gutter);
    border: none;
  }

  .nav__item {
    display: block;
    padding: 0.25em 1em 0.25em 0.5em;
    margin-right: 0;
    border: 0;
    color: var(--color);
    border-radius: var(--radius);
  }
}

/* Page layout ------------ */

.page {
  position: relative;
  max-width: var(--page-max-width);
  margin-top: 24px;
  margin-bottom: 64px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.page.page--full-width {
  max-width: none;
}

@media (min-width: 800px) {
  .page {
    margin-left: var(--nav-width);
  }
}


/* Page & Post content ---------- */

figure img,
figure video {
  width: calc(100% + var(--gutter) * 2);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  border-radius: 0;
}

figure.border img,
figure.border video {
    border: 1px solid var(--border-color-light);
    border-width: 1px 0;
}

figure.small img {
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

figure.small.border img {
  border-radius: var(--radius-lg);
  border-width: 1px;
}

@media (min-width: 800px) {
  figure img,
  figure video {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-lg);
  }

  figure.large img {
    width: auto;
    /* Some fuzzy math but this prevents xlarge images from extending past
    viewport's right edge. */
    max-width: calc(100vw - var(--nav-width) - 100px);
  }

  figure.border img,
  figure.border video {
    border-width: 1px;
  }
}

/* Notice ------------ */

.notice {
  margin-bottom: var(--block-bottom);
  padding: 1em;
  background: var(--recessed-bg-color);
  border-radius: var(--radius-lg);
  font-weight: var(--weight-bold);
}


/* Items (e.g. Notes, Sketches) ------------ */

.item-grid {
  display: grid;
}

.item {
  margin-bottom: var(--block-bottom);
  padding-bottom: var(--block-bottom);
  border-bottom: 1px solid var(--border-color-light);
}

.item-title {
  margin: 0;
}

.item-title a {
  text-decoration: none;
  background: none;
}

.item-title a:hover {
  text-decoration: underline;
}

.item-meta {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: var(--weight-x-bold);
  text-transform: uppercase;
}

.item-credits {
  font-weight: var(--weight-bold);
  color: var(--muted-color);
  margin-bottom: 2px;
}

.item-body {
  font-size: 0.9375rem;
}

.item-body p:last-of-type{
  margin-bottom: 8px;
}