@charset "UTF-8";
/*!
Theme Name:  _csalmeida.
Theme URI: http://www.csalmeida.com
Author: Cristiano Almeida
Author URI: http://www.csalmeida.com
Description: -
Version: -
License: -
License URI: -
Tags: black,  white,  black,  green,  three-columns,  flexible-width,  responsive,  custom,  csalmeida
Text Domain: csalmeida, zine
*/
:root {
    --base: hsl(0,  0%,  100%);
    --base-h: 0;
    --base-s: 0%;
    --base-l: 100%;
    --base-dark: hsl(0,  0%,  5%);
    --base-dark-h: 0;
    --base-dark-s: 0%;
    --base-dark-l: 5%;
    --primary: hsl(128,  52%,  33%);
    --primary-h: 128;
    --primary-s: 52%;
    --primary-l: 33%;
    --primary-light: hsl(135,  100%,  40%);
    --primary-light-h: 135;
    --primary-light-s: 100%;
    --primary-light-l: 40%;
    --primary-dark: hsl(144,  46%,  30%);
    --primary-dark-h: 144;
    --primary-dark-s: 46%;
    --primary-dark-l: 30%;
    --secondary: hsl(300,  1%,  58%);
    --secondary-h: 300;
    --secondary-s: 1%;
    --secondary-l: 58%;
    --secondary-light: hsl(60,  2%,  90%);
    --secondary-light-h: 60;
    --secondary-light-s: 2%;
    --secondary-light-l: 90%;
    --color-danger: hsl(360,  70%,  50%);
    --color-danger-h: 360;
    --color-danger-s: 70%;
    --color-danger-l: 50%;
    --color-info: hsl(224,  75%,  51%);
    --color-info-h: 224;
    --color-info-s: 75%;
    --color-info-l: 51%
}

[data-theme=dark] {
    --base: hsl(0,  0%,  5%);
    --base-h: 0;
    --base-s: 0%;
    --base-l: 5%;
    --base-dark: hsl(0,  0%,  90%);
    --base-dark-h: 0;
    --base-dark-s: 0%;
    --base-dark-l: 90%;
    --primary: hsl(128,  52%,  38%);
    --primary-h: 128;
    --primary-s: 52%;
    --primary-l: 38%;
    --primary-light: hsl(135,  100%,  40%);
    --primary-light-h: 135;
    --primary-light-s: 100%;
    --primary-light-l: 40%;
    --primary-dark: hsl(144,  46%,  30%);
    --primary-dark-h: 144;
    --primary-dark-s: 46%;
    --primary-dark-l: 30%
}

@font-face {
    font-family: "Roboto Mono";
    src: url(fonts/roboto_mono/RobotoMono-Medium.ttf) format("truetype");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "Roboto Mono";
    src: url(fonts/roboto_mono/RobotoMono-Bold.ttf) format("truetype");
    font-style: bold;
    font-weight: 700;
}
@font-face {
    font-family: Karla;
    src: url(fonts/karla/Karla-Regular.ttf) format("truetype");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: Karla;
    src: url(fonts/karla/Karla-Italic.ttf) format("truetype");
    font-style: italic;
    font-weight: 400;
}
@font-face {
    font-family: Karla;
    src: url(fonts/karla/Karla-Bold.ttf) format("truetype");
    font-style: bold;
    font-weight: 700;
}

.content-spacing {
    padding: 0 19rem;
}

@media screen and (min-width:950px) and (max-width:1439px) {
  .content-spacing {
    padding: 0 9.5rem;
  }
}

@media screen and (max-width:949px) {
  .content-spacing {
    padding: 0 9.5rem;
  }
}

@media screen and (max-width:739px) {
  .content-spacing {
    padding: 0 2.375rem;
  }
}

.post-content.post-type-page {
    padding: 0 2rem;
}

.post-content {
    display: grid;
    grid-template-columns: 1fr min(110ch, 100%) 1fr;
    padding: 0 1rem;
}

.post-content h1, .post-content h2, .post-content h3 h4, .post-content h5, .post-content h6, .post-content p {
    position: relative;
}

.post-content code:not(.hljs) {
    font-family: "Roboto Mono", sans-serif;
    padding: .5rem;
    font-size: 1.6rem;
    background-color: hsl(var(--secondary-light-h), var(--secondary-light-s), calc(var(--secondary-light-l) * 1.05));
    border-radius: .5rem;
}

@media screen and (max-width:949px) {
  .post-content code:not(.hljs) {
      font-size: 1.4rem;
  }
}

@media screen and (max-width:739px) {
  .post-content code:not(.hljs) {
      font-size: 1.2rem;
  }
}

.post-content>* {
    grid-column: 2;
}

.post-content .cs-full-bleed,
.post-content > figure {
    width: 100%;
    grid-column: 1/-1;
    max-width: 1500px;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    margin: 3rem auto;
}

.post-content > :first-child {
    margin-top: 4.6rem;
}

[data-theme=dark] .post-content code:not(.hljs) {
    background-color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 2.2));
}

@media screen and (min-width:1900px) {
  .limit-width {
    max-width: 154rem;
    width: 100%
  }
}

@media screen and (min-width:1900px) {
  .limit-width--center {
    max-width: 154rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.post-content figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 7px;
}

.post-content figure figcaption, .cs-grid-caption {
  font-family: "Roboto Mono", sans-serif;
  font-size: 1.6rem;
  color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .55));
  margin-top: 2.6rem;
  margin-bottom: 0.5rem; /* brings the text a bit closer to the paragraph. */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 0 34.2rem;
}

@media screen and (min-width:1440px) {
  .post-content figure figcaption, .cs-grid-caption {
    padding: 0 38.95rem;
  }
}

@media screen and (min-width:1900px) {
  .post-content figure figcaption, .cs-grid-caption {
    padding: 0 30%
  }
}

@media screen and (min-width:950px) and (max-width:1439px) {
  .post-content figure figcaption, .cs-grid-caption {
    padding: 0 20.9rem;
  }
}

@media screen and (max-width:949px) {
  .post-content figure figcaption, .cs-grid-caption {
    font-size: 1.5rem;
    padding: 0 9.5rem;
  }
}

@media screen and (max-width:739px) {
  .post-content figure figcaption, .cs-grid-caption {
    font-size: 1.4rem;
    padding: 0 0;
  }
}

@media screen and (max-width:497px) {
  .post-content figure figcaption, .cs-grid-caption {
    font-size: 1.2rem;
  }
}

html {
    font-size: 10px;
}

@media (prefers-reduced-motion:no-preference) {
  html {
      scroll-behavior: smooth;
  }
}

body, html {
    width: 100%;
    height: 100%
}
body {
    font-family: Karla, sans-serif;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: auto 1fr auto;
    min-height: 100%;
    background: var(--base);
}

main {
    grid-column: 1/-1;
    align-self: flex-start;
    margin-bottom: 7rem;
}

@media screen and (max-width:949px) {
  main.front-page {
      height: auto;
  }
}

