/*********************************************************************/
/*********************************************************************/
/**** ----------------------------------------------------------  ****/
/****       THE HUMANE REPRESENTATION OF MODELS PROJECT           ****/
/**** ----------------------------------------------------------  ****/
/****    OPTIONAL DARK MOOED THEME: Supplementary stylesheet for  ****/
/****    the HROM interface                                       ****/                
/****    - Made by Little Sketches                                ****/                                
/****                                                             ****/             
/*********************************************************************/
/*********************************************************************/

  /****************************************************/
  /********** COLOUR PALETTES AND TYPOGRAPHY **********/
  /****************************************************/

    /** Colour palette CSS variables ***/

      /** Classed fil colours  ***/
      .comic .palette-A-Purple{
        fill: #a97ddc;
      }
      .comic .palette-A-Yellow{
        fill: #f2f6ca;
      }
      .comic .palette-A-Green{
        fill: #a97ddc;
      }

    /** Importnaed typfaces and classed styles ***/
      @font-face {
        font-family: 'BadaBoom BB';
        src: url('../fonts/badaboombb.woff2') format('woff2'),
        url('../fonts/badaboombb.woff') format('woff');
        font-style: normal;
        font-weight: 400;
      }
      @font-face {
        font-family: 'DigitalStrip';
        src: url('../fonts/digistrip.ttf');
      }
      @font-face {
        font-family: 'DigitalStrip Bold';
        src: url('../fonts/digistrip_b.ttf');
      }
      @font-face {
        font-family: 'DigitalStrip Italic';
        src: url('../fonts/digistrip_i.ttf');
      }

      /*** Text class styling ***/
      main.comic{
        font-family:  'Dosis'  
      }
      .comic .strong{
        font-family: 'DigitalStrip Bold';
      }

  /****************************************************/
  /******* GENERAL LAYOUT STUFF | ANGLED PANES ********/
  /****************************************************/

    /* CONTEXT VIEW > TRANSITION TO LARGER BANNER HEIGHT */
      .comic .content-container.layout-M.configuration-A > .pane1{
        margin-right: -1vw;      
        clip-path: polygon(
          0 0,
          calc(100% - 8vw) 0,
          100% 100%,
          0 100%
        );  
      }
      .comic .content-container.layout-M.configuration-A > .pane2{
        margin-left: -7vw;   
        margin-right: -1vw;   
        clip-path: polygon(
          0 0,
          calc(100% - 8vw) 0,
          100% 100%,
          8vw 100%
        );  
      }
      .comic .content-container.layout-M.configuration-A > .pane3{
        margin-left: -7vw;   
        margin-right: -1vw;   
        clip-path: polygon(
          0 0,
          calc(100% - 1vw) 0,
          calc(100% - 1vw) 100%,
          8vw 100%
        );  
      }

    /* CHAPTER VIEWS > TRANSITION TO ZERO BANNER HEIGHT */
    .comic .content-container.layout-G.configuration-A > .pane1{
        margin-right: -1vw;      
        clip-path: polygon(
          0 0,
          calc(100% - 8vw) 0,
          100% 100%,
          0 100%
        );  
      }
    .comic .content-container.layout-G.configuration-A > .pane2{
        margin-left: -7vw;   
        margin-right: -1vw;   
        clip-path: polygon(
          0 0,
          100% 0,
          100% 100%,
          8vw 100%
        );  
      }     

    /* PLAN VIEWS >  THREE EVEN  PANES + MENU  */
      .comic .content-container.layout-H.configuration-A > .pane1{
          clip-path: polygon(
            0 0,
            calc(100% - 8vw) 0,
            100% 100%,
            0 100%
          );  
        }
      .comic .content-container.layout-H.configuration-A > .pane2{
          margin-left: -8vw;
          clip-path: polygon(
            0 0,
            calc(100% - 8vw) 0,
            calc(100% - 5.4vw) calc(100% - 10vw),
            4vw 100%
          );  
        }
      .comic .content-container.layout-H.configuration-A > .pane3{ 
          margin-top:  -10vw;
          margin-left: -3.85vw;
          clip-path: polygon(
            0 10vw,
            calc(100% - 5.3vw) 0,
            100% 100%,
            4vw 100%
          );  
        }  

    /* PLAN VIEWS > TWO CHART FOCUS: MIDDLE PANES IN VEIW WITH LEFT REDUCED  */
      .comic .content-container.layout-I.configuration-A > .pane1{
          clip-path: polygon(
            0 0,
            calc(100% - 4vw) 0,
            100% 100%,
            0 100%
          );  
        }
      .comic .content-container.layout-I.configuration-A > .pane2{
          margin-left: -4vw;
          clip-path: polygon(
            0 0,
            calc(100% - 8vw) 0,
            calc(100% - 5.4vw) calc(100% - 10vw),
            2vw 100%
          );  
        }
      .comic .content-container.layout-I.configuration-A > .pane3{ 
          margin-top:  -10vw;
          margin-left: -2vw;
          clip-path: polygon(
            0 10vw,
            calc(100% - 5.25vw) 0,
            100% 100%,
            2vw 100%
          );  
        }   

    /* PLAN VIEWS > TOP/MID PANE FOCUS (COST CURVE)  */
      .comic .content-container.layout-J.configuration-A > .pane1{
        clip-path: polygon(
          0 0,
          calc(100% - 4vw) 0,
          100% 100%,
          0 100%
        );  
      }
      .comic .content-container.layout-J.configuration-A > .pane2{
        margin-left: -4vw;
        clip-path: polygon(
          0 0,
          calc(100% - 8vw) 0,
          calc(100% - 1.5vw) calc(100% - 10vw),
          3.95vw 100%
        );  
      }
      .comic .content-container.layout-J.configuration-A > .pane3{ 
        margin-top:  -10vw;
        margin-left: -2vw;
        clip-path: polygon(
          2vw 10vw,
          calc(100% - 1.5vw) 0,
          100% 100%,
          2.1vw 100%
        );  
      }   

    /*  PLAN VIEWS > BOTTOM/MID PANE FOCUS (WEDGES CURVE) */
      .comic .content-container.layout-K.configuration-A > .pane1{
        clip-path: polygon(
          0 0,
          calc(100% - 4vw) 0,
          100% 100%,
          0 100%
        );  
      }
      .comic .content-container.layout-K.configuration-A > .pane2{
        margin-left: -4vw;
        clip-path: polygon(
          0 0,
          calc(100% - 8.35vw) 0,
          calc(100% - 8.15vw) calc(100% - 10vw),
          0.9vw 100%
        );  
      }
      .comic .content-container.layout-K.configuration-A > .pane3{ 
        margin-top:  -10vw;
        margin-left: -3vw;
        clip-path: polygon(
          0vw 10vw,
          calc(100% - 8vw) 0,
          100% 100%,
          3.3vw 100%
        );  
      }   

    /*  PLAN VIEWS > LEFT PAN IN FOCUS (PLAYBOOK)  */
      .comic .content-container.layout-L.configuration-A > .pane1{
        clip-path: polygon(
          0 0,
          calc(100% - 7.5vw) 0,
          100% 100%,
          0 100%
        );  
      }
      .comic .content-container.layout-L.configuration-A > .pane2{
        margin-left: 0vw;
        clip-path: polygon(
          0 0,
          calc(100% - 8.35vw) 0,
          calc(100% - 8.15vw) calc(100% - 10vw),
          1vw 100%
        );  
      }
      .comic .content-container.layout-L.configuration-A > .pane3{ 
        margin-top:  -10vw;
        margin-left: 0vw;
        clip-path: polygon(
          0vw 10vw,
          calc(100% - 8vw) 0,
          100% 100%,
          4vw 100%
        );  
      }   

    /*************************************************/
    /***  THREE-PANE LAYOUT CONFIGURATIONS         ***/
    /***  For the  main action explorer sections   ***/
    /*************************************************/

      /* MAIN MENU 4 PANE DISPLAY LAYOUT > STARTING VIEW*/      
      /* Configuration A: Forward angled dividers */
        .comic .content-container.layout-F.configuration-A > .pane1{
          margin-right: -1vw;      
          clip-path: polygon(
            0 0,
            calc(100% - 8vw) 0,
            100% 100%,
            0 100%
          );  
        }
        .comic .content-container.layout-F.configuration-A > .pane2{
          margin-left: -7vw;   
          margin-right: -1vw;   
          clip-path: polygon(
            0 0,
            calc(100% - 8vw) 0,
            100% 100%,
            8vw 100%
          );  
        }
        .comic .content-container.layout-F.configuration-A > .pane3{
          margin-left: -7vw;   
          margin-right: -1vw;   
          clip-path: polygon(
            0 0,
            calc(100% - 1vw) 0,
            calc(100% - 1vw) 100%,
            8vw 100%
          );  
        }
        /* Pane layout for context veiw */
        .comic .content-container.layout-F.configuration-A.contextLayout {
          grid-template-rows: calc(70% - 1.5vw) calc(30% - 1.5vw)
        }



