:root {
  --clr-yellow: #ffff00;
  --clr-shade-7: #ffffff;
  --clr-shade-6: #ececec;
  --clr-shade-5: #c3c3c3;
  --clr-shade-4: #646464;
  --clr-shade-3: #333333;
  --clr-shade-2: #292929;
  --clr-shade-1: #1f1f1f;
  --clr-shade-0: #000000;
  --fnt-heading: "Gilroy", "Helvetica Neue", sans-serif;
  --fnt-ancillary: "Gilroy", "Helvetica Neue", sans-serif;
  --fnt-main: "Roboto Slab", "Helvetica Neue", serif;
  --fnt-prose: "Roboto Slab", "Helvetica Neue", serif;
  --fnt-weight-thin: 100;
  --fnt-weight-light: 200;
  --fnt-weight-regular: 300;
  --fnt-weight-bold: 700;
  --fnt-weight-extra-bold: 900;
  --section-offset: 3rem;
  --page-border-size: 9px;
  --main-grid-template-columns: minmax(1em,1fr) minmax(300px, 1200px) minmax(1em,1fr);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

/*
Web optimised fonts generated with https://www.fontsquirrel.com/tools/webfont-generator following https://www.youtube.com/watch?v=zK-yy6C2Nck
*/
@font-face {
  font-family: Gilroy;
  font-style: normal;
  font-weight: 200;
  src: url(/assets/fonts/gilroy/gilroy-light-webfont.woff2) format("woff2"), url(/assets/fonts/gilroy/gilroy-light-webfont.woff) format("woff"), url(/assets/fonts/gilroy/gilroy-light.otf) format("truetype");
}
@font-face {
  font-family: Gilroy;
  font-style: normal;
  font-weight: 900;
  src: url(/assets/fonts/gilroy/gilroy-extrabold-webfont.woff2) format("woff2"), url(/assets/fonts/gilroy/gilroy-extrabold-webfont.woff) format("woff"), url(/assets/fonts/gilroy/gilroy-extrabold.otf) format("truetype");
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 200;
  src: url(/assets/fonts/robotoslab/robotoslab-light-webfont.woff2) format("woff2"), url(/assets/fonts/robotoslab/robotoslab-light-webfont.woff) format("woff"), url(/assets/fonts/robotoslab/robotoslab-light.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 300;
  src: url(/assets/fonts/robotoslab/robotoslab-regular-webfont.woff2) format("woff2"), url(/assets/fonts/robotoslab/robotoslab-regular-webfont.woff) format("woff"), url(/assets/fonts/robotoslab/robotoslab-regular.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 700;
  src: url(/assets/fonts/robotoslab/robotoslab-bold-webfont.woff2) format("woff2"), url(/assets/fonts/robotoslab/robotoslab-bold-webfont.woff) format("woff"), url(/assets/fonts/robotoslab/robotoslab-bold.ttf) format("truetype");
}
/*
Font sizes generated using https://utopia.fyi/type/calculator/
 */
:root {
  --step--2: clamp(0.61rem, calc(0.54rem + 0.32vw), 0.80rem);
  --step--1: clamp(0.73rem, calc(0.64rem + 0.45vw), 1.00rem);
  --step-0: clamp(0.88rem, calc(0.75rem + 0.63vw), 1.25rem);
  --step-1: clamp(1.05rem, calc(0.88rem + 0.85vw), 1.56rem);
  --step-2: clamp(1.26rem, calc(1.03rem + 1.16vw), 1.95rem);
  --step-3: clamp(1.51rem, calc(1.20rem + 1.55vw), 2.44rem);
  --step-4: clamp(1.81rem, calc(1.40rem + 2.06vw), 3.05rem);
  --step-5: clamp(2.18rem, calc(1.63rem + 2.73vw), 3.82rem);
}

header {
  border-top: var(--page-border-size) solid var(--thm-clr-air);
  background-image: linear-gradient(to right, var(--thm-clr-main-bg-inverse) 48%, var(--thm-clr-accent) 52%, var(--thm-clr-accent));
}

.icon {
  --icon-primary: var(--thm-clr-control);
  --icon-secondary: var(--thm-clr-inverse);
  --icon-tertiary: var(--thm-clr-main-fg);
  --icon-stroke-width: 5;
  --icon-stroke-width-fine: 3;
}

.icon {
  fill: none;
}
.icon .icon-border {
  stroke: var(--icon-tertiary);
  stroke-width: var(--icon-stroke-width);
}

.icon.list-table .separator {
  stroke: var(--icon-secondary);
  stroke-width: var(--icon-stroke-width-fine);
}
.icon.list-table .table-border {
  stroke: var(--icon-secondary);
  stroke-width: var(--icon-stroke-width);
}

.icon.list-card .card {
  stroke: var(--icon-secondary);
  stroke-width: var(--icon-stroke-width-fine);
  fill: var(--icon-primary);
}
.icon.list-card .card .title, .icon.list-card .card .image, .icon.list-card .card .description {
  fill: var(--icon-secondary);
}

.airquill-logo {
  --logo-primary: var(--thm-clr-accent);
  --logo-secondary: var(--thm-clr-highlight-fg-inverse);
  --sz-small: 200px;
  --sz-full: 300px;
  width: var(--sz-small);
}

.airquill-name .airquill-name-air {
  fill: var(--logo-primary);
}

.airquill-name .airquill-name-quill {
  fill: var(--logo-secondary);
}

.airquill-pen {
  fill: var(--logo-primary);
}

@media screen and (min-width: 800px) {
  .airquill-logo {
    width: var(--sz-full);
  }
}
nav.branding {
  background-image: linear-gradient(to right, var(--thm-clr-main-bg-inverse) 33%, var(--thm-clr-accent) 66%, var(--thm-clr-accent));
  /* Required to allow controlling the position of the nav toggle */
  position: relative;
}

/*
Nav toggle inspiration: https://www.youtube.com/watch?v=8QKOaTYvYUA and https://www.youtube.com/watch?v=R00QiudbD4Y
 */
.hamburger {
  width: 32px;
  fill: var(--thm-clr-main-fg);
  background: transparent;
  border: 3px solid var(--thm-clr-main-fg);
}

/* Checkbox controlling the navigation menu state for mobile displays */
.nav-toggle {
  display: none;
}

/* Label for the navigation state checkbox */
.nav-toggle-label {
  margin-right: 1em;
  position: absolute;
  top: 20px;
  right: 0;
}

.nav-toggle ~ label .line {
  rx: 0px;
  transition: rotate 300ms ease-in, y 300ms ease-in 300ms, opacity 0ms 600ms;
  transform-box: fill-box;
  transform-origin: center;
}

.nav-toggle:checked ~ label .line {
  transform-box: fill-box;
  transform-origin: center;
  transition: y 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 600ms;
}
.nav-toggle:checked ~ label :is(.top, .bottom) {
  y: 45px;
}
.nav-toggle:checked ~ label :is(.top, .middle) {
  rotate: 45deg;
}
.nav-toggle:checked ~ label .bottom {
  rotate: -45deg;
}

.nav-toggle:checked ~ nav {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transform: scale(1, 1);
  transition: opacity 250ms ease-in-out 250ms;
}

nav.main {
  width: 100%;
  height: 0;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}
nav.main ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  background-color: var(--thm-clr-menu-bg);
}
nav.main li {
  display: inline-block;
  margin-left: 2rem;
  margin-right: 1rem;
  font-family: var(--fnt-heading);
  font-weight: var(--fnt-weight-light);
  position: relative;
}
nav.main li.current a {
  color: var(--thm-clr-control-fg-active);
  font-weight: var(--fnt-weight-extra-bold);
}
nav.main a {
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3rem;
  font-size: var(--step--1);
  white-space: nowrap;
  color: var(--thm-clr-control-fg);
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}
nav.main a::before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  bottom: 0;
  height: 3px;
  background-image: linear-gradient(to right, var(--thm-clr-main-bg-inverse), var(--thm-clr-accent));
  transition: ease-in-out 200ms;
}
nav.main a:hover::before {
  width: 100%;
}
nav.main svg.theme-toggle {
  width: 1rem;
  height: 1rem;
}
nav.main svg.theme-toggle .theme-toggle-outer {
  fill: transparent;
  stroke: var(--thm-clr-control-fg);
  stroke-width: 64;
}
nav.main svg.theme-toggle .theme-toggle-slice {
  fill: var(--thm-clr-accent);
  stroke-width: 0;
}

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }
  nav.main {
    all: unset;
    grid-column: 2; /* must be placed back in the right column due to unset */
  }
  nav.main ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    background-color: var(--thm-clr-main-bg);
  }
  nav.main a {
    opacity: 1;
  }
}
section.articles {
  --sz-highlight-image-width: 380px;
  --sz-highlight-letterbox-image-width: 750px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}