article[class*=post-type-] {
    padding: 0;
    margin: 0 auto;
}

article.front-page {
    display: grid;
    grid-template-columns: minmax(52.5rem, 1fr) 1fr;
    grid-template-rows: auto;
    align-items: center;
    color: var(--base-dark);
}

@media screen and (max-width:949px) {
  article.front-page {
    grid-template-columns: 1fr 1fr;
  }

  article.front-page>section {
    grid-column: 1/-1;
  }
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: Karla, sans-serif;
    color: var(--base-dark);
    margin: 1.6rem 0;
}

.h1, h1 {
    font-size: 3.6rem;
}

@media screen and (max-width:949px) {
  .h1, h1 {
    font-size: 3.4rem;
  }
}

@media screen and (max-width:739px) {
  .h1, h1 {
    font-size: 3.2rem;
  }
}

@media screen and (max-width:497px) {
  .h1, h1 {
    font-size: 2.8rem;
  }
}

.h2, h2 {
  font-size: 3.2rem;
}

@media screen and (max-width:949px) {
  .h2, h2 {
    font-size: 3rem;
  }
}

@media screen and (max-width:739px) {
  .h2, h2 {
    font-size: 2.8rem;
  }
}

@media screen and (max-width:497px) {
  .h2, h2 {
    font-size: 2.6rem;
  }
}

.h3, .h4, .h5, .h6, h3, h4, h5, h6 {
  font-size: 2.8rem;
}

@media screen and (max-width:949px) {
  .h3, .h4, .h5, .h6, h3, h4, h5, h6 {
    font-size: 2.6rem;
  }
}

@media screen and (max-width:739px) {
  .h3, .h4, .h5, .h6, h3, h4, h5, h6 {
    font-size: 2.4rem;
  }
}

@media screen and (max-width:497px) {
  .h3, .h4, .h5, .h6, h3, h4, h5, h6 {
    font-size: 2.2rem;
  }
}

.h4, h4 {
    font-style: italic;
}

.h5, h5 {
    color: var(--secondary);
}

.h6, h6 {
    color: var(--primary);
}

.p, code:not(.hljs), ol, p, ul {
    font-family: Karla, sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    margin: 1.6rem 0;
    color: var(--base-dark);
}

.p:not(ol), .p:not(ul), code:not(.hljs):not(ol), code:not(.hljs):not(ul), ol:not(ol), ol:not(ul), p:not(ol), p:not(ul), ul:not(ol), ul:not(ul) {
  line-height: 3.2rem;
}

@media screen and (max-width:949px) {
  .p, code:not(.hljs), ol, p, ul {
    font-size: 2rem;
  }

  .p:not(ol), .p:not(ul), code:not(.hljs):not(ol), code:not(.hljs):not(ul), ol:not(ol), ol:not(ul), p:not(ol), p:not(ul), ul:not(ol), ul:not(ul) {
    line-height: 3rem;
  }
}

@media screen and (max-width:739px) {
  .p, code:not(.hljs), ol, p, ul {
      font-size: 1.8rem;
  }
  .p:not(ol), .p:not(ul), code:not(.hljs):not(ol), code:not(.hljs):not(ul), ol:not(ol), ol:not(ul), p:not(ol), p:not(ul), ul:not(ol), ul:not(ul) {
    line-height: 2.8rem;
  }
}

@media screen and (max-width:497px) {
  .p, code:not(.hljs), ol, p, ul {
    font-size: 1.6rem;
  }

  .p:not(ol), .p:not(ul), code:not(.hljs):not(ol), code:not(.hljs):not(ul), ol:not(ol), ol:not(ul), p:not(ol), p:not(ul), ul:not(ol), ul:not(ul) {
    line-height: 2.6rem;
  }
}

.cite, cite {
    font-family: Karla, sans-serif;
    font-size: 2rem;
    font-weight: 400;
    line-height: 3rem;
    margin: 2.6rem 0;
    text-justify: inter-word;
    color: var(--base-dark);
}

