html {
  --accent-light: color(display-p3 0.98898 0.41605 0.00681);
  --background-light: hsl(30deg 100% 100%);
  --text-light: rgb(0, 0, 0);
  --gray-light: hsl(0deg 0% 65%);

  --accent-dark: color(display-p3 0.98898 0.54605 0.24681);
  --background-dark: hsl(30deg 10% 10%);
  --text-dark: hsl(0deg 0% 90%);
  --gray-dark: hsl(0deg 10% 50%);
  
  --font-pixel-font-07: 'PixelFont07', 'PixelFontFallbackMac', 'PixelFontFallbackWindows', system-ui, sans-serif;
  --font-pixel-font-12: 'PixelFont12', 'PixelFontFallbackMac', 'PixelFontFallbackWindows', system-ui, sans-serif;
  --font-pixel-font-15: 'PixelFont15', 'PixelFontFallbackMac', 'PixelFontFallbackWindows', system-ui, sans-serif;
  --font-pixel-font-17: 'PixelFont17', 'PixelFontFallbackMac', 'PixelFontFallbackWindows', system-ui, sans-serif;
  --font-pixel-font-22: 'PixelFont22', 'PixelFontFallbackMac', 'PixelFontFallbackWindows', system-ui, sans-serif;
}

@media (width > 767px) {
  html {
    --font-size: 20px;
    --font-size-headline: 35px;
    --margin: 16px;
    
    --viewport-margin: calc(6 * 16px);
  }
}

@media (width <= 767px) {
  html {
    --font-size: 20px;
    --font-size-headline: 26px;
    --margin: 12px;

    --viewport-margin: calc(2 * 12px);
  }
}

/* Light */
html {
  --accent: var(--accent-light);
  --background: var(--background-light);
  --text: var(--text-light);
  --gray: var(--gray-light);
}

/* Dark */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
    --accent: var(--accent-dark);
    --background: var(--background-dark);
    --text: var(--text-dark);
    --gray: var(--gray-dark);
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: OutputSans2, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.5;
  font-size: var(--font-size);
  letter-spacing: -.01em;
  
  color: var(--text);
  background: var(--background);

  -webkit-font-smoothing: antialiased;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  
  hanging-punctuation: first;
  
  overflow-x: hidden;
  overflow-x: clip; 
  
  -webkit-tap-highlight-color: transparent; 
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  
  font-variation-settings: "wdth" 105, "opsz" 10, "grad" 0;
}

a {
  color: var(--accent);
  text-decoration-thickness: .04em;
  text-underline-offset: .2em;
  hyphens: none;
  font-variation-settings: "wght" 450, "wdth" 105, "opsz" 10, "grad" 10;
}


section.main {
  max-width: 900px;
  padding: calc(4 * var(--margin)) var(--viewport-margin);
}

article {
  position: relative;
  margin-top: calc(8 * var(--margin));
}
body.main-page article {
  margin-top: calc(8 * var(--margin));
  
  &:before {
    font-size: var(--font-size-headline);
    content: '';
    position: absolute;
    left: calc(-1 * var(--viewport-margin));
    /* right: -100vw; */
    right: 0;
    top: calc(-4 * var(--margin));
    height: .07em;
    background: var(--gray);
    box-shadow: 
    0 .07em 0 color-mix(in lab, var(--gray), var(--background) 33%),
    0 .14em 0 color-mix(in lab, var(--gray), var(--background) 66%);

  }

}

.page-header .subscribe {
  margin-top: calc(2 * var(--margin));
}  

nav.page-nav,
nav.note-nav,
.subscribe,
.contact {
  color: var(--gray);
  font-variation-settings: "wght" 450, "wdth" 105, "opsz" 10, "grad" 10;
}

.subscribe {
  margin-top: -.3em;
}

.subscribe,
.contact {
  
  a {
    color: var(--gray);
    
    &:hover {
      color: var(--text);
    }
  }

  form {
    display: inline-block;
  }
  
  input[type='email'] {
    font-size: var(--font-size);
    width: 17em;
    padding-left: .3em;
    padding-right: .3em;
    
    &:focus {
      outline-color: var(--accent);
    }
  }
}

input,
input[type='submit'],
button {
  font-family: inherit;
  font-size: var(--font-size);
  line-height: normal;
  border-radius: 0;
  border-color: var(--gray);
  border-width: .5px;
  padding-top: .35em;
  padding-bottom: .2em;
  margin-bottom: .3em; /* Useful when stacked */
}

input::placeholder {
  color: var(--gray);
}


