:root {
  --em: 16px; /*1em*/
  --height: 302px; /*banner height*/
}
body div.space { height: var(--height) } /*proportional to 936px width*/
body div.space div { height: calc(var(--height) - var(--em)* 2) } /*banner*/
body div.space svg .top { text-transform: uppercase } /*Handcrafted.codes*/
body div.space svg .bottom { font-family: Vollkorn-italic, serif } /*Real computing action!*/
svg .physics { font-family: Badaboom_BB, fantasy } /*Physics, numerical programming, data science & more*/
.grid div p .RSS { /*anchor*/
  float: right;
  height: 2em;
  margin-left: 1em;
  width: 2em;
}
.grid {
  grid-gap: 2em; /*allow for space between grid elements*/
  grid-template-columns: calc( 60% - (2em / 2) ) calc( 40% - (2em / 2) ); /*1 total horizontal gap = 2em*/
  margin-bottom: 0;
}
.grid div p {
  padding-left: 0;
  padding-right: 0;
}
.grid .news { border-left: 1px solid silver }
.grid .news ul {
  font-size: 0.9em;
  line-height: 1.75;
  list-style: none;
}
.grid .news ul li {
  padding-bottom: 1.5em;
  padding-right: 0;
}
.three_columns {
  display: grid;
  grid-gap: 1em; /*allow for space between grid elements*/
  grid-template-columns: calc( 40% - (2em / 3) ) calc( 30% - (2em / 3) ) calc( 30% - (2em / 3) ); /*2 total horizontal gaps = 2em*/
  margin-bottom: 3em;
  margin-left: 1em;
  margin-right: 1em;
}
.three_columns .TOC { /*H2*/
  font-size: 1.8em;
  padding-left: 0;
  padding-right: 0;
}
.three_columns ol { list-style: decimal }
.three_columns ol, .three_columns ul {
  line-height: calc(1em * 1.5); /*baseline*/
  margin-left: 1em;
}
.three_columns ol li, .three_columns ul li { padding-bottom: 0.5em } /*same as class REFERENCES*/
.headline {
  font-size: 1.4em; /*same as H6*/
  margin-bottom: 1em;
  margin-left: var(--em);
  padding-left: var(--em);
  position: relative; /*ILD2_edit_resize.png*/
}
.headline img { /*ILD2_edit_resize.png*/
  left: calc(-75px / 5);
  opacity: 0.4;
  position: absolute;
  top: calc(-75px / 9);
  z-index: -1;
}
.tag {
  background-image: linear-gradient(to right, ghostwhite, transparent);
  border-left: 3px solid rgba(0, 0, 205, 0.75); /*mediumblue*/
  box-sizing: border-box;
  color: black;
  line-height: calc(1em * 1.5); /*baseline*/
  margin-bottom: 2em;
  margin-left: 2em;
  /*top, right, bottom, left*/
  padding: 0.25em 0.50em 0.25em 0.50em;
  width: 75%;
}
aside img.left { width: fit-content } /*special case*/
aside .me {
  font-family: Cookie, cursive;
  font-size: 3em;
  letter-spacing: 3px;
}
.date, .tag img, aside .me { cursor: default }

@media only screen and (max-width: 936px) { /*design breakpoint*/
  body div.space { height: calc( 100vw * (302 / 936) ) } /*scale the hook*/
  body div.space div { height: calc( 100% - 2 * (16px + 16 * (100vw - 936px) / 936) ) } /*banner will scale according to this formula*/
  .grid .news {
    border-left: none;
    border-top: 1px solid silver;
    padding-top: 1em;
  }
  .grid .news ul {
    font-size: inherit;
    margin-left: 1em;
  }
  .three_columns { display: inherit }
  .three_columns div .TOC { padding-left: 1ch }
  .three_columns ol, .three_columns ul { margin-left: 3em }
  .headline { padding-right: 1ch }
  aside .me {
    font-size: 2.76em;
    line-height: 1.15;
  }
}

@media only screen and (max-width: 600px) { /*ruler breakpoint*/
  aside img.left { width: 102px } /*better wrapping*/
}