@media screen and (max-width:949px) {
    .cite, cite {
    font-size: 1.8rem;
    line-height: 2.8rem;
}
}@media screen and (max-width:739px) {
    .cite, cite {
    font-size: 1.6rem;
    line-height: 2.6rem;
}
}@media screen and (max-width:497px) {
    .cite, cite {
    font-size: 1.4rem;
    line-height: 2.4rem;
}
}.link, .link__light, .post-header__call-to-action, [data-theme=dark] .link, [data-theme=dark] a, a {
    text-decoration: underline;
    transition: color .2s ease-in-out;
}
.link:link, .link:visited, .link__light:link, .link__light:visited, .post-header__call-to-action:link, .post-header__call-to-action:visited, [data-theme=dark] a:link, [data-theme=dark] a:visited, a:link, a:visited {
    color: var(--primary);
}
.link:hover, .link__light:hover, .post-header__call-to-action:hover, [data-theme=dark] a:hover, a:hover {
    color: var(--primary-dark);
    text-decoration: underline dashed;
}
.link:active, .link__light:active, .post-header__call-to-action:active, [data-theme=dark] a:active, a:active {
    color: var(--primary-dark);
}
.link__light:link {
    color: var(--base);
}
.link__light:active, .link__light:visited {
    color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * .7));
}
.link__light:hover {
    color: var(--primary-light);
}
[data-theme=dark] .link, [data-theme=dark] .link__light, [data-theme=dark] .post-header__call-to-action, [data-theme=dark] a {
    transition: -webkit-text-fill-color .2s ease-in-out;
    background: -webkit-gradient(linear, left top, right top, from(var(--primary-light)), to(var(--primary)));
    background: linear-gradient(90deg, var(--primary-light), var(--primary));
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    -webkit-text-decoration-color: var(--primary-dark);
    text-decoration-color: var(--primary-dark);
    box-decoration-break: clone;
    text-shadow: none;
}
[data-theme=dark] .link:hover, [data-theme=dark] .link__light:hover, [data-theme=dark] .post-header__call-to-action:hover, [data-theme=dark] a:hover {
    -webkit-text-decoration-color: var(--primary-dark);
    text-decoration-color: var(--primary-dark);
}
[data-theme=dark] .article-heading-navigation ul:hover {
    background: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 1.5));
}
[data-theme=dark] .article-heading-navigation li:not(:last-of-type) {
    margin-bottom: 1rem;
}
[data-theme=dark] .article-heading-navigation a {
    color: var(--base-dark);
    -webkit-text-fill-color: var(--base-dark);
}
[data-theme=dark] .article-heading-navigation a:hover {
    background: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .3));
    text-decoration: none;
}
@media screen and (max-width:949px) {
    [data-theme=dark] .article-heading-navigation {
    display: none;
    visibility: hidden;
}
}[data-theme=dark] .post-index {
    color: var(--secondary);
    -webkit-text-fill-color: var(--secondary);
}
[data-theme=dark] .post-index>a {
    background: 0 0;
    color: var(--secondary);
    -webkit-text-fill-color: var(--secondary);
    text-decoration: none;
}
[data-theme=dark] .post-index>a:hover {
    color: var(--secondary);
}
[data-theme=dark] #logo a, [data-theme=dark] .header a {
    background: 0 0;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: var(--base-dark);
    -webkit-box-decoration-break: slice;
    box-decoration-break: slice;
    text-shadow: none;
}
[data-theme=dark] #logo a:hover, [data-theme=dark] .header a:hover {
    text-decoration: none;
}
[data-theme=dark] #logo span {
    -webkit-text-fill-color: var(--secondary);
}
[data-theme=dark] #logo:hover span {
    -webkit-text-fill-color: var(--primary-light);
}
@media screen and (max-width:949px) {
    [data-theme=dark] .header, [data-theme=dark] .header.--post {
    background: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 1.2));
}
}[data-theme=dark] .header nav a, [data-theme=dark] .header nav a:link, [data-theme=dark] .header nav a:visited, [data-theme=dark] .header.--post nav a, [data-theme=dark] .header.--post nav a:link, [data-theme=dark] .header.--post nav a:visited {
    color: var(--base-dark);
    border-color: var(--base-dark);
}
[data-theme=dark] .header nav a:hover, [data-theme=dark] .header.--post nav a:hover {
    color: var(--primary-light);
    -webkit-text-fill-color: var(--primary-light);
    border-color: var(--primary-light);
}
[data-theme=dark] .header.--post #logo a, [data-theme=dark] .header.--post #logo a:active, [data-theme=dark] .header.--post #logo a:hover, [data-theme=dark] .header.--post #logo a:link, [data-theme=dark] .header.--post #logo a:visited {
    color: var(--base-dark);
}
[data-theme=dark] .post-header__headings {
    background-color: var(--base);
}
[data-theme=dark] .post-header__headings h1, [data-theme=dark] .post-header__headings h2 {
    color: var(--base-dark);
}
[data-theme=dark] .post-header__category {
    background-color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 1.6));
}
[data-theme=dark] .post-header__category p, [data-theme=dark] .post-header__category time {
    color: var(--secondary);
}
[data-theme=dark] .cs-button-url.cs-button-icon:link, [data-theme=dark] .cs-button-url.cs-button-icon:visited, [data-theme=dark] .cs-button-url.cs-button-icon__light:link, [data-theme=dark] .cs-button-url.cs-button-icon__light:visited, [data-theme=dark] .icon-url:link, [data-theme=dark] .icon-url:visited, [data-theme=dark] .icon-url__light:link, [data-theme=dark] .icon-url__light:visited {
    color: var(--base-dark);
    -webkit-text-fill-color: var(--base-dark);
}
[data-theme=dark] .cs-button-url.cs-button-icon:hover, [data-theme=dark] .cs-button-url.cs-button-icon__light:hover, [data-theme=dark] .icon-url:hover, [data-theme=dark] .icon-url__light:hover {
    color: var(--primary-light);
    -webkit-text-fill-color: var(--primary-light);
}
[data-theme=dark] .cs-button-url.cs-button-icon:active, [data-theme=dark] .cs-button-url.cs-button-icon__light:active, [data-theme=dark] .icon-url:active, [data-theme=dark] .icon-url__light:active {
    color: var(--primary);
    -webkit-text-fill-color: var(--primary);
}
[data-theme=dark] .footer {
    background: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 1.5));
    color: var(--base-dark);
}
[data-theme=dark] .footer h1 {
    color: var(--base-dark);
}
[data-theme=dark] .footer .link__light:link {
    color: var(--base-dark);
    -webkit-text-fill-color: var(--base-dark);
    -webkit-text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
}
[data-theme=dark] .footer .link__light:active, [data-theme=dark] .footer .link__light:visited {
    color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    -webkit-text-fill-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    -webkit-text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
}
[data-theme=dark] .footer .link__light:hover {
    color: var(--primary-light);
    -webkit-text-fill-color: var(--primary-light);
    -webkit-text-decoration-color: var(--primary);
    text-decoration-color: var(--primary);
}
[data-theme=dark] .footer-navigation h2 {
    color: var(--base-dark);
}
[data-theme=dark] .footer-navigation .link:link, [data-theme=dark] .footer-navigation .link__light:link, [data-theme=dark] .footer-navigation .post-header__call-to-action:link, [data-theme=dark] .footer-navigation a:link {
    background: 0 0;
    color: var(--base-dark);
    -webkit-text-fill-color: var(--base-dark);
    -webkit-text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
}
[data-theme=dark] .footer-navigation .link:active, [data-theme=dark] .footer-navigation .link:visited, [data-theme=dark] .footer-navigation .link__light:active, [data-theme=dark] .footer-navigation .link__light:visited, [data-theme=dark] .footer-navigation .post-header__call-to-action:active, [data-theme=dark] .footer-navigation .post-header__call-to-action:visited, [data-theme=dark] .footer-navigation a:active, [data-theme=dark] .footer-navigation a:visited {
    background: 0 0;
    color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    -webkit-text-fill-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    -webkit-text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
    text-decoration-color: hsl(var(--base-dark-h), var(--base-dark-s), calc(var(--base-dark-l) * .7));
}
[data-theme=dark] .footer-navigation .link:hover, [data-theme=dark] .footer-navigation .link__light:hover, [data-theme=dark] .footer-navigation .post-header__call-to-action:hover, [data-theme=dark] .footer-navigation a:hover {
    background: 0 0;
    color: var(--primary-light);
    -webkit-text-fill-color: var(--primary-light);
    -webkit-text-decoration-color: var(--primary);
    text-decoration-color: var(--primary);
}
[data-theme=dark] .footer-version-tag {
    color: var(--base-dark);
}
[data-theme=dark] .cs-button {
    color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * .7));
    background: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .5));
    transition: unset;
}
[data-theme=dark] .cs-button:hover {
    color: var(--base);
    background: -webkit-gradient(linear, left top, right top, from(var(--primary-light)), to(var(--primary)));
    background: linear-gradient(90deg, var(--primary-light), var(--primary));
}
[data-theme=dark] .cs-button-url {
    display: inline-flex;
    -webkit-text-fill-color: var(--base);
    text-decoration: none;
}
[data-theme=dark] .cs-button-url:link, [data-theme=dark] .cs-button-url:visited {
    color: var(--base);
}
[data-theme=dark] .cs-button-url:hover {
    color: var(--base);
    text-decoration: none;
}
[data-theme=dark] .cs-button-url:active {
    color: var(--base);
}
[data-theme=dark] .cs-button-icon, [data-theme=dark] .cs-button-icon__light {
    color: unset;
    background-color: unset;
    padding: unset;
    min-width: unset;
}
[data-theme=dark] .cs-button-icon:hover, [data-theme=dark] .cs-button-icon__light:hover {
    color: var(--primary-light);
    background: unset;
}
[data-theme=dark] .cs-button-icon__light {
    color: var(--base-dark);
}
[data-theme=dark] .cs-button-icon__light:hover {
    color: var(--primary-light);
}
[data-theme=dark] .post-content figure figcaption, [data-theme=dark] .cs-grid-caption {
    color: var(--secondary);
}
[data-theme=dark] .post-item {
    background-color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 1.6));
}
[data-theme=dark] .post-item:active, [data-theme=dark] .post-item:focus, [data-theme=dark] .post-item:hover {
    background-color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 1.8));
}
[data-theme=dark] .posts .posts__timeline-bar {
    background: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .8));
}
.article-heading-navigation {
    position: absolute;
    right: 5%;
    margin-top: 1rem;
    z-index: 1;
}
.article-heading-navigation ul {
    position: sticky;
    top: 10%;
    list-style-type: none;
    padding-left: 0;
    border-radius: .8rem;
    padding: .8rem .5rem;
    transition: background-color .2s;
}
.article-heading-navigation ul:hover {
    background: var(--secondary-light);
}
.article-heading-navigation li:not(:last-of-type) {
    margin-bottom: 1rem;
}
.article-heading-navigation a {
    display: block;
    font-size: 2rem;
    font-family: "Roboto Mono", sans-serif;
    color: var(--base-dark);
    text-decoration: none;
    padding: .5rem;
    border-radius: .8rem;
}
.article-heading-navigation a:hover {
    background: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * 1.3));
}
@media screen and (max-width:949px) {
    .article-heading-navigation {
    display: none;
    visibility: hidden;
}
}.post-index {
    display: inline-block;
    font-family: "Roboto Mono", sans-serif;
    font-size: 3.3rem;
    color: var(--secondary);
    cursor: default;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    position: absolute;
    top: .6rem;
    margin-left: -6rem;
}
@media screen and (max-width:949px) {
    .post-index {
    font-size: 2.8rem;
    margin-left: -4.4rem;
}
}@media screen and (max-width:739px) {
    .post-index {
    font-size: 2.5rem;
    margin-left: -3.8rem;
}
}@media screen and (max-width:497px) {
    .post-index {
    display: none;
}
}.post-index>a {
    text-decoration: none;
}
.post-index>a:hover {
    color: var(--secondary);
}
.cs-button {
    font-family: Karla, sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    text-align: left;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .7));
    background-color: var(--secondary-light);
    border: none;
    border-radius: .5rem;
    padding: 1.2rem 1.5rem;
    min-width: 15rem;
    transition: color .2s ease-in-out, background-color .2s ease-in-out;
    display: flex;
    align-items: center;
}
.cs-button:hover {
    color: var(--base);
    background-color: var(--primary);
    cursor: pointer;
}
.cs-button-span-margin-left {
    margin-left: .6rem;
}
.cs-button-span-margin-right {
    margin-right: .8rem;
}
.cs-button-url {
    display: inline-flex;
    min-width: 12rem;
    text-decoration: none;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .7));
}
.cs-button-url:link, .cs-button-url:visited {
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .7));
}
.cs-button-url:hover {
    color: var(--base);
    text-decoration: none;
}
.cs-button-url:active {
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .7));
}
.cs-button-icon, .cs-button-icon__light {
    display: inline-flex;
    color: unset;
    background-color: unset;
    padding: unset;
    min-width: unset;
}
.cs-button-icon:hover, .cs-button-icon__light:hover {
    color: var(--primary);
    background-color: unset;
}
.cs-button-icon__light {
    color: var(--base);
}
.cs-button-icon__light:hover {
    color: var(--primary-light);
}
.cs-code {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.8rem;
}
@media screen and (min-width:1366px) {
    .cs-code {
    max-width: 50vw;
}
}@media screen and (min-width:1440px) {
    .cs-code {
    font-size: 1.8rem;
    line-height: 2.6rem;
    max-width: 57vw;
}
}@media screen and (min-width:1900px) {
    .cs-code {
    font-size: 1.8rem;
    line-height: 2.8rem;
    width: 100%}
}@media screen and (min-width:950px) and (max-width:1365px) {
    .cs-code {
    max-width: 65vw;
}
}@media screen and (max-width:949px) {
    .cs-code {
    font-size: 1.4rem;
    line-height: 2.4rem;
    max-width: 80vw;
}
}@media screen and (max-width:739px) {
    .cs-code {
    font-size: 1.4rem;
    line-height: 2.2rem;
    max-width: 94vw;
}
}@media screen and (max-width:497px) {
    .cs-code {
    font-size: 1.2rem;
    line-height: 2rem;
}
}.cs-code code {
    padding: 1.5rem 2.5rem;
    border-radius: .7rem;
}
@media screen and (max-width:949px) {
    .cs-code code {
    padding: 1rem 1.5rem;
}
}

