@import "../style.less";

@header-height: (@page-height/18)*1;

@page-margin-inside: (@page-width/18)*4;
@page-margin-outside: (@page-width/18)*3;
@body-height: (@page-height/18)*15+@line-height;


body {
    &#I-1-1, &#I-1-2, &#I-1-3,
    &#I-1-4, &#I-1-5, &#I-1-6,
    &#I-1-7, &#I-1-8, &#I-1-9 {
        .paper:nth-child(odd) .header:after {
          content: "The City of Organization (Forces and Flows)"  
        }
    }

    &#I-2-1, &#I-2-2, &#I-2-3,
    &#I-2-4, &#I-2-5, &#I-2-6,
    &#I-2-7 {
        .paper:nth-child(odd) .header:after {
          content: "The City of Order (‘Wisconst’ and Discipline)"  
        }
    }

    &#I-1-1 .paper:nth-child(even) .header:after {
        content: "The Return of the Sphinx";
    }
    &#I-1-2 .paper:nth-child(even) .header:after {
        content: "Modern Urbanism: Reversing the Fortress";
    }
    &#I-1-3 .paper:nth-child(even) .header:after {
        content: "The Historical Event as Accidental Intertwining";
    }
    &#I-1-4 .paper:nth-child(even) .header:after {
        content: "The Milieu Machine";
    }
    &#I-1-5 .paper:nth-child(even) .header:after {
        content: "The Emergence of the Engineer and His ‘Unexcelled Theoretical Background’";
    }
    &#I-1-6 .paper:nth-child(even) .header:after {
        content: "Politics of the Street";
    }
    &#I-1-7 .paper:nth-child(even) .header:after {
        content: "The Street Machine";
    }
    &#I-1-8 .paper:nth-child(even) .header:after {
        content: "Boosting the City or the Principle of Conditioned Ground";
    }
    &#I-1-9 .paper:nth-child(even) .header:after {
        content: "The Power of Expressiveness and Will to Direct";
    }
    &#I-2-1 .paper:nth-child(even) .header:after {
        content: "On the Ordering of Cities";
    }
    &#I-2-2 .paper:nth-child(even) .header:after {
        content: "Mathēsis, or Wisconst (the Art of What Is Certain)";
    }
    &#I-2-3 .paper:nth-child(even) .header:after {
        content: "The Maurice Conspiracy and Neo-Stoicism";
    }
    &#I-2-4 .paper:nth-child(even) .header:after {
        content: "The Ethical Series: Vital Ascesis";
    }
    &#I-2-5 .paper:nth-child(even) .header:after {
        content: "Vita Politica – Civil Life";
    }
    &#I-2-6 .paper:nth-child(even) .header:after {
        content: "Discipline and Army Camp";
    }
    &#I-2-7 .paper:nth-child(even) .header:after {
        content: "Wealth and Representation";
    }

    .paper.headerless .header:after {
        content: "" !important;
    }
}


.main {
    -webkit-flow-from: main;
            flow-from: main;
    float:left;

    top: (@page-height/18)*1;
    margin: 0;
    width: (@page-width/18)*11;
    height: (@page-height/18)*15;
}

.break-before {
    -webkit-region-break-before: always;
    region-break-before: always;
    break-before: always;
}