section.articles article {
  border-top: 5px solid var(--thm-clr-air);
  border-left: none;
  background-color: var(--thm-clr-card-bg);
  display: flex;
  flex-direction: column;
  width: 100%;
}
section.articles article div.post {
  padding: 0 1rem;
}
section.articles article div.post .post-excerpt {
  font-size: var(--step-1);
}
section.articles article img.post-image {
  overflow: hidden;
  max-width: 100%;
}
section.articles article img.post-image-highlight {
  display: none;
}
section.articles article p.post-meta {
  grid-column: 1/-1;
  background-color: var(--thm-clr-control-bg);
  padding: 1rem;
  margin: 0;
  font-size: var(--step--1);
}

@media screen and (min-width: 800px) {
  section.articles article {
    display: grid;
    grid-gap: 0;
    grid-template-columns: 1fr var(--sz-highlight-image-width);
    border-left: 5px solid var(--thm-clr-air);
    border-top: none;
  }
  section.articles article img.post-image-highlight-letterbox {
    display: none;
  }
  section.articles article img.post-image-highlight {
    display: block;
  }
}
footer {
  margin-top: var(--section-offset);
  background-color: var(--thm-clr-main-bg-inverse);
  color: var(--thm-clr-main-fg-inverse);
  border-bottom: var(--page-border-size) solid var(--thm-clr-accent);
  text-align: center;
  font-size: var(--step--1);
  display: grid;
  grid-auto-flow: row;
}
footer section.icon {
  grid-column: span 2;
}
footer svg.airquill-icon {
  margin: 2rem;
}
footer section.airquill,
footer section.resources {
  padding: 0 2rem;
}
footer a {
  color: var(--thm-clr-accent);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer h3 {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.post-image img {
  max-width: 100%;
}

article.post-content p {
  text-align: justify;
}
article.post-content p.post-meta {
  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 800px) {
  article.post-content p.post-meta {
    display: block;
  }
  article.post-content span.post-meta-item:not(:first-child)::before {
    content: " | ";
  }
}
body {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: var(--main-grid-template-columns);
  grid-template-rows: auto;
  background-color: var(--thm-clr-main-bg);
  color: var(--thm-clr-main-fg);
  font-family: var(--fnt-main);
  font-weight: var(--fnt-weight-regular);
  font-size: var(--step-0);
  /* Place immediate children in the middle column */
}
body > * {
  grid-column: 2;
}

header,
footer {
  grid-column: 1/-1;
  /* Define a subgrid with the same characteristics as the main one to allow the
  header and footer to span three columns in the main grid, but have their content
  in the middle column and responsive in the same proportions
   */
  display: grid;
  grid: auto-flow/var(--main-grid-template-columns);
  /* Place immediate children in the middle column */
}
header > *,
footer > * {
  grid-column: 2;
}

hr {
  height: 1px;
  width: 100%;
  background-color: var(--thm-clr-highlight-fg-inverse);
  border: none;
  margin: 0;
}

main {
  margin-top: 3rem;
}

main h1, main h2, main h3, main h4, main h5, main h6 {
  font-family: var(--fnt-heading);
  font-weight: var(--fnt-weight-extra-bold);
  margin-bottom: 1.5rem;
}
main h1 {
  font-size: var(--step-4);
}
main h2 {
  font-size: var(--step-3);
}
main h3 {
  font-size: var(--step-2);
}
main p a {
  color: var(--thm-clr-prose-link-fg);
  text-decoration: underline;
}
main blockquote {
  padding: 2ex 1.5em;
}
@media (min-width: 768px) {
  main blockquote {
    margin-left: 33px;
  }
}
main blockquote p {
  margin: 0;
}
main img.profile {
  border-width: 4px;
  border-style: solid;
  margin-left: 1em;
  margin-right: 1em;
  width: 64px;
  height: 64px;
}
main .strike {
  text-decoration: line-through;
}

span.plain-text-icon {
  font-family: monospace;
  color: var(--thm-clr-accent);
}

/*
TODO: copied from diary
 */
body.theme-light {
  --thm-clr-accent: var(--clr-yellow);
  --thm-clr-air: var(--clr-yellow);
  --thm-clr-main-bg: var(--clr-shade-7);
  --thm-clr-main-fg: var(--clr-shade-1);
  --thm-clr-main-bg-inverse: var(--clr-shade-0);
  --thm-clr-main-fg-inverse: var(--clr-shade-5);
  --thm-clr-control-bg: var(--clr-shade-5);
  --thm-clr-control-fg: var(--clr-shade-4);
  --thm-clr-control-fg-active: var(--clr-shade-2);
  --thm-clr-card-bg: var(--clr-shade-6);
  --thm-clr-menu-bg: var(--clr-shade-6);
  --thm-clr-highlight-fg-inverse: var(--clr-shade-6);
  --thm-clr-prose-link-fg: var(--clr-shade-2);
}

body.theme-dark {
  --thm-clr-accent: var(--clr-shade-4);
  --thm-clr-air: var(--clr-yellow);
  --thm-clr-main-bg: var(--clr-shade-1);
  --thm-clr-main-fg: var(--clr-shade-5);
  --thm-clr-main-bg-inverse: var(--clr-shade-7);
  --thm-clr-main-fg-inverse: var(--clr-shade-2);
  --thm-clr-control-bg: var(--clr-shade-3);
  --thm-clr-control-fg: var(--clr-shade-5);
  --thm-clr-control-fg-active: var(--clr-shade-6);
  --thm-clr-card-bg: var(--clr-shade-2);
  --thm-clr-menu-bg: var(--clr-shade-2);
  --thm-clr-highlight-fg-inverse: var(--clr-shade-3);
  --thm-clr-prose-link-fg: var(--clr-yellow);
}

span.icon > .fa {
  cursor: default;
}

.admonitionblock td.icon {
  text-align: center;
  width: 80px;
}

.admonitionblock td.icon [class^="fa icon-"] {
  font-size: 2.5em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.admonitionblock td.icon .icon-note:before {
  content: "\f05a";
  color: #19407c;
}

.admonitionblock td.icon .icon-tip:before {
  content: "\f0eb";
  text-shadow: 1px 1px 2px rgba(155, 155, 0, 0.8);
  color: #111;
}

.admonitionblock td.icon .icon-warning:before {
  content: "\f071";
  color: #bf6900;
}

.admonitionblock td.icon .icon-caution:before {
  content: "\f06d";
  color: #bf3400;
}

.admonitionblock td.icon .icon-important:before {
  content: "\f06a";
  color: #bf0000;
}

/* Personal customisations */
td.icon {
  padding: 0 2rem;
}

div.imageblock {
  margin: 2rem 0;
}
div.imageblock .content {
  background-image: linear-gradient(to right, transparent 0%, var(--clr-shade-7) 25%, var(--clr-shade-7) 75%, transparent 100%);
  text-align: center;
}
div.imageblock img {
  display: inline;
}

/**
.badges {
  a {
    text-decoration: none;
    &:hover {
      text-decoration: none;
    }
  }
}

@post-summary-hover-factor: 10%;
@post-summary-bar-factor: 5%;
@post-summary-bar-hover-factor: @post-summary-hover-factor + @post-summary-bar-factor;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

p.content,
section.post-content {
  line-height: 32px;
  font-size: 110%;
  font-weight: 300;
  font-family: "Roboto Slab", sans-serif;
}

section.post-content {
  margin-top: 32px;
  text-align: justify;
}

section.post-content p {
  margin-bottom: 32px;
}

section.post-content blockquote p {
  margin-bottom: 0px;
}

a.profile i {
  font-size: 300%;
  color: #E3E3E3;
}

.profile-links {
  text-align: right;
}

.container.post p {
  text-align: justify;
}

.footer-link:hover {
  text-decoration: none;
}

table.light {
  border-spacing: 10px;
  border-collapse: separate;
  td {
    padding: 10px;
  }
}
 */
.highlight table td {
  padding: 5px;
}

.highlight table pre {
  margin: 0;
}

.highlight .cm {
  color: #999988;
  font-style: italic;
}

.highlight .cp {
  color: #999999;
  font-weight: bold;
}

.highlight .c1 {
  color: #999988;
  font-style: italic;
}

.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}

.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
  color: #999988;
  font-style: italic;
}

.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}