.footer {
    grid-column: 1/-1;
    align-self: flex-start;
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(3, auto);
    font-family: Karla, sans-serif;
    background: var(--base-dark);
    padding: 5.5rem 19rem;
    padding-bottom: 5.5rem;
    color: var(--base);
}

@media screen and (min-width:950px) and (max-width:1439px) {
  .footer {
    padding: 5.5rem 9.5rem;
  }
}

@media screen and (max-width:949px) {
  .footer {
    padding: 5.5rem 9.5rem;
    padding-bottom: 15rem;
  }
}

@media screen and (max-width:739px) {
  .footer {
    grid-template-columns: repeat(1, auto);
    grid-template-rows: repeat(3, auto);
    padding: 5.5rem 4.75rem;
    padding-bottom: 5rem;
  }
}

.footer h1, .footer>section {
  grid-column: 1/-1;
}

.footer>section {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, auto);
  margin-bottom: 5rem;
}

@media screen and (min-width:1900px) {
  .footer>section {
  justify-self: center;
  width: 100%}
}

@media screen and (max-width:949px) {
  .footer>section {
      margin-bottom: 0;
  }
}

@media screen and (max-width:739px) {
  .footer>section {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(4, auto);
  }
}

.footer h1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-self: center;
  color: var(--base);
  font-family: Karla, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  text-align: center;
}

.footer h1 span {
  margin: 0 1rem;
}

.footer h1 span .icon {
    stroke: var(--primary-light);
}

.footer h1 address {
    font-style: normal;
    margin-right: .5rem;
}

@media screen and (max-width:949px) {
  .footer h1 {
    font-size: 1.8rem;
    line-height: 2.5rem;
  }
}

@media screen and (max-width:739px) {
  .footer h1 {
    flex-direction: column;
    line-height: 2rem;
    font-size: 1.6rem;
  }

  .footer h1 span {
    margin: .5rem 0 0 0;
    padding: 0;
  }

  .footer h1 span .icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}