#main {
    -webkit-flow-into: main;
    flow-into: main;
    width: @page-width - (@page-margin-inside + @page-margin-outside);
    hyphens: auto;
    -webkit-hyphens: auto;
    font-family: 'Garamond12';
    font-size: @font-size;
    text-align: justify;

    > p.big-break {
        margin-top: @line-height;
        text-indent: 0pt;

        > .inlineFootnote {
            text-indent: 0pt;
        }
    }

    > p {
        margin: 0px;
        text-indent: @line-height;
        
        &:first-of-type {
            font-family: 'Garamond8';
            font-size: 16pt;
            line-height: @line-height*1.3;
            text-indent:-39pt;
            margin-bottom:@line-height;
            margin-left: 65pt;

            .inlineFootnote {
                text-indent: 0;
            }            
        }

        &:nth-of-type(2) {
            text-indent: 0pt !important;

            &:first-letter {
                padding: 28pt;
                // padding-top: 4.5pt;
                height: 10px;
                // height: @line-height * 1.8;
                float: left;
                width: 10px;
                text-transform: lowercase;
                font-style: italic;
                line-height: @line-height * 0;
                position: relative;
            }
            &:first-letter {
                background-repeat: no-repeat;
                // color:transparent;
                text-transform: uppercase;
                font-style: normal;
                font-size: 40pt;
                color: black;
                -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
                -webkit-text-stroke-width: 1.5px;
                -webkit-text-stroke-color: black;
                background-size: contain;
                display: inline;
                z-index: 1000;
            }
        }
    }

    &[data-src*="I.1.1"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_000.png);
        }
      }
    }
    &[data-src*="I.1.2"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_001.png);
        }
      }
    }
    &[data-src*="I.1.3"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_002.png);
        }
      }
    }
    &[data-src*="I.1.4"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_003.png);
        }
      }
    }
    &[data-src*="I.1.5"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_004.png);
        }
      }
    }
    &[data-src*="I.1.6"] {
      > p:nth-of-type(2){
        &:first-letter{
          background-image: url(/assets/lettrines/wrapp-letters-chap1_005.png);
        }
      }
    }
    &[data-src*="I.1.7"] {
      > p:nth-of-type(2){
        &:first-letter{
          background-image: url(/assets/lettrines/wrapp-letters-chap1_006.png);
        }
      }
    }

    &[data-src*="I.1.8"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_007.png);
        }
      }
    }
    &[data-src*="I.1.9"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters-chap1_008.png);
        }
      }
    }
    &[data-src*="I.2.1"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_000.png);
        }
      }
    }

    &[data-src*="I.2.2"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_001.png);
        }
      }
    }
    &[data-src*="I.2.3"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_002.png);
        }
      } 
    }
    &[data-src*="I.2.4"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_003.png);
        }
      }
    }

    &[data-src*="I.2.5"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_004.png);
        }
      }
    }
    &[data-src*="I.2.6"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_005.png);
        }
      }
    }
    &[data-src*="I.2.7"] {
      > p:nth-of-type(2){
        &:first-letter{
            background-image: url(/assets/lettrines/wrapp-letters_006.png);
        }
      }
    }
    sup {
        line-height: 0pt !important;
        position: relative;
        top: 1.75mm;
    }

    li p, li p:first-of-type, li > p:nth-of-type(2){
        margin: 0px;
        font-size: @font-size;
        font-family:@body-font;
        line-height: @line-height;
        text-align: justify;
        font-weight: normal !important;
        display: inline;
    }

    // li p:first-of-type, {
    // text-indent: 39pt !important;
    //   }


    ul {
        list-style-type: none !important;
        display: inline-block;
        margin-left: 0pt;
        padding-left: 0pt;
    }

    ul li {
        display: list-item;
        margin-left: 14pt;
        padding-left: 0pt;
        &::before{
            content: "\25c8 ";
            //content: "\23e3 ";
            margin-right: 7.25pt;
            //padding-left: 14.5pt;
        }
    }
    ol {
        list-style-type: none !important;
        display: block;
        margin-left: 0pt;
        padding-left: 0pt;
    }
    ol li {
        display: list-item;
        margin-left: 0pt;
        padding-left: 0pt;
        &::before{
            content: "— ";
        }
    }

    h1 {
        font-family: 'GaramondSC12';
        font-size:@font-size*3 !important;
        line-height:@line-height*2.5 !important;
        margin-bottom:@line-height*3;
        letter-spacing: -0.05em;
        text-align: center;
        margin-left: -@page-width / 18;
        margin-right: -@page-width / 18;
        -webkit-hyphens: none;
    }

    h2 {
        font-family: 'Garamond12';
        font-size:@font-size*2;
        font-style: italic;
        line-height:@line-height*2;
        margin-bottom:@line-height*3;
        text-align: center;
    }
    ul, ol {
       margin: 0pt !important;
    }

    h4 {
        font-family: 'GaramondSC12';
        font-size:@font-size*1.5 !important;
        margin-top: -@line-height*3;
        text-align: center;
    }

    // sections excursions
    section.excursion {
        width: (@page-width/18) * 4.5;
        float: left;
        margin-top: 0;
        margin-right: @line-height/2;
        margin-left: -@page-width/18;
        margin-bottom: @line-height * 2;
        clear: left;
        display: none;
        font-family: 'Dauphine';
        color : @color-canal;
        font-size: @font-size*.9;
        line-height: 12.8pt;
        font-style: normal;
        text-align: left;
        -webkit-hypens: auto;

        &.expanded {
            display: block;

            .excursion-sources, .excursion-sources.expanded {
                ul {
                    padding-left: 0;
                    margin-left: 0;
                    text-align: left;
                    list-style-type: none !important;

                    li {
                        &:before {
                            display: none;
                        }
                        list-style-type: none !important;
                        padding-left: none;
                        text-align: left;
                        font-size: 80%;
                        line-height: 12pt;
                        margin-left: 0;
                        margin-bottom: 0 !important;
                    }
                }
            }
        }

        &.no-float {
            width: (@page-width/18) * 10 + 2mm;
            margin-left: @page-width/18;
            float: none;
            clear: none;

            .figure {
                max-width: (@page-width/18) * 7;
                margin-left: -(@page-width/18) * 1.5;

                &.full {
                    max-width: @page-width;
                }
            }
        }
    }

    section.expanded.excursion p {
        display: block !important;
        cursor: zoom-out;
        margin: 0pt !important;
    }

    section.excursion p em {
        font-style:italic;
    }


    section.excursion p + p {
      text-transform: none;
      text-indent:@line-height;
    }
    
    section.expanded.excursion div.2column {
        display: block;
        width: 100%;
        // width: 50%;
        // float: left;
        // position: relative;
        margin: 12pt 0pt;
    }

    section.expanded.excursion ul {
        list-style-type: none !important;
        display: block;
        margin: 0pt 0pt !important;
        padding-left: 0pt;
        margin-top: @line-height !important;
    }
    section.expanded.excursion ul li {
        display: list-item;
        margin-bottom: @line-height !important;
        // &::before{
        //   content: "\23e3 ";
        //   margin-right: 7.25pt;
        //   padding-left: 7.25pt;
        // }
    }

    section.expanded.excursion ol {
        list-style-type: none !important;
        display: block;
        // margin: 0pt @line-height*3.5 !important;
        padding-left: 0pt;
        margin-bottom: @line-height !important;
        width: 100%;
    }

    section.expanded.excursion ol li {
        display: list-item;
        &::before{
          content: "— ";
        }
    }

    section.expanded h2 {
        cursor: zoom-out;
    }

    section.excursion h2 {
        font-family: 'Dauphine';
        font-size: @font-size*1.3 !important;
        text-transform: none !important;
        display: block;
        font-style: normal !important;
        float: initial;
        max-width: 100%;
        line-height: 18pt;
        color : @color-canal !important;
        cursor: zoom-in;
        // margin-top: @line-height !important;
        // margin-right: 12pt;
        margin-top: @line-height * .5;
        margin-bottom: @line-height;
        -webkit-hyphens: none;
    }

    section.excursion h2:before {
        content: "  ";
        // background: url("img/carto-picto-river-rotate.svg") no-repeat 0 0;
        background: url("img/carto-picto-river.svg") no-repeat 0 0;
        background-position: 0pt 10pt;
        background-size: 100%;
        width: 25px;
        height: 25px;
        display: inline-block;

        // content:"ant  ";
        font-family:DauphineDings;
    }

    section.excursion .figure {
        float: left;
        clear: both;
        max-width: initial;
        margin-right: 0;
        margin-top: 0;

        img {
            max-width: 100%;
            float: left;
            margin-left: -@page-width/36;
            margin-right: @page-width/36;
        }

        .figcaption {
            float: left;
            margin-left: -@page-width/36;
            margin-right: @page-width/36;
            margin-bottom: @line-height/2;
        }
    }

    section.excursion {
        h2 + .figure {
            margin-top: -@line-height;
        }
    }

    .figure {
        max-width: 88.5mm; 
        float: right;
        clear: right;
        text-indent: 0;
        margin: @line-height/2 -@page-width/18 * 1.2 @line-height/2 @line-height/2 + @page-width/18 * 0.2;
        break-inside: avoid;
        region-break-before: avoid;
        page-break-inside: avoid;
        -webkit-region-break-inside: avoid;

        &.left {
            float: left;
            clear: left;
            margin-left: -(@page-width) / 18 * 1.2;
            margin-right: @line-height / 2 + (@page-width) / 18 * 0.2;
        }

        &.stacked {
            max-width: 85mm;
            clear: none;
            margin-right: 9pt;
        }

        &.pull-up {
            margin-top: 0;

            img {
                margin-top: 0;
                margin-bottom: @line-height/2;
            }
        }

        &.pull-further-up {
            margin-top: -@line-height/2;
        }

        &.push-down {
            margin-top: @line-height * 1;
        }

        &.pull-down {
            margin-bottom: 0;

            img {
                margin-bottom: @line-height/2;
            }
        }

        &.pull-further-down {
            margin-bottom: -@line-height/2;
        }

        &.half {
            max-width: 69mm;

            &.stacked {
                margin-right: @line-height/2;
                margin-left: -@page-width / 18;
            }
        }

        &.full {
            max-width: @page-width;
        }

        &.medium {
            max-width: (@page-width / 18) * 6;
        }

        &.small {
            max-width: (@page-width / 18) * 3.5;

          &.stacked {
            margin-left: 20pt;
          }
        }

        .figcaption {
            display: block;
            font-family : 'Dauphine';
            font-size: @font-size/1.3;
            line-height:@line-height/1.2;
            text-align: left !important;
            // width: (@page-width/18)*7;

            &.more-space-bottom {
                margin-bottom: 9pt;
            }
        }

        &.extra-bottom-white-space {
            .figcaption {
                margin-bottom: 5mm;
            }
        }

        &.double-extra-bottom-white-space {
            .figcaption {
                margin-bottom: 10mm;
            }
        }

        .figcaption.expanded {
            display: block;
        }

        .pull-up {
            margin-bottom: -@line-height / 2;
        }
    }

    // .inlineFootnote .figcaption {
    //     width: (@page-width/18)*3;
    //     color:black;
    // }

    img {
        max-width: 100%;
        position: relative;
        height: 18px;
        margin-bottom: -5px;
        margin-right: 5px;
        cursor: zoom-in;
    }

    img.expanded {
        height: inherit;
        break-inside: avoid;
        -webkit-region-break-inside: avoid;
        cursor: zoom-out;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .inlineFootnote {
        display: none;
        text-align: left;
        color: @color-canal;
        cursor: zoom-out;
        font-size: @font-size*0.75;
        font-family: @body-font;
        margin: @line-height*0.1 -(@page-width/18 + 2mm) 0 @line-height/2;
        margin-bottom: 0;
        line-height: @line-height*0.8;
        display: inline-block;
        width: 40mm;
        float: right;
        -webkit-hyphens: auto; 
        clear: right;

        + .inlineFootnote {
            margin-top: @line-height*0.8;
        }

        .drifted_footnotes {
            font-family: "Dauphine";
        }


        &.big-break {
            margin-top: @line-height + @line-height * .1;

            + .inlineFootnote.big-break {
                margin-top: @line-height*0.8;
            }
        }

        .numberFootnote {
            color:@color-canal;
            font-family: 'Dauphine';
            font-size: 80%;
            float: left;
            margin-right: 2mm;
        }

        p {
            text-indent: 0;
            margin-top: 0;
            margin-bottom: 0;

            + p {
                text-indent: @line-height*1.6;
            }
        } 

        .figure {
            max-width: 100%;
            float: initial;
            margin-left: 0;
            margin-right: 0;
            margin-top: 0;

            .figcaption {
                color: @color-canal;
            }
        }

        ol {
            list-style-type: decimal !important;

            li {
                list-style-position: inside;

                &:before {
                    content: "";
                }
            }
        }

        &.no-float {
            float: none;
        }

        &.block-end {
            width: 75%;
            float: left;
            margin: @line-height*0.8 0 0 0;
        }
    }
    
    .footnoteRef {
        color:@color-canal;
        font-family: 'Dauphine';
        position: relative;
        top: -5px;
        font-size: 80%;
        margin-left: 4px;
        cursor: zoom-in;
    }

    .block-end-small {
        width: 35%;
        float: left;
        margin: @line-height*2.8 0 0 0;
    }
}

