/* To use a local font, drop the file into static/fonts/ and add:*/

@font-face {
    font-family: "notcourier";
    src: url("static/fonts/NotCourierSans.ttf") format("ttf");
}


@font-face {
    font-family: "alfphabet-iv";
    src: url("static/fonts/Alfphabet-IV.otf");
}

@font-face {
    font-family: "typewcond_regular";
    src: url("static/fonts/typewcond_regular.otf");
}

@font-face {
    font-family: "typewcond_bold";
    src: url("static/fonts/typewcond_bold.otf");
}

@font-face {
    font-family: "magicial_game";
    src: url("static/fonts/magicial_game.ttf");
}

@font-face {
    font-family: "dichtmy";
    src: url("static/fonts/dichtmy.ttf");
}

@font-face {
    font-family: "Distor";
    src: url("static/fonts/Distor.ttf");
}

@font-face {
    font-family: "Computer_Malfunction_Error";
    src: url("static/fonts/Computer_Malfunction_Error.ttf");
}
    


@font-face {
    font-family: "Doto_Rounded-Black";
    src: url("static/fonts/Doto_Rounded-Black.ttf");
}

@font-face {
    font-family: "Doto_Rounded-Bold";
    src: url("static/fonts/Doto_Rounded-Bold.ttf");
}

@font-face {
    font-family: "Doto_Rounded-Regular";
    src: url("static/fonts/Doto_Rounded-Regular.ttf");
}

@font-face {
    font-family: "Saira";
    src: url("static/fonts/SairaSemiCondensed-Medium.ttf");
}

@font-face {
    font-family: "HeptaSlab";
    src: url("static/fonts/HeptaSlab-Regular.ttf");
}

@font-face {
    font-family: "Offside";
    src: url("static/fonts/Offside-Regular.ttf");
}

@font-face {
    font-family: "Flor";
    src: url("static/fonts/FlorDeRuina-Semilla.ttf");
}

@font-face {
    font-family: "Sligoil";
    src: url("static/fonts/Sligoil-MicroMedium.ttf");
}

/*monaspace font, used in Zihan and Mikhail & Savannah's text*/  
@font-face {
    font-family: "monaspace";
    src: url("static/fonts/MonaspaceXenonNF-Regular.otf");
}
   
   
/*///////////// PAGED JS RULES ///////////////*/

@page {    
    size: 210mm 297mm;
}

@page :left {    
    margin: 14mm 20mm 20mm 20mm; /*top, right, bottom, left*/  

    @top-left-corner {
    content: "Computational Arts Critical Papers";
    font-family: "typewcond_regular", sans-serif;
    font-size: 10pt;
    font-weight: 400;
    transform: rotate(-90deg);
    text-align: left;
    white-space: nowrap;
    margin-top: 58mm;
    color: #787878
  }
    @left-middle {
    content: "f0rm1ess";
    font-family: "typewcond_regular", sans-serif;
    font-size: 10pt;
    font-weight: 400;
    transform: rotate(-90deg);
    white-space: nowrap;
    text-align: center;
    color: #787878
    
  }

  @bottom-left-corner {
    font-family: "typewcond_regular", sans-serif;
    font-size: 10pt;
    content: counter(page);
    padding-right: 6ch;
    text-align: right;
    color: #787878
  }

}

    
@page :right {
    margin: 14mm 20mm 20mm 20mm; /*top, right, bottom, left*/     
    @top-right-corner {
    content: string(category, last);
    font-family: "typewcond_regular", sans-serif;
    font-weight: 400;
    font-size: 10pt;
    transform: rotate(90deg);
    text-align: right;
    white-space: nowrap;
    width: 20mm;
    margin-top: 26mm;
    color: #787878
  }

  /* @right-middle {
    content: "Name";
    font-family: "typewcond_regular", sans-serif;
    font-size: 10pt;
    font-weight: 400;
    text-align: center;
    width: 20mm;
    transform: rotate(90deg);
  } */

  @bottom-right-corner {
    font-family: "typewcond_regular", sans-serif;
    font-size: 10pt;
    content: counter(page);
    padding-left: 4ch;
    text-align: left;
    color: #787878
  } 
   
}
            
@page :first {
    @right-middle {
        visibility: hidden;
    }
    @top-center {
        visibility: hidden;
    }
    @top-right-corner {
        visibility: hidden;
    }
    @bottom-right-corner {
        visibility: hidden;
    }
}


