:root {
    --bg: #222230;
    --link: #07d;
    --link-active: #29f;
}

/* --- Custom mini reset ---------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }

ol , ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* -------------------------------------------------------------------- */

html, body { width: 100%; min-height: 100%; }
body { font-family: 'open_sanslight'; font-weight: 300; font-size: 100%; /* 16px = 1rem */ width: 90%; max-width: 960px; height: 100%!important; -webkit-font-smoothing: antialiased; color: #282835; margin: 2rem auto; padding: 0; background: var(--bg); position: relative; overflow-x: hidden; overflow-y: scroll; }

/* --- Fluid Image only Gallery -------------------------------------------- */
.fluid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(10rem, 30%, 20rem), 1fr));  grid-auto-rows: repeat(auto-fit, minmax(clamp(10rem, 30%, 20rem), 1fr)); gap: 1rem; padding: 1rem 0; }
.fluid-grid > * { position: relative; margin: 0; width: 100%; height: auto; display: block; object-fit: cover; overflow: hidden; }
/* ------------------------------------------------------------------------- */

p { display: block; font-size: clamp(1.25rem, 20%, 1.33rem); line-height: 1.75rem; letter-spacing: 0.125rem; margin: 0.5rem 0; }
figure { background-color: #CCC; background-position: center center; background-size: cover; background-repeat: no-repeat; width: 100%; height: auto; max-height: 10rem; margin: 0; padding: 0; overflow: hidden; }
figure p { background: transparent; }
caption { display: block; font-size: 0.5rem; margin-bottom: 1rem; }
summary p:last-child { width: 40%; }
header { height: clamp(12rem, 25vw, 20rem); margin: 0; }
h1 { font-size: clamp(1.5rem, 6.5vw, 2.25rem); font-weight: 400;  line-height: 3rem; letter-spacing: 0.1rem; margin: 2rem 0; }
h2 { font-size: clamp(1.25rem, 30%, 1.75rem); font-weight: 400;  line-height: 1.33rem; letter-spacing: 0.1rem; margin-top: 1rem; }
.limit { /*width: 90%; max-width: 960px;*/ margin: 0 1rem; display: block; text-align: left; }

a { color: var(--link-active); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link); }
a:active, a:focus { background: var(--link); color: #FFF; }
a:visited { color: #458; }

.bg-pad { display: inline; font-size: 1.5rem; padding: 0.2rem 1rem; line-height: 1.75; color: #fff; background: rgba(0, 0, 0, 0.75); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.respond { display: block; width: 100%; height: auto; object-fit: cover; }
.respond-max { display: block; width: 100%; height: 100%; object-fit: contain; }
audio { display: block; width: 90%; margin: 0 auto; position: absolute; bottom: 0.5rem; left: 1rem; width: calc(100% - 1rem); z-index: 100; }

/* No Media Query Grid ----------------------------------------------------- */
.grid:before, .grid:after { content: ''; display: table; }
.grid:after { clear: both; }
.grid { display: flex; flex-flow: row wrap; align-items: stretch; }
[class*="column--"] { flex-grow: 0; flex-shrink: 1; position: relative; }
.column--full { min-width: 100%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--half { min-width: 50%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--one-fifth, .column--fifth { min-width: 20%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--two-fifth { min-width: 40%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--three-fifth { min-width: 60%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--four-fifth { min-width: 80%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--quarter { min-width: 25%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--third { min-width: 33.3333%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--three-quarter { min-width: 75%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--two-third { min-width: 66.6666%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
/* ------------------------------------------------------------------------- */

#edttd { display: block; background-color: #FFF; overflow: hidden; }

#oav { width: calc(100% - 2px); height: calc(100% - 2px); display: flex; flex-flow: row nowrap; align-items: stretch; box-shadow: inset 0 0 0 2px var(--bg); }
#oav > div:nth-child(1) { flex: 0 0 50%; background-color: #2791cf; background-image: url('/images/megafone.png'); background-position: center; background-size: 45%; background-repeat: no-repeat;  }
#oav > div:nth-child(2) { flex: 0 0 50%; display: flex; flex-flow: column; }
#oav > div:nth-child(2) > div:nth-child(1) { flex: 0 0 33.3333%; background: #fe0000; }
#oav > div:nth-child(2) > div:nth-child(2) { flex: 0 0 33.3333%; background: #FFF; }
#oav > div:nth-child(2) > div:nth-child(3) { flex: 0 0 33.3333%; background: #fe0000; }

.layout { display: grid; grid-auto-flow: dense; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-gap: 1rem; margin: 1rem auto 0 auto; overflow: hidden; }
.layout > * { border: 0; outline: 0; border: none; outline: none; grid-area: span 1/span 1; position: relative; overflow: hidden; }
.layout .wide { grid-area: span 1/span 2; }
.layout .tall { grid-area: span 2/span 1; }
.layout .wider { grid-area: span 1/span 3; }
.layout .widest { grid-area: span 1/span 4; }
.layout .tallest { grid-area: span 4/span 1; }
.layout .taller { grid-area: span 3/span 1; }
.layout .box { grid-area: span 2/span 2; }
.layout .tall-box { grid-column: span 2; grid-row: span 3; }
.layout .hero { grid-area: span 2/span 6; }

footer { display: block; height: 10rem; margin: 5rem 0; background: url(/assets/one-soapbox.png) no-repeat center center; background-size: contain; }