* { }
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; }
.cinematic { position: relative; }
.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; }
.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; }
.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; }
.objects h2 { font-weight: 500; font-variation-settings: "wght" 425; font-size: 2.3em; }
.objects blockquote { font-size: 3em; }
.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 { }
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; }
.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; }
}
.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; }
}
.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 { 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; }
.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 { position: fixed; top: 42%; width: 100%; z-index: 100; opacity: 0.3; color: #EEE; border-bottom: 1px solid yellow; opacity: 0; }
.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; }
.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); }
.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) { }
.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 .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; }
.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; 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; }
}
.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; }
}
.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.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 { }
.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; }
}
.section.color * { -webkit-filter: none; }
.section.color > .bkg { opacity: 0; }
.section.color .veil { background-color: transparent; }
.section.screen .cover { }
.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{ }
.section.margin .objTools { right: 0; }
@media only screen and (max-width: 609px) { .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.hide label { display: none; }
@media only screen and (min-width: 609px) { .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; }
}
.audio.hide .ctn { display: none; }
@media only screen and (min-width: 609px) { .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 { 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 { 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 .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 .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; }
}
.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; }
.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;}
.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; }
.seq *[draggable] { }
.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; }
}