@page chapter:first{
    
    @top-right{ content: none; }
    @top-left{ content: none; } 
    @bottom-right { content: none; }
    @bottom-left { content: none; }

}


body {
    font-size: 12pt;
    line-height: 1.2em;
    font-family: 'typewcond_regular', sans-serif; /* Arial and Verdana are websafe fonts https://www.w3schools.com/cssref/css_websafe_fonts.php*/
}

.body-text p {
    margin-top: 0 !important;       
    margin-bottom: 0.6em !important; 
}

/* Bibliographies sit outside the two-column body; column-span breaks Paged.js list fragmentation. */
.endnote-container {
    font-size: 9pt !important;
    letter-spacing: -0.03em;
    line-height: 1.1em;
    font-family: 'typewcond_regular', sans-serif;
    text-align: left;
    column-count: 1 !important;  

}

.endnote-container p {
    margin-top: -0em;
    margin-bottom: 0em;   
}

/* Keep each bibliography entry intact when content flows onto a new page. */
.endnote-container li {
    break-inside: avoid;
    page-break-inside: avoid;
}

.endnote-container h4 {
    margin-top: 0 !important;
    margin-bottom: -2px !important;    
    padding-bottom: 0 !important;
    line-height: 0em !important;     
}
.endnote-container h4 + p {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.divider {
    column-span: all;         
    border-top: 1px solid #888888; 
    width: 100%;                   
    margin-top: 18px;             
    margin-bottom: 20px;           
    height: 0;                     
}

.divider2 {
    column-span: all;         
    border-top: 1.2px solid #888888; 
    width: 100%;                   
    margin-top: -14px;             
    margin-bottom: 8px;           
    height: 0;                     
}

.divider3 {
    column-span: all;         
    border-top: 1.2px solid #888888; 
    width: 100%;                   
    margin-top: 10px;             
    margin-bottom: 20px;           
    height: 0;                     
}

/*book category is also treated as a chapter page to make the paged.js pages work*/
.book-category {
    break-before: always;
    page: chapter;
    counter-increment: page 2;
}

.chapter {
    page: chapter;
}

/* Keep main-category TOC anchors on the articles' actual opening pages. */
#category01 > .chapter,
#category02 > .chapter,
#category03 > .chapter {
    break-before: page;
}

.chapter .body-text{
    column-count: 2;
    column-gap: 10mm;
}

.book-category h2.category-title{
    string-set: category content();
}



/*If you only wanted to add two column layout for the contributions */
/* 
.book-category .chapter {
    column-count: 2;
    column-gap: 10mm;
} 
*/