/****************************************************/
/****** CONTENT LAYOUT | GRID LAYOUT STRUCTURE  *****/
/****************************************************/

    /*************************************************/
    /***  THREE-PANE NESTED LAYOUT CONFIGURATION   ***/
    /***  For the action intro / menu sections     ***/
    /*************************************************/

      .comic .content-container.layout-nested-A{
        display: grid;
        grid-gap: 1vw;  
        grid-template-columns: repeat(6, calc(16.667% - 1.167vw)); 
        grid-template-rows: repeat(4, calc(25% - 1.25vw)); 
        grid-template-areas:
          "a1   a2  a3  a4  a5  a6 "
          "a15  cnt cnt cnt cnt a7"
          "a14  cnt cnt cnt cnt a8"
          "a13  a12 a11 a10 a9  ret"
      }

      .comic .actionActMenu-context{
        font-family: 'DigitalStrip';
        font-size: 1rem;
        background: linear-gradient(35deg, pink, yellow);    
        border: 2px solid #000;
        padding: 0.5rem;
        box-shadow: 10px 10px 4px #000
      }

    /*************************************************/
    /***  FOUR PANE SUB-PANE LAYOUT CONFIGURATIONS ***/
    /***  Used to layout primary section areas     ***/
    /**************************************************/

      /* GUTTER SHAPE OPTION 1 : Row 1 with forward angled gutter ; Row 2 with back angled gutter */
        .comic .grid-2x4.configuration-A {
          grid-column-gap: 0vw;            
        }
        .comic .grid-2x4.configuration-A > .area-1{
          margin-right: -1vw;    
          padding-right: 2.5vw;      
          clip-path: polygon(
            0 0, 
            100% 0,
            calc(100% - 3vw) 100%,
            0 100%
          );      
        }
        .comic .grid-2x4.configuration-A > .area-2{
          margin-left: -1vw;
          padding-left: 2.5vw;  
          clip-path: polygon(
            3vw 0,
            100% 0,
            100% 100%,
            0 100%
          );       
        }
        .comic .grid-2x4.configuration-A > .area-3{
          margin-right: -1vw;                    
          clip-path: polygon(
            0 0,
            calc(100% - 3vw) 0,
            100% 100%,
            0 100%
          );     
        }
        .comic .grid-2x4.configuration-A > .area-4{
          margin-left: -1vw;        
          clip-path: polygon(
            0 0 ,
            100% 0,
            100% 100%,
            3vw 100%
          );           
        }

  /****************************************************/
  /******* TOOLTIP STYLING | HTML CONTENT TIPS ********/
  /****************************************************/
    .comic .tooltip__content {
      font-family: 'DigitalStrip'
    }

  /****************************************************/
  /***********    SVG FILTER TEXT STYLE    ************/
  /****************************************************/


	/******************************/
	/*** BESPOKE CONTEXT CURSOR ***/
	/******************************/  


    /*********************************************************************/
    /***  TANGLE STYLING  Adapated from TangleKit.css                  ***/
    /***  Tangle 0.1.0 (c) 2011 Bret Victor.  MIT open-source license. ***/
    /*********************************************************************/


