from Three Sunspots

/* Your story will use the CSS in this passage to style the page.\nGive this passage more tags, and it will only affect passages with those tags.\nExample selectors: */\n\nbody {\n\tbackground-color: white;\n\tcolor: #5d4646;\n\tfont-family: 'Vollkorn', sylfaen, georgia, garamond, serif;\n\tfont-size: 1.1em;\n\t\n}\n\nh1 {\n\tcolor: #ff0066;\n\tfont-size: 120%;\n\tmargin-bottom: 0;\n\tpadding-bottom: 0;\n\tline-height: 100%;\n}\n\n.fade {\n opacity: 1;\n transition: opacity .25s ease-in-out;\n -moz-transition: opacity .25s ease-in-out;\n -webkit-transition: opacity .25s ease-in-out;\n }\n\n .fade:hover {\n opacity: 0.5;\n }\n\nimg.shadowed\n{-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);\n-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);\nbox-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);}\n\n.bullet {\nfont-family: Freeserif, Segoe UI Symbol;\n}\n\n#circle {\nmargin-top: 10px;\n width: 30px;\n height: 30px;\nbackground-color: #ffc5c4;\n -webkit-border-radius: 15px;\n -moz-border-radius: 15px;\n border-radius: 15px;\ntransition: color 0.4s linear;\n -o-transition: color 0.4s linear;\n -moz-transition: color 0.4s linear;\n -webkit-transition: color 0.4s linear;\n}\n\n#circle:hover {\nbackground-color: #ffd2ec;\n}\n\n\n/* Do not display the Saves & Restart core menu items */\n#menu-saves, #menu-restart {\n\tdisplay: none;\n}\n\n#story-title {\n\tmargin:0;\n\tfont-size:150%;\n\tfont-family: Nunito;\n\tcolor: #ff0066;\n}\n\n#story-author {\n\tfont-size:100%;\n\tfont-family: Nunito;\n\tcolor: #ff0066;\n\tmargin-top: 0px;\n}\n\n#ui-bar {\n\toverflow:none;\n\tbackground-color: #ffffff;\n\tborder-right:0px solid #444\n}\n\n.passage {\n\t/* This only affects passages */\nmin-height: 400px;\npadding-left: 30px;\t\n\t \n}\n\n.passage a.set2 {\ncolor: #990066;\n}\n\n.passage a.set2:hover {\ncolor: #CC3399; text-decoration: underline;\n}\n\n.passage a {\n\ttext-decoration: none;\n\tcolor: #ffc5c4;\n\tfont-weight: normal;\ntransition: color 0.4s linear;\n -o-transition: color 0.4s linear;\n -moz-transition: color 0.4s linear;\n -webkit-transition: color 0.4s linear;\n\t\t\n}\n.passage a:hover {\n\ttext-decoration: none;\n\tcolor: #5d4646;\n\tfont-weight: normal;\n\t\n}

[[Poem|1]]\n[[Commentary]]\n<div style="padding-top: 30px;">\n<span style="font-size: 0.8em; font-weight: normal;">Sidekick Play-Poems use the Twine engine and Sugarcube story format.</span></div>

Many of the poems in <i>Laboratorio</i> are joyful and playful in their dealings with space and the great unknown. In this excerpt from Simon Barraclough's 'Three Sunspots', there is instead a sense of melancholy, warning and loneliness, which brings to mind the isolation and rumination in sci-fi epics like <i>2001: A Space Odyssey</i> or <i>Moon</i>. The poem is threaded with typical Barracloughian wordplay, but there is no one with whom to share the joke; the speaker is a loner in a vast, expanding universe.\n\n[[Return to poem|previous()]]\n<a data-passage="Start">Return to front page</a>

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vollkorn">\s\n<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nunito"><div style="display: inline-block; width: 80%; height: 115px; line-height: 17px;">\s\n<span class="fade"><a href="http://www.sidekickbooks.com"><img src="http://www.sidekickbooks.com/sidekicklogocolour.png" width="100px" align="left"></a></span>\s\n<span style="font-weight: normal;"><span style="font-size: 0.8em;">the</span> sidekick<br/><span style="font-size: 0.9em;">PLAY-POEM</span><br/><span style="font-size: 0.9em;">A R C H I V E</span></span></div>

(function(){version.extensions.replaceMacrosCombined={major:1,minor:1,revision:7};var nullobj={handler:function(){}};function showVer(n,notrans){if(!n){return;}n.innerHTML="";\nnew Wikifier(n,n.tweecode);n.setAttribute("data-enabled","true");n.style.display="inline";n.classList.remove("revision-span-out");if(!notrans){n.classList.add("revision-span-in");\nif(n.timeout){clearTimeout(n.timeout);}n.timeout=setTimeout(function(){n.classList.remove("revision-span-in");n=null;},20);}}function hideVer(n,notrans){if(!n){return;\n}n.setAttribute("data-enabled","false");n.classList.remove("revision-span-in");if(n.timeout){clearTimeout(n.timeout);}if(!notrans){n.classList.add("revision-span-out");\nn.timeout=setTimeout(function(){if(n.getAttribute("data-enabled")=="false"){n.classList.remove("revision-span-out");n.style.display="none";n.innerHTML="";}n=null;\n},1000);}else{n.style.display="none";n.innerHTML="";n=null;}}function tagcontents(b,starttags,desttags,endtags,k){var l=0,c="",tg,a,i;function tagfound(i,e,endtag){for(var j=0;\nj<e.length;j++){if(a.indexOf("<<"+e[j]+(endtag?">>":""),i)==i){return e[j];}}}a=b.source.slice(k);for(i=0;i<a.length;i++){if(tg=tagfound(i,starttags)){l++;}else{if((tg=tagfound(i,desttags,true))&&l==0){b.nextMatch=k+i+tg.length+4;\nreturn[c,tg];}else{if(tg=tagfound(i,endtags,true)){l--;if(l<0){return null;}}}}c+=a.charAt(i);}return null;}var begintags=[];var endtags=[];function revisionSpanHandler(g,e,f,b){var k=b.source.indexOf(">>",b.matchStart)+2,vsns=[],vtype=e,flen=f.length,becomes,c,cn,m,h,vsn;\nfunction mkspan(vtype){h=insertElement(m,"span",null,"revision-span "+vtype);h.setAttribute("data-enabled",false);h.style.display="none";h.tweecode="";return h;}if(this.shorthand&&flen){while(f.length>0){vsns.push([f.shift(),(this.flavour=="insert"?"gains":"becomes")]);\n}}else{if(this.flavour=="insert"||(this.flavour=="continue"&&this.trigger=="time")){vsns.push(["","becomes"]);}}if(this.flavour=="continue"&&flen){b.nextMatch=k+b.source.slice(k).length;\nvsns.push([b.source.slice(k),vtype]);}else{becomes=["becomes","gains"];c=tagcontents(b,begintags,becomes.concat(endtags),endtags,k);if(c&&endtags.indexOf(c[1])==-1){while(c){vsns.push(c);\nc=tagcontents(b,begintags,becomes,endtags,b.nextMatch);}c=tagcontents(b,begintags,["end"+e],endtags,b.nextMatch);}if(!c){throwError(g,"can't find matching end"+e);\nreturn;}vsns.push(c);if(this.flavour=="continue"){k=b.nextMatch;b.nextMatch=k+b.source.slice(k).length;vsns.push([b.source.slice(k),""]);}}if(this.flavour=="remove"){vsns.push(["","becomes"]);\n}cn=0;m=insertElement(g,"span",null,e);m.setAttribute("data-flavour",this.flavour);h=mkspan("initial");vsn=vsns.shift();h.tweecode=vsn[0];showVer(h,true);while(vsns.length>0){if(vsn){vtype=vsn[1];\n}vsn=vsns.shift();h=mkspan(vtype);h.tweecode=vsn[0];}if(typeof this.setup=="function"){this.setup(m,g,f);}}function quantity(m){return(m.children.length-1)+(m.getAttribute("data-flavour")=="remove");\n}function revisionSetup(m,g,f){m.className+=" "+f[0].replace(" ","_");}function keySetup(m,g,f){var key=f[0];m.setEventListener("keydown",function l(e){var done=!revise("revise",m);\nif(done){m.removeEventListener("keydown",l);}});}function timeSetup(m,g,f){function cssTimeUnit(s){if(typeof s=="string"){if(s.slice(-2).toLowerCase()=="ms"){return Number(s.slice(0,-2))||0;\n}else{if(s.slice(-1).toLowerCase()=="s"){return Number(s.slice(0,-1))*1000||0;}}}throwError(g,s+" isn't a CSS time unit");return 0;}var tm=cssTimeUnit(f[0]);var s=state.history[0].passage.title;\nsetTimeout(function timefn(){if(state.history[0].passage.title==s){var done=!revise("revise",m);if(!done){setTimeout(timefn,tm);}}},tm);}function hoverSetup(m){var fn,noMouseEnter=(document.head.onmouseenter!==null),m1=m.children[0],m2=m.children[1],gains=m2.className.indexOf("gains")>-1;\nif(!m1||!m2){return;}m1.onmouseenter=function(e){var efp=document.elementFromPoint(e.clientX,e.clientY);while(efp&&efp!==this){efp=efp.parentNode;}if(!efp){return;\n}if(this.getAttribute("data-enabled")!="false"){revise("revise",this.parentNode);}};m2.onmouseleave=function(e){var efp=document.elementFromPoint(e.clientX,e.clientY);\nwhile(efp&&efp!==this){efp=efp.parentNode;}if(efp){return;}if(this.getAttribute("data-enabled")!="false"){revise("revert",this.parentNode);}};if(gains){m1.onmouseleave=m2.onmouseleave;\n}if(noMouseEnter){fn=function(n){return function(e){if(!event.relatedTarget||(event.relatedTarget!=this&&!(this.compareDocumentPosition(event.relatedTarget)&Node.DOCUMENT_POSITION_CONTAINED_BY))){this[n]();\n}};};m1.onmouseover=fn("onmouseenter");m2.onmouseout=fn("onmouseleave");if(gains){m1.onmouseout=m2.onmouseout;}}m=null;}function mouseSetup(m){var evt=(document.head.onmouseenter===null?"onmouseenter":"onmouseover");\nm[evt]=function(){var done=!revise("revise",this);if(done){this[evt]=null;}};m=null;}function linkSetup(m,g,f){var l=Wikifier.createInternalLink(),p=m.parentNode;\nl.className="internalLink replaceLink";p.insertBefore(l,m);l.insertBefore(m,null);l.onclick=function(){var p,done=false;if(m&&m.parentNode==this){done=!revise("revise",m);\nscrollWindowTo(m);}if(done){this.parentNode.insertBefore(m,this);this.parentNode.removeChild(this);}};l=null;}function visitedSetup(m,g,f){var i,done,shv=state.history[0].variables,os="once seen",d=(m.firstChild&&(this.flavour=="insert"?m.firstChild.nextSibling:m.firstChild).tweecode);\nshv[os]=shv[os]||{};if(d&&!shv[os].hasOwnProperty(d)){shv[os][d]=1;}else{for(i=shv[os][d];i>0&&!done;i--){done=!revise("revise",m,true);}if(shv[os].hasOwnProperty(d)){shv[os][d]+=1;\n}}}[{name:"insert",flavour:"insert",trigger:"link",setup:linkSetup},{name:"timedinsert",flavour:"insert",trigger:"time",setup:timeSetup},{name:"insertion",flavour:"insert",trigger:"revisemacro",setup:revisionSetup},{name:"later",flavour:"insert",trigger:"visited",setup:visitedSetup},{name:"keyinsert",flavour:"insert",trigger:"key",setup:keySetup},{name:"relace",flavour:"relace",trigger:"link",setup:linkSetup},{name:"timedreplace",flavour:"relace",trigger:"time",setup:timeSetup},{name:"mousereplace",flavour:"relace",trigger:"mouse",setup:mouseSetup},{name:"hoverreplace",flavour:"relace",trigger:"hover",setup:hoverSetup},{name:"revision",flavour:"relace",trigger:"revisemacro",setup:revisionSetup},{name:"keyreplace",flavour:"relace",trigger:"key",setup:keySetup},{name:"timedremove",flavour:"remove",trigger:"time",setup:timeSetup},{name:"mouseremove",flavour:"remove",trigger:"mouse",setup:mouseSetup},{name:"hoverremove",flavour:"remove",trigger:"hover",setup:hoverSetup},{name:"removal",flavour:"remove",trigger:"revisemacro",setup:revisionSetup},{name:"once",flavour:"remove",trigger:"visited",setup:visitedSetup},{name:"keyremove",flavour:"remove",trigger:"key",setup:keySetup},{name:"continue",flavour:"continue",trigger:"link",setup:linkSetup},{name:"timedcontinue",flavour:"continue",trigger:"time",setup:timeSetup},{name:"mousecontinue",flavour:"continue",trigger:"mouse",setup:mouseSetup},{name:"keycontinue",flavour:"continue",trigger:"key",setup:keySetup},{name:"cycle",flavour:"cycle",trigger:"revisemacro",setup:revisionSetup},{name:"mousecycle",flavour:"cycle",trigger:"mouse",setup:mouseSetup},{name:"timedcycle",flavour:"cycle",trigger:"time",setup:timeSetup},{name:"keycycle",flavour:"relace",trigger:"key",setup:keySetup}].forEach(function(e){e.handler=revisionSpanHandler;\ne.shorthand=(["link","mouse","hover"].indexOf(e.trigger)>-1);macros[e.name]=e;macros["end"+e.name]=nullobj;begintags.push(e.name);endtags.push("end"+e.name);});function insideDepartingSpan(elem){var r=elem.parentNode;\nwhile(!r.classList.contains("passage")){if(r.classList.contains("revision-span-out")){return true;}r=r.parentNode;}}function reviseAll(rt,rname){var rall=document.querySelectorAll(".passage [data-flavour]."+rname),ret=false;\nfor(var i=0;i<rall.length;i++){if(!insideDepartingSpan(rall[i])){ret=revise(rt,rall[i])||ret;}}return ret;}function revise(rt,r,notrans){var ind2,curr,next,ind=-1,rev=(rt=="revert"),rnd=(rt.indexOf("random")>-1),fl=r.getAttribute("data-flavour"),rc=r.childNodes,cyc=(fl=="cycle"),rcl=rc.length-1;\nfunction doToGainerSpans(n,fn){for(var k=n-1;k>=0;k--){if(rc[k+1].classList.contains("gains")){fn(rc[k],notrans);}else{break;}}}for(var k=0;k<=rcl;k++){if(rc[k].getAttribute("data-enabled")=="true"){ind=k;\n}}if(rev){ind-=1;}curr=(ind>=0?rc[ind]:(cyc?rc[rcl]:null));ind2=ind;if(rnd){ind2=(ind+(Math.floor(Math.random()*rcl)))%rcl;}next=((ind2<rcl)?rc[ind2+1]:(cyc?rc[0]:null));\nvar docurr=(rev?showVer:hideVer);var donext=(rev?hideVer:showVer);var currfn=function(){if(!(next&&next.classList.contains("gains"))||rnd){docurr(curr,notrans);doToGainerSpans(ind,docurr,notrans);\n}};var nextfn=function(){donext(next,notrans);if(rnd){doToGainerSpans(ind2+1,donext,notrans);}};if(!rev){currfn();nextfn();}else{nextfn();currfn();}return(cyc?true:(rev?(ind>0):(ind2<rcl-1)));\n}macros.revert=macros.revise=macros.randomise=macros.randomize={handler:function(a,b,c){var l,rev,rname;function disableLink(l){l.style.display="none";}function enableLink(l){l.style.display="inline";\n}function updateLink(l){if(l.className.indexOf("random")>-1){enableLink(l);return;}var rall=document.querySelectorAll(".passage [data-flavour]."+rname),cannext,canprev,i,ind,r,fl;\nfor(i=0;i<rall.length;i++){r=rall[i],fl=r.getAttribute("data-flavour");if(insideDepartingSpan(r)){continue;}if(fl=="cycle"){cannext=canprev=true;}else{if(r.firstChild.getAttribute("data-enabled")==!1+""){canprev=true;\n}if(r.lastChild.getAttribute("data-enabled")==!1+""){cannext=true;}}}var can=(l.classList.contains("revert")?canprev:cannext);(can?enableLink:disableLink)(l);}function toggleText(w){w.classList.toggle(rl+"Enabled");\nw.classList.toggle(rl+"Disabled");w.style.display=((w.style.display=="none")?"inline":"none");}var rl="reviseLink";if(c.length<2){throwError(a,b+" macro needs 2 parameters");\nreturn;}rname=c.shift().replace(" ","_");l=Wikifier.createInternalLink(a,null);l.className="internalLink "+rl+" "+rl+"_"+rname+" "+b;var v="";var end=false;var out=false;\nif(c.length>1&&c[0][0]=="$"){v=c[0].slice(1);c.shift();}switch(c[c.length-1]){case"end":end=true;c.pop();break;case"out":out=true;c.pop();break;}var h=state.history[0].variables;\nfor(var i=0;i<c.length;i++){var on=(i==Math.max(c.indexOf(h[v]),0));var d=insertElement(null,"span",null,rl+((on)?"En":"Dis")+"abled");if(on){h[v]=c[i];l.setAttribute("data-cycle",i);\n}else{d.style.display="none";}insertText(d,c[i]);l.appendChild(d);}l.onclick=function(){reviseAll(b,rname);var t=this.childNodes,u=this.getAttribute("data-cycle")-0,m=t.length,n,lall,i;\nif((end||out)&&u>=m-(end?2:1)){if(end){n=this.removeChild(t[u+1]||t[u]);n.className=rl+"End";n.style.display="inline";this.parentNode.replaceChild(n,this);}else{this.parentNode.removeChild(this);\nreturn;}}else{toggleText(t[u]);u=(u+1)%m;if(v){h[v]=c[u];}toggleText(t[u]);this.setAttribute("data-cycle",u);}lall=document.getElementsByClassName(rl+"_"+rname);\nfor(i=0;i<lall.length;i++){updateLink(lall[i]);}};disableLink(l);setTimeout((function(l){return function(){updateLink(l);};}(l)),1);l=null;}};macros.mouserevise=macros.hoverrevise={handler:function(a,b,c,d){var endtags=["end"+b],evt=(window.onmouseenter===null?"onmouseenter":"onmouseover"),t=tagcontents(d,[b],endtags,endtags,d.source.indexOf(">>",d.matchStart)+2);\nif(t){var rname=c[0].replace(" ","_"),h=insertElement(a,"span",null,"hoverrevise hoverrevise_"+rname),f=function(){var done=!reviseAll("revise",rname);if(b!="hoverrevise"&&done){this[evt]=null;\n}};new Wikifier(h,t[0]);if(b=="hoverrevise"){h.onmouseover=f;h.onmouseout=function(){reviseAll("revert",rname);};}else{h[evt]=f;}h=null;}}};macros.instantrevise={handler:function(a,b,c,d){reviseAll("revise",c[0].replace(" ","_"));\n}};macros.endmouserevise=nullobj;macros.endhoverrevise=nullobj;}());

You like to think you’re seeing the same Sun\nset, <<relace "<div id=\s"circle\s"></div>">>although circumstance has set you both\napart.<<relace "<div id=\s"circle\s"></div>">> Look up, <<relace "<div id=\s"circle\s"></div>">>connect,<<relace "<div id=\s"circle\s"></div>">> triangulate,\n\n<a data-passage="2"><div id="circle"></div></a><<endrelace>><<endrelace>><<endrelace>><<endrelace>>

<span style="color:#ff0066;"><i>from</i> THREE SUNSPOTS</span>\n<span style="font-size: 0.8em;">by SIMON BARRACLOUGH</span>\n\nClick the pink circle to advance. Use backspace to retread.\n<a data-passage="1"><div id="circle"></div></a>\n<span style="font-size: 0.9em;">\nThis poem is published in hard copy format in <a class="set2" href="http://www.sidekickbooks.com/laboratorio.php"><i>Laboratorio</i>.</a></span>\n\n<div class="fade" style="width:auto;"><a href="http://www.sidekickbooks.com/laboratorio.php"><img class="shadowed" style="margin-left: 30px;" src="http://www.sidekickbooks.com/images/laboratoriocover.jpg"></a></div>

The Sun is not the same. <<relace "<div id=\s"circle\s"></div>">>Each second sees<<relace "<div id=\s"circle\s"></div>">> \nthe loss of more mass than you can conceive<<relace "<div id=\s"circle\s"></div>">>\nand even though your skin and eyes deceive\nyou <<relace "<div id=\s"circle\s"></div>">> to think that this doesn’t matter, \n\n<a data-passage="4"><div id="circle"></div></a>\n<<endrelace>><<endrelace>><<endrelace>><<endrelace>>

count off the minutes <<relace "<div id=\s"circle\s"></div>">>and the seconds<<relace "<div id=\s"circle\s"></div>">> that\nillustrate the parallax of your hearts.\n\n\n<a data-passage="3"><div id="circle"></div></a><<endrelace>><<endrelace>><<endrelace>>

Your love’s a furbelow. <<relace "<div id=\s"circle\s"></div>">>An aurora.\n\n<<endrelace>>

it’s\nspelling out the end, <<relace "<div id=\s"circle\s"></div>">>it’s reminding you\nthat the energy of love you expend<<relace "<div id=\s"circle\s"></div>">> \nis so much solar wind,<<relace "<div id=\s"circle\s"></div>">> which your dear friend\nstaves off, <<relace "<div id=\s"circle\s"></div>">>because it’s all too much for her. \n\n<a data-passage="5"><div id="circle"></div></a>\n<<endrelace>><<endrelace>><<endrelace>><<endrelace>>

<i>from</i> Three Sunspots

Simon Barraclough

.revision-span-in {\n\topacity: 0;\n}\n.revision-span:not(.revision-span-out) {\n\ttransition: 1s; -webkit-transition: 1s;\n}\n.revision-span-out {\n\tposition:absolute;\n\topacity: 0;\n}