/* ///////// COVER ///////// */
.pagedjs_page[data-page-number="1"] {
    background-image: url('static/images/cover/cover.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pagedjs_page[data-page-number="2"] {
    background-image: url('static/images/cover/innercover1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pagedjs_page[data-page-number="99"] {
    background-image: url('static/images/cover/innercover2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pagedjs_page[data-page-number="100"] {
    background-image: url('static/images/backcover/backcover.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



/* ///////// TABLE OF CONTENTS ///////// */
.toc{
    break-before: page;
}

/* Make divider less tall, to keep toc on one page */
.toc .divider {
    margin-top: 13px;
    margin-bottom: 15px;
}

a:not(.toc a):after {
    content:" <" attr(href) ">";
}

.colophon-web-to-print a:not(.toc a)::after {
    content: none;
}

.toc a {
    display: flex;
    justify-content: space-between; /* title left, page number right */
    align-items: flex-end;         
    text-decoration: none;         /* remove underline */
}

.toc a::after {
    content: " " target-counter(attr(href url), page);
    margin-left: auto;             /* page number right */
}

code {    
    font-family: 'notcourier';
}






/* ///////////// GENERAL STYLING ///////// */

h1 {
    font-size: 30pt;
    font-family: 'Doto_Rounded-Bold';
    font-weight: normal;
    text-align: center;
    line-height: 1.1em;  
    margin-top: -0.1em;
    margin-bottom: 0.5em;
    
    /* page-break-before: always;new page for every submission title */

}

.heading-chapter-1 {
  font-family: 'Doto_Rounded-Bold', serif;
}

.heading-chapter-2 {
  font-family: 'Doto_Rounded-Bold', serif;
}

.heading-chapter-3 {
  font-family: 'Doto_Rounded-Bold', serif;
}

.chapter-one h1 {
    font-family: 'Doto_Rounded-Bold', serif;
}

.chapter-two h1 {
    font-family: 'Doto_Rounded-Bold', serif;
}

.chapter-three h1 {
    font-family: 'Doto_Rounded-Bold', serif;
}




h2 {    
    font-size: 20pt;  
    line-height: 1em;  
    font-family: 'typewcond_regular';   /*local font*/
    font-weight: normal;
    text-align: center;
    margin-bottom: 1em;
}


h3 {    
    font-size: 14pt;  
    line-height: 1em;  
    font-family: 'Offside';       
    font-weight: normal;
    margin: 0;
    margin-bottom: 0.5em;
}


h4 {    
    font-size: 12pt;    
    font-family: 'typewcond_bold';       
    font-weight: normal;
    margin-top: 0em;
    margin-bottom: 0em;
}

/*name*/
h5 {    
    font-size: 20pt;    
    font-family: 'typewcond_regular';       
    font-weight: normal;
    text-align: center;
    margin-top: 0.6em;
    margin-bottom: 1.1em;
}

h6 {    
    font-size: 24pt;  
    line-height: 1em;  
    font-family: 'Offside';  
    font-weight: normal;
    text-align: Left;
    margin-top: 0em;
    margin-bottom: 0em;
}

/*zihan's code*/
code {
    font-size: 9pt;
    line-height: 1.2em;
    font-family: 'monaspace', monospace; 
    background-color: #f0f0f0;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    display: inline-block;
}


img {
    margin: 0;
    max-width: 100%;
    display: block;
}

/* single column */
.single-column-img {
    width: 100%;       
    height: auto;      
    margin: 15px 0;    
}

/* Full-width image — spans both columns.
   Wrap your <img> in <figure class="full-width"> in the markdown. */
.full-width {
    column-span: all;
    margin: 20px 0;
    overflow: hidden;
}
figure.full-width img {
    width: 100%;
    display: block;
    margin: 0;
}

/*hacking p5 editor embeds!*/
.full-width iframe {
    width: 100%;
    height: 500px;
    display: block;
    margin-top:-50px; 
    border:none;
}

iframe .nav.preview-nav{
    display: none!important;
}

a {    
    color: black;
}

/*endnote dots*/
ul {
    padding-left: 0 !important;
    list-style: none !important; 
}

li {
    position: relative;
    padding-left: 10px;          
}

li::before {
    content: "•";                
    position: absolute;
    left: 0;                   
    font-size: 12px;            
}

/* blank page */
@media print, screen {
    .page-break-blank {
        break-before: page;
        break-after: page;
        page-break-before: always;
        page-break-after: always;  
        height: 0;
        visibility: hidden;     
    }
}

.page-break-blank {
    page: blank-page;
}

@page blank-page {
    @top-left-corner { content: none !important; }
    @left-middle { content: none !important; }
    @bottom-left-corner { content: none !important; }
    @top-right-corner { content: none !important; }
    @bottom-right-corner { content: none !important; }
}

/* hinge */
.pagedjs_right_page:has(#category01_hinge) .pagedjs_margin-top-right-corner {
  margin-top: 12mm !important;
}

#category01_hinge h1 {
  font-size: 40pt;
    font-family: 'Flor';
    text-align: left;
    margin-bottom: 0mm;
    margin-top: 0mm;
}
#category01_hinge h2 {
  font-size: 12pt;
    font-family: 'HeptaSlab';
    text-align: left;
    line-height: 1.1em;
    margin-top: 4mm;
}

#category01_hinge h3 {
  font-size: 16pt;
    font-family: 'HeptaSlab';
    text-align: left;
    line-height: 1.4em;
    margin-top: 2mm  ; 
    margin-bottom: 0mm;
}

.pagedjs_right_page:has(#category02_hinge) .pagedjs_margin-top-right-corner {
  margin-top: 10mm !important;
}

#category02_hinge h1 {
  font-size: 40pt;
    font-family: 'Flor';
    text-align: left;
    margin-bottom: 0mm;
    margin-top: 0mm;
}
#category02_hinge h2 {
  font-size: 12pt;
    font-family: 'HeptaSlab';
    text-align: left;
    line-height: 1.5em;
    margin-top: 4mm;
}





/* Haiyi article layout test - body only */
/* .chapter-two .body-text {
    column-fill: balance;
}

.chapter-two .body-text p {
    text-align: justify;
    hyphens: auto;
    margin-top: 0;
    margin-bottom: 1.2em;
    text-indent: 0;
    orphans: 1;
    widows: 1;
} */