/*-------------------------------------------------------------------*/
/*------------------------  CONTENT SECTIONS ------------------------*/
/*-------------------------------------------------------------------*/

  /****************************************************/
  /***** PROLOGUE: "THE SETUP" SCENE / MAIN MENU  *****/
  /****************************************************/

    /**************************************************************/
    /*** 0. TOP SECTION: "SETUP" SCENE BANNER SECTION - Problem ***/
    /**************************************************************/
      .comic .setupPane-bgImage{
        background-size: cover;
      }
      .comic #setup-banner{
        grid-template-columns: calc(30% - 1.75vw) calc(20% - 1.75vw) calc(50% - 1.5vw); 
        grid-template-rows: calc(100% - 5vw);
      }
	    .comic .setup-murmur,
	    .comic .setup-title {
	      font-family: 'BadaBoom BB';
	    }
      .comic #setup-banner-background{
        filter: sepia(0.6);
      }
      .comic #setup-banner-bgImage{
        filter: sepia(0.6);
      }      
      .comic #setup-banner-bgFilter{
        background-image: url(../img/comic/meeting-wide.png), radial-gradient(at 75% 50%, yellow, orange, red, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 5px, transparent 10px);
        background-size: cover;
        background-blend-mode: overlay;
        background-position: center;
      }
      .comic  #setup-banner-bgOverlay{
        background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%);   
        animation-duration: 5000ms; 
      }
      .comic  #setup-banner-bgOverlay.darkened{
        background: linear-gradient(to right, rgba(50,50,50,0.95) 0%, rgba(50,50,50,0.6) 80%, rgba(0,0,0,0.4) 100%);    
      }      
      .comic #setup-banner-introLabel{ 
        margin: 1rem;      
      }   

      /* Problem murmurs */
        .comic #setup-problem-container{
          grid-area: 1 / 2 / 1 / 3;   
          display: grid;
          grid-template-columns: 10% 80% 10%; 
          grid-template-rows: 10% repeat(4, 20%) 10% ; 
        }
        .comic #setup-problem{
            grid-area: 2 / 2 / 2 / 2;      
            background: linear-gradient(to right, #fbfbf8 0%,  #eee 100%);
            font-size: 1.25rem;
        }
      /* Audience murmurs */
        .comic #setup-murmurs-container{
          grid-area: 1 / 3 / 1 / 4;   
          display: grid;
          grid-template-columns: repeat(10, 10%) ; 
          grid-template-rows: 5% repeat(4, 22.5%) 5% ; 
        }
        /* Style and position each murmur */
          .comic .setup-murmur {
            position: relative;
            background: linear-gradient(to top, #fbfbf8 0%,  #ddd 100%);
            border-radius: 0.25rem;
            align-self: center;
            text-align: center;
            font-size: 1rem;
            line-height: 1;      
            padding: 0.25rem;
            box-shadow: 3px -3px 3px rgba(0,0,0,0.5);
          }
            .comic #setup-murmur-1.setup-murmur{ grid-area: 4 / 2 / 4 / 2; }
            .comic #setup-murmur-2.setup-murmur{ grid-area: 3 / 3 / 3 / 3; }
            .comic #setup-murmur-3.setup-murmur{ grid-area: 4 / 5 / 4 / 7; }
            .comic #setup-murmur-4.setup-murmur{ grid-area: 2 / 4 / 2 / 6; }
            .comic #setup-murmur-5.setup-murmur{ grid-area: 3 / 7 / 3 / 7; }
            .comic #setup-murmur-6.setup-murmur{ grid-area: 2 / 7 / 3 / 8; }
            .comic #setup-murmur-7.setup-murmur{ grid-area: 3 / 8 / 3 / 10; }
            .comic #setup-murmur-8.setup-murmur{ grid-area: 5 / 9 / 5 / 11; }

          /* Murmer speech tails as psudeo elements*/
            .comic .setup-murmur:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              width: 0;
              height: 0;
            } 
            .comic .setup-murmur.leftTail:after,             
            .comic .setup-murmur.rightTail:after {
              border: 20px solid transparent;
              border-top-color: #fbfbf8;
              border-bottom: 0;
              margin-left: -10px;
              margin-bottom: -20px;
            }
            .comic .setup-murmur.leftTail:after{ border-left: 0; }            
            .comic .setup-murmur.rightTail:after{ border-right: 0; }
            .comic .setup-murmur.startTail:after  {
              left: 0;
              top: 50%;
              border: 10px solid transparent;
              border-right-color: #fbfbf8;
              border-left: 0;
              border-bottom: 0;
              margin-top: -5px;
              margin-left: -10px;
            }

      /* Context paragraph */
        .comic #setup-context-container{
          grid-area: 1 / 1 / 5 / 5;            
            grid-template-columns: calc(30% - 1.75vw) calc(20% - 1.75vw) calc(50% - 1.5vw);
            grid-template-columns: 20% 30% 30% 20%;
            grid-template-rows: repeat(4, 25%);   
          perspective: 400px;
          line-height: 1.25
        }
        .comic #setup-contextDescription-container{
          font-family: 'DigitalStrip';
          font-size: 2.5rem;
           grid-area: 2 / 1 / 5 / 5; 
           height: fit-content;   
           color: #fff;
           margin: 1.3vw;
           padding: 1rem;
        }

      /* Star Wars crawl */
        .comic #setup-contextDescription-container.crawl{
          position: relative;
          top: 100%;
          position: relative;
          transform-origin: 50% 100%;
          animation: crawl 60s linear infinite;
          text-align:justify;           
        }
        .comic #setup-contextDescription-container.crawl > h1{
          font-family: 'BadaBoom BB';
          font-size: 7.5rem;                
          text-align:  center;
          line-height: 0.9;
          margin-block-start: 0.125rem;
          margin-block-end: 0.125rem;
        }
        .comic #setup-contextDescription-container.crawl > h3{
          text-align:  center;
          margin-block-end: 0.25rem;
        }
          @keyframes crawl {
            0% {
              top: 0;
              transform: rotateX(20deg) translateZ(0px) translateY(30%);
            }
            100% { 
              top: -1500px;
              transform: rotateX(25deg) translateZ(-250px);
            }
          }

    /*************************************************************/
    /******* 0-3. GENERAL  PANES STYLING                 ******* /
    /*************************************************************/
     
      .comic #setupScene-container .setup-title{
        font-size: 6vh;       
        mix-blend-mode: normal;
        color: #fff;
        text-shadow:  0.25rem 0.25rem 0.5rem #000;       
      }
      .comic #setupScene-container.baseline{
        grid-template-rows: calc(0% - 1.5vw) calc(100% - 3vw); 
        grid-template-columns: calc(30% - 1.333vw) calc(30% - 1.333vw) calc(40% - 1.333vw); 
      }   
      .comic #setupScene-container.actionMenu{
        grid-template-rows: calc(0% - 1.5vw) calc(100% - 3vw); 
        grid-template-columns: calc(10% - 1.333vw) calc(80% - 1.333vw) calc(10% - 1.333vw) ; 
      }            
      .comic .setup-pane-overlay > img{ 
        filter: sepia(0.6);
      }


    /*************************************************************/
    /*** 1. LEFT "SETUP" SCENE PANE #1 - Baseline               **/
    /*************************************************************/

      .comic #setup-pane-1{
        grid-area: paneA;  
        display: grid;
          grid-template-columns: 5% repeat(4, 22.5%) 5%; 
          grid-template-rows: 5% repeat(4, 22.5%) 5%; 
        transition: all 500ms ease-in-out;
      }
      .comic #setup-pane-1-background-container{
        z-index: 2;
      }      
      .comic #setup-pane-1.sankeyChart{
        clip-path: polygon( 0 0, calc(100% - 8vw) 0,  0% 100%,  0% 100%); 
      }
      .comic #setup-pane-1-return{
        font-family: 'BadaBoom BB';
        font-size: 3rem;
        color: #fff;
        text-shadow: 2px 2px 0px #a97ddc;
      }
      .comic #setup-pane-1-return.sankeyChart{
        grid-area: 2 / 2 / 2 / 4;
        justify-self: start;
        align-self: start;
        text-shadow: 3px 3px 3px #000;
      }
      .comic #bang-text-emissions{
        fill: #CDDC39;
        font-family: 'BadaBoom BB';
        font-size: 55px;
        text-anchor: middle;
        text-shadow: 3px 3px 3px #000;
      }
      .comic #setup-pane-1-background-image{
        background-image: url("../img/comic/enemy.png");          
      }

    /*************************************************************/
    /** 2. CENTER "SETUP" SCENE PANE #2 - Action content        **/
    /*************************************************************/  

      .comic #setup-pane-2{
          grid-area: paneB;
          grid-template-columns: repeat(4, 25%);
          grid-template-rows: 12.5% repeat(3, 25%) 12.5% ;        
          transition: all 500ms ease-in-out;    
          background-image: url(../img/intro/marvel.gif);
          background-size: cover; 
        }
        .comic #setup-pane-2-title{
          grid-area: 3 / 2 / 4 / 4;     
          place-self: center center;
          text-align: center;
          line-height: 1;
        }
        .comic #setup-pane-2-label {  
          grid-area: 5 / 2 / 5 / 5;                
          place-self: center center; 
          z-index: 1;                
        }  
      /* TITLE SECTION */
        .comic #actionActMenu-title-section{
          display: visible;
          grid-area: cnt;
          z-index: 1;
          display: grid;
            grid-template-columns: 10% 80% 10%; 
            grid-template-rows: 70% 20% 10%; 
        }
        .comic #actionActMenu-title-section.explorer{
          background: radial-gradient(white, #CDDC39, purple);
          grid-area: title;
        }        
        /* Main title block container */
        .comic #actionActMenu-titleBlock{
          grid-area: 1 / 1 / 4 / 4;
          width: 100%;
          height: 100%;               
          font-size: 6vh;
          place-self: center center;    
        }
        .comic #actionActMenu-titleText{
          text-align: center;
          color: rgb(28, 22, 246);
        }
      .comic  #actionActMenu-context-message{
          display: visible;      
          padding: 1rem;
          place-self: center center;   
          background-color: #fff;
        }

    /*************************************************************/
    /** 3. RIGHT "SETUP" SCENE PANE #3 - Action content         **/
    /*************************************************************/  

      .comic #setup-pane-3{
        grid-area: paneC;    
        grid-template-columns: 20% repeat(3, 25%) 5%;
        grid-template-rows: 5% repeat(6, 15%) 5% ;      
        transition: all 500ms ease-in-out;    
      }
      .comic #setup-pane-3-background-image{
        background-image: url("../img/comic/fight.png");      
        grid-area: 1 / 1 / 1 / 1;
        background-size: cover;
        background-position: center;
      }
      .comic #setup-pane-3-background-filter{
        grid-area:  1 / 1 / 1 / 1;
        background: url("../img/comic/fight.png"), url("../img/comic/fight.png");   
        background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
        background-size: cover;        
        background-blend-mode: difference;
        filter: brightness(2) invert(1) grayscale(1);
        box-shadow:  black 0px 0px 0px 1px inset;
        opacity: 0;
      }
     .comic #setup-pane-3-label {
        grid-area: 5 / 2 / 6 / 5;      
        text-align: center;
        justify-self: center;               
        width: fit-content;
      }  
      .comic #setupScene-container #battlePlan-allPanes,
      .comic #setupScene-container  #battlePlan-exit{   
        font-family: 'BadaBoom BB';
        background: #000;
        color: #fff;
        font-size: 2rem;   
        text-align: center;    
        height: fit-content;
      }     
      .comic #setupScene-container #battlePlan-allPanes{
        padding: 0rem 0.5rem;    
        width: fit-content;            
      }
      .comic #setupScene-container #battlePlan-allPanes:hover{
        background-color: purple;
      }      
      .comic #setupScene-container  #battlePlan-exit{
        text-align: center;
        align-self: end;
        height: fit-content;
      }

      .comic #setup-pane-3-svg-container{
          grid-area: 1 / 1 / 9 / 7; 
          z-index: 1;
        }
      .comic #setup-pane-3-label {
          grid-area: 5 / 2 / 6 / 5;      
          z-index: 2 ; 
        }  
      .comic #setup-pane-3-title{
          grid-area: 7 / 2 / 7 / 5;     
          place-self: end center; 
          text-align: center;
          z-index: 6;   
          line-height: 1;
        }


