:root {
    --root-size: 21px;
    --line-height: 1.3;
    --body-font: 'BBBBaskervvol-Base';
    --header-font: 'Ume';
    --mono-font: 'Freemono', monospace;
    --mono-font-italic: 'Freemono Italic';
    --code-font: 'Connecting Otherwise Regular';
    --h1-size: 2.5rem;
    --h2-size: calc( var(--h1-size) * 0.8 );
    --h3-size: calc( var(--h2-size) * 0.8 );
    --h4-size: calc( var(--h3-size) * 0.8 );
    --h5-size: calc( var(--h3-size) * 0.8 );
    --padd: 1rem;
}

/******************************************************************************************************************************************************
											LAYOUT
*****************************************************************************************************************************************************/

:root {
    --header-height: 80px;
}

* {
  box-sizing: border-box;
}

body, html {
    padding: 0;
    margin: 0;
    scrollbar-gutter: stable;
}

body {
    display: grid; 
    grid-template-columns: 30% 70%;
    grid-template-rows: auto;
    min-height: 100vh;
    padding-top: var(--header-height);
}

header {
  grid-column: 1;    
  overflow-y: auto;
  position: sticky;
  top: var(--header-height);
  height: calc(100vh - var(--header-height));
}

main {
  grid-column: 2;    
  grid-row: 1;
  padding: 0 20vw var(--padd) var(--padd);
}

aside {
  grid-column: 3;    
  grid-row: 1;
  overflow-y: auto;
}

/* this one functions as placeholder for the 'header' */

.navbar--index {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--header-height);
}

/** TODO: MEDIA QUERIES**/
@media (max-width: 1000px){
    
body {
    display: flex; 
    flex-direction: column;
    padding-top: initial;
}

header {
  position: relative;
  height: auto;
  top: auto;
  padding-top: var(--header-height);
}

main {
    padding-right: initial;
}

}

/******************************************************************************************************************************************************
											ELEMENTS
******************************************************************************************************************************************************/

body {
    font-family: var(--body-font);
}

a {
    color: black;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font);
    font-weight: normal;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }

/******************************************************************************************************************************************************
											HEADER > * 
******************************************************************************************************************************************************/

nav ul {
    list-style: none;
    padding: 0;
    padding-left: var(--padd);
}

nav p {
    margin: 0;
}

.navbar--index {
    font-size: var(--h1-size);
    font-family: var(--header-font);
    padding-left: var(--padd);
    text-align: left;
}

.navbar--print {
    position: fixed;
    top: 0;
    right: 0;
    padding-right: var(--padd);
    font-size: var(--h1-size);
    font-family: var(--header-font);
    padding-left: var(--padd);
    text-transform: capitalize;
}
/* lets hide the button on mobile, it make no sense there */
@media (max-width: 640px){
    .navbar--print {
        display: none;
    }
}

.navbar--pages, 
.navbar--reports, 
.navbar--organisation,
.navbar--labels { display: none; }

li.public-pad,
li[class*="navbar--chapter--pad-name"] {
    margin-top: 1.5rem;
}

li.public-pad p {
    margin: .5em 0;
}

li.public-pad a,
li[class*="navbar--chapter--pad-name"] a {
  font-family: var(--mono-font);
  margin-top: 2rem;
}

li.public-pad + li.public-pad,
li[class*="navbar--chapter--pad-name"] + li[class*="navbar--chapter--pad-name"] {
    margin-top: 0;
}


/******************************************************************************************************************************************************
												MAIN > * 
******************************************************************************************************************************************************/

main img {
    max-width: 70%;
}

main > h6 {
    display: none;
}

.pad-content {
  counter-reset: line;
  font-family: var(--mono-font);
  border-left: 3ch solid #eee;
  position: relative;
}

.pad-content > :is(p, div, span, h1, h2, h3, h4) {
  display: block;
  line-height: 1.5;
/*  margin-left: 3ch;*/
padding-left: 0.5ch;
}

.pad-content > *:not(ul):before,
.pad-content > ul li:before {
  counter-increment: line;
  content: counter(line);
  font-size: 0.7rem;
  position: absolute;
  left: -1.5rem;
  font-weight: normal;
  font-family: var(--body-font);
}

.pad-content .highlight {
   font-weight: bold;
}

.pad-content a {
    text-decoration: underline;
    word-break: break-word;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * *
Labels
* * * * * * * * * * * * * * * * * * * * * * * * * */


[data-link-target-type*="label"] .reference--label--inline {
  text-decoration: underline dashed hotpink;
  text-decoration-thickness: 1px;
}

.reference--target {
    float: right;
    width: 25ch;
    margin-right: -30ch;
    color: hotpink;
}



/* annotations? stolen from expub */

main .annotation--content{
    float: right;
    width: 25ch;
    margin-right: -30ch;
    color: red;
    clear: both;
}

.annotation a{
    word-break: break-all;
}

.annotation[data-type="reference"]::before{
    content: "*";
    color: red;
}

.annotation[data-type="reference"] .annotation--content::before{
    content: "*";
    color: red;
}

.annotation--author{
    text-transform: uppercase;
    color: red;
}

.annotation[data-type="reference"] .annotation--author::after{
    content: ":";
    color: red;
}




/******************************************************************************************************************************************************
												Experiments
******************************************************************************************************************************************************/

/* navigation hierarchy */

nav#nav {
    counter-reset: package;
}

.navbar--chapter--collecting-and-connecting,
.navbar--chapter--earthbound-hardware,
.navbar--chapter--small-file-publishing,
.navbar--chapter--ancestral-connections {
    font-size: 1.5rem;
    font-family: var(--header-font);
    margin: 1.5rem 0;
}

.navbar--chapter--collecting-and-connecting p:before,
.navbar--chapter--earthbound-hardware p:before,
.navbar--chapter--small-file-publishing p:before,
.navbar--chapter--ancestral-connections p:before {
  counter-increment: package;
  content: "WP" counter(package) ":";
  font-family: var(--code-font);
}

nav ul li {
    text-align: center;
}

.ascii {
  /*zoom: 0.25;*/
  /*transform: scale(40%);
  transform-origin: top left;*/
  /*width: 320ch;  */
  font-family: var(--mono-font);
  line-height: 1;
  font-size: 0.2vw;
  width: 320ch;
}    

.code {
  font-family: var(--code-font);
  font-size: 3rem;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * *
Strikethrough element -> box for drawing characters
* * * * * * * * * * * * * * * * * * * * * * * * * */

del {
    font-family: var(--code-font);
    text-decoration: none;
    font-size: 4rem;
    text-align: center;
    display: block;
}

del .o {
    font-family: var(--mono-font);
    font-size: 0.95em;
    letter-spacing: 0.035em;
}

p:has(del) + p:has(del) {
  margin-top: -1.6rem;
}