/*
When I started this project,
only me and god knew what this code did
now only god knows
*/

* {
  margin: 0;
  padding: 0;
}
body { max-width: 100vw; }

.header {
  font-family: nyt-franklin, helvetica, arial, sans-serif;
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
  position: fixed;
  padding-top: 10px;
  width: 100vw;
  z-index: 999;
}

.header-buttons {
  float: left;
  padding-left: 9%;
}

.header-link {
  float: left;
  width: 16px;
}

.header-link a {
  color: #000;
  font-weight: bolder;
  text-decoration: none;
}

.header-search {
  padding: 0 20px;
}

.header-cosmos {
  width: 160px;
  font-size: 0.9em;
  margin: auto 0;
}

.header-middle {
  margin: 0 auto;
  width: 195px;
}

.header-subscribe {
  position: absolute;
  top: 4px;
  right: 9%;
}

.header-button {
  background-color: #6288a5;
  border: 1px solid #326891;
  border-radius: 3px;
  color: #fff;
  font-size: 0.65em;
  font-weight: bold;
  padding: 11px 12px 8px;
}

.content-item img {
  width: 100%;
}

.intro {
  margin: 0 18% 30px;
  padding-top: 100px;
}

.intro figure,
.intro figure img {
  width: 100%;
}

.intro h1 {
  font-family: nyt-cheltenham, georgia, 'times new roman', times, serif;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  width: 70%;
  position: relative;
  line-height: 3rem;
  font-weight: 700;
  font-style: italic;
  vertical-align: baseline;
}

.related-title a {
  text-decoration: none;
  color: black;
}

.subs-col-form a {
  color: #326891;
  font-size: 0.625em;
  text-transform: uppercase;
  text-decoration: none;
}

.article-header {
  font-family: nyt-franklin, helvetica, arial, sans-serif;
  height: 70px;
}

.article-header h5 {
  font-size: 17px;
  font-weight: bolder;
  position: relative;
  top: -5px;
}

.related-article-title a {
  text-decoration: none;
  color: #000;
}

.article-header h5 a {
  color: #000;
  text-decoration-color: #ccc;
}

.article-right article a {
  text-decoration: none;
  display: flex;
  color: rgb(51, 51, 51);
  width: 100%;
}

.col ul li a {
  text-decoration: none;
  color: #000;
  text-transform: capitalize;
  font-weight: 500;
  font-size: 14px;
  height: 23px;
  line-height: 16px;
  display: inline-block;
}

.article-header h5 a:hover { text-decoration: none; }

.col ul li a:hover { text-decoration: underline; }

.article-header-date {
  float: left;
  font-size: 14px;
  width: 40%;
}

.article-header-date p { padding-top: 5px; }

.article-header-buttons {
  justify-content: space-between;
  display: flex;
  float: right;
  width: 40%;
}

.bookmark svg { vertical-align: middle; }

.article-header-icon svg:not(.css-ubw31m) {
  vertical-align: middle;
  background-color: #eee;
  border: 1px #eee solid;
  border-radius: 100%;
  padding: 5px;
  width: 15px;
  height: 15px;
}

.article-footer-icon svg:not(.css-ubw31m) {
  vertical-align: middle;
  background-color: #eee;
  border: 1px #eee solid;
  border-radius: 100%;
  padding: 5px;
  width: 15px;
  height: 15px;
}

.article-footer-icon svg:hover {
  background-color: #fff;
  border: 1px solid #ccc;
}

.article-header-icon svg:not(.css-ubw31m):hover {
  background-color: #fff;
  border: 1px solid #ccc;
}