/****************************************************/
/******  ACT I: THE "BASELINE" VISUALISATIONS  ******/
/****************************************************/

    .comic #baselineAct-container #baseline-pane-2 {
      background: linear-gradient(35deg, #33001b, #f7797d, #FBD786, #C6FFDD); 
      animation-duration: 500ms;  
  	}
    .comic #baselineAct-container #baseline-pane-2.bubbleChart {
      background: linear-gradient(35deg, #FBD786, #C6FFDD); 
    }
    .comic #baselineAct-container #baseline-pane-2.sankeyChart {
      background: linear-gradient(35deg, #ff0084, #33001b, #33001b); 
      margin-left: 0vw;
      clip-path:  polygon( 22vw 0, 97vw 0, 97vw 100%, 0 100% );      
    }
    .comic #baselineAct-container #baseline-pane-2.mapVis {
      background: linear-gradient(35deg, #1C2837, #050608); 
    }
    .comic #baselineAct-container #baseline-pane-2 {
      grid-template-columns: 11% repeat(4, 21%) 5%;   /* Provide more room for visualistions due to angled divider */
    }

    /* Comic styling for headers/buttons */
    .comic  #baselineAct-container .chartHeader{
      font-family: 'DigitalStrip';
      padding: 0.5rem;
      border: 1px solid #fff;
      box-shadow: 3px 3px 0px #fff;
      background: linear-gradient(35deg, red, purple);
      z-index: 5;
    }

    /* Comic styling for summary metrics */
    .comic .baseline-headline-major{
      font-family: 'BadaBoom BB';
      font-size: 3.5rem;
      color: #fff;
      text-shadow: 1.5px 1.5px 0px #000;
    }
    /* Vis pane return button hidden/unused in comic view */
    .comic #baseline-vis-return-container{
      display: none;
    }
    .comic #baselineAct-container #baseline-vis-headline-container.perspective{
        z-index: 2;
        transform: translateX(40%) translateY(100%) rotateX(-20deg) rotateZ(0deg) rotateY(-40deg) scale(2.5);
    }
    .comic .baseline-headline-minor{
      font-family: 'DigitalStrip';
    }
    .comic #baselineTotalEmissionsUnit{
      font-family: 'BadaBoom BB';
      font-size: 1.75rem;
      color: #fff;
      text-shadow: 1px 1px 0px #000;      
    }
    .comic #baselineAct-container  #baseline-vis-headline-showCharts-container {
      height: fit-content;
      align-self: end;
      padding-left: 20%; 
    }    
    .comic #baselineAct-container  #baseline-vis-headline-showCharts-containe.preview {
      grid-area: '5 / 2 / 5 / 4';
    } 
    .comic #baselineAct-container #baseline-vis-headline-showCharts,
    .comic #baselineAct-container #baseline-vis-headline-chartsNarrative{
      font-family: 'DigitalStrip';
      font-size: 1rem;
      line-height: 1.2;
      padding: 0.5rem;
      border: 2px solid #000;
      background: linear-gradient(35deg, pink, yellow);    
    }
    .comic #baselineAct-container #baseline-vis-headline-showCharts:hover,
    .comic #baselineAct-container #baseline-vis-headline-chartsNarrative:hover {
      background: linear-gradient(35deg, red, purple);
      color: #fff;    
    }
    .comic .baselinePerUnitEmissions-container .value{
      font-family: 'BadaBoom BB';
      font-size: 1.25rem;
      color: #fff;
      text-shadow: 1px 1px 0px #000;       
    }
    .comic .baselinePerUnitEmissions-container .unit,
    .comic #baselineTotalEmissionsUnitAKA{
      font-family: 'DigitalStrip';
      font-size: 0.4rem;
      line-height: 1.1;
    }

    /* Map visualisation */
      .comic #baselineAct-container #baseline-vis-mapVis-container.perspective{
        transform: rotateX(60deg) rotateZ(45deg) scale(0.55) translate(20%, 120%) translateZ(0px);     
        transform-origin: 50% 50%
      }      
    /* Emissions bubble chart */
     .comic #baselineAct-container #baseline-vis-bubbleChart-container.perspective{
        transform: rotateX(60deg) rotateZ(45deg) scale(1.5) translate(50px, -50px) translateZ(0px);
        mix-blend-mode: hard-light;
      }  
     .comic #baselineAct-container #baseline-vis-bubbleChart-container.headlinePerspective{
        transform: translateX(0%) translateY(10%) rotateX(-20deg) rotateZ(0deg) rotateY(-40deg) scale(2);
        mix-blend-mode: soft-light;
      }   
    /* Emissions sankey chart */
     .comic #baselineAct-container #baseline-vis-sankeyChart-container.perspective{
        transform: rotateX(60deg) rotateZ(45deg) scale(1.25) translate(-100%, -170%) translateZ(0px)
      }   
      .comic #baselineAct-container.fullscreen{
        grid-template-columns: 0% calc(100% - 2vw);
      }
      .comic #baselineAct-container #baseline-vis-sankeyChart-container #sankeyChart-header.positioned{
        animation-duration: 500ms;
        opacity: 1;
        transform: translateX(15vw);
      }