.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}

.highlight .ge {
  color: #000000;
  font-style: italic;
}

.highlight .gr {
  color: #aa0000;
}

.highlight .gh {
  color: #999999;
}

.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}

.highlight .go {
  color: #888888;
}

.highlight .gp {
  color: #555555;
}

.highlight .gs {
  font-weight: bold;
}

.highlight .gu {
  color: #aaaaaa;
}

.highlight .gt {
  color: #aa0000;
}

.highlight .kc {
  color: #000000;
  font-weight: bold;
}

.highlight .kd {
  color: #000000;
  font-weight: bold;
}

.highlight .kn {
  color: #000000;
  font-weight: bold;
}

.highlight .kp {
  color: #000000;
  font-weight: bold;
}

.highlight .kr {
  color: #000000;
  font-weight: bold;
}

.highlight .kt {
  color: #445588;
  font-weight: bold;
}

.highlight .k, .highlight .kv {
  color: #000000;
  font-weight: bold;
}

.highlight .mf {
  color: #009999;
}

.highlight .mh {
  color: #009999;
}

.highlight .il {
  color: #009999;
}

.highlight .mi {
  color: #009999;
}

.highlight .mo {
  color: #009999;
}

.highlight .m, .highlight .mb, .highlight .mx {
  color: #009999;
}

