/*!
Theme Name: JOURNAL
Theme URI: https://thoughtandfound.co/
Author: Thought & Found
Author URI: https://thoughtandfound.co/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
*/

@media screen and (min-width: 0) {
body {
  margin: 39px 0 10px 0;
  padding: 0;
}

a {
  color: black;
}

.site-branding {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24px;
  line-height: 26px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid black;
  background: white;
  z-index: 10;
}

span.m-item {
  font-size: 14px;
  text-transform: uppercase;
  z-index: 10;
}

span#awards {
  position: fixed;
  left: 10px;
  top: 5px;
}

span#contact {
  position: fixed;
  right: 10px;
  top: 5px;
}

header, .cat-head {
  font-family: 'old-standard', serif;
}

span.feat-cat {
  font-family: 'old-standard', serif;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 20px;
}

span.title {
  font-size: 36px;
  line-height: 36px;
}

header.feat-header {
  margin-bottom: 10px;
}

span.cat {
  text-decoration: underline;
}

.feat-content {
  margin-top: 40px;
}

.feat-col {
  padding: 10px;
  text-align: center;
}

.feat-col, .feat-content {
  font-family: 'Courier New', 'Courier', monospace;
  text-transform: uppercase;
  font-size: 11px;
}

.post-thumbnail img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
 }

 main#feature article {
  border-bottom: 1px solid black;
 }

 .cat-head {
   font-size: 26px;
   text-transform: uppercase;
   padding: 0 10px;
   margin-bottom: 10px;
   position: relative;
 }

 span.post-count {
   font-size: 11px;
   position: absolute;
   top: 6px;
   right: 10px;
 }

 main#articles article {
   padding: 10px 0 0 10px;
   width: 75%;
   display: inline-block;
 }

 .cat-container {
   white-space: nowrap;
   overflow-x: scroll;
   padding-bottom: 10px;
   border-bottom: 1px solid black;
   font-size: 0;
 }

 header.entry-header {
   clear: both;
   overflow: hidden;
   margin-bottom: 10px;
 }

 main#articles span.title {
   font-size: 16px;
   line-height: 18px;
   float: left;
   width: calc(100% - 45px);
 }

 span.post-year {
   float: right;
   margin-top: 6px;
 }

 span.post-year, .entry-content, .inner {
   font-family: 'Courier New', 'Courier', monospace;
   text-transform: uppercase;
   font-size: 11px;
 }

 .site-info {
   font-family: 'old-standard', serif;
   text-transform: uppercase;
   font-size: 11px;
 }

 footer {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   background: white;
   border-top: 1px solid black;
   padding-bottom: 5px;
   z-index: 10;
 }

 .entry-content {
   margin-bottom: 10px;
   white-space: normal;
 }

 .cat-container.wrap {
   white-space: normal;
   overflow-x: auto;
 }

 .inner {
    padding: 0 10px;
 }

 .site-info {
   clear: both;
   overflow: hidden;
   padding: 5px 10px 0 10px;
 }

 .f-cols {
   float: left;
 }

 .f-cols:last-child {
   float: right;
 }

 .event-row {
    font-size: 0;
    margin-bottom: 20px;
  }

 .date-col {
    width: 25%;
    width: calc(25% - 10px);
    display: inline-block;
    font-size: 11px;
    vertical-align: top;
    margin-right: 10px;
 }

 .e-col {
    width: 75%;
    display: inline-block;
    font-size: 11px;
    max-width: 200px;
 }

 .cat-container.event.wrap {
    margin-top: 30px;
  }

  .block-inner ul {
    margin: 0;
    padding: 0px 16px;
  }

  .block-inner ul br {
    display: none;
  }

  .block-inner img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 80px;
  }

  .block-inner {
    font-family: 'old-standard', serif;
    font-size: 14px;
    line-height: 17px;
    padding: 0 10px 30px 10px;
    max-width: 230px;
  }

  span.img-cred {
    margin-top: 10px;
    font-size: 11px;
    font-family: 'Courier New', 'Courier', monospace;
    text-transform: uppercase;
  }

  .contact-block {
    position: fixed;
    background: white;
    top: 36px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 2;
    display: none;
  }

  .awards-row {
    text-transform: uppercase;
    font-family: 'old-standard', serif;
    font-size: 14px;
    border-bottom: 1px solid;
    padding: 5px 10px;
    font-size: 0;
  }

  .a-col.level {
    width: 35%;
  }

  .a-col.type {
    width: 65%;
  }

  .a-col {
    display: inline-block;
    text-transform: uppercase;
    font-family: 'old-standard', serif;
    font-size: 14px;
    line-height: 17px;
    vertical-align: top;
  }

  .awards-block {
    position: fixed;
    background: white;
    top: 37px;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    padding-bottom: 25px;
    z-index: 2;
    display: none;
  }

}

@media screen and (min-width: 568px) {
  body {
    margin-top: 48px;
  }

  .site-branding {
    font-size: 36px;
    padding-top: 10px;
    padding-bottom: 11px;
  }

  .contact-block, .awards-block {
    top: 47px;
  }

  article.feature-block {
    font-size: 0;
  }

  .feat-col {
    width: 50%;
    width: calc(50% - 20px);
    display: inline-block;
    vertical-align: top;
  }

  main#articles article {
    width: 50%;
    width: calc(50% - 10px);
  }

}