/****************************************************/
/***** ACT IIa: INTRO & MENU FOR "ACTIONS MODEL" ****/
/****************************************************/

  .comic #actionActMenu-background-section{
    display: none;
  }
    /* Default image styling */
    .comic .actionPaneImage{
      filter: brightness(1.2) sepia(0.9);
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    .comic .actionPaneImage:hover{
      filter: brightness(1.2) sepia(0);
    }  
    /* Comic styled primary sections (static background styling) */
    .comic #actionActMenu-title-section{
      mix-blend-mode: difference;
      transition: all 800ms;
      pointer-events: all;
    }
    /* Action thumbnail image panes */
    .comic .actionPane-thumbnail{
      display: grid;
      grid-template-columns: 100%; 
      grid-template-rows: 100%; 
      opacity: 0;
    }
    .comic #actionActMenu-returnPane{
      grid-area: ret;
      display: grid;
    }    
    /* Pencil effect (filter 1 with water colour on hover */
    .comic .actionPaneImage-filter-1,
    .comic .actionPaneImage-filter-2{
      grid-area: 1 / 1 / 1 / 1;
      width: 100%;
      height: 100%;        
      background-size: cover;     
      transition: all 100ms;                         
    }
    .comic .actionPaneImage-filter-2{
      opacity: 0;          
      cursor: pointer;
    }
    .comic .actionPaneImage-filter-1:hover,
    .comic .actionPaneImage-filter-2:hover{
      opacity: 1;
    }
    /* Action pane styleing */
    .comic #actionAct-titleText{
      color: rgb(28, 22, 246 );
    }
    .comic #actionActMenu-title-section:hover{
      background: radial-gradient(white, #CDDC39, purple);
    }    	
    .comic #visualisation-section{
      background: linear-gradient(135deg, aqua, yellow);
    }
    .comic #actionActMenu-returnPane #actionActMenu-vis-return{
      color: #fff;
      cursor: pointer;
      font-family: 'BadaBoom BB';  
      font-size: 3rem;
      pointer-events: all;
      -webkit-text-stroke: 1px #000;
      text-shadow: 2px 2px 2px #000;   
      place-self: center;         
    }
    .comic #actionActMenu-returnPane:hover{
      background: #000;    
      -webkit-text-stroke: 1px #fff;
      text-shadow: 2px 2px 2px #fff;         
    }

    /* BUSINESS CASE EXPLORER SECTIONS */
    .comic .showBusinessCase #businessCase-container{
      display: grid;
    }
    .comic * .actionDescription-section-container,
    .comic * .actionOutput-section-container,
    .comic * .actionInput-section-container {
      color: #fff;    
    }
    .comic * .area-1{
      background: linear-gradient(135deg, #5B2A6F, #643075, #131313);
    }
    .comic * .area-2{
      background: linear-gradient(110deg, #131313, #643075, #CDDC39);
    }
    .comic * .area-3{
      background: linear-gradient(70deg, #131313, #643075, #CDDC39);        
    }
    .comic #businessCase-container.grid-2x1.configuration-B .area-1,
    .comic #businessCase-container.grid-2x1.configuration-B .area-2,
    .comic #businessCase-container.grid-2x1.configuration-B .area-3{
      background: #fff
    }

    /* TANGLE VARIABLE STYLING: IN ACTION EXPLORER AND OVERLAY; */
    .comic *  #businessCase-container .tangleVariable {
      color:  var(--highlight-color); 
    }
    .comic * #businessCase-container.grid-2x1.configuration-B .tangleVariable {
      color: var(--pallette-2); 
    }
    .comic * #businessCase-container.grid-2x1.configuration-B .tangleVariable {
      color: var(--pallette-2); 
    }
    .comic * #businessCase-container.grid-2x1.configuration-B .tangleVariable.TKAdjustableNumber {
       border-bottom: 1.25px dashed var(--pallette-2);
    }     
    .comic * #businessCase-container.grid-2x1.configuration-B  .action_temporalAssumption{
      box-shadow: inset 0 -0.15rem 0 0 var(--pallette-2);
    }
    .comic * #businessCase-container.grid-2x1.configuration-B  .action_temporalAssumption:hover {
      box-shadow: inset 0 -2.5rem 0 0 var(--pallette-2);
      color: #000;
    }

  /***********************************/
  /****** CONTENT > TITLE PANE  ******/
  /***********************************/

    /* SVG title text banner (with viewBox dynamically scaled with JS)*/
    .comic svg #actionActMenu-title-text{
        text-anchor: middle;
    }
    .comic svg #actionActMenu-title-text > #actionActMenu-title-headline{
      font-size: 70px;
      fill: #fff;
      letter-spacing: -2px;
      mix-blend-mode: difference;          	
    }  
    .comic svg #actionActMenu-title-text > #actionActMenu-title-line-upper, 
    .comic svg #actionActMenu-title-text > #actionActMenu-title-line-lower{
        font-size: 25px;
        fill: #fff;
        mix-blend-mode: difference;  
    }