.highlight .sa {
  color: #000000;
  font-weight: bold;
}

.highlight .sb {
  color: #d14;
}

.highlight .sc {
  color: #d14;
}

.highlight .sd {
  color: #d14;
}

.highlight .s2 {
  color: #d14;
}

.highlight .se {
  color: #d14;
}

.highlight .sh {
  color: #d14;
}

.highlight .si {
  color: #d14;
}

.highlight .sx {
  color: #d14;
}

.highlight .sr {
  color: #009926;
}

.highlight .s1 {
  color: #d14;
}

.highlight .ss {
  color: #990073;
}

.highlight .s, .highlight .dl {
  color: #d14;
}

.highlight .na {
  color: #008080;
}

.highlight .bp {
  color: #999999;
}

.highlight .nb {
  color: #0086B3;
}

.highlight .nc {
  color: #445588;
  font-weight: bold;
}

.highlight .no {
  color: #008080;
}

.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}

.highlight .ni {
  color: #800080;
}

.highlight .ne {
  color: #990000;
  font-weight: bold;
}

.highlight .nf, .highlight .fm {
  color: #990000;
  font-weight: bold;
}

.highlight .nl {
  color: #990000;
  font-weight: bold;
}

.highlight .nn {
  color: #555555;
}

.highlight .nt {
  color: #000080;
}

.highlight .vc {
  color: #008080;
}

.highlight .vg {
  color: #008080;
}

.highlight .vi {
  color: #008080;
}

.highlight .nv, .highlight .vm {
  color: #008080;
}

.highlight .ow {
  color: #000000;
  font-weight: bold;
}

.highlight .o {
  color: #000000;
  font-weight: bold;
}

.highlight .w {
  color: #bbbbbb;
}

.highlight {
  background-color: #f8f8f8;
}

/*# sourceMappingURL=styles.css.map */