@import url("normalize.css");

/* Hi Brook! */

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-BoldItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-ExtraLightItalic.woff2') format('woff2');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

:root{
  /* Fonts */
  --font-helvetica: Helvetica Neue, Helvetica, Arial, sans-serif;
  --font-public-sans: 'Public Sans', var(--font-helvetica);
  --font-raleway: 'Raleway', var(--font-helvetica);

  --font-hed: var(--font-public-sans);
  --font-body: var(--font-public-sans);
  --font-default-size: clamp(17px, 2vw + 4px, 19px);

  /* Colors */
  --eigengrau: #16161D;
  --white: #FFF;

  /* Grays, dark to light */
  --gray1: var(--eigengrau);
  --gray2: #33333C;
  --gray3: #86898D;
  --gray4: #D8D8D7;
  --gray5: #F3F4F5;

  /* Blues, dark to light */
  --blue1: #364159;
  --blue2: #47587D;
  --blue3: #586D9C;
  --blue4: #91A7D6;
  --blue5: #9EAFD6;

  /* Orange, dark to light */

  --color-primary-dark: var(--blue1);
  --color-primary-light: var(--gray5);
  --color-primary-light-rgb: 243,244,245;
  --color-primary-dark-rgb: 55,65,89;

  /* Layout */
  /* Giving ch units a go, still a bit voodoo as Eric explains:
  https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/ */
  --max-width: 65ch;

  /* Animations */
  --transition-timing: 0.4s;
}

html{
  scroll-behavior: smooth; /* (featuring Rob Thomas of Matchbox Twenty) */
  font-size: var(--font-default-size);
}

body{
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-style: normal;

  font-variant: normal;
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

a, a:visited{
  color: var(--color-primary-dark);
  text-decoration-color: var(--blue5);
}

#masthead{
  background-color: var(--color-primary-light);
  /* you kids with your multiple background gradients and SVGs */
  /* thanks, https://www.heropatterns.com ! */
  background-image: linear-gradient(to top, var(--color-primary-light), rgba(var(--color-primary-light-rgb),0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23364159' fill-opacity='1' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  border-bottom: 1px solid var(--color-primary-light);
  border-top: 1px solid var(--color-primary-dark);
  margin: 0;
  padding: 0;
}

#masthead h1{
  font-family: var(--font-raleway);
  text-transform: uppercase;
  font-weight: 200;
  font-size: 4.8em;
  font-style: italic;
  text-align: center;
  line-height: .9;
  -webkit-user-select: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  margin: 3rem 0 4rem 0;
  padding: 0;
}

#masthead h1 a{
  text-decoration: none;
}

main{
  margin: 0 auto;
  padding: 0;
  /* display: grid;
  max-width: calc(var(--max-width) + 20ch);
  border: 1px solid #F00; */
}

section.day{
  padding: 0 0 2rem 0;
  margin: 0;
  width: 100%;
  position: relative;
  border-top: 1px solid transparent; /* it's 2020 and we're still collapsing margins with hackery  */
  border-bottom: 1px solid transparent; /* it's 2020 and we're still collapsing margins with hackery  */
}

section.day header{

}

time.calendar{
  background: var(--color-primary-dark);
  color: var(--color-primary-light);
  font-family: var(--font-public-sans);
  font-weight: 800;
  font-size: .8rem;

  letter-spacing: .2rem;
  text-transform: uppercase;
  padding: .3rem .5rem .3rem .5rem;
  top: 1em;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

time.calendar abbr{
  display: none;
}

#list .articles > h1{
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  padding: 0 1rem;
}

article{
  /* don't pad the article, pad the heds/grafs so the quotation will stick out. Yes, really */
  padding: 1.5rem 0;
  margin: 0 auto;
}

article header, article footer{
  padding: 0 1rem;
}

article header h1{
  font-family: var(--font-hed);
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 1.1;
  margin: 0;
}

article header h2, article footer h2{
  color: var(--gray3);
  font-family: var(--font-hed);
  font-size: .9rem;
  font-style: normal;
  font-weight: normal;
  margin: 0;
  padding-top: .6rem;
}

article footer h2{
  padding-top: 0
}

article header h2, article header h2 a, article header h2 a:visited{
  color: var(--gray3);
  text-decoration: none;
}

article header h2 .vialink{
  font-size: .75em;
}

article header h2 time{
}

article p{
  font-size: 1rem;
  line-height: 1.5625;
  padding: 0 1rem;
  margin: .5rem 0 1.25rem 0;
}

article blockquote{
  margin: 1.25rem 0;
  padding: 0 1.5rem 0 .75rem;
  color: var(--blue2);
  background: url("../images/pull-quote.png") no-repeat .75rem 0;
  background-size: 13px 10px;
}

article blockquote a, article blockquote a:visited{
  color: var(--blue2);
}

article img{
  width: 100%;
}

article code{
  font-size: .75em;
}

article img{
  width: 100%;
}

article form label{
  color: var(--blue3);
}

article form label, article form input{
  display: block;
}