/****************************************************/
/***** ACT IIb: THE INTERACTIVE "ACTIONS MODEL" *****/
/****************************************************/

    /* Comic styled pane header labels */
    .comic .content-section .pane > .label{
        font-family: 'DigitalStrip';
        font-size: 0.75rem;
    }
    .comic .content-section .pane > .label > span{
        padding: 0.5rem;
        border: 2px solid #000;
        line-height: 3;
        background: linear-gradient(35deg, pink, yellow);    
    }
    /***********************************/
    /****** CONTENT > TITLE PANE  ******/
    /***********************************/

      /* SVG title text banner (with viewBox dynamically scaled with JS)*/
      .comic svg #actionAct-title-text{
        text-anchor: middle;
      }
      .comic svg #actionAct-title-text > #actionAct-title-headline{
          font-size: 70px;
      }  
      .comic svg #actionAct-title-text > #actionAct-title-line-upper, 
      .comic svg #actionAct-title-text > #actionAct-title-line-lower{
          font-size: 25px;
          fill: #38E1F2;
          mix-blend-mode: difference;  
      }
	    /* Comic styled title block */
	    .comic  #actionActMenu-title-section> #actionActMenu-titleBlock{
	        font-family: 'BadaBoom BB';
	        line-height: 0.85;    
	        background: url("../img/comic/flashBG.png");
	        background-repeat: no-repeat;
	        background-size: 100% 100%;  
	    }
	    .comic  #actionActMenu-title-section * #actionActMenu-titleText{
	        color: rgb(28, 22, 246 );
	        mix-blend-mode: multiply
	    }

    /**************************************************/
    /*** CONTENT >  BUSINESS CASE INFORMATION PANE  ***/
    /*************************************************/

      /*******************************************************/
      /**** BUSINESS CASE INFORMATION SUB-PANES / TABLES  ****/
      /*******************************************************/
        
        .comic .actionDescription-container> div > strong {
          font-family: 'DigitalStrip Bold';
        }
        .comic #actionCostCurve-header > span {
          	font-family: 'BadaBoom BB';
          	font-size: 2rem;
          	padding: 1vw 0.5vw;
          	color: #fff;
          	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 4px 0 #000, 1px 4px 0 #000;
          	line-height: 1.1;
        }
      	/** Comic styling for summary (key input/output) tables **/
        .comic #bc-actionInput-container .table-container {
          	padding: 0rem 0rem 1rem 1rem;
        }
        .comic #bc-actionOutput-container {
          	padding: 0rem 1rem 1rem 2vw;
        }
        .comic #bc-actionOutput-moreButton{
          display: none;
        }    
        
        .comic .table-container .summaryTable-header,
        .comic table,
        .comic table.bc-outputTable.summaryTable .label ,
        .comic table.bc-outputTable.summaryTable .value,
        .comic .description{
          	font-size: 0.65rem;          
        }
        .comic .description.header,
        .comic .description.text .boldVariable,
        .comic .table-container .summaryTable-header, 
        .comic table.bc-outputTable.summaryTable .label,
        .comic table.bc-outputTable.summaryTable .value,
        .comic table {
          font-family: 'DigitalStrip Bold';

        }
        .comic .table-container .summaryTable-header {
          padding-top: 0.75rem;
          padding-bottom: 0.25rem;
        }
        .comic table.summaryTable .unit {
          font-size: 0.5rem; 
          margin-top: 0.15rem;
        }
        .comic table.bc-outputTable.summaryTable td {
          margin-top: 0.35rem;
        }
        .comic table.bc-outputTable.summaryTable .label,
        .comic table.bc-outputTable.summaryTable .value  {
          align-self: center;                
        }
        .comic .description ol {
          padding-inline-start: 1.5rem;
        }
        .comic .description li {
          padding-bottom: 0.5rem;
        }
        .comic .description.header {
          padding: 1rem 1rem 0rem 1rem;
        }
        .comic .description.text {
          font-family: 'DigitalStrip';
          margin-top: 0.5rem;
          padding-left: 1rem;
          padding-right: 0.75rem;
        }
        .comic .bc-prices-description.description.text {
           padding-left: 0rem;
        }        
        /* Description text Padding for the grid-2x4 configuration-C shape 1 layout */
        .comic .grid-2x4.configuration-C.shape1 .bc-actionDescription-general {
          padding: 0rem 2rem 1rem 1rem;
        }
        .comic .grid-2x4.configuration-C.shape1 .bc-actionDescription-opportunity {
           padding: 0rem 2rem 1rem 1rem;
        }
        /* Data tables perpsectives */
        .comic #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container{
          background-color: rgba(255, 255, 255, 0.95);
          padding-left: 1rem;
        }
        .comic #actionAct-visNarrative-container #bc-dataTable-container .bc-prices-description{
          padding-left: 0rem;
        }       
        .comic #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container .bc-tablesGroup-container .mainHeader{
          font-family: 'BadaBoom BB';
          font-size: 2.75rem;
        }

    	/* Comic style visulisaiton narrative */  	
    	.comic #actionAct-vis-header > div,
    	.comic .setup-label > div.primary-header {
  			font-family: 'DigitalStrip';
  			line-height: 1.2;
  			padding: 0.5rem;
  			border: 2px solid #000;
  			background: linear-gradient(35deg, pink, yellow);    
  			transition: all 300ms ease-in-out;
    	}
	    .comic .setup-label> div.primary-header:hover {
  			background: linear-gradient(35deg, red, purple);
  			color: #fff;    
	    }
    	.comic .pane-text-button> div{
  			font-family: 'BadaBoom BB';
  			font-size: 6vh;
  			color: #00d8ff;
  			mix-blend-mode: difference;
    	}

		.comic #actionAct-actionSelector-container{
      perspective: 1500px;
      transform-origin: 50% 50%;
      transition: all 500ms;
		}
		.comic #actionAct-actionSelector-container #actionAct-actionSelector-div{
		  transform: translateZ(-1500px) translateX(180%) rotateY(-45deg) scale(8.5);
			transition: all 500ms;		  	
		}
		.comic #actionAct-actionSelector-container #actionAct-actionSelector-div.dataTableView{
		  transform: translateZ(-1500px) translateX(180%) rotateY(-45deg) scale(8.5) translateY(-25%);
		}
	  .comic #actionAct-actionSelector-container select{
			font-family: 'BadaBoom BB';      
			text-shadow: 0.5px 0.5px 1px #000;
			color: #CDDC39;
			background: linear-gradient(35deg, purple, #3F5F7A);
			mix-blend-mode: difference;
      font-size: 1.35vw;
      border-radius: 0px;
      border: none;
      width: 22.5vw;
      height: 3.5rem;
      white-space: pre-wrap;    
	  }
      .comic #actionAct-actionSelector-container > select > option.selectorDefault{
        font-family: 'BadaBoom BB';
      }
	    .comic #actionAct-visNarrative-container #actionAct-vis-return{
        cursor: pointer;
        font-family: 'BadaBoom BB';          
	    }
      .comic #actionAct-visNarrative-container #actionAct-vis-return:hover{
        fill: #FFF;    
      }

    /********************************************/
    /*** ACTION CONTENT > VISUALISATION PANE ***/
    /*******************************************/
      .comic #actionAct-visNarrative-container #bc-dataTable-container .bc-data-container{
        box-shadow:
            0 0 15px 8px #fff,    /* inner white */
            0 0 25px 15px #f0f,   /* middle magenta */
            0 0 35px 20px #0ff;   /* outer cyan */    
      }  