.footer-navigation h2 {
    color: var(--base);
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
}
.footer-navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.footer-navigation li {
    font-size: 2rem;
    margin: 0 0 .5rem 0;
}
.footer-navigation li:last-of-type {
    margin-bottom: 0;
}
@media screen and (max-width:949px) {
    .footer-navigation h2, .footer-navigation li {
    font-size: 1.8rem;
}
}@media screen and (max-width:739px) {
    .footer-navigation {
    margin: 0 0 3.5rem 0;
}
.footer-navigation h2, .footer-navigation li {
    font-size: 1.6rem;
}
}.footer-version-tag {
    font-size: 1rem;
    color: var(--base);
}
@media screen and (min-width:1900px) {
    .footer-version-tag {
    justify-self: center;
    grid-column: 2/2;
}
}@media screen and (max-width:949px) {
    .footer-version-tag {
    text-align: center;
    grid-column: 2/2;
}
}@media screen and (max-width:739px) {
    .footer-version-tag {
    grid-column: 1/-1;
}
}

.header {
  grid-column: 1/-1;
  align-self: flex-start;
  width: 100%;
  padding: 3rem 0;
  background: var(--base);
}

@media screen and (max-width:949px) {
  .header {
      padding: 1.5rem 0;
  }
}

.header>div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#logo {
    font-size: 3.5rem;
    font-weight: 700;
    font-family: "Roboto Mono", sans-serif;
    line-height: 4.6rem;
    margin: 0;
}

#logo span {
    color: var(--secondary);
    font-weight: 700;
    transition: color .2s ease-out;
}

#logo a, #logo a:active, #logo a:hover, #logo a:link, #logo a:visited {
    text-decoration: none;
    color: var(--base-dark);
}

@media screen and (max-width:949px) {
    #logo {
    display: none;
}
}
#logo:hover span {
    color: var(--primary-light);
}

.header nav {
    display: flex;
    align-self: center;
}

.header nav ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    padding-left: 0;
}

.header nav ul li:not(:last-of-type) {
  margin-right: 2rem;
}

.header nav li {
    font-size: 2.1rem;
}

.header nav a, .header nav a:link, .header nav a:visited {
    font-family: Karla, sans-serif;
    text-decoration: none;
    color: var(--base-dark);
    font-weight: 700;
    border: .4rem solid var(--base-dark);
    border-radius: 7px;
    display: inline-block;
    padding: .15rem .6rem;
    min-width: 12rem;
    transition: all .2s ease;
}

.header nav a:hover {
    color: var(--primary);
    border-color: var(--primary);
}

@media screen and (max-width:949px) {
    .header nav {
      width: 100%
    }

    .header nav ul {
      width: 100%;
      flex-direction: row;
      justify-content: start;
      align-items: center;
    }

    .header nav li {
      font-size: 1.8rem;
    }
}

@media screen and (max-width:739px) {
  .header nav li {
      font-size: 1.6rem;
  }
}

@media screen and (max-width:497px) {
  .header nav li {
      font-size: 1.4rem;
  }

  .header nav a, .header nav a:link, .header nav a:visited {
      border: .2rem solid;
      min-width: 7rem;
  }
  .header nav ul li:not(:last-of-type) {
    margin-right: .5rem ;
  }
}

@media screen and (max-width:374px) {
    .header nav li {
      font-size: 1.2rem;
  }
  .header nav a, .header nav a:link, .header nav a:visited {
      min-width: 5.5rem;
  }
}

.header.--post {
    background: 0 0;
    position: absolute;
}

.header.--post nav a:hover {
    color: var(--primary-light);
    border-color: var(--primary-light);
}
.heading, .heading__page, .heading__tagline {
    font-family: Karla, sans-serif;
    color: var(--base-dark);
    font-weight: 700;
    font-size: 3.6rem;
}
.heading__tagline {
    font-size: 3.8rem;
}
.heading__page {
    font-family: "Roboto Mono", sans-serif;
    color: var(--secondary);
    font-size: 9rem;
    text-transform: uppercase;
}
@media screen and (max-width:739px) {
    .heading__page {
    font-size: 6rem;
}
}.icon {
    width: 2.8rem;
    height: 2.8rem;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.cs-button-url.cs-button-icon, .cs-button-url.cs-button-icon__light, .icon-url, .icon-url__light {
    text-decoration: none;
    transition: all .4s ease-out;
}
.cs-button-url.cs-button-icon:link, .cs-button-url.cs-button-icon:visited, .cs-button-url.cs-button-icon__light:link, .cs-button-url.cs-button-icon__light:visited, .icon-url:link, .icon-url:visited, .icon-url__light:link, .icon-url__light:visited {
    color: var(--base-dark);
}
.cs-button-url.cs-button-icon:hover, .cs-button-url.cs-button-icon__light:hover, .icon-url:hover, .icon-url__light:hover {
    color: var(--primary);
}
.cs-button-url.cs-button-icon:active, .cs-button-url.cs-button-icon__light:active, .icon-url:active, .icon-url__light:active {
    color: var(--primary-darker);
}
.cs-button-url.cs-button-icon__light:link, .cs-button-url.cs-button-icon__light:visited, .icon-url__light:link, .icon-url__light:visited {
    color: var(--base);
}
.cs-button-url.cs-button-icon__light:hover, .icon-url__light:hover {
    color: var(--primary-light);
}
.cs-button-url.cs-button-icon__light:active, .icon-url__light:active {
    color: var(--primary-light);
}
.icon-button {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 1rem;
}
.icon-dark-mode:hover {
    cursor: pointer;
}
.post-header {
    display: grid;
    grid-template-rows: 5fr 1fr;
}
@media screen and (max-width:739px) {
    .post-header {
    grid-template-rows: 1.6fr auto;
}
}.post-header__headings {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20vh repeat(2, .3fr);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 30%;
    background-color: hsl(var(--secondary-light-h), var(--secondary-light-s), calc(var(--secondary-light-l) * 1.05));
    padding-bottom: 6rem;
}
@media screen and (max-width:949px) {
    .post-header__headings .post-heading.h1 {
    font-size: 3.4rem;
}
}@media screen and (max-width:739px) {
    .post-header__headings .post-heading.h1 {
    font-size: 3.2rem;
}
}@media screen and (max-width:497px) {
    .post-header__headings .post-heading.h1 {
    font-size: 2.8rem;
}
}@media screen and (min-width:1366px) and (max-width:1899px) {
    .post-header__headings .post-heading.h1 {
    font-size: 5.5rem;
}
}@media screen and (min-width:1900px) {
    .post-header__headings .post-heading.h1 {
    font-size: 5.5rem;
}
}.post-header__headings h1, .post-header__headings h2 {
    color: var(--base-dark);
    grid-column: 1;
}
.post-header__headings h1 {
    grid-row: 2;
    margin: 0;
    margin-top: 5rem;
}
.post-header__headings h2 {
    grid-row: 3;
    margin-bottom: 0;
    text-align: left;
}
@media screen and (min-width:498px) {
    .post-header__headings {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
}@media screen and (min-width:740px) {
    .post-header__headings {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.post-header__headings h2 {
    margin-bottom: 3rem;
}
}@media screen and (min-width:1440px) {
    .post-header__headings {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0rem repeat(2, .3fr);
    padding-bottom: 6rem;
}
}@media screen and (min-width:1900px) {
    .post-header__headings {
    grid-template-columns: 154rem;
    grid-template-rows: 0rem repeat(2, .3fr);
    justify-content: center;
    padding-bottom: 6rem;
}
.post-header__headings h1, .post-header__headings h2 {
    max-width: 50%}
}@media screen and (max-width:1365px) {
    .post-header__headings {
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: 0rem repeat(2, .3fr);
    padding-bottom: 6rem;
}
}@media screen and (max-width:949px) {
    .post-header__headings {
    grid-template-columns: .8fr;
    grid-template-rows: .2fr repeat(2, .3fr);
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.post-header__headings h1 {
    margin-top: 0;
}
}.post-header__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: .3fr;
}
@media screen and (min-width:1900px) {
    .post-header__meta {
    grid-template-columns: 77rem 77rem;
    justify-content: center;
}
}@media screen and (max-width:1365px) {
    .post-header__meta {
    grid-template-columns: 1.7fr 1fr;
}
}@media screen and (max-width:739px) {
    .post-header__meta {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, .3fr);
}
}@media screen and (max-width:739px) {
    .post-header__meta.content-spacing {
    padding-top: 0;
    padding-bottom: 0;
}
}.post-header__category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 3rem;
    background-color: hsl(var(--secondary-light-h), var(--secondary-light-s), calc(var(--secondary-light-l) * 1.05));
    border-radius: 0 0 1rem 1rem;
}
.post-header__category time, .post-header__category>p {
    font-family: "Roboto Mono", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    margin: 0;
}
@media screen and (max-width:949px) {
    .post-header__category time, .post-header__category>p {
    font-size: 1.4rem;
}
}.post-header__category time {
    color: var(--secondary);
}
@media screen and (max-width:949px) {
    .post-header__category {
    padding: 1rem 2rem;
}
}.post-header__call-to-action {
    font-family: "Roboto Mono", sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--base-dark);
    text-decoration: underline;
    text-transform: uppercase;
    align-self: center;
    justify-self: flex-end;
}
.post-header__call-to-action:link, .post-header__call-to-action:visited {
    color: var(--base-dark);
}
.post-header__call-to-action:hover {
    text-decoration: wavy underline;
}
@media screen and (max-width:949px) {
    .post-header__call-to-action {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, .3fr);
    font-size: 1.6rem;
    padding: 2rem 3rem;
}
}@media screen and (max-width:739px) {
    .post-header__call-to-action {
    font-size: 1.4rem;
}
}.post-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 6rem;
    min-height: 32rem;
    overflow: hidden;
    position: relative;
    transition: all .2s ease-in-out;
}
.post-item__meta {
    grid-column-start: 1;
    grid-column-end: 2;
    align-self: flex-end;
    padding: 0 0 2rem 2rem;
}
.post-item__meta h2, .post-item__meta h3 {
    font-size: 2.8rem;
    line-height: 3.27rem;
}
.post-item__meta p {
    font-size: 1.8rem;
    line-height: 2rem;
}
.post-item__meta a {
    font-family: "Roboto Mono", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: underline;
}
.post-item__thumbnail {
    grid-column-start: 2;
    grid-column-end: -1;
    grid-row: 1/-1;
    object-fit: cover;
    min-height: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
    display: block;
    position: absolute;
    top: 50%;
    left: 50%}