/* Specific modifications */
#I-1-4 {
    #main {
        p:nth-of-type(2) {
            -webkit-region-break-before: always;
        }
    }
}


body#I-1-8 #main {
    .figure {
        float: left;
        clear: left;
        margin-left: -(@page-width) / 18 * 1.2;
        margin-right: 0;
        max-width: 100mm;

        &.half {
            max-width: 90mm;
            margin-right: @line-height/2 + @page-width/18 * 0.2;
        }

        &.full {
            max-width: 200mm;
        }

        &.medium {
            max-width: (@page-width / 18) * 6;
            margin-left: -(@page-width) / 18 * 1.4;
            margin-right: @line-height/2 + @page-width/18 * 0.2;
        }
    }

    .inlineFootnote .figure {
        margin-left: 0;
        margin-right: 0;

        &.I185 {
            clear: none;
            margin-right: -7mm;
            margin-top: -8mm;
            margin-left: 4mm;

            + p {
                clear: both;
            }
        }
    }
}

#I-2-7 {
    #main {
        .block-end {
            margin-top: 2.8 * @line-height;
        }

        .I2712 {
            margin-bottom: 11pt;
        }
    }
}

#I-2-2 {
    #main {
        .block-end-small {
            margin-top: .8 * @line-height;
        }
    }
}