/****************************************************/
/********* ACT III: EXPLORING THE "BATTLE"  *********/
/****************************************************/
  .comic  #planAct-container .visHeader {
		font-family: 'DigitalStrip';
		padding: 0.5rem;      
		background: linear-gradient(35deg, pink, #F7D9AB);
		border: 1px solid #000;
		cursor: auto;
  }
  .comic  #planAct-container #plan-pane-1 {
      background: linear-gradient(155deg, #9F4571, #25185B, #000, #000, #25185B); 
    }
  .comic   #planAct-container #plan-pane-2 {
      background: linear-gradient(125deg, #96EA80, #9EEB7D, #E2F752, #DFE54D); 
    }
  .comic  #planAct-container #plan-pane-3 {
      background: linear-gradient(35deg, #6963E8, #9F4571); 
    }


  /*********************************************/
  /*** VISUALISATION STORY CONTROLS <HEADER> ***/
  /*********************************************/
    .comic .planSection-narrative,
    .comic .planSection-narrativeDetail{
      background: #fff;
      font-family: 'DigitalStrip';        
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
      line-height: 1.2;
      border: 2px solid #000;
    }
    .comic .planSection-narrative p.header {
      font-family: 'DigitalStrip Bold';
      margin-bottom: 0.15rem;   
    }
    .comic #playbook-narrativeDetail{
      font-size: 0.6rem;  
    }

    /*************************************/
    /*** COST CURVE VISUALASTION STORY ***/
    /*************************************/
      .comic #costCurve-narrative.planSection-narrative{
        width: 80%;
      }
	    .comic #costCurve-time{
  			font-family: 'BadaBoom BB';
  			font-size: 2.25rem; 
  			margin-bottom: -0.5rem;
  			padding-left: 0.2rem;
  			color: #000;
  			mix-blend-mode: exclusion;
	    }
	    .comic #planAct-container  #actionCostCurve-infoClose{
	      font-family: 'BadaBoom BB';
      } 
      .comic  #planAct-container #plan-vis-costCurve-container .slider::-webkit-slider-thumb {
        background: purple;
      }
      .comic #planAct-container #plan-vis-costCurve-container .slider::-moz-range-thumb {
        background: purple; 
      }

    /******************************/
    /* Action viewer */
    /******************************/
      .comic #planAct-container  #actionCostCurve-infoClose{
        position: fixed;
        top: 0vw;
        right: -3vw;
        transform: rotate(83deg);
        transform-origin: 0 0;
        font-size: 2rem;
        padding: 0.5vw 2.5vw .5vw 8vw;
        transform-origin: 50% 50%;
        text-align: right;
      }

    /********************/
    /*** WEDGES CHART ***/
    /********************/    
      .comic #wedgesChart-narrative.planSection-narrative{
        width: 100%;
      }    
      .comic #planAct-container #plan-vis-playbook-container #wedgesChart-header.allPanes{
        grid-area: 6 / 2 / 6 / 6;
      }

    /******************************/
    /***** PLAYBOOK FLOWCHART *****/
    /******************************/
      .comic #planAct-container #plan-vis-playbook-container #playbook-header.allPanes{
        grid-area:  1 / 1 / 1 / 5;
        align-self: center
      }
      .comic #pb_group-timelineLabels{
        text-shadow: 3px 3px 0px #000
      }
      .comic .pb_connector{
        filter: url(#glow);
      }