@media screen and (min-width:1900px) {
    .post-item {
    min-height: 45rem;
}
.post-item__meta {
    padding: 0 0 3rem 3rem;
}
.post-item__meta h2, .post-item__meta h3 {
    font-size: 3.8rem;
    line-height: 4.27rem;
}
.post-item__meta p {
    font-size: 2.25rem;
    line-height: 2.8rem;
}
.post-item__meta a {
    font-size: 1.8rem;
    font-weight: 700;
}
}@media screen and (max-width:949px) {
    .post-item {
    grid-template-columns: 4fr 1fr;
    gap: 2rem;
    min-height: 18.5rem;
    margin-bottom: 3rem;
}
.post-item__meta {
    padding: 0 0 1.5rem 1.5rem;
    align-self: flex-start;
}
.post-item__meta h2, .post-item__meta h3 {
    font-size: 2.8rem;
    line-height: 3.27rem;
}
.post-item__meta p {
    font-size: 2rem;
    line-height: 2.8rem;

    /* Truncates description contents: */
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* however many lines you want */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-item__meta a {
    font-size: 1.8rem;
}
}@media screen and (max-width:497px) {
    .post-item {
    grid-template-columns: 4fr 1fr;
    gap: 3rem;
    min-height: 13rem;
}
.post-item__meta {
    padding: 1rem 0 1rem 1rem;
}
.post-item__meta h2, .post-item__meta h3 {
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 0 auto 1rem auto;
}
.post-item__meta p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin: 1rem auto;
}
.post-item__meta a {
    font-size: 1.2rem;
}
}.post-item.--timeline {
    grid-template-columns: 4fr 1fr;
    gap: 2rem;
    min-height: 18.5rem;
    margin-bottom: 3rem;
}
.post-item.--timeline .post-item__meta {
    padding: 0 0 1.5rem 1.5rem;
    align-self: flex-start;
}
.post-item.--timeline .post-item__meta h2, .post-item.--timeline .post-item__meta h3 {
    font-size: 2.8rem;
    line-height: 3.27rem;
}
.post-item.--timeline .post-item__meta p {
    font-size: 2rem;
    line-height: 2.8rem;
}
.post-item.--timeline .post-item__meta a {
    font-size: 1.8rem;
}
@media screen and (max-width:1439px) {
    .post-item.--timeline {
    grid-template-columns: 4fr 1fr;
    gap: 1rem;
    min-height: 13rem;
}
.post-item.--timeline .post-item__meta {
    padding: 1rem 0 1rem 1rem;
}
.post-item.--timeline .post-item__meta h2, .post-item.--timeline .post-item__meta h3 {
    font-size: 2.2rem;
    line-height: 2.6rem;
    margin: 0 auto 1rem auto;
}
.post-item.--timeline .post-item__meta p {
    font-size: 2rem;
    line-height: 2.4rem;
    margin: 1rem auto;
}
.post-item.--timeline .post-item__meta a {
    font-size: 1.6rem;
}
}@media screen and (max-width:949px) {
    .post-item.--timeline {
    grid-template-columns: 4fr 1fr;
    gap: 1rem;
    min-height: 13rem;
}
.post-item.--timeline .post-item__meta {
    padding: 1rem 0 1rem 1rem;
}
.post-item.--timeline .post-item__meta h2, .post-item.--timeline .post-item__meta h3 {
    font-size: 2rem;
    line-height: 2.2rem;
    margin: 0 auto 1rem auto;
}
.post-item.--timeline .post-item__meta p {
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 1rem auto;
}
.post-item.--timeline .post-item__meta a {
    font-size: 1.4rem;
}
}@media screen and (max-width:739px) {
    .post-item.--timeline {
    grid-template-columns: 4fr 1fr;
    gap: 1rem;
    min-height: 13rem;
}
.post-item.--timeline .post-item__meta {
    padding: 1rem 0 1rem 1rem;
}
.post-item.--timeline .post-item__meta h2, .post-item.--timeline .post-item__meta h3 {
    font-size: 1.6rem;
    line-height: 2rem;
    margin: 0 auto 1rem auto;
}
.post-item.--timeline .post-item__meta p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin: 1rem auto;
}
.post-item.--timeline .post-item__meta a {
    font-size: 1.2rem;
}
}.post-item:active, .post-item:focus, .post-item:hover {
    background-color: hsl(var(--secondary-light-h), var(--secondary-light-s), calc(var(--secondary-light-l) * 1.05));
    cursor: pointer;
}
.posts .posts__list {
    display: grid;
    grid-template-columns: auto 2fr;
    gap: 3rem;
    width: 55%}
