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: 2.5px;
  text-underline-offset: .17em;
  text-decoration-color: color-mix(in lab, var(--accent), var(--background) 75%);
  
  hyphens: none;
  font-variation-settings: "wght" 450, "wdth" 105, "opsz" 10, "GRAD" 0;
  
  &:visited {
    color: var(--text);
    text-decoration-color: color-mix(in lab, var(--text), var(--background) 85%);
  }
  
  &:hover {
    font-variation-settings: "wght" 450, "wdth" 105, "opsz" 10, "GRAD" 10;
  }
  
  &:not(:has(img)):active {
    position: relative;
    top: 0.1em;
    text-underline-offset: .1em;
  }
}


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: 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));
}  


input,
input[type='submit'],
button {
  font-family: inherit;
  font-variation-settings: "wght" 450, "wdth" 100, "opsz" 10, "GRAD" 0;
  font-size: var(--font-size);
  line-height: normal;
  border: none;
  outline: .5px solid var(--gray);
  padding-top: .35em;
  padding-bottom: .2em;
  margin-bottom: .3em; /* Useful when stacked */
}

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

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

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

.subscribe,
.contact {
  
  a {
    color: var(--gray);
    text-decoration-color: color-mix(in lab, var(--gray), var(--background) 70%);
    
    &:hover {
      color: var(--text);
      text-decoration-color: color-mix(in lab, var(--text), var(--background) 70%);
    }
  }

  form {
    display: inline-block;
  }
  
  .email-digest {
    width: 16em;    
    max-width: calc(100vw - 2 * var(--viewport-margin));
    display: inline-block;
    position: relative;
    background: var(--background);
    
/*    .placeholder {
      position: absolute;
      inset: 0;
      z-index: 0;
      color: var(--gray);
      pointer-events: none;
      font-size: var(--font-size);
      padding-left: .3em;
      padding-top: .35em;
      padding-bottom: .2em;
      line-height: normal;
      
      &::before {
        content: 'get an email digest every Friday';
      }
      
    }*/
  }
  
  .email-digest input {
    font-size: var(--font-size);
    width: 100%;
    padding-left: .3em;
    padding-right: .3em;
    box-sizing: border-box;
    
    caret-color: var(--accent);
    
    background: transparent;
    
    &::placeholder {
      /* color: transparent; */
    }
    
    &:focus {
      outline-color: var(--accent);
      outline-width: 2px;
    }
  }
  
  input[type='submit'] {
    background: var(--gray);
    border: none;
    outline: none;
    color: var(--background);
    vertical-align: top;
    
    &:active {
      padding-top: .45em;
      padding-bottom: .1em;
    }
  }
  
  .email-digest input:focus:not(:placeholder-shown) + input[type='submit'] {
    background: var(--accent);
    outline: 2px solid var(--accent);
  }
}



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: 400;
    font-variation-settings: "wght" 600, "wdth" 105, "opsz" 10, "GRAD" 0;
    line-height: 1.2;
    font-size: calc(var(--font-size) * 1.0);
    text-wrap: balance;
    
    text-transform: uppercase;
    letter-spacing: .05em;
    
    span:first-child:after {
      content: ' ∕ ';
    }    

    a {
      font-weight: 400;
      font-variation-settings: "wght" 600, "wdth" 105, "opsz" 10, "GRAD" 0;
    }
    
  }
}
@media (width <= 767px) {
  body.main-page .page-header {
    h2 {
      font-size: calc(var(--font-size) * .8);
      
      span {
        display: block;
      }
      span:first-child:after {
        content: '';
      }
    }
  }
}


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,
    a:visited {
      color: var(--accent);
    }

    
    a:active {
      position: relative;
      top: .12em;
      text-shadow: none;
    }
  }
  h2 {
    font-weight: 400;
    font-variation-settings: "wght" 600, "wdth" 105, "opsz" 10, "GRAD" 0;
    line-height: 1.2;
    font-size: calc(var(--font-size) * .8);
    text-wrap: balance;
    
    color: var(--gray);
    
    text-transform: uppercase;
    letter-spacing: .05em;
    
    span {
      display: block;
    }


    a {
      color: inherit;
      font-weight: 400;
      font-variation-settings: "wght" 600, "wdth" 105, "opsz" 10, "GRAD" 0;
      text-decoration: none;
      
      &:hover {
        color: var(--text);
      }
    }    
  }

}