.css-4brsb6:hover { background-color: #000; }

.comments {
  background-image: url("https://img.icons8.com/small/32/000000/topic--v1.png");
  font-size: 12px;
  width: 30px;
  text-align: center;
}

.subs-col-form span {
  color: #999;
  font-size: 0.7em;
}

.article-image-caption { width: 80%; }

.article-image-caption span {
  font-family: nyt-imperial, georgia, 'times new roman', times, serif;
  color: #666;
  max-width: 70vw;
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.25rem;
}

.article-image-caption span:last-child {
  color: #888;
  font-size: 0.8125rem;
}

.article-text p { margin-bottom: 0.9375rem; }

.article-text h3 {
  margin-bottom: 0.9375rem;
  margin-top: 0.9375rem;
}

.col h3 {
  color: rgb(51, 51, 51);
  font-size: 13px;
  font-weight: 700;
  height: 25px;
  line-height: 15px;
  text-transform: uppercase;
  width: 150px;
}

.article-right article a h3 {
  font-size: 14px;
  margin: auto 0 auto 10px;
  font-weight: 500;
}

.article-frame .frame-header h3 {
  font-size: 20px;
  margin-bottom: 3px;
}

.subs-col p {
  color: #666;
  font-size: 15px;
}

.article-frame .frame-header p { color: #666; }

.article-frame .frame-grid p {
  font-weight: 200;
  line-height: 17px;
  width: 228px;
  max-height: 137px;
}

.article-frame .frame-grid p span {
  font-weight: bold;
  font-size: 11px;
  padding-right: 10px;
}

.article-frame .frame-grid h3 { font-weight: bold; }

.article-frame .frame-grid .g1 {
  grid-column: 1/2;
  grid-row: 2/3;
}

.article-frame .frame-grid .g2 {
  grid-column: 2/3;
  grid-row: 2/3;
}

.article-frame .frame-grid .g3 {
  grid-column: 3/4;
  grid-row: 2/3;
}

.article-frame .frame-grid .g4 {
  grid-column: 4/5;
  grid-row: 2/3;
}

.article-frame .frame-grid .g5 {
  grid-column: 1/2;
  grid-row: 4/5;
}

.article-frame .frame-grid .g6 {
  grid-column: 2/3;
  grid-row: 4/5;
}

.article-frame .frame-grid .g7 {
  grid-column: 3/4;
  grid-row: 4/5;
}

.article-frame .frame-grid .g8 {
  grid-column: 4/5;
  grid-row: 4/5;
}

.article-video {
  max-width: 600px;
  width: calc(100% - 40px);
  margin: 0 auto 16px;
}

.article-video video {
  width: 100%;
  top: 0;
  left: 0;
}

.inarticle-image {
  max-width: 600px;
  width: calc(100% - 40px);
  margin: 0 auto 16px;
}

.inarticle-image figure,
.inarticle-image figure img {
  width: 100%;
}

.inarticle-image h1 {
  font-family: nyt-cheltenham, georgia, 'times new roman', times, serif;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  width: 70%;
  position: relative;
  line-height: 3rem;
  font-weight: 700;
  font-style: italic;
  vertical-align: baseline;
}

.footer-comments button {
  width: 100%;
  height: 35px;
  color: #fff;
  background-color: rgb(98, 136, 165);
  border: 1px solid rgb(50, 104, 145);
}

.text-section aside button {
  background: rgb(98, 136, 165) none repeat scroll 0% 0%;
  border: 1px solid rgb(98, 136, 165);
  border-radius: 4px;
  color: #fff;
  height: 35px;
  font-size: 13px;
  font-style: normal;
  line-height: 13px;
  font-weight: 700;
  padding: 10px;
  text-transform: uppercase;
  width: 100%;
  margin: 0;
}

.article-text-aside {
  width: 1200px;
  margin: 0 auto;
}

.text-section {
  display: flex;
}

.text-left {
  max-width: 600px;
  width: calc(100% - 40px);
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-family: nyt-imperial, georgia, 'times new roman', times, serif;
  color: #333;
  margin-left: calc((100% - 600px) / 2);
}

.aside-subs {
  display: flex;
  width: 180px;
  flex-direction: column;
  justify-content: center;
  margin: 0 20px 0 auto;
  font-family: nyt-franklin, helvetica, arial, sans-serif;
}

.aside-editors {
  display: flex;
  width: 210px;
  flex-direction: column;
  justify-content: center;
  margin: 0 10px 0 auto;
  font-family: nyt-cheltenham, georgia, 'times new roman', times, serif;
}

.aside-editors h4 {
  padding-bottom: 12px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgb(226, 226, 226);
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 14px;
  font-weight: 700;
  font-family: nyt-franklin, helvetica, arial, sans-serif;
}

.article-right article { margin-bottom: 20px; }

.article-right article:hover { text-decoration: underline; }

.article-right article a div img { width: 75px; }

.text-left-h {
  font-size: 1.125rem;
  line-height: 1.5rem;
  max-width: 180px;
  margin-bottom: 5px;
}

.text-left-p {
  max-width: 180px;
  font-style: normal;
  font-weight: 500;
  margin-left: 0;
  font-size: 0.8125rem;
  line-height: 1rem;
  color: rgb(102, 102, 102);
  margin-bottom: 10px;
}

.article-text,
.article-header {
  width: calc(100% - 40px);
  max-width: 600px;
  font-size: 1.25rem;
  line-height: 1.875rem;
  font-family: nyt-imperial, georgia, 'times new roman', times, serif;
  color: #333;
  margin: 0 auto 16px;
}

.article-frame {
  font-family: nyt-franklin, arial, helvetica, sans-serif;
  font-size: 14px;
  width: 945px;
  height: 752px;
  margin: 0 auto;
}

.article-frame .frame-header {
  font-family: nyt-cheltenham-sh, georgia, times new roman, times, serif;
  font-size: 14px;
  height: 62px;
  margin-bottom: 10px;
}

.article-frame .frame-grid {
  background-image: url(https://static01.nyt.com/newsgraphics/2014/03/18/theory-of-inflation/1ebaa1b972edda0f407fbaa0e010f6b50fb6792e/inflation-945.png);
  background-size: contain;
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 25% 25% 25% 25%;
  width: 100%;
  height: 576px;
}

.frame-footer::before {
  content: '';
  width: 60px;
  border-top: 1px solid #333;
  display: inline-block;
  margin: 0 0 13px;
}

.article-frame .frame-footer {
  color: #333;
  height: 36px;
  margin-top: 24px;
}

.footer::before {
  border-top: 2px solid rgb(226, 226, 226);
  content: "";
  height: 2px;
  display: block;
  margin-top: 0;
  border-bottom: 1px solid rgb(226, 226, 226);
}

.footer {
  max-width: 1200px;
  margin: 0 auto 25px;
  padding-bottom: 20px;
}

.footer-logo-img {
  width: 184px;
  height: 44px;
  vertical-align: middle;
  display: block;
}

.footer-logo { position: relative; }

.home-page-link {
  position: absolute;
  bottom: 0;
  right: 0;
  text-decoration: none;
  color: rgb(98, 136, 165);
  font-size: 11px;
  font-family: nyt-franklin, helvetica, arial, sans-serif;
}

.article-footer {
  display: flow-root;
  width: calc(100% - 40px);
  max-width: 600px;
  font-size: 0.75rem;
  line-height: 1.875rem;
  font-family: nyt-imperial, georgia, 'times new roman', times, serif;
  color: #999;
  margin: 0 auto 1em;
}

.footer-link {
  text-decoration: none;
  color: #999;
}

.footer-comments {
  float: left;
  width: 60%;
  margin-top: 15px;
}

.footer-comments button:hover { background-color: rgb(50, 104, 145); }

.footer-col {
  display: flex;
  justify-content: space-between;
  font-family: nyt-franklin, helvetica, arial, sans-serif;
}

.col { margin-top: 15px; }

.footer-col .col { width: calc(100% / 6); }

.footer-col div:last-child {
  border-left: 1px solid rgb(226, 226, 226);
  padding-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 0%;
}

.most-popular .content .content-item a {
  font-family: nyt-cheltenham, georgia, "times new roman", times, serif;
  text-decoration: none;
  color: #121212;
  font-weight: 400;
}

.footer-col div:last-child ul:nth-last-child(-n+2) li a {
  font-size: 11px;
  vertical-align: baseline;
}

.col ul { list-style: none; }

.footer-col div:last-child ul:last-child {
  border-top: 1px solid rgb(226, 226, 226);
  padding: 10px 0 0;
  margin: 2px 0 0;
}

.footer-col div:last-child ul:nth-child(2) li { margin-bottom: 5px; }

.footer-col div:last-child ul:nth-child(2) li a {
  font-weight: bold;
  font-size: 16px;
}

.footer-col div:last-child ul:nth-child(2) svg { padding-right: 8px; }

.footer-col div:last-child h3 {
  font-size: 13px;
  margin-bottom: 5px;
}

.social-share-btn {
  float: right;
  margin: 15px auto 10px;
  width: 30%;
  display: flex;
  justify-content: space-between;
}

.article-footer-buttons {
  justify-content: space-between;
  display: flex;
  float: right;
  width: 100%;
}

.footer-subscribe {
  display: flex;
  font-family: nyt-franklin, helvetica, arial, sans-serif;
  max-width: 1200px;
  border-top: 1px solid #000;
  margin: 40px auto 20px;
  padding-top: 22px;
  justify-content: space-between;
}

.subs-col {
  width: 50%;
}

.subs-col h2 {
  padding-bottom: 15px;
  font-size: 18px;
}

.subs-col-form {
  display: grid;
  width: 45%;
}

.subs-col-form form { position: relative; }

.subs-col-form input[type="email"] {
  height: 30px;
  width: 79%;
  padding: 3px 0;
  border-radius: 4px;
  border: 1px solid #e2e2e2;
}

.subs-col-form input[type="button"] {
  height: 38px;
  max-width: 173px;
  width: 100%;
  background: rgb(98, 136, 165);
  color: #fff;
  position: absolute;
  right: 0;
  border: 1px solid rgb(50, 104, 145);
  border-radius: 0 4px 4px 0;
  font-weight: bold;
}

.subs-col-form input[type="checkbox"] {
  margin: 5px 10px 10px 0;
}

.related-title {
  margin: 15px auto 20px;
}

.related {
  display: flex;
  max-width: 1200px;
  margin: 20px auto 20px;
}

.related-left {
  width: 80%;
  max-width: 852px;
}

.related-right {
  width: calc(-38.3333px + 33.3333vw);
}

.related-article-title {
  font-family: nyt-cheltenham, georgia, "times new roman", times, serif;
}

.related-article-date {
  font-family: nyt-franklin, helvetica, arial, sans-serif;
  color: rgb(153, 153, 153);
  letter-spacing: 0.3px;
  font-size: 0.75rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.content-header {
  border-top: 1px solid #000;
  margin: 15px auto 20px;
  padding-top: 15px;
}

.most-popular .content {
  display: flex;
  flex-direction: column;
  height: calc(100% - 75px);
  justify-content: space-between;
}

.col:not(.most-popular) .content {
  display: flex;
  flex-wrap: wrap;
}

.most-popular .content .content-item {
  width: 100%;
  border-top: 1px solid rgb(226, 226, 226);
  padding: 15px 0;
}

.col:not(.most-popular) .content .content-item {
  width: calc((100% - 30px) / 3);
  padding: 5px 10px 0 0;
}

.content-item-figcap {
  color: rgb(153, 153, 153);
  text-align: right;
  line-height: 1.23em;
  font-size: 0.625rem;
  margin: 3px 0 0;
}

.col.editors-pick {
  border-top: 1px solid #000;
  margin-top: 20px;
}

.most-popular {
  margin-left: 10%;
  height: 100%;
}