@media screen and (max-width:1439px) {
    .posts .posts__list {
    width: 65%}
}@media screen and (max-width:949px) {
    .posts .posts__list {
    width: 100%}
}@media screen and (max-width:739px) {
    .posts .posts__list {
    gap: 1.5rem;
}
}

.posts .posts__timeline-date {
    display: block;
    font-family: "Roboto Mono", sans-serif;
    font-size: 2rem;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .8));
    margin-bottom: 2rem;
}

@media screen and (max-width:739px) {
  .posts .posts__timeline-date {
  font-size: 1.8rem;
  }
}

.posts .posts__timeline-bar {
  background: var(--secondary-light);
  border-radius: 2rem;
  width: .5rem;
  justify-self: flex-end;
}
.cs-skip-link {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  margin: 0!important;
  overflow: hidden!important;
  clip: rect(0 0 0 0)!important;
  -webkit-clip-path: inset(50%)!important;
  clip-path: inset(50%)!important;
  white-space: nowrap!important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  padding: 10px 15px;
  grid-column: 1/-1;
  font-size: 1.8rem;
  line-height: 2.8rem;
}

.cs-skip-link:link, .cs-skip-link:visited {
    color: var(--base);
}

.cs-skip-link:hover {
    color: var(--base);
    text-decoration: underline;
}

.cs-skip-link:active {
    color: var(--base);
}

.cs-skip-link:focus {
    outline: 3px solid var(--primary);
    background-color: var(--primary);
    position: static!important;
    width: auto!important;
    height: auto!important;
    margin: inherit!important;
    overflow: visible!important;
    clip: auto!important;
    -webkit-clip-path: none!important;
    clip-path: none!important;
    white-space: inherit!important;
}

.social-navigation, .social-navigation__admin, .social-navigation__vertical {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-self: end;
  align-self: start;
  height: calc(100vh - (14rem + 7rem));
  list-style-type: none;
  padding: 0;
  margin: 0;
}

@media screen and (max-width:1439px) {
  .social-navigation, .social-navigation__admin, .social-navigation__vertical {
    height: calc(100vh - (14rem + 8rem));
  }
}

@media screen and (max-width:949px) {
  .social-navigation:not(.social-navigation__vertical),
  .social-navigation__admin:not(.social-navigation__vertical),
  .social-navigation__vertical:not(.social-navigation__vertical) {
    display: none;
  }
}

.social-navigation li:not(:last-of-type), .social-navigation__admin li:not(:last-of-type), .social-navigation__vertical li:not(:last-of-type) {
    margin: 0 1.1rem 0 0;
}

.social-navigation__admin {
  height: calc(100vh - (14rem + 9rem + .5rem));
}
.social-navigation__vertical {
  height: auto;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

@media screen and (max-width:739px) {
  .social-navigation__vertical {
    grid-column: -1/span 1;
    grid-row: 1/-1;
    align-self: start;
  }
}

.social-navigation__vertical li:not(:last-of-type) {
    margin: 0 0 1.1rem 0;
}

.subheading, .subheading__light {
    font-family: Karla, sans-serif;
    color: var(--base-dark);
    font-size: 3.2rem;
}

.subheading__light {
    color: var(--secondary);
}

.viewport-indicator {
    position: fixed;
    right: 2%;
    top: 5rem;
    z-index: 10;
    opacity: .1;
    transition: opacity .2s ease-in-out;
}

.viewport-indicator:hover {
    opacity: 1;
}

.viewport-indicator>div {
  display: none;
  padding: 2rem 1rem;
  color: #fff;
  font-size: 2rem;
  border-radius: 1rem;
  background: -webkit-gradient(linear, left top, right top, from(var(--primary-light)), to(var(--primary)));
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
}

@media screen and (min-width:1366px) and (max-width:1439px) {
  .viewport-indicator--laptop {
    display: block!important;
  }
}

@media screen and (min-width:1440px) and (max-width:1899px) {
  .viewport-indicator--desktop {
    display: block!important;
  }
}

@media screen and (min-width:1900px) {
  .viewport-indicator--large-desktop {
    display: block!important;
  }
}

@media screen and (min-width:950px) and (max-width:1365px) {
  .viewport-indicator--tablet {
    display: block!important;
  }
}

@media screen and (min-width:740px) and (max-width:949px) {
  .viewport-indicator--phone {
    display: block!important;
  }
}

@media screen and (min-width:498px) and (max-width:739px) {
  .viewport-indicator--small-phone {
    display: block!important;
  }
}

@media screen and (min-width:375px) and (max-width:497px) {
  .viewport-indicator--extra-small-phone {
    display: block!important;
  }
}

.post-content blockquote {
    margin: 2.6rem 0;
    padding-left: 2rem;
    box-shadow: var(--secondary) 3px 0 0 0 inset;   /* the side line, your colour */
    font-style: italic;
}
.post-content blockquote p {
    margin: 0 0 1rem;
}
/* attribution: the <ul><li> OR a trailing line */
.post-content blockquote ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.post-content blockquote ul li,
.post-content blockquote cite {
    font-family: "Roboto Mono", sans-serif;   /* same as figcaption */
    font-style: normal;
    font-size: 1.6rem;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .55));
}
[data-theme=dark] .post-content blockquote {
    box-shadow: var(--secondary) 3px 0 0 0 inset;
}
[data-theme=dark] .post-content blockquote p {
    color: var(--base-dark);
}
[data-theme=dark] .post-content blockquote ul li,
[data-theme=dark] .post-content blockquote cite {
  color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * 1));
}

.video-embed {
  aspect-ratio: 16 / 9;
  margin: 3.6rem 0;
}
.video-embed iframe { width: 100%; height: 100%; border: 0; border-radius: 7px; }

.cs-grid {
    display: grid;
    gap: 2rem;
    margin: 2.6rem 0;
}