@media screen and (min-width: 768px) {
  body {
    margin-top: 55px;
  }

  .site-branding {
    font-size: 48px;
    padding-top: 11px;
    padding-bottom: 17px;
  }

  .circ {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;
    margin: 0 5px;
  }

  .circ:first-child {
    background: black;
  }

  .thumb-wrap {
    position: absolute;
    left: 0;
    bottom: 7px;
    width: 50%;
    text-align: center;
  }

  .feat-content {
    margin-bottom: 40px;
  }

  .cat-container.Writing {
    column-count: 2;
    column-gap: 0px;
  }

  .contact-block {
    width: 33%;
    width: calc((100vw / 3) * 2 + 9px);
    top: 55px;
    left: 0;
    border-right: 1px solid black;
  }

  .block-inner {
    max-width: none;
  }

  .contact-block .block-inner {
    width: 230px;
  }

  .awards-block {
    width: calc((100vw / 3) * 2 + 9px);
    top: 55px;
    border-right: 1px solid black;
  }

  .a-col.level {
    width: 25%;
  }

  .a-col.ayear {
    margin-top: 0;
    text-align: right;
    width: 10%;
  }

  main#feature article {
    border-bottom: none;
  }

  main#feature {
    border-bottom: 1px solid black;
  }

  span.feat-cat {
    margin-top: -5px;
  }

  span.m-item, span.feat-cat, .cat-head {
    font-size: 22px;
  }

  span#awards, span#contact {
    top: 2px;
  }

  main#feature {
    position: relative;
    overflow-x: hidden;
  }

  .sticky-block {
    white-space: nowrap;
  }

  .feat-wrap-cont {
    position: relative;
  }

  span.title {
    font-size: 48px;
    line-height: 42px;
  }

  article.feature-block {
    display: inline-block;
    width: 100%;
    vertical-align: top;
  }

  .feat-col {
    white-space: normal;
  }

  .cat-head {
    padding-right: 0;
  }

  span.post-count {
    right: 0;
  }

  main#articles {
    width: 66%;
    width: calc((100% / 3) * 2);
    font-size: 0;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
  }

  .cat-container {
    white-space: normal;
    overflow-x: auto;
  }

  .cat-col {
    width: 33%;
    width: calc(100% / 3);
    display: inline-block;
    vertical-align: top;
  }

  .cat-col.Writing {
    width: 66%;
    width: calc((100% / 3) * 2);
  }

  main#about.fix, .cat-head-wrap.fix {
    position: fixed;
    top: 55px;
    z-index: 1;
  }

  main#articles article {
    width: 100%;
    width: calc(100% - 10px);
  }

  main#about {
    width: 33%;
    width: calc(100% / 3);
    display: inline-block;
    height: calc(100vh - 81px);
    overflow-y: auto;
  }

  .vert-line {
    position: absolute;
    height: 100vh;
    border-left: 1px solid black;
    z-index: 2;
    right: calc((100vw / 3) - 10px);
  }

  .fix-line {
    position: fixed;
  }

  .block-wrap {
    font-size: 0;
  }

  .cat-container {
    border-bottom: none;
  }

  .cat-container.wrap {
    border-left: 1px solid;
    padding-left: 0px;
    margin-left: 10px;
  }

  footer#colophon {
    border-top: 1px solid;
  }

  .cat-head-wrap {
    position: absolute;
    background: white;
    width: calc(67% / 3);
  }

  .cat-col.Writing .cat-head-wrap {
    width: calc((66.8% / 3) * 2);
  }

  .cat-container {
    margin-top: 40px;
  }

  .cat-container.wrap {
    margin-top: 56px;
    border: none;
  }

  main#about .cat-head {
    padding-left: 20px;
  }

  .event-block {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1024px) {
  header.feat-header, .feat-content {
      padding: 0 20px;
  }

  .feat-content {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  span.title {
    font-size: 55px;
    line-height: 48px;
  }

  main#about {
    width: 300px;
  }

  main#articles {
    width: calc(100% - 300px);
  }

  .cat-col .post-thumbnail img {
    filter: grayscale(1);
    transition: filter 500ms ease;
  }

  .cat-col .post-thumbnail img:hover {
    filter: grayscale(0);
  }

  .awards-block {
    width: calc(100% - 291px);
  }

  .a-col.level {
    width: 20%;
  }

  .a-col.type {
    width: 70%;
  }

  .vert-line {
    right: 290px;
  }

  main#about .cat-head-wrap {
    width: 300px;
  }

  .cat-head-wrap {
    width: calc((100% - 300px) / 3);
  }

  .cat-col.Writing .cat-head-wrap {
    width: calc((100% - 300px) / 3 * 2);
  }

  .contact-block {
    width: calc(100% - 291px);
  }

  .block-inner {
    font-size: 24px;
    line-height: 27px;
    max-width: none;
  }

  .contact-block .block-inner {
    width: 390px;
  }

  .block-inner ul {
    padding: 0px 26px;
  }

  span.img-cred {
    line-height: 10px;
    margin-bottom: 5px;
    display: block;
  }
}

@media screen and (min-width: 1200px) {
  body, footer#colophon, .site-branding {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    border-left: 1px solid black;
    border-right: 1px solid black;
  }

  header.feat-header {
    padding: 0px 50px;
  }

  span#awards {
    left: calc((100% - 1200px) / 2 + 10px);
  }

  span#contact {
    right: calc((100% - 1200px) / 2 + 10px);
  }

  .vert-line {
    right: calc((100vw - 1200px) / 2 + 290px);
  }

  .cat-head-wrap {
    width: 300px;
  }

  .cat-col.Writing .cat-head-wrap {
    width: 600px;
  }

  .awards-block, .contact-block {
    width: calc((100% - 291px) - (100% - 1200px));
    left: calc((100% - 1200px) / 2);
  }

  .awards-row {
    padding: 4px 10px 5px 10px;
  }

  .a-col {
    font-size: 22px;
    line-height: 24px;
  }
}