article form input, article form textarea{
  border: 1px solid var(--blue4);
  padding: .5rem;
  font-family: var(--font-body);
  font-size: .9rem;
}

article form textarea{
  width: 100%;
}

article form button{
  border: 1px solid var(--blue4);
  background: var(--gray5);
  padding: .5rem 1rem;
  font-family: var(--font-hed);
  color: var(--blue2);
}

/* footnotes */
/* the reference in the text */

article sup{
  font-size: .7em;
  padding-left: 2px;
}

article a.footnote-ref{
  text-decoration: none;
  color: var(--blue2);
}

/* the actual footnote at the end of the article */
article section.footnotes{
  padding: .25rem 0 1rem 0;
}

article section.footnotes hr{
  display: none;
}

article section.footnotes li{
  font-size: .9em;
  color: var(--blue2);
}

article section.footnotes a.footnote-backref{
  font-size: .75rem;
  text-decoration: none;
}

#paginator{
  margin: 1rem auto 4rem auto;
  text-align: center;
}

#paginator a{
  font-family: var(--font-public-sans);
  font-size: .8em;
  font-weight: 800;
  letter-spacing: .2rem;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  padding: 0 1rem;
}

#boot{
  background: var(--color-primary-dark);
  color: var(--color-primary-light);
  padding: 2.5rem 0 2rem 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

#boot section{
 margin: 1rem auto;
}

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

#boot h3{
  text-align: center;
  font-family: var(--font-public-sans);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .2rem;
  text-transform: uppercase;
}

#boot h1{
  font-family: var(--font-raleway);
  text-transform: uppercase;
  font-weight: 200;
  font-size: 2.9rem;
  font-style: italic;
  margin: 0 0 3rem 0;
  text-align: center;
  line-height: .9;
}

#boot p{
  line-height: line-height: 1.3125;
}

#boot h1, #boot p{
  padding-left: 1rem;
  padding-right: 1rem;
}

#boot p a{
  text-decoration: underline;
  text-decoration-color: var(--blue5);
}

#boot .copyright{
  font-size: .8rem;
  color: var(--blue4);
  margin-top: 2rem;
}

@media screen and (min-width: 85ch){
  article header, article footer, article p, #boot p, article section.footnotes, #list .articles > h1{
    padding-left: 2.3rem;
    padding-right: 2.3rem;
  }

  article blockquote{
    background-position: 2rem 0;
  }

  article section.footnotes li p{
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (min-width: 110ch){
  section.day{
    display: grid;
    grid-template-columns: 1fr min(65ch, 100%);
    grid-gap: 1rem;
  }

  section.day > header{
    text-align: right;
  }

  section.day section.articles{
    /* grid-column-start: span 5; */
    grid-column: 2;
  }

  #list .articles > h1{
    margin-bottom: 1.5rem;
  }

  article{
    padding: 0 0 2rem 0;
  }

  article h1{
    margin-top: 0;
  }

  article header, article header, article p, article footer, #list .articles > h1, #boot p{
    padding-left: .25rem;
    padding-right: 2rem;
  }

  article blockquote{
    background-position: 0 0;
  }

  article section.footnotes{
    padding-left: 0;
    padding-right: 0;
  }

  time.calendar abbr{
    display: inherit;
  }

  time.calendar .month{
    display: none;
  }

  #single article, #list .articles{
    max-width: var(--max-width);
    min-height: 10rem;
  }

  #list .articles{
    margin: 0 auto;
  }

  #boot section{
    max-width: var(--max-width);
  }
}

@media screen and (min-width: 120ch){
  section.day{
    grid-template-columns: 1fr 65ch .5fr;
  }
  article header, article footer, article p{
    padding-right: 1rem;
  }
}

@media screen and (min-width: 125ch){
  section.day{
    grid-template-columns: 1fr 65ch 1fr;
  }
}

/* D A R K M O D E */
@media screen and (prefers-color-scheme: dark) {
  body{
    background: var(--color-primary-dark);
    color: var(--color-primary-light);
  }

  a, a:visited{
    color: var(--color-primary-light);
    text-decoration-color: var(--gray3);
  }

  #masthead{
    background-color: var(--color-primary-dark);
    /* you kids with your multiple background gradients and SVGs */
    /* thanks, https://www.heropatterns.com ! */
    background-image: linear-gradient(to top, var(--color-primary-dark), rgba(var(--color-primary-dark-rgb),0)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23f3f4f5' fill-opacity='0.6' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    border-bottom: var(--color-primary-dark);
  }

  time.calendar{
    background: var(--eigengrau);
    color: var(--color-primary-light);
  }

  article blockquote p, article blockquote a, article blockquote a:visited, article section.footnotes li, article sup a, article sup a:visited{
    color: var(--gray4);
  }

  article blockquote{
    background-image: url("../images/pull-quote-dark.png");
    background-size: 13px 10px;
  }

  article footer h2 a, article footer h2 a:visited{
    color: var(--gray4);
  }

  #boot{
    background: var(--eigengrau);
    color: var(--gray4);
  }
}