.cs-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* fills its cell uniformly; swap to contain if you'd rather not crop */
    border-radius: 0 !important; /* matches your figure/iframe radius */
    display: block;
}

.cs-grid figure img {
    border-radius: 0 !important; /* matches your figure/iframe radius */
}

.cs-grid figcaption { grid-column: 1 / -1; }

/* 3 across, then 2 across */
.cs-grid--3-2 { grid-template-columns: repeat(6, 1fr); }
.cs-grid--3-2 img:nth-of-type(1),
.cs-grid--3-2 img:nth-of-type(2),
.cs-grid--3-2 img:nth-of-type(3) { grid-column: span 2; }
.cs-grid--3-2 img:nth-of-type(4),
.cs-grid--3-2 img:nth-of-type(5) { grid-column: span 3; }

/* 3 across, then 3 across */
.cs-grid--3-3 { grid-template-columns: repeat(6, 1fr); }
.cs-grid--3-3 img { grid-column: span 2; }

/* 2 on top, 1 centered below */
.cs-grid--2-1 { grid-template-columns: repeat(2, 1fr); }
.cs-grid--2-1 img:nth-of-type(3) { grid-column: 1 / -1; }

/* 1 centered on top, 3 below */
.cs-grid--1-3 { grid-template-columns: repeat(6, 1fr); }
.cs-grid--1-3 img:nth-of-type(1) { grid-column: 1 / -1; }
.cs-grid--1-3 img:nth-of-type(2),
.cs-grid--1-3 img:nth-of-type(3),
.cs-grid--1-3 img:nth-of-type(4) { grid-column: span 2; height: 100%; }

/* 3 centered on top, 1 below */
.cs-grid--3-1 { grid-template-columns: repeat(6, 1fr); }
.cs-grid--3-1 img:nth-of-type(1),
.cs-grid--3-1 img:nth-of-type(2),
.cs-grid--3-1 img:nth-of-type(3) { grid-column: span 2; height: 100%; }
.cs-grid--3-1 img:nth-of-type(4) { grid-column: 1 / -1; }

.cs-grid--1-2 { grid-template-columns: repeat(6, 1fr); }
.cs-grid--1-2 img:nth-of-type(1) { grid-column: 1 / -1; }
.cs-grid--1-2 img:nth-of-type(2),
.cs-grid--1-2 img:nth-of-type(3) { grid-column: span 3; height: 100%; }

.cs-grid--1-2__offset-right { grid-template-columns: repeat(11, 1fr); }
.cs-grid--1-2__offset-right img:nth-of-type(1) { grid-column: 1 / -1; }
.cs-grid--1-2__offset-right img:nth-of-type(2) { grid-column: span 4; height: 100%; }
.cs-grid--1-2__offset-right img:nth-of-type(3) { grid-column: span 7; height: 100%; }

.cs-grid--2-2 { grid-template-columns: repeat(11, 1fr); }
.cs-grid--2-2 img:nth-of-type(1) { grid-column: span 6; height: 100%; }
.cs-grid--2-2 img:nth-of-type(2) { grid-column: span 5; height: 100%; }
.cs-grid--2-2 img:nth-of-type(3) { grid-column: span 5; height: 100%; }
.cs-grid--2-2 img:nth-of-type(4) { grid-column: span 6; height: 100%; }
.cs-grid--2-2 img {
    height: 100% !important;       /* every image the row's height */
}

/* Additional coding styles for Zine to work with syntax highlighting */
.post-content pre code.hljs {
    display: block;
    font-family: "Roboto Mono", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.8rem;
    padding: 1.5rem 2.5rem;
    border-radius: .7rem;
    overflow-x: auto;
}
@media screen and (max-width:949px) {
    .post-content pre code.hljs { font-size: 1.4rem; line-height: 2.4rem; padding: 1rem 1.5rem; }
}
@media screen and (max-width:739px) {
    .post-content pre code.hljs { font-size: 1.4rem; line-height: 2.2rem; }
}
@media screen and (max-width:497px) {
    .post-content pre code.hljs { font-size: 1.2rem; line-height: 2rem; }
}

/* Removes white lines added by hljs */
pre:has(code.hljs) {
    border-top: none;
    border-bottom: none;
}

/*
 * Dates in posts timeline should never be adjacent,
 * if they are it's a mistake.
 * In Zine this can happen because there's no logic at the moment to not render the <time> tag when a post if featured and there's no others for that year.
 */
.posts__timeline-date:has(+ .posts__timeline-date) { display: none; }

.post-footer {
    margin-top: 4rem;
    padding-top: 3rem;
}
.post-footer p {
    border-top: 1px solid var(--secondary-light);
    padding-top: 3rem;
}

.year-display {
    font-family: "Roboto Mono", sans-serif;
    font-size: 18rem;
    line-height: 1;
    text-align: center;
    color: var(--secondary);
    margin: 8rem 0;
}

@media screen and (max-width:739px) {
    .year-display { font-size: 10rem; }
}

.page-updated {
    font-family: "Roboto Mono", sans-serif;
    font-size: 1.6rem;
    color: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) * .55));
    margin-top: 0;
    margin-bottom: 4rem;
}

@media screen and (max-width:949px) {
  .page-updated {
      font-size: 1.4rem;
  }
}

@media screen and (max-width:739px) {
  .page-updated {
      font-size: 1.2rem;
  }
}

[data-theme=dark] .page-updated {
  color: var(--secondary);
}

.skills summary {
    font-family: "Roboto Mono", sans-serif;
    font-size: 1.8rem;
    color: var(--secondary);
    cursor: pointer;
    padding: 1rem 0;
    margin: 1.6rem auto 0.4rem auto;
}

.skills__list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.skills__list li {
    font-family: "Roboto Mono", sans-serif;
    font-size: 1.4rem;
    color: var(--base-dark);
    background-color: hsl(var(--secondary-light-h), var(--secondary-light-s), calc(var(--secondary-light-l) * 1.05));
    padding: .5rem 1rem;
    border-radius: .5rem;
}

[data-theme=dark] .skills__list li {
    background-color: hsl(var(--base-h), var(--base-s), calc(var(--base-l) * 2.2));
}

@media screen and (max-width:949px) {
  .skills summary {
      font-size: 1.6rem;
  }

  .skills__list li {
      font-size: 1.4rem;
  }
}

@media screen and (max-width:739px) {
  .skills summary {
      font-size: 1.4rem;
  }

  .skills__list li {
      font-size: 1.2rem;
  }
}

.header__theme-toggle {
    color: var(--base-dark);   /* dark icon on light header */
}
.header__theme-toggle:hover {
    color: var(--primary);
}
[data-theme=dark] .header__theme-toggle {
    color: var(--base-dark);   /* in dark mode --base-dark is light, so icon goes light */
}
[data-theme=dark] .header__theme-toggle:hover {
    color: var(--primary-light);
}

/* Wraps nav links and dark mode button. */
.header__actions {
    display: flex;
    align-items: center;
    gap: 2rem;
}