@media (width <= 767px) {
  body:not(.main-page) .page-header {
    flex-direction: column;
    align-items: start;
    
    h2 {
      margin-top: 0;
      margin-bottom: 0;
    }
  }
}



.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;
      text-shadow: 0 .07em 0 color-mix(in lab, var(--accent), var(--background) 75%);
      
      &:visited {
        color: var(--accent);
      }
        
      &:active {
        position: relative;
        top: .07em;
        text-shadow: none;
      }
    }

    .review-title {
      display: block;
      font-family: var(--font-pixel-font-12);
      font-size: calc(12 / 17 * var(--font-size-headline));
    }
  }
  
  .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" 0;
  }
  
  code {
    font-family: OutputSans2;
    font-variation-settings: "wght" 440, "wdth" 90, "opsz" 10, "GRAD" 0, "slnt" -4;
    color: var(--accent);
    word-break: break-word;
    hyphens: none;
  }
  

  p {
    hyphens: auto;
  
    margin-top: 2em;
    margin-bottom: 2em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  ul {
    margin-top: 2em;
    margin-bottom: 2em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;
    padding-left: 0;
    
    li {
      padding: 0;
      padding-left: calc(2 * var(--margin));
      margin-left: 0;
      margin-bottom: 1em;
      position: relative;
      list-style: none;
      text-box-edge: cap alphabetic;
      text-box-trim: trim-both;
      hanging-punctuation: none;
      
      &:before {
        position: absolute;
        content: '';
        left: 0;
        top: .25em;
        width: var(--margin);
        border-top: 2px solid var(--gray);      
      }
    }
  }
  
  blockquote {
    border-left: 2px solid var(--gray);
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2em;
    margin-bottom: 2em;
    text-box-edge: cap alphabetic;
    text-box-trim: trim-both;    
  }
  
  figure {
    margin: 0;
    min-width: 0;
    position: relative;
    margin-top: 2em;
    margin-bottom: 2em;
    
    &.youtube-video:before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 10;
      pointer-events: none;

      background: radial-gradient(circle, rgba(0, 0, 0, .4) 25%, transparent);
    }
    
    &.youtube-video:after {
      --thumbnail-size: 135px;
      
      content: '';
      position: absolute;
      inset: 0;
      z-index: 20;
      pointer-events: none;
      background: url(/_unsung/youtube-play.png);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: var(--thumbnail-size);
      
      filter: drop-shadow(0 calc(var(--thumbnail-size) / 27) 0 black);
    }
    
    &:active {
      &.youtube-video:after {
        filter: none;
        top: calc(var(--thumbnail-size) / 27);
      }  
    }
  }
  video {
    max-width: 100%;
    max-height: 700px;
    margin-bottom: 0;
    object-fit: contain;
    object-position: left top;
    display: block;
  }
  img {
    max-width: 100%;
    max-height: 700px;
    margin-bottom: 0;
    object-fit: contain;
    object-position: left top;
    display: block;
  }
}

.images-side-by-side {
  display: flex;
  flex-direction: row;
  gap: var(--margin);
  margin-top: 2em;
  margin-bottom: 2em;
  /* max-height: 700px; */
  
  & > figure {
    margin-top: 0;
    margin-bottom: 0;
    /* max-height: 100%; */
    flex-grow: 0;
    padding: 0;
  }
  img, video {
    max-height: 100%;
  }
}



@media (width <= 767px) {
  .note-content {
    figure {
      &.youtube-video:after {
        --thumbnail-size: 100px;
      }
    }
  }
  
  figure.landscape,
  .images-side-by-side {
    margin-left: calc(-2 * var(--margin));
    margin-right: calc(-2 * var(--margin));
    /* outline: 3px solid red; */
    
    img, video {
      object-position: center;
    }
  }
  
  figure.landscape {
    img, video {
      margin: 0 auto;
    }
  }
  

}



@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?v4) 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%;
}