span.img_ref, #main section.excursion span.img_ref{
    display: none;
}
.running{
    font-family:@body-font;
    font-style:italic;
    padding-top: 24pt;
    // font-size: 9pt
    text-align: center;
}
.header:after {
    content: "The Riddle of the Real City and the Dark Knowledge of Urbanism";
}
.paper:nth-child(odd) .header {
    text-align: center;
}
.paper:nth-child(odd) .header:after {
    content: "Grid City and the Birth of (Modern) Urbanism";
    font-style:normal;
    font-size: 10pt;
    text-transform: uppercase;
    font-size: "GaramondSC12";
}

.footer {
    padding-top: @page-width/36;
}

.footer:after {
    font-family: dauphine;
    font-size: @font-size;
}
.paper:nth-child(even) .footer{
    text-align: left;   
}
.paper:nth-child(odd) .footer{
    text-align: right;
}
.main.footer {
    color: red;
}

.footnotes.hidden {
    display: none;
}
.footnoteRef {
    top:0pt;
}
.footnoteRef.collapsed {
    display: initial;
}


// //K
// body #main {
//     // PMS 
//     * {
//         color: black !important;
//     }

//     > p:nth-of-type(2):first-letter {
//         // background-image: none !important;
//        -webkit-text-stroke-color: transparent;
//     }

//     .inlineFootnote, .footnoteRef, .excursion, section.excursion, .footnotefigure {
//         visibility: hidden !important;

//         *, h2, p {
//             visibility: hidden;
//         }
//     }

// }

// body #main {
//     > p {
//         .fakeLettrines {
//             position: absolute !important;
//             top: 0;
//             left: 0;
//             width: calc(~"2 * 28pt + 10px");
//             height: calc(~"2 * 28pt + 10px");
//             margin: 0 !important;
//             padding: 0 !important;
//             visibility: visible !important;
//         }
//     }
// }
// // PMS 
// body #main {
//     * {
//         visibility: hidden !important;
//     }

//     > p:nth-of-type(2):first-letter {
//         visibility: visible !important;
//         background-image: none !important;
//     }

//    .inlineFootnote, .footnoteRef, .excursion, section.excursion, .footnotefigure {
//         visibility: visible !important;
//         color: black !important;

//         *, h2, p {
//             visibility: visible !important;
//             color: black !important;
//         }
//     }
// }

// .paper {
//     background-image: none;
// }

// .header {
//     visibility: hidden;
// }

// .footer {
//     visibility: hidden;
// }