/* This file must ONLY deal with structural elements connected to 
  - sections & scenes, 
  - narrative objects 
*/

/*
:root {
    --text:            var(--cream);
    --link:            var(--cafe);
    --hover:           var(--brown);
    --action:          var(--taupe);
    

    --youSay:          var(--turquoise);
    --editBl:          var(--pink);
    --dragBl:          var(--green);
    --weGuid:          var(--yellow);
    --alGood:          var(--apple);

    --backlay:         #cde4;

    
}
*/


* {  }

body, footer 		{ width: 100%; }
div, footer	 	 	{ margin: 0em auto; float: none; clear: both; }
div 				    { width: 100%; position: relative; }
footer 	    		{ background-color: black; color: var(--white); padding: 2em; margin-top: auto; position: relative; bottom: 0; min-height: unset; } 
footer > *      { line-height: 1.1em; font-size: 0.85em; } 

img 				    { margin: auto; background-color: transparent; background-size: cover; background-repeat: no-repeat; }


input[type=text], input[type=number], input[type=password], input[type=file], textarea, select        
                { background-color: transparent; color: inherit; border: 1px dashed var(--grey); padding: 0.3em; }



/* /////////////////////

  GENERAL STRUCTURE

  /////////////////// */ 

.cinematic        { position: relative; /* margin-bottom: 100vh; */ }    
.cinematic main   { display: contents; }

.cinematic .login     { color: var(--grock); }          
.login:hover, .login:active, .edMo:hover, .edMo:active { opacity: 0.8; }


.bkg                { z-index: 0 !important; position: sticky !important; top: 0; }
.veil               { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(4, 0, 0, 0.45); opacity: 1; z-index: 1; }
.veil + div         { position: absolute; top: 0; }

.objects            { display: contents; }
.objects > div[id]  { position: relative; padding: 10em 3rem 8em; }

.otl                   { display: none; }
.objTools              { position: absolute !important; top: 6.5em; right: 7rem; display: grid; grid-template-columns: auto auto auto; grid-gap: 0.5em; place-items: center; width: auto; }
.objTools > *          { padding: 0; display: block; margin: auto; }
.stamp                 { font-size: 0.7em; font-style: italic; text-align: right; }
.stamp::before         { content: 'Last modified '; font-style: normal; padding-right: 0.3em; }
.stamp:empty::before   { content: unset; }
.objTools svg.btn      { border: none; margin: auto; top: 0; }   

.section > .objTools            { position: fixed !important; top: 25vh; right: 0; height: 50vh; margin: 0 0 0 auto; display: block; width: 3em; border-right: 3px dotted var(--cream); opacity: 0.5; z-index: 2; }
.section > .objTools > div      { position: absolute; display: grid; margin: auto 0 auto auto; top: 0; bottom: 0; right: 0; }
.section > .objTools label      { padding: 0.5em; margin: auto; background-color: var(--cream); border-radius: 2em 0 0 2em; color: var(--brown); }
.section > .objTools:hover      { opacity: 1; }

.section > .conts > :first-child { margin-top: -100vh; }
.section > .conts > .objects:first-child > :first-child { margin-top: -100vh; min-height: 100vh; }