body.main-page .page-header {
  h1 {
    font-family: var(--font-pixel-font-22);    
    font-weight: 400;
    font-size: calc(var(--font-size-headline) * 22 / 17);
    
    padding: 0;
    margin: 0;
    
    text-shadow: 
      0 .07em 0 var(--accent),
      0 .14em 0 color-mix(in lab, var(--accent), var(--background) 50%),
      0 .21em 0 color-mix(in lab, var(--accent), var(--background) 75%);
  }
  h2 {
    font-weight: 600;
    line-height: 1.2;
    font-size: calc(var(--font-size) * .8);
    text-wrap: balance;
    
    text-transform: uppercase;
    letter-spacing: .05em;
    
    a {
      font-weight: 550;
      font-variation-settings: "wght" 550, "wdth" 105, "opsz" 10, "grad" 10;
    }
  }
}

body:not(.main-page) .page-header {
  display: flex;
  flex-direction: row;
  gap: calc(1.5 * var(--margin));
  align-items: center;
  
  position: relative;
  margin-bottom: calc(4 * var(--margin));
  
  &:after {
    content: '';
    position: absolute;
    left: calc(-1 * var(--viewport-margin));
    right: 0;
    bottom: calc(-4 * var(--margin));
    height: 2px;
    background: var(--gray);
  }

  
  h1 {
    font-family: var(--font-pixel-font-15);    
    font-weight: 400;
    font-size: calc(var(--font-size-headline) * 15 / 17);
    
    padding: 0;
    margin: 0;
    
    text-shadow: 0 .12em 0 color-mix(in lab, var(--accent), var(--background) 50%);
    
    a {
      text-decoration: none;  
    }
    
    a:active {
      position: relative;
      top: .12em;
      text-shadow: none;
    }
  }
  h2 {
    font-weight: 600;
    line-height: 1.2;
    font-size: calc(var(--font-size) * .8);
    text-wrap: balance;
    
    color: var(--gray);
    
    text-transform: uppercase;
    letter-spacing: .05em;

    a {
      color: inherit;
      font-weight: 600;
      font-variation-settings: "wght" 600, "wdth" 105, "opsz" 10, "grad" 10;
    }    
  }

}

@media (width <= 767px) {
  body:not(.main-page) .page-header {
    align-items: start;
  }
}



.page-footer {
  font-weight: 400;
  font-size: var(--font-size);
  
  color: var(--gray);
  
  margin-top: calc(4 * var(--margin));
  padding-top: calc(4 * var(--margin));
  position: relative;
  
  display: flex;
  flex-direction: column;
  gap: 1em;
  
  &:before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--viewport-margin));
    right: 0;
    top: 0;
    height: 2px;
    background: var(--gray);
  }

}

.note-header {
  padding-bottom: calc(1 * var(--margin));
  margin-bottom: calc(2 * var(--margin));

  h1 {
    margin: 0;
    font-size: var(--font-size-headline);
    font-weight: 400;
    font-family: var(--font-pixel-font-17);
    line-height: 1.27;
    
    &.starts-with-double-quote { /* Chrome doesn’t support hanging-punctuation yet */
      text-indent: -.5em;
    }
    
    a {
      text-decoration: none;
    }    
  }
  
  .meta {
    color: var(--gray);
    font-weight: 500;
    padding-top: .5em;

    span {
      margin-right: 1.5em;
    }
  }
}

@supports (hanging-punctuation: first) {
  .note-header {
    h1 {
      &.starts-with-double-quote {
        text-indent: 0;
      }
    }
  }
}


.note-content {
  letter-spacing: -.01em;
    
  em {
    font-style: normal;
    font-variation-settings: "wght" 600, "wdth" 115, "opsz" 10, "grad" 10;
  }
  

  p {
    hyphens: auto;
  
    margin-top: 2em;
    margin-bottom: 2em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  blockquote {
    border-left: 2px solid var(--gray);
    padding-left: 1em;
    margin-left: 0;
    margin-top: 2em;
    margin-bottom: 2em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;    
  }
  
  figure {
    margin: 0;
    min-width: 0;
  }
  video {
    max-width: 100%;
    max-height: 700px;
    margin-bottom: 0;
    object-fit: contain;
  }
  img {
    max-width: 100%;
    max-height: 700px;
    margin-bottom: 0;
    object-fit: contain;
  }

  
}


@font-face {
  font-family: OutputSans2;
  src: url(OutputSans2Beta-Regular.woff2) format('woff2');
}
@font-face {
  font-family: PixelFont07;
  src: url(PixelFontUniversity07.woff2) format("woff2");
}
@font-face {
  font-family: PixelFont12;
  src: url(PixelFontUniversity12.woff2) format("woff2");
}
@font-face {
  font-family: PixelFont15;
  src: url(PixelFontUniversity15.woff2) format("woff2");
}
@font-face {
  font-family: PixelFont17;
  src: url(PixelFontUniversity17.woff2) format("woff2");
}
@font-face {
  font-family: PixelFont22;
  src: url(PixelFontUniversity22.woff2) format("woff2");
}
@font-face {
  font-family: PixelFontFallbackMac;
  src: local(Geneva);
  size-adjust: 120%;
}
@font-face {
  font-family: PixelFontFallbackWindows;
  src: local(SegoeUI);
  size-adjust: 120%;
}