.cinematic .footer.sub { position: relative; top: -10em; height: 0; padding: 0; margin: -0.1em 0; color: #eee; -webkit-filter: drop-shadow(0px 0px 1px #222); }

.section          { position: relative; min-height: 100vh; max-width: 100vw; padding: 0; }
.section > div    { position: relative; /* z-index: 2; */ }

.cover                { display: grid; width: 100vw; height: 100vh; place-items: center; padding: 8em; }
.cover > *            { max-width: 36rem; width: 60vw; text-align: left; }
.cover *              { margin: 0; height: auto; }
/*
.opus .cover h2             { display: block; padding: 2em 0; text-transform: capitalize; width: 100%; font-size: 2.4em; font-family: 'Oswald';}
.opus .cover h2::after      { content: ' presents'; text-transform: lowercase; font-style: italic; font-variation-settings: "wght" 100; font-size: 0.4em; } 
*/
.cover svg, .cover p, .cover h1, .cover h2, .cover h3            { -webkit-filter: drop-shadow(0px 0px 2px var(--black)); }
.cover .objTools      { width: auto; margin-right: 0; }

.cover + *:last-child  { min-height: 100vh; }
.cover + .objects      { margin-top: 100vh; }


/* objcts  */

.objects h2           {  font-weight: 500; font-variation-settings: "wght" 425; font-size: 2.3em; }
.objects blockquote   { font-size: 3em; }



/* reader mode */
.tools                { margin: 4em auto -4em; }
.tools .switcher      { background-color: rgba(120,120,120,0.3); }
.tools svg            { padding: 0; color: white; top: 0; }
.tools a svg          { width: 1.7em; }
.tools svg:hover      { opacity: 0.8; color: inherit; }

.ctn          { position: relative; z-index: 2; max-width: 36rem; }
.ctn *        { text-align: left; }
.ctn + svg    { width: 5em; height: 10em; margin: 0 auto; padding: 0em 1em 3em; display: block; }
.ctn img      { width: 100%; padding: 1.5em 0; max-height: 36rem; }
.ctn p img    { display: inline-block; height: 1em; width: auto; margin: 0 0.3em; position: relative; top: 0.15em; }

.ctn.big      { font-size: 1.2em; }

.styler           { display: none; }


div[name=content] > *               { position: relative; }
div[name=content] a + input         { display: none; }
div[name=content] a.href + input    { display: block; }
div[name=content] svg.remove        { background-color: black; color: var(--editBl); z-index: 3; position: relative; top: -2em; width: 3em; height: 3em; padding: 0.3em; border-radius: 3em; }

a.href                              { border-bottom: 1px dashed; }
input.attr                          { background-color: rgba(0, 0, 0, 0.5); color: var(--cream); padding: 0.3em 0; margin: 0; line-height: 1em; width: 100%; text-align: center; }

@media only screen and (max-width: 609px) { 
  
  .section > div  { font-size: 0.9em; }

  .cover h1       { font-size: 2.5em; }
  .cover h3       { font-size: 1.5em; }
  .cover > *      { width: 100%; }
  .ctn            { font-size: 1em; width: 100%; }
  .scene .ctn     { max-width: calc(100% - 2rem); font-size: 1em; }
  .section > div.stamp         { font-size: 0.7em; }
  .tplt           { padding: 10em 1rem 4em; }

  .objects > div[id] { padding: 8em 1.5rem; }
}


@media only screen and (max-width: 609px) {
 
  footer			              { font-size: 0.85em; padding: 1em; }
  .cred + .scene            { padding: 1em; }
  .cred + .scene h2         { padding: 0; width: 100%; }
  .cred + .scene .ctn * { display: block; width: auto; position: relative; padding: 0; }
  
  .hang                     { top: -2.65em; }
}



.action           { height: 100vh; width: 100%; }    
.action button    { top: auto; bottom: auto; left: 1rem; right: 1rem; max-height: unset; max-width: fit-content; background-color: transparent; }
.action button:first-child { right: unset;  top: calc(55% + 3rem); }
.action button:last-child { left: unset;  bottom: 45%; }





h1, h2, h3, h4, p, label, blockquote, li  { padding: 0.15em 0 0; border: 1px dashed transparent; margin-top: 0.05em; -webkit-filter: drop-shadow(2px 2px 4px #222); }

h1, h2, h3, h4    { padding-top: 0.4em; }
h1                { font-size: 5em; text-transform: capitalize; font-family: raleway, century gothic, segoe ui, avenir, roboto, helvetica, sans-serif; font-weight: 100; }
h2                { margin: 0 auto 1em; }
h3:before         { /*content: ' '; display: block; min-height: 1em;  WTF is this for ??? */}

blockquote        { font-family: Shalimar, cursive; margin: 0 auto; padding: 1rem 0 2rem 5rem; font-size: 3em; line-height: 0.9em; 
                    width: 100%; max-width: 36rem; background-position: 2rem 0; background-size: 1.3em; column-span: all; }

div[name=content] p:first-child:empty:after { content: 'This is a blank page, but not for long.'; }

.viewMode p:empty, .viewMode h1:empty, .viewMode h2:empty, .viewMode h3:empty, .viewMode h4:empty, .viewMode label:empty, .viewMode blockquote:empty, .viewMode li:empty, .viewMode .iframe
                                  { display: none; }
/*
*[contenteditable]                { background-color: rgba(0, 0, 0, 0.1); border-color: var(--editBl) !important; cursor: pointer; min-height: 1em; min-width: 4em; caret-color: var(--editBl); }
*[contenteditable]:empty:after    { content: attr(name); font-style: italic; opacity: 0.8; }
*[contenteditable]:focus-visible  { background-color: rgba(90, 90, 90, 0.1); border-style: solid; border-width: 1px; outline: none; box-shadow: 1px 1px 2px #333; }
*[contenteditable]:focus:not(p)   { height: auto; min-height: unset; }
*/



.sel              { border: 3px solid rgba(240, 0, 96, 1) !important; cursor: grab; padding: 0.15em; }


.solid            { background-color: var(--youSay); color: var(--brown); padding: 2em; }
.solid *          { -webkit-filter: none; }
.solid h3         { padding: 0; }


.newObj                 { display: none; place-content: center; text-align: center; }
.preview                { display: none; }

.styl                   { max-width: calc(100vw - 8em); margin-left: 0; }
.styl > div             { max-width: 100%; }
.styl > div .veil       { max-width: 100%; }
.styl > div > div[seq]  { max-width: 100%; padding-right: 1em; padding-left: 1em; }
.styl .margin > div[seq]{ max-width: calc(85vw - 8em); margin-left: 15vw; }


@media only screen and (max-width: 609px) { 
  .styl, .styl > div  { max-width: calc(100vw - 6.2em); font-size: 0.9em; }
  blockquote          { padding: 1rem 0 2rem 3rem; background-size: 1.2em; background-position: 0 0; }
}


@media only screen and (max-height: 609px) and (orientation: landscape) { 
  .cinematic            { font-size: 0.8em; }
  .section > div[id]    { padding: 8em 8vw 3em; }
}



/* /////////////////////

  OBJECTS DEFAULT

  /////////////////// */ 


.ctb                  { display: grid; }




.gallery              { min-height: 100vh; display: grid; grid-template-columns: 21vw 1fr; grid-gap: 2vw; place-items: center; padding: 12vh; background-color: white; ; color: var(--dark-gre); }
.gallery .keynote     { -webkit-filter: none; }
.gallery h2           { padding: 0 0 0.5em; font-size: 3em; text-align: left; -webkit-filter: none; margin: 0; }
.gallery p            { text-align: left; -webkit-filter: none; }
.gallery .grid        { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em,1fr)); grid-gap: 1vh; place-items: center; margin: 0; max-width: 100%; }

.gallery .grid li           { aspect-ratio: 1/1; padding: 0; width: 100%; -webkit-filter: none; } 
.gallery .grid li > div     { overflow: hidden; object-fit: cover; aspect-ratio: 1/1; } 
.gallery .grid img          { object-fit: cover; background-color: var(--dark-blu); height: 100%; width: 100%; } 
.gallery .grid h4           { position: absolute; bottom: 0; left: 0; padding: 0.4em; width: auto; background-color: black; color: var(--cream); font-size: 0.7em; margin: 0; -webkit-filter: none; }
.gallery .grid .remove      { display: none; } 

.gallery .grid .newObj                      { display: none; place-content: center; border: 1px dashed; color: #ccc; -webkit-filter: none; width: 100%; }
.gallery .grid .newObj svg                  { padding: 0; margin: auto; }
.gallery .grid .newObj:first-child::before  { content: 'Some pictures...'; }


.gallery .grid.uploadZone                   { background-color: transparent; border: none; }
.gallery .grid.uploadZone .remove           { display: block; position: absolute; top: 0; right: 0; z-index: 3; background-color: var(--editBl); color: white; padding: 0; margin: 0.2em; }
.gallery .grid.uploadZone .newObj           { display: grid; place-content: center; border: 1px dashed; color: #ccc; -webkit-filter: none; margin: 0; }


.gallery .grid.host   { border: 2px dashed var(--editBl); }
.gallery .grid[contenteditable] .newObj svg { height: 100%; }
.gallery .grid[contenteditable] .makeroom   { border-left: 3px solid var(--editBl); }
.gallery *[draggable]               { -webkit-filter: unset; }



.video                { background-color: rgba(0,0,0,0.3); display: grid; place-items: center; height: 100vh; }
.video video, .iframe { min-width: 56vw; margin: auto; }
.video iframe, .iframe{ aspect-ratio: 56 / 31.5; min-width: 56vw; min-height: 31.5vw; margin: auto; }
.video label          { position: absolute; top: 3em; left: 3em; font-weight: 600; font-size: 2em; }
iframe[value='']      { border: 0.5px dashed var(--cream); background: black url('../icons/upload.png') no-repeat 50% 50%; background-size: 3em; }
.iframe               { position: absolute; z-index: 2; }

.audio                { display: grid; place-items: center; min-height: 100vh; grid-template-rows: 33vh auto 1fr; }
.audio > label        { font-weight: 600; font-size: 2em; text-align: center; width: 36rem; max-width: calc(100% - 30rem); margin: auto auto 0; }
.audio audio          { margin: 3em auto; }
.audio div.ctn    { overflow: scroll; margin: 0 auto auto; padding: 1.5rem 0; }
.audio div.ctn *  { text-align: center; }
.audio .src, .iAud    { position: absolute; top: calc(33vh + 3em);  width: 20em; height: 3em; z-index: 10; border-width: 2px; border-radius: 5em; }


@media only screen and (max-width: 609px) { 
  .gallery              { padding: 8em 1rem 4em; grid-template-columns: 1fr / 2fr; } 
  .gallery .grid        { grid-template-columns: repeat(auto-fit, minmax(27vw, 1fr)); grid-gap: 1vw; }
  .grid li              { padding: 0; } 

}

@media only screen and (orientation:  portrait) { 
  .gallery              { grid-template: 25vh auto / 1fr; padding: 15vh 7.5vw; }
  .gallery .keynote *   { max-width: unset; }    
  .gallery .grid        { grid-template-columns: repeat(auto-fit, minmax(27vw, 1fr)); grid-gap: 1vw; }

  .video iframe, .iframe{ width: calc(100% - 2rem); margin: auto; }
  .video label          { top: 5em; left: 2rem; max-height: 96vw; max-width: calc(100% - 3rem); }
}

@media only screen and (max-width: 609px) and (orientation:  portrait) { 
  .gallery              { padding: 10em 1rem 4em; } 
  .gallery .grid        { grid-template-columns: repeat(auto-fit, minmax(27vw, 1fr)); grid-gap: 1vw; }

}




/* /////////////////////

  SEQUENCE TYPES DEFAULTS    

  /////////////////// */ 



.opus .cover h2             { display: block; padding: 2em 0; text-transform: capitalize; width: 100%; font-size: 2.4em; font-family: 'Oswald';}
.opus .cover h2::after      { content: ' presents'; text-transform: lowercase; font-style: italic; font-variation-settings: "wght" 100; font-size: 0.4em; } 




.meeetup              {  }
.meetup h2            { font-variation-settings: "wght" 200; }
.meetup blockquote    { text-align: left; padding: 0.2em 0 1em; }
.meetup svg.back      { height: unset; margin: auto !important; width: 40vw; bottom: calc(100% - 80vh); min-width: 20em; }

.meetup .cover              { place-content: end; text-align: left; grid-template-columns: 1fr 24em; grid-gap: 3em; }
.meetup .cover > div > *    { margin: auto auto 0; }

.meetup .cover .main                          { padding: 3em; background-color: rgba(0,0,0,0.5); width: 24em; }
.meetup .cover .main [contenteditable]:empty  { border-color: #ccc; }
.meetup .cover .main [contenteditable]:focus  { border-color: var(--editBl); }
.meetup .cover .main > :first-child           { padding-top: 0; }   

.meetup .objects > div  { padding: 5em; background-color: rgba(0,0,0,0.5); }
.meetup .objects *      { margin: 0; }

.meetup .checks         { font-size: 0.9em; }
.meetup .oneline        { width: 100%; justify-content: space-between; margin: 0; }
.meetup .columns        { column-gap: 2em; padding: 0; }

.meetup .columns.cards                        { margin: 2em auto; width: 100%;  }
.meetup .columns.cards > div                  { background-color: var(--blued); padding: 1.5em; margin-bottom: 2em; }
.meetup .columns.cards h3                     { color: var(--turquoise); }
.meetup .columns.cards h4                     { -webkit-filter: none; color: var(--turquoise); font-variation-settings: "wght" 650; padding: 0.7em 0 0.3em; }
.meetup .columns.cards > div > :first-child   { padding-top: 0; }
.meetup .columns.cards [contenteditable]      { background-color: rgba(240,240,240,0.1); border: none; }
.meetup .columns.cards input + label          { padding: 0.3em 0.7em; border-radius: 1em; font-size: 0.7em; margin-top: 1em; }
.meetup .columns.cards input:checked + label  { color: var(--black); filter: none; background-color: white; }

.meetup .info svg                  { margin-left: 1em; padding: 0.25em; border: 1px solid; border-radius: 50%; }
.meetup .info:active svg           { color: var(--lowlink); }
.meetup .info:active::after        { display: inline-block; padding: 0.3em; content: attr(title); font-size: 0.8em; font-style: italic; margin: -1em 1em; position: absolute; width: 12em; height: auto; background-color: black; z-index: 2; }

.meetup .event            { background-color: var(--blued); margin: 2em 0; padding: 2em; }
.meetup .event details    { margin: 1em 0; font-size: 0.9em; color: var(--turquoise); }





/* /////////////////////

  TOKEN     

  /////////////////// */ 

.token                    { background-color: var(--brack); color: var(--cream); padding: 8em; }
.token form               { width: 24em; text-align: left; display: grid; grid-template-columns: 1fr auto; grid-gap: 1em; margin: 3em 0; }
.token input[type=text]   { background-color: var(--white); color: var(--brock); }
.token input[type=submit] { background-color: var(--brock); border-radius: 5em; padding: 1em; font-weight: 900; height: 3.5em; margin: auto 0 0.25em;}


.overlay ~ .token             { background-color: rgba(0, 0, 0, 0.4); position: fixed; top: 0; }




/* /////////////////////

  TOOLBOX     

  /////////////////// */ 

.cinematic main form                   { display: contents; } 

.tBox                                   { display: contents; }
.tBox *                                 { -webkit-filter: none;  }
.tBox div                               { position: fixed; right: 0; top: unset; bottom: 3rem; height: 5em; max-width: calc(100% - 1rem); width: auto; border-radius: 5em 0 0 5em; box-shadow: 3px 3px 8px black; display: grid; place-items: center; transition: width 0.5s; -webkit-filter: none; }
.tBox > label                           { display: grid; grid-template-columns: auto auto; place-content: center; padding: 0;
                                          position: fixed; right: 0; top: unset; bottom: 3rem; height: 5em; max-width: calc(100% - 1rem); width: max-content; z-index: 9; 
                                          border-radius: 5em 0 0 5em; background-color: var(--weGuid); box-shadow: 3px 3px 8px black; color: black; 
                                        }
.tBox > input[type] + label > svg        { border-radius: 5em 0 0 5em; padding: 1.75em 1.5em 1.75em 2em; height: 5em; width: 5em; opacity: 0.5; margin: 0; top: 0; }
.tBox > input:checked + label           { color: white; background-color: black; opacity: 1; -webkit-filter: unset; }
.tBox > input:checked + label > svg     { border-radius: 5em 0 0 5em; background-color: black; z-index: 8; }
.tBox input + label .tboxOpts           { display: none;  }
.tBox input:checked + label > .tboxOpts { display: grid; }



.tBox *[contenteditable]          { border-color: #333 !important; }
.tBox .star                       { color: var(--pink); }
.tBox .fineprint { font-size: 0.8em; }


.tboxOpts                       { color: var(--cream); grid-template-columns: repeat(auto-fit, 5em); padding: 0 7em 0 1em; z-index: 8; background-color: rgba(0, 0, 0, 0.55); color: white; }
.tboxOpts.on                    { background-color: rgba(0, 0, 0, 0.5); padding-right: 5em; z-index: 8; }                                
.tboxOpts.cat                   { padding-right: 11em; z-index: 7; }           

.tboxOpts label                 { opacity: 0.6; width: 5em; height: 5em; padding: 1em 0; }
.tboxOpts label svg             { margin: auto; display: block; top: 0; width: 1.5em; height: 1.5em; }
.tboxOpts label svg + span      { font-size: 0.6em; display: block; text-align: center; padding: 0.5em 0 0; top: 0;  }
.tboxOpts input:checked + label { opacity: 1; }


.tboxDir                        { z-index: 6; background-color: var(--cream); color: var(--brown); padding: 1em 18em 1em 1.5em; }
.tboxDir P                      { padding: 0 1em; font-size: 0.9em; text-align: left; }
.tboxDir.cat                    { padding-right: 11em; }   
.tboxDir.button                 { display: grid; grid-template-columns: auto 4em; place-items: center; }  
.tboxDir.button form            { display: contents; }  
.tboxDir.button button          { margin: auto; border: none; }  
.tboxDir .close                 { position: absolute; margin: -2rem -6rem 0 0; }

@media only screen and (max-width: 609px) {
  .tBox                       { font-size: 0.7em; }
}

@media only screen and (max-height: 609px) {
  .tBox                       { font-size: 0.7em; }
  .tBox div, .tBox > label    { bottom: 1rem; }
   
}


.fsForm > div form     { margin: auto; }
.fsForm form > div     { position: static; margin: 1em auto;}
.fsForm h3             { padding-top: 1.5em; }
.fsForm h4             { padding: 2.5em 0 0.5em; font-variation-settings: "wght" 250; }
.fsForm input.inline   { border-bottom: 1px solid var(--weGuid); margin-bottom: 1.5em; }
.fsForm textarea       { background-color: black; border: 1px solid var(--weGuid); color: var(--white); margin: 1.5em auto; height: 16em; }
.fsForm textarea::placeholder { color: var(--weGuid); text-align: center; padding-top: 2em; }



svg.upfile             { height: 3em; width: 3em; margin-top: 1em; }
svg.upfile + input[type=file] { display: none; }
svg.upfile:active      { color: black; }

video.src, img.src, audio.src, iframe.src, div.src { border: 3px solid var(--editBl); }
iframe.src                                { display: block; }


.sideBox                  { position: fixed; right: 0; top:  10em; width: 6em; padding: 1.2em 0.8em; -webkit-filter: none; }
.sideBox *                { -webkit-filter: none;  }
.sideBox .icons           { }
.sideBox .icons li        { height: 4em; width: 100%; padding: 0.3em; grid-column: unset; border: 0.5px solid currentColor !important; border-radius: 0.5em; }
.sideBox .icons li span   { font-size: 0.5em; width: 100%; }
.sideBox .icons li svg    { height: 2em; width: 1.3em; margin: auto; padding: 0; }
.sideBox .icons .dropable { background-color: var(--cream); color: var(--grey); }
.sideBox .icons .dropable:hover { background-color: black; color: white; border: 1px solid; }

.sideBox > div            { position: fixed; left: 66vw; right: 0; padding: 1em; margin: 0; color: white; font-size: 0.7em; display: grid; grid-gap: 0.5em; }
.sideBox > div.seq        { bottom: 0;top: 18rem;}
.sideBox > div.seq *      { background-color: transparent; background-size: 2em; background-position: 1%; }

.sideBox li.up            { background-color: var(--cream); color: var(--grey); }
.sideBox li.up *          {  }

.clsBox                   { position: fixed; bottom: 0; top: 0; right: 0; left: unset; margin: 0; margin-left: auto; width: auto; z-index: 1; -webkit-filter: drop-shadow(0px 0px 5px var(--editBl)); }
.clsBox h3                { padding-top: 1.5em; }
.clsBox h4                { padding-top: 1.5em; }
.clsBox > div             { position: relative; width: 8em; padding: 8em 0.8em; overflow-x: scroll; background-color: rgba(0, 0, 0, 0.92); color: var(--editBl); height: 100%; text-align: left; }
.clsBox div div           { min-height: unset; }
.clsBox div span          { color: var(--cream); min-height: unset; }
.clsBox div > svg         { position: absolute; top: 6rem; right: 1rem; }
.clsBox ul                {  }
.clsBox .gal              { display: grid; grid-template: repeat(4, 1fr) / 1fr; place-items: center; position: relative; margin-top: 1em; grid-gap: 0.5em; }
.clsBox .gal .grid             { display: grid; width: 5em; height: 5em; grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr; grid-gap: 0.1em; place-items: center; }
.clsBox .gal .grid div         { background-color: var(--cream); width: 100%; aspect-ratio: 1/1; }         
.clsBox .gal .grid.first div:first-child  { grid-column: 1 / 3; grid-row: 1 / 3; }
.clsBox .gal .grid.last div:last-child    { grid-column-end: span 2; grid-row-end: span 2; }
.clsBox .gal .grid.high div    { aspect-ratio: 1/3; grid-row-end: span 3; }
.clsBox .gal .grid.wide div    { aspect-ratio: 3/1; grid-column-end: span 3; }
.clsBox input[type=checkbox] + label                   { display: contents; }
.clsBox input[type=checkbox]:checked + label .grid div { background-color: var(--editBl); }

.clsBox .gal ul           { display: inline-block; font-size: 0.5em; margin: 0; padding: 0; }
.clsBox .gal ul li        { display: block; margin: 0; padding: 0; }
.clsBox .gal ul.slist li       { display: block; margin: 0; padding: 0; text-indent: 1em; }
.clsBox .gal ul.boxes > li     { padding: 0.4em; border: 0.5px solid; margin: 0.2em; }
.clsBox .gal ul.columns        { display: grid; grid-template: 1fr 1fr / auto auto; }
.clsBox .gal ul.columns li     {  }
.clsBox .gal ul.thumbnails li  { display: inline-block; aspect-ratio: 1/1; width: 30%; margin: 0.3em; background-color: var(--editBl); color: black; }

.clsBox .fineprint            { font-size: 0.7em; }

.clsBox .dblSwitch            { margin-top: 0.7em; background-color: currentColor; }
.clsBox .dblSwitch input      { border-color: var(--editBl); }


@media only screen and (max-width: 609px) { 
    .sideBox            { font-size: 0.7em; top: 11em; }
    .clsBox             { font-size: 0.7em; }
    .fsForm             { padding: 5em 1.5em 2em; }
    .truncate           { max-height: 6em; }
}

@media only screen and (max-height: 609px) {
  .clsBox               { font-size: 0.7em; width: 10em; }
  .clsBox > div         { padding: 5em 0.8em 2em; }
  .clsBox div > svg     { top: 3.5rem; }
  .clsBox .gal          { grid-template: 1fr / 1fr 1fr; font-size: 0.5em; }
}


.pulldown                                   { }
.pulldown > input[type] + label             { display: contents; }
.pulldown > input[type] + label svg         { position: fixed; z-index: 5; top: 0; right: 0; left: 0; margin: 0 auto auto; transition: top 0.35s; 
                                              background-color: var(--black); color: var(--cafe); width: 1.7em; padding: 0.4em; border-radius: 0 0 1.5em 1.5em; }
.pulldown input[type]:checked + label       {  }
.pulldown input[type]:checked + label + div { top: 0; transition: top 0.35s; }
.pulldown input[type]:checked + label > svg { top: 80vh; transition: top 0.35s; }
.pulldown > div                             { position: fixed; z-index: 5; height: 80vh; margin: 0 auto auto; bottom: auto; left: 0; right: 0; top: -80vh; transition: top 0.35s; overflow: scroll;
                                              max-width: unset; width: 100%; padding: 6em 3em 3em; background-color: var(--black); color: var(--cafe); }


.flyer .sidelabel                        { grid-gap: 1.5em; margin-top: 1.5em; max-width: 48em; align-items: end; }
.flyer h1                                { font-size: 3em; padding: 0; margin: 0; }
.flyer h5                                { font-family: Oswald; font-style: italic; }
.flyer [name*=author]::before            { content: 'By '; width: 2em; font-variation-settings: "wght" 150; display: inline; }
.flyer .block input[type] + label        { color: var(--cream); background-color: var(--brock); }
.flyer .block input[type]:checked + label{ background-color: var(--cream); color: var(--brock); font-variation-settings: "wght" 550; }
.flyer input[type] + label               { }
.flyer input[type]:checked + label       { color: var(--cream); font-variation-settings: "wght" 550; -webkit-filter: drop-shadow(1px, 1px, 1px, currentColor); }
.flyer input[type]:checked + label svg   { padding: 0; top: 0.1em; background-color: transparent; }


@media only screen and (max-width: 609px) {
    .pulldown > div         { padding: 3rem 1rem 1rem; font-size: 0.75em; }
    .flyer .sidelabel       { grid-gap: 1em; }
    .flyer h1               { font-size: 1.7em; }
}


.objBox                       { position: fixed; right: 0; left: auto; top: auto; bottom: 8em; color: var(--brack); width: min-content; padding: 0 1em; }


.toolbox svg[onclick]         { color: white; height: 2em; width: 2em; }
.edMo                         { position: fixed; right: 1.3rem; top: 1.3rem; min-height: unset; margin: auto; z-index: 3; color: white; -webkit-filter: drop-shadow(1px 4px 3px #333); }


.underlay                     { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background-color: black; opacity: 0.3;}
.stealth                      { position: absolute; right: 0; z-index: 8; bottom: unset; }
.stealth input[type=button]   { padding: 0.3em 1em; height: 4em; text-decoration: overline underline; text-underline-offset: 0.35em; background-color: white; color: var(--blues); font-weight: 900;}
.ctn .stealth                    { top: 0;  } 
.ctn .stealth input[type=button] { font-size: 0.8em; width: auto; } 


.toolbox                              { position: fixed; width: 2em; height: max-content; margin: auto; top: 0; bottom: 0; left: 0; z-index: 10; min-height: unset;
                                        background-color: transparent; color: white; font-family: Oswald;  -webkit-filter: drop-shadow(1px 4px 3px #333); }
.toolbox svg                          { width: 2em; padding: 0.4em; height: 2em; margin: 0; top: 0;}
.toolbox input[type=checkbox], .toolbox input[type=checkbox] + label > span, .toolbox input[type=checkbox] + label + div   
                                      { display: none; }
.toolbox input[type=checkbox] + label { min-width: unset; margin: 0.1em auto; height: 2em; }

.toolbox input[type=checkbox]:checked + label              { background-color: white; color: var(--black); text-align: left; font-weight: 900; 
                                                             display: grid; width: 20em; grid-template-columns: auto 1fr auto; }
.toolbox input[type=checkbox]:checked + label > span       { display: inline-block; width: 100%; padding: 0.3em; }
.toolbox input[type=checkbox]:checked + label + div        { display: block; }

.toolbox svg.hang           { position: absolute; top: -2.5em; right: 0; color: var(--black); }
.toolbox > div              { width: auto; position: relative; }           
.toolbox > div > div        { position: absolute; left: 2.3rem; border: 1px solid; margin: 0.3em 0; width: 17.7em; padding: 0.3em; }
.toolbox svg.hang           { position: absolute; top: -2.5em; right: 0; color: var(--black); }
.toolbox > div form         { padding: 0.3em; }           
.toolbox div div label svg  { top: 0.15em; padding: 0; height: 1.2em; width: 1.2em; }
.toolbox .upload input[type=submit] { color: white; }
.toolbox p                  { font-size: 0.9em; font-weight: 100; padding: 0 0.8rem; }
.toolbox p.main             { font-size: 0.9em; background-color: black; text-align: center; padding: 0.5em; }
.toolbox p.main svg         { height: 1em; padding: 0; top: 0.1em; }
.toolbox button             { position: static; display: inline-grid; padding: 0.8rem 0.3em; background-color: transparent; box-shadow: unset; }

.toolbox *            { -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2)); }

.grabable             { opacity: 50%; background: url(../_img/btn-edit.svg) 20% 20% repeat-y center; }
.grabber              { border: 3px solid white; border-radius: 3em; opacity: 1; z-index: 10; height: 4em; width: 21em; position: relative; top: 3.5em; margin: auto; }

@media only screen and (max-width: 609px) {
    .toolbox                    { margin: 5em auto auto; }
    .toolbox input[type=checkbox]:checked + label  { width: calc(40vw + 2.3rem); }    
    .toolbox > div > div        { font-size: 0.8em; width: 40vw; }
    .toolbox label > span       { margin: 0; }
    .toolbox input[type=submit] { position: static; width: 100%; text-decoration: none; font-size: 1em; margin-top: 1em; }
}



.param      { display: grid; grid-template-columns: 1fr 1fr; place-items: center; }

.scaler                               { display: grid; grid-template-columns: 1fr auto 1fr; place-items: center; padding: 0.75em 0; font-size: 0.9em;}
.scaler h3                            { grid-column: 1/4; font-size: 1em; font-weight: 400; text-align: center; margin: 0; text-transform: capitalize; padding: 0 0 0.5em; }
.scaler div:nth-child(2)              { grid-column: 1/4; font-size: 0.8em; width: auto; margin: 0 auto; padding: 0.3em; border: 1px solid white; border-radius: 2em; }
.scaler div input[type=radio]         { margin: 0; background-color: transparent; opacity: 0; height: 1em; width: 1em; }
.scaler div input[type=radio]:checked { background-color: white; opacity: 1; border-radius: 2em; }
.scaler label                         { font-weight: 100; font-size: 0.85em; }

/* /////////////////////

  PLAYER     

  /////////////////// */ 


.player 			{ position: fixed; top: 42%; width: 100%; z-index: 100; opacity: 0.3;
					  color: #EEE; border-bottom: 1px solid yellow; opacity: 0; }





/* /////////////////////

  SECTIONS     
  
  /////////////////// */ 


.section 			              { height: max-content; }
.section > *.bkg	          { position: -webkit-sticky; position: sticky; top: 0; height: 100vh;  z-index: 0; overflow: hidden; text-align: center; }
.section > .objects > div:first-child   { min-height: 100vh; }
.section > .objects > div:last-child    { padding-bottom: 15em; /* for the page feedback */ }

.bkg img 			    { min-width: 100vw; min-height: 100vh; object-fit: cover; object-position: center; margin: auto; }
.bkg svg.bkg 			{ width: 100%; height: 100%; padding: 17%; opacity: 0.3; }
.front            { background-color: white; } 
.bkg.front img    { object-fit: cover; right: 0; left: 0; top: 0; bottom: 0; margin: auto; height: 100vh; max-width: 100vw; background-color: white; }       

.bkg ~ .objects > div:first-child           { position: absolute; top: 0; }
.bkg ~ .cover                               { position: absolute; top: 0; }
.bkg ~ .cover + .objects > div:first-child  { position: relative; }
.bkg img[src='../_media/img/']    { display: none; }
.cinematic[id] .bkg:empty         { background: black url('../icons/gallery.png') no-repeat 1rem 20%; background-size: 20vh; }
.cinematic[id] .color .bkg:empty  { background-color: inherit; }
.color .bkg ~ *                   { color: unset; }
.color .gallery                   { color: var(--dark-gre); }

/* SECTION TYPES  */


.credits h1, .foreword h1 { display: none; } 

.foreword > div   { min-height: unset; height: unset; }
.foreword .cover  { height: 40vh; }
.foreword .cover + .scene { position: relative; top: -40vh; height: max-content; }


.credits > div            { min-height: unset; height: unset; }
.cred                     { height: 25vh; }
.cred + .scene            { position: absolute; top:0; padding: 12em calc(50% - 22em);; column-width: 21rem; }
.cred + .scene .ctn       { display: contents; }
.cred + .scene h2         { text-align: right; width: 21rem; padding: 0; }
.cred + .scene img        { position: static; margin: auto; }
.cred + .scene svg        { display: none; }
.cred + .scene p          { font-family: Raleway; text-align: right; max-width: 21em; }







@media only screen and (max-width: 609) {
  svg.bkg 			  { padding: 2em; width: 100%; height: 100%; }
 
}


@media only screen and (orientation:  landscape) {
 
}

@media only screen and (orientation:  portrait) {
 
}




/* /////////////////////

  OBJECT ACTIONS     
  
  /////////////////// */ 


.stamp                 { text-align: right; opacity: 0.8; }
svg.btn                { color: var(--editBl); height: 2em; width: 2em; padding: 0.3em; background: none; z-index: 3; }


@media only screen and (max-width: 609px) { 
  .objTools            { right: 1rem; }
}

@media only screen and (orientation:  portrait) { 
  .objTools            { right: 3rem; }
}

@media only screen and (max-width: 609px) and (orientation:  portrait) { 
  .objTools            { right: 1rem;  }
}

@media only screen and (max-height: 609px) and (orientation: landscape) { 
  .objTools            { right: 3.7rem; top: 4.5rem }
}





/* /////////////////////

  OBJECTS
  
  /////////////////// */ 



.objects .pale       { background-color: rgba(240, 240, 240, 0.7); color: var(--brock); }
.objects .pale *     { -webkit-filter: none; }
.objects .dark       { background-color: rgba(0, 0, 0, 0.7); color: var(--beige); }
.objects .dark *     { -webkit-filter: none; }





.slow p, .slow li       { padding-bottom: 1.3em; line-height: 1.65em; }
.fast p, .fast li       { padding-bottom: 0.4em; line-height: 0.96em;  width: 80%; margin: auto; }
.messy p, .messy li     { text-align: center; letter-spacing: 4px; word-spacing: -1px; word-break: keep-all; text-indent: 7em; line-height: 1.4em; padding: 0.5em 2em 0 0; text-align-last: start; }
.messy .ctn p:nth-of-type(4n-1)   { text-indent: 1em; padding-right: 3em; }
.messy .ctn p:nth-of-type(4n-2)   { text-indent: 5em; padding-right: 1em; }
.messy .ctn p:nth-of-type(4n-3)   { text-indent: 2em; padding-right: 0em; }
.formal .ctn p, .formal .ctn li   { text-align: justify; letter-spacing: -0.2px; line-height: 1.4em; word-spacing: -1px; max-width: calc(100% - 10em); }
.messy b                { letter-spacing: inherit; }

.magical p, .magical li { text-align: center; letter-spacing: 3px; word-spacing: 5px; line-height: 2.5em; }
.magical p::before, .magical li::before, .magical p::after, .magical li::after { content: url(../icons/magic.png); padding: 0 1.5em; display: inline-block; top: 0.2em; position: relative; }
.magical .ctn       { background: transparent url(../icons/magic.png) no-repeat 90% 90%; background-size: 2em; }

.loud p, .loud li       { font-weight: 400; font-variation-settings: "wght" 350; font-size: 1.05em; text-transform: uppercase; }
.tame .ctn          { column-width: unset !important; }
.tame p, .tame li       { font-weight: 300; font-variation-settings: "wght" 300; font-size: 0.95em; }
.tame p::first-letter, .tame li::first-letter  { font-size: 0.85em; font-variation-settings: "wght" 400; }

.factual .ctn           { column-width: 17rem; column-gap: 1.2em; display: block !important; /* padding-top: 10em; */}
.factual p, .factual li { text-align: justify; }
.factual blockquote     { width: 100%; padding: 1em 0 0.5em 1em; column-span: all; background-position: 0 0; }
.factual h2             { padding: 0; font-size: 2.5em; /* margin: 0; */column-span: all; padding-bottom: 0.5em; }
.formal.factual         { column-width: 11rem; text-align: justify; max-width: calc(100% - 8em); }
.formal.factual p       { width: 100%; text-align: justify; }
.factual b              { letter-spacing: inherit; }


.fineprint        { font-size: 0.85em; font-style: italic; opacity: 0.9; line-height: 1.1em; padding-top: 0.15em; }
.fineprint b      { font-style: normal; }




@media only screen and (max-width: 609px) {
  .factual            { column-width: 14rem; }
  .factual h2         { font-size: 1.7em; }
  .formal .ctn        { max-width: calc(100% - 4em); }
  .formal p           { max-width: 100%; }
  .formal.factual .ctn    { column-width: 11rem; max-width: calc(100% - 4em); }
  .messy p            { text-indent: 1.5rem; padding-right: 1rem; }
  .fast blockquote    { padding-right: 2rem; }
}


/* /////////////////////

  COVERS     
  
  /////////////////// */ 

.cover.title   { position: block !important; padding: 5em 0 1em; }

.cover          { place-content: end; }
.cover > *      { margin: auto auto 0 0; }

.summary        { display: grid; grid-template-columns: minmax(15vw, 12em) 1fr; place-content: end; width: 100%; margin: auto auto 0 5vw; grid-gap: 2em; max-width: calc(100vw - 10em); }
.summary *      { margin: auto; }
.summary .pix   { border-radius: 50%; aspect-ratio: 1 / 1; background-color: var(--lowbkg); font-size: 0.5rem; }
.summary div    { margin: auto auto 0 0; }
.summary img    { aspect-ratio: 1 / 1; object-fit: cover; border-radius: inherit; -webkit-filter: drop-shadow(1px 1px 0.2em black); }
.summary h1     { font-size: 2.4em; font-variation-settings: "wght" 75; padding: 0; margin: auto 0 0; }
.summary h2     { font-size: 1.3em; font-variation-settings: "wght" 455; padding: 0.3em 0; margin: auto 0 0; }
.summary h2::after      { content: unset; } 
.summary p      { font-size: 0.8em; font-variation-settings: "wght" 170; padding: 0; margin: auto 0 0; }


.summary .pix:empty   { -webkit-filter: drop-shadow(1px 1px 0.2em var(--black)); }


@media only screen and (max-width: 609px) { 
  .cover          { padding: 4em 2em; }
  .keynote h1     { font-size: 1.7em; }
  .summary        { grid-template-columns: minmax(15vw, 9em) 1fr; font-size: 0.8em; max-width: calc(100vw - 4em); margin-left: 0; grid-gap: 1.5em; }

}


@media only screen and (max-width: 421px) { 
  .cover          { padding: 4em 2em; }
  .keynote h1     { font-size: 1.7em; }
  .summary        { grid-template-columns: minmax(15vw, 8em) 1fr; font-size: 0.8em; max-width: calc(100vw - 4em); margin-left: 0; }

}




/* /////////////////////

  SCENES     
  
  /////////////////// */ 



.scene            { min-height: 100vh; padding: 12em 4em; display: grid; place-items: center; }

.scene .columns              { max-width: 54em; display: block; columns: 12rem 3; column-gap: 2em; }
.scene .columns *            { max-width: 100%; break-inside: avoid; }
.scene .columns h1, .scene .columns h2, .scene .columns h3, .scene .columns blockquote, .scene .columns div.styler 
                             { column-span: all; padding-bottom: 1.5em; }
.scene .columns blockquote   { padding: 1rem 15% 2rem 0; text-align: left; }


@media only screen and (max-width: 609px) { 
  .scene             { padding: 12em 1rem; }
  
}



/* /////////////////////

  GALLERY     
  
  /////////////////// */ 

.gallery.top            { grid-template: 20vh auto / 1fr ; }
.gallery.side           { grid-template: 1fr / 1fr minmax(76vh, auto); }
.gallery.hide           { grid-template: 1fr / 1fr; padding: 7.5vw; }

.gallery.top .keynote   { width: 100%; }
.gallery.top .keynote h2{ margin: 0; }
.gallery.top .keynote p { columns: 17rem; margin: 0; max-width: unset; }
.gallery.top .grid      { }
.gallery.top .grid div  { }

.gallery.side .keynote  { } /* default  */

.gallery.hide            { padding: 10vh 4em; }
.gallery.hide .keynote   { display: none; }
.gallery.hide .grid      { }
.gallery.hide .grid div  { }

.gallery.high .grid     { }
.gallery.high .grid div { aspect-ratio: 1/2; }
.gallery.wide .grid     { grid-template-columns: repeat(auto-fit, minmax(25em, 45vw)); }
.gallery.wide .grid div { aspect-ratio: 2/1;}
.gallery.high.wide .grid div { aspect-ratio: 1/1; grid-column: span 2; }

.gallery.first .grid div:first-child  { grid-column: 1 / 3; grid-row: 1 / 3; width: 100%; height: 100%; aspect-ratio: 1 / 1; }
.gallery.last  .grid div:last-child   { grid-column-end: span 2; grid-row-end: span 2; width: 100%; height: 100%; aspect-ratio: 1 / 1; }         
#pub .gallery.last .grid div:nth-last-child(2) { grid-column-end: span 2; grid-row-end: span 2; width: 100%; height: 100%; aspect-ratio: 1 / 1; }

@media only screen and (orientation:  portrait) { 
  .gallery.side           { grid-template: 1fr / 1fr 2fr; }
  .gallery.side .keynote  { font-size: 0.8em; }
  .gallery.side h2        { font-size: 1.3rem; word-break: break-all; }
}



/* /////////////////////

  SECTIONS   
  
  /////////////////// */ 

.section.color *        { -webkit-filter: none; }
.section.color > .bkg   { opacity: 0; }
.section.color .veil    { background-color: transparent; }

.section.screen .cover    { /* default */  }

.section.notitle .cover     { display: none; }
.section.notitle .objects   { margin: -100vw 0 0 0; display: block; }   

.section.margin                   { }
.section.margin .conts            { display: grid !important; grid-template-columns: 18vw 82vw; margin-top: -100vh; position: static; }
.section.margin .cover            { position: -webkit-sticky; position: sticky; top: 4em; bottom: 4em; left: 0; border-right: 1px solid; width: 18vw; padding: 1em; height: calc(100vh - 8em); margin: 0; place-content: center; }
.section.margin .cover *          { font-size: 1.2rem; text-align: right; width: inherit; padding: 1em; }
.section.margin .objects          { display: block; position: relative; padding: 12em 0 4em; width: 80%; margin: 0; }   
.section.margin ~ div:last-of-type{ /* margin-bottom: -100vh; */}
.section.margin .objTools         { right: 0; }

@media only screen and (max-width: 609px) { /* MIN width */
  .section.margin .conts    { display: contents; height: 100vh; overflow: scroll; margin: 0 auto; }
  .section.margin .cover    { position: -webkit-sticky; position: sticky; bottom: auto; padding-top: 7.5em; height: auto; border-bottom: 1px solid; border-right: unset; min-height: unset; max-width: unset; margin: -100vh auto 0; background-color: rgba(0, 0, 0, 0.8); z-index: 2; }
  .section.margin .cover *  { position: static; height: auto; text-align: left; padding: 0; }
  .section.margin .objects  { }
  .section.margin ~ div:last-of-type{  margin-bottom: unset; }
}


.grim      { background-color: var(--brock); color: var(--creig);}
.tragic    { background-color: var(--brack); color: var(--black);}
.uncertain { background-color: var(--black); color: var(--brock);}
.epic      { background-color: var(--hover); color: var(--beige);}
.baffling  { background-color: var(--cream); color: var(--cafe);}
.romantic  { background-color: var(--brood); color: var(--bpink);}
.nostalgic { background-color: var(--bluer); color: var(--beige);}
.funny     { background-color: var(--yllow); color: var(--brock);}
.confusing { background-color: var(--brred); color: var(--yllow);}
.scary     { background-color: var(--black); color: var(--blood);}
.resolute  { background-color: var(--white); color: var(--black);} 
.assertive { background-color: var(--blood); color: var(--white);} 
.military  { background-color: var(--kakki); color: var(--cafe);} 
.warning   { background-color: var(--white); color: var(--brred);} 
.realist   { background-color: var(--black); color: var(--cafe);}
.energetic { background-color: var(--orang); color: var(--yllow);}
.mellow    { background-color: var(--cafe);  color: var(--brock);} 




/* /////////////////////

 VIDEO


  /////////////////// */ 

.video.hide label         { display: none; }


@media only screen and (min-width: 609px) { /* MIN width */
  .video.side               { display: grid; grid-template-columns: 3fr 1fr; place-content: center; padding: 4em; }
  .video.side h4            { position: static; text-align: left; padding: 0.8em; border-left: 1px solid; }
  .video.side iframe, 
  .video.side div.iframe    { width: 60vw; top: 0; bottom: 0; left: 0; right: 0; margin: 0; } /* 37.5% - 31.5vw || 100 - 31.5 - 25  */
  
}



/* /////////////////////

 AuDIO


  /////////////////// */ 

.audio.hide .ctn        { display: none; }


@media only screen and (min-width: 609px) { /* MIN width */

  .audio.side               { display: grid; grid-template: 7em auto / 1fr 3fr; grid-auto-flow: dense; grid-gap: 1em 2em; padding: 8rem 1rem; }
  .audio.side audio         { grid-row: 1 / 3; position: static; margin: auto; width: 14em; }
  .audio.side label         { grid-column: 2 / 3; position: static; margin: auto; text-align: right; }
  .audio.side .ctn      { grid-column: 2 / 3; grid-row: 2 / 3; position: static; margin: auto; padding: 0; }
  .audio.side .ctn *    { text-align: left; }
  .audio.side div.iAud      { position: absolute; left: 2rem; top: 11em; bottom: 8em; border-right: 1px solid; height: auto; border-radius: 0; width: 14em;}

}


/* /////////////////////

  TOC     
  
  /////////////////// */ 


.toc                  { display: grid; grid-template-rows: 1fr 4fr; grid-gap: 2em; padding: 4rem; background: rgba(0,0,0,0.3); }
.toc h2               { text-align: left; margin: auto auto 0; }
.toc ul               { display: block; margin-top: 0; }
.toc li               { border-radius: 0; text-align: left; display: block; padding: 0.15em; }
.toc ul:empty         { color: #888; border: 0.3px dotted ; padding: 4em; text-align: center; width: 100%; margin: 1.5em auto; display: block;}
.toc ul:empty::before { content: "The Table of contents will be generated as you add content."; font-style: italic; display: block;}


.toc.slist            { }
.toc.slist li         { display: list-item; margin: 0; padding-left: 1.5em; text-indent: -1.3em; list-style: inside disc; }
.toc.slist.boxes li   { padding-left: 2em; }
.toc.slist.thumbnails li   { padding-left: 2.2em; }
.toc.boxes            {  }
.toc.boxes li         { padding: 0.4em; border: 0.5px solid; margin: 0 0 0.5em; break-inside: avoid; }
.toc.boxes li ul      { margin: 0.5em 0 0; }
.toc.boxes li li      { border: none; padding: 0.3em; padding-left: 2em; margin: 0; }
.toc.boxes li li a    { font-variation-settings: "wght" 250; }
.toc.slist.boxes li   { padding-left: 2em; }
.toc.columns ul       { column-width: 17rem; column-fill: balance; height: min-content; column-rule: 1px; column-gap: 0.5em; }
.toc.columns li       { margin: 0 0 0.5em; }
.toc.thumbnails ul    { display: grid; grid-template-columns: repeat(auto-fill, minmax(32%, 11em)); grid-gap: 0.65em; margin-bottom: auto; }
.toc.thumbnails li    { aspect-ratio: 1/1; margin: 0; ; background-color: var(--weGuid); color: black; padding: 1em; }
.toc.thumbnails li a  { color: inherit; }



@media only screen and (max-width: 609px) { 
  .toc            { padding: 1rem; }
  .toc ul         { column-width: 9em; }
  .toc h1         { padding: 0.8em 0; font-size: 2.7em; }

  .toc.thumbnails ul  { grid-template-columns: 1fr 1fr; grid-gap: 1em; }
  .toc.birdseye ul    { grid-template-columns: 1fr; grid-gap: 1em; }


}




/* /////////////////////

  EVENTS     
  
  /////////////////// */ 

.events                     { max-width: 36rem; }
.events h3                  { padding-top: 1em; }
.events a                   { display: grid; justify-content: space-between; grid-template-columns: 1fr 1fr; grid-gap: 1.5em; padding-top: 0.5em; }
.events a span              { display: block; width: 100%; }
.events a span:first-child  { font-variation-settings: "wght" 500; text-align: right; }
.events a span:last-child   { font-variation-settings: "wght" 250; text-align: left; }

.events .qa                 { column-width: 16em; column-gap: 2em; margin: 2em auto;  }


/* /////////////////////

  VENUE    
  
  /////////////////// */ 

.venue .facade              { display: grid; grid-template: 1fr 1fr / 1fr 1fr; width: 100%; grid-gap: 1em; }
.venue .schedule input      { border: none; }

.facade .pix                 { columns: unset; rows: 1 / -1; }


@media only screen and (max-width: 609px) { 
    .venue .facade   { grid-template: 1fr / 1fr; }
    .facade .pix     { columns: 1 / -1; rows: unset; }

}




/* /////////////////////

  CONTACT     
  
  /////////////////// */ 

.contact .contacts .except    { display: none !important; }

.contact                      { min-height: unset  !important; }
.contact h2                   { font-variation-settings: "wght" 250; }

.contacts                     { display: grid; grid-template-columns: repeat(auto-fit, 2em); grid-gap: 0.3em; margin: 2em auto; min-height: unset; column-width: 14em; width: max-content; max-width: 36rem; }
.contacts h4                  { padding-top: 1em; font-variation-settings: "wght" 250; }
.contacts a                   {   }
.contacts div input           { display: none; background-color: transparent; color: inherit; border: 1px dashed var(--grey); padding: 0.3em}
.contacts div textarea        { display: none; background-color: transparent; color: inherit; border: 1px dashed var(--grey); padding: 0.3em}

.contacts[contenteditable]    { columns: 2; display: block; column-gap: 1em; }
.contacts[contenteditable] > div        { display: grid; grid-template-columns: 2em 1fr; grid-gap: 0.3em; place-items: center; margin-bottom: 0.5em; }
.contacts[contenteditable] div input    { display: block; }
.contacts[contenteditable] div textarea { display: block; }

.contact.full .contacts                               { columns: 2; display: block; column-gap: 1em; }
.contact.full .contacts > div                         { display: grid; grid-template-columns: 2em 1fr; grid-gap: 0.3em; place-items: center; margin-bottom: 0.5em; }
.contact.full div input, .contact.full div textarea   { display: block; } 

.contact.none .contacts                               { columns: 2; display: block; column-gap: 1em; }
.contact.none .contacts > div                         { display: none; }      
.contact.none .contacts > div.except                  { display: block !important; min-height: 10em; } 
.contact.none .contacts > div:last-child              { display: grid; grid-template-columns: 2em 1fr; grid-gap: 0.3em; place-items: center; margin-bottom: 0.5em; } 
.contact.none div input, .contact.none div textarea   { display: block; }      

.contact .quote   { font-size: 2.5em; }

@media only screen and (max-width: 609px) { 
  .contacts[contenteditable]      { columns: unset; width: auto; }
}




/* /////////////////////

  CONTENT     
  
  /////////////////// */ 




.dialogue            				      { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; list-style: none; grid-gap: 1em; margin: 1em auto; }	
.dialogue li              				{ margin: 0 0 0 1em; width: calc(100% - 1em); padding: 0 0 0.25em 0.75em;  }
.dialogue li:nth-of-type(odd)  	  { grid-column: 1 / 4; text-align: left;  border-bottom-left-radius: 0; }
.dialogue li:nth-of-type(even)  	{ grid-column: 2 / 5; text-align: right; border-bottom-right-radius: 0; }

li .deco            { max-height: 100%; max-width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; padding: 0; }
li .deco img        { max-height: 100%; max-width: 100%; object-fit: cover; object-position: center; margin: auto; }


.open                     { border: 2px dotted; font-weight: 700; display: grid; place-items: center; }
.open *                   { text-align: right;  }
.open form *              { margin:  0.5em 0 0 auto; }
.open input[type=submit]  { background-color: var(--youSay); padding: 0.3em 0.8em; text-transform: uppercase; border-radius: 0.1em; font-weight: 800; }
.open svg:last-child      { width: 1em; margin: 0 0 0 1em; top: 0.05em; padding: 0.05em; }


/*
.posts            {  }
.posts li         { border-radius: 0.7em; grid-row: span 2; position: relative; padding: 0; grid-column: 1 / 4; text-align: left; border-bottom-left-radius: 0; display: block; }
.posts li > div   { background-color: rgba(0, 0, 0, 0.4); }
.posts .open      { grid-column: 2 / 5; display: block; padding: 1em 0.8em; border-bottom-left-radius: 0.7em; border-bottom-right-radius: 0; margin-bottom: 11em; }
.posts .open div  { width: 100%; background: transparent; }
.posts li .deco   { padding: 0; }

.posts .icons       { display: grid; grid-template-columns: repeat(auto-fit, minmax(3em, 17%)); margin: 0 0 0 auto; padding: 0.5em 0 0; place-content: end; border-radius: 0.7em 0.7em 0 0;}
.posts .icons span  { display: block; }
.posts .icons svg   { border: none; }
.posts .icons input:checked + label svg { color: var(--youSay); background-color: transparent; }
.posts .icons label { text-align: right; }

.posts .text      { padding: 1em 0.8em; border-radius: 0 0 0.7em 0;  }
.posts .own .text, .posts .yes .text { border-radius: 0 0 0 0.7em; }
.posts .own .text:focus { outline: none; }

.posts li.own                 { border: 2px solid var(--youSay); }
.posts li.own, .posts li.yes  { grid-column: 2 / 5; text-align: right; border-radius: 0.7em; border-bottom-right-radius: 0; }
.posts input:checked + label  { color: var(--youSay); }


.posts li.focus               { grid-column: 1 / 5; font-weight: 600; font-size: 1.1em; background-color: #789; border-width: 3px; margin: 2em auto;
                                transition: margin 0.3s; transition: background-color 0.3s; transition: border-width 0.3s; }
.posts li.focus div           { padding: 1.5em 1em; transition: padding 0.3s; }
.posts li.focus label svg     {  }
.posts li.focus span:first-child svg     { animation: sparkle 0.7s ease-in-out 1s;   opacity: 1; transition: opacity 0.3s 1s;}
.posts li.focus span:nth-child(2) svg    { animation: sparkle 0.7s ease-in-out 1.4s; opacity: 1; transition: opacity 0.3s 1.4s;}
.posts li.focus span:nth-child(3) svg    { animation: sparkle 0.7s ease-in-out 1.8s; opacity: 1; transition: opacity 0.3s 1.8s;}
.posts li.focus span:nth-child(4) svg    { animation: sparkle 0.7s ease-in-out 2.2s; opacity: 1; transition: opacity 0.3s 2.2s;}

.open.own                     { border: 2px dotted var(--youSay); grid-column: 1 / 5; color: var(--youSay); }

*/

.dialogue li                    { margin: auto; width: 100%; padding: 1.1em 1.5em 1.5em; border-radius: 1em; border: 1px solid currentColor; }

.tug-of-war                     { width: 80%; grid-gap: 0.5em; margin: 2.5em auto 2em; }
.tug-of-war li                  { border-radius: 0.7em; grid-row: span 2; position: relative; padding: 1.5em 0.8em; }
.tug-of-war li:nth-of-type(odd)   { grid-column: 1 / 3; top: -1.5em; bottom: 1.5em;  border-bottom-left-radius: 0; border-right-width: 3px; text-align: right; }
.tug-of-war li:nth-of-type(even)  { grid-column: 3 / 5;top: 1em;     bottom:  -1em;  border-bottom-right-radius: 0; border-left-width: 3px; text-align: left; }

.intimate                     { width: 80%; }
.intimate li                  { padding: 0.7em;  }
.intimate li:nth-of-type(odd)   { text-align: right; }
.intimate li:nth-of-type(even)  { text-align: left;}

.secret                     { width: 50%; grid-gap: 0.7em; }
.secret li                  { font-size: 0.9em; font-weight: 100; border-style: dotted; padding: 0.7em; }
.secret li:nth-of-type(odd)   { text-align: right; }
.secret li:nth-of-type(even)  { text-align: left;}

.dominate                     {  }
.dominate li                  {  }
.dominate li:nth-of-type(odd)   { grid-column: 1 / 5; border-width: 3px;    font-weight: 900; font-size: 1.1em; }
.dominate li:nth-of-type(even)  { grid-column: 3 / 5; border-style: dotted; font-weight: 100; font-size: 0.9em; }

.ramdam                     { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }
.ramdam li                  {  }
.ramdam li:nth-of-type(7n+1)  { grid-column: 2 / 6; border-width: 3px;    font-weight: 400; }
.ramdam li:nth-of-type(7n+2)  { grid-column: 1 / 4; border-width: 2px;    font-weight: 600; font-size: 1.1em; margin-top: 0em; margin-bottom: 2.5em; }
.ramdam li:nth-of-type(7n+3)  { grid-column: 5 / 7; border-width: 1px;    font-weight: 200; font-size: 1.1em; margin-top: 3em; }
.ramdam li:nth-of-type(7n+4)  { grid-column: 2 / 5; border-width: 1px;    font-weight: 300; font-size: 0.9em; margin-top: -3em; }
.ramdam li:nth-of-type(7n+5)  { grid-column: 3 / 6; border-width: 3px;    font-weight: 900;  }
.ramdam li:nth-of-type(7n+6)  { grid-column: 1 / 4; border-width: 2px;    font-weight: 600; font-size: 0.9em; }
.ramdam li:nth-of-type(7n+0)  { grid-column: 2 / 7; border-width: 2px;    font-weight: 200; font-size: 1.1em; }

.non ul, .list ul, .factual ul       { display: block; margin: 0 auto;}
.non li, .list ul li, .factual ul li { display: list-item; padding: 0 0 0.25em 2em; border: none; text-align: left; list-style: inside none; text-indent: -1em; }
.non li::marker, .list ul li::marker, .factual ul li::marker { content: '–  '; white-space: break-spaces; } 

@media only screen and (max-width: 609px) {
  ul                    { grid-gap: 0.7em; }
  li                    { padding: 1em; }
  .tug-of-war           { width: 100%; }
  .intimate, .secret    { width: 80%; }
}



li.dreamy           { border-radius: 100em; min-height: 7em; border-style: dashed; padding: 3em 2em; font-style: italic; }
li.heavy            { border-width: 1px 1px 7px; padding: 3em 1em 0.5em;  }
li.demanding        { border-radius: 0; padding: 1em 1.5em 1em 0; border-width: 7px 0px;}
li.demanding:nth-of-type(even) { padding: 1em 0 1em 1.5em; }
li.angry            { background-image: radial-gradient(farthest-side, rgba(130,10,32,0.1), rgba(130,10,32,0.2), rgba(130,10,32,0.1), rgba(0,0,0,0)); border: none; padding: 1.5em 2.5em; text-transform: capitalize; font-weight: 900; word-spacing: 5px; font-size: 1.3em; line-height: 1.3; }
li.meek             { font-weight: 100; font-size: 0.95em; border-style: dotted; place-content: end; width: 80%; margin-left: 0;}
li.meek:nth-of-type(even) { margin-right: 0;}
li.loud             { text-transform: uppercase; font-weight: 700; border-width: 3px; padding: 2em 1em; }
li.quiet            { text-transform: lowercase; font-weight: 100; padding: 2em 5em 2em 1em; border-width: 0.3px; width: 80%; margin-left: 0; }
li.quiet:nth-of-type(even) { padding: 2em 1em 2em 5em; margin-right: 0;}





/* /////////////////////

  SEQUENCE VIEW

  /////////////////// */ 

.seq                      { display: grid; grid-gap: 1em; width: 60%; min-width: 24em; max-width: 42em; min-height: 100vh; height: max-content; grid-template-columns: 1fr; padding: 10em 3em; margin: 0; }
.seq > div                { display: grid; min-height: unset; margin: 0 auto; }
.seq .section             { display: grid; grid-template: 3em / auto; position: relative; top: unset !important; background-color: #455 !important; color: var(--cream) !important; margin: 0 !important; grid-gap: 0.5em; padding: 0.8em; }

.seq .section[seq] > *          { min-height: unset; height: max-content; }
.seq .section .cover            { padding: 1em; display: none; }
.seq .section .cover *          { }
.seq .section .cover h1         { font-size: 1.35em; }

.seq .section[seq] > .objects { display: contents !important; }
.seq .section[seq] .otl       { display: grid !important; grid-template-columns: auto 1fr auto; grid-gap: 1em; }
.seq .section[seq] .otl svg   { font-size: 0.5em; padding: 0.1em; margin: auto; }
.seq .section[seq] .otl p     { font-size: 1.5em; }
.seq .section > *.bkg         { position: absolute !important; display: block; height: 100%; width: 100%; min-height: unset; background-color: var(--cafe); }
.seq .section .bkg img        { min-height: unset; min-width: unset; }
.seq .section .bkg:empty      { background: none; margin: 0 !important; }

.seq .objects[data-dropable]:empty     { display: block; min-height: 2em; border: 1px dashed #ccc; }
.seq .objects [seq]               { display: block !important; position: static !important; min-height: unset !important; padding: 0 !important; height: auto; max-height: 3em !important;  }
.seq .objects [seq] > *           { display: none !important; }
.seq .objects [seq] > .conts      { display: contents !important; }
.seq .objects [seq] .otl          { display: grid !important; grid-template-columns: auto 1fr auto; grid-gap: 0.5em; background-color: rgba(0,0,0,0.2); padding: 0.7em !important; height: 100%; }
.seq .objects [seq] .otl p        { max-height: 1.3em; max-width: unset; width: 100%; overflow: hidden; padding: 0; margin: auto; font-variation-settings: "wght" 350; font-size: 1em; text-transform: unset; text-align: left; letter-spacing: initial; word-spacing: initial; line-height: normal; text-indent: unset; }
.seq .objects [seq] .otl svg      { top: 0; width: 1em; font-size: 1em; padding: 0; margin: 0; align-self: center; }
.seq .objects [seq] .otl label    { border: none !important; font-size: 1em; position: static; }
.seq .objects [seq] .otl p:before, .seq .objects [seq] > .otl p:after     { content: ''; display: contents; }
.seq .objects [seq] .otl .flex    { grid-gap: 0.75em; width: max-content; }

.seq .newObj                    { display: block; }
.seq .newObj .thumbs            {  }
.seq .newObj .thumbs label      { opacity: 0.9; }
.seq .section .objects .newObj  { padding-bottom: 0.5em; }

.seq .preview                   { display: block; position: fixed !important; top: 0; bottom: 0; right: 5rem; height: 70vh; max-width: unset; width: 16rem; overflow: scroll; margin: auto; background-color: rgba(0,0,0,0.5); padding: 1em; color: var(--input); border: 1px dotted; font-size: 0.8em; }
.seq .preview blockquote        { font-size: 2em; padding: 0.5em 0 1em 1em; }

.seq .mini                      { position: absolute !important; top: 0; bottom: 0; right: -10.5rem; height: max-content; margin:auto; color: var(--input); border: none; font-size: 0.9em; }
.seq .mini *                    { -webkit-filter: none; }
.seq .mini > svg[nn=arrow]      { left: -1em; width: 2em !important; right: unset; transform: rotate(-90deg); top: 0em !important; bottom: 0em !important; margin: auto !important; }
.seq .mini :before              { display: none !important; }
.seq .mini :after               { display: none !important; }

.seq .styler                    { display: none; }
.seq .objTools                  { display: none; }

.otl input[type] + label            { display: block; padding: 0; margin: auto; }
.otl input[type] + label:hover      { opacity: 0.7; }
.otl input[type] + label:active     { opacity: 0.9; }



/* dnd logic */
.seq *[draggable]         { /*-webkit-filter: drop-shadow( 1px 1px 3px var(--dragBl) ) ; */}
.seq .up                  { font-size: 0.7em; transform: rotate(-2deg); opacity: 0.8; }
.seq .section.up .objects { display: none !important; }
.seq .dropable .otl       { border-bottom: 0.2em dashed var(--dragBl); }
.seq .dropable.hover .otl { border-bottom: 0.5em solid; }


.seq .makeroom            { border-bottom: 1.5em solid var(--dragBl); }
.seq .section .up         { font-size: 1em; }
.seq .section .makeroom   { border-bottom: 0.7em solid var(--dragBl); margin: 0 auto; height: 3.7em; }
.seq .newObj.makeroom span { border: 2px solid transparent; background-color: var(--dragBl); height: auto; }




@media only screen and (max-width: 609px) { 
  .seq                { max-width: calc(100vw - 6em); padding: 8em 5.5em 8em 1.5em; }

}