/*! granum.css v1.2.132 */

/* reset */
img, embed, iframe, object, audio, video {max-width:100%;}
button, input, select, textarea, li ul, li ol {margin:0;}
img, iframe, fieldset, hr {border:none;}
img {object-fit:cover;}
html, body, li, dl, dt, dd, legend, iframe, fieldset, .row {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0}
td, th {padding:0;text-align:left}
* {box-sizing:content-box;}
table, img, embed, iframe, object, audio, video, button, input, select, textarea,
	.wrap, .row, .modal>div, .drawer, .stick {box-sizing:border-box;}

button, [type="submit"], [type="search"] {-webkit-appearance:none;} /* safari */
button::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border:none;} /* firefox */

/* font */
html {font-size:120%;}
body {line-height:1.5;color:#000;}
body, .back, .drawer, .stick{background:#fff;}
body, .sans, .tag {font-family:"PT Sans", Roboto, "Segoe UI", sans-serif;}
.serif {font-family:"PT Serif", Georgia, serif;}
input, button, select, textarea, table {font:inherit;} 
h1, .h1 {font-size:200%;}
h2, .h2 {font-size:155%;}
h3, .h3 {font-size:120%;}
h4 {font-size:100%;}
h5 {font-size:83%;}
h6 {font-size:67%;}
small, .small {font-size:83%;font-weight:normal;}
h1, h2, h3, h4, h5, h6{margin:2rem 0 1rem 0;}
h1, h2, .h1, .h2 {line-height:1.3;}
pre, code, kbd, samp, .mono {font-family:"PT Mono", monospace;font-size:90%;}
pre code {font-size:100%;}

/* typography */
.fit, pre code, ul.l, ul.l li {margin:0;padding:0;border:none;border-radius:0;}
.fit:not(h1):not(h2):not(h3):not(h4) {font-size:1rem;font-weight:normal;}
	main, img.fit /*, table.roll*/ {display:block;}
  img.c {border-radius:50%;}
.mar, ul, ol , dl, blockquote, pre, hr, p, figure {margin:1rem 0;}
	.fit p, .fit .mar {margin:.5rem 0;}
	.stack>:first-child {margin-top:0;}
	.stack>:last-child {margin-bottom:0;}
  .stack.l>:not(:last-child) {border-bottom:thin solid #0002;}
.pad, ul.row li>:not(ul), fieldset, blockquote, pre {padding:.5em 1em;}
	.modal>.pad {padding:1.5em;}
	ul.row li>form {padding:.2em 1em;}
	legend, .tag {padding:0 .4em;}
	.tag {min-width:.7em;border-radius:.75em;}
pre, code  {white-space:pre-wrap;}
pre{overflow:auto;max-height:80vh;}
	code, kbd {padding:.2em .5em;}
	.rad, code, kbd, pre {border-radius:.2em;}
	/*div.rad {overflow:hidden;}*/
abbr {border-bottom:thin dotted;text-decoration:none;}
sub, sup {line-height:0em;}
.bord, kbd, fieldset, hr{border:thin solid #0002;}
hr{border-width:thin 0 0 0;}

/* links */
a {color:#04a;text-decoration:none;}
/* a:visited {color:#108;} */
.inv a{color:#8bf;/*#fd3;*/}
a:hover, a:not([href]) {color:inherit;}
a.act {color:#07e;}
a.pad, span.pad, .tag, ul.l li {display:inline-block;}
a.l, span.l, ul.l li {margin-right:1em;}

/* list */
ul {list-style:disc outside;}
ul, ol, dd {padding:0 0 0 1.5em;}
li, dt, dd {margin:.3em 0;}
dt {font-weight:bold;}
.row, .fit, ul.l{list-style:none;}

/* table */
.roll {overflow:auto hidden;}
th, td {padding:.2em .5em;vertical-align:top;background-clip:padding-box;}
table.fit>*>tr>*, table.pad {padding:0;}
table.bord {border:none;}
table.l {width:100%;}
table.mid tr>*, tr>.mid, tr.mid>*, ul.mid li, img.mid, img.c {vertical-align:middle;}
/* full borders */
table.bord>*>tr>* {border:thin solid #0002;}
/* .roll>table.bord {border:medium solid #0002;} */
/* horizontal borders */
table.pad>*>tr>*, .tabs {border-bottom:thin solid #0002;}
table.pad>*:last-child>tr:last-child>* {border-bottom:none;}

/* form */
fieldset {min-width:0;} /* fix overflow */
input, select {max-width:100%;}
textarea {width:100%;display:block;}
input, button, select, textarea {padding:.2em;margin:.1em 0;border:thin solid #aaa;}
button, [type="submit"] {padding:.5em 1em;border-radius:.2em;margin:.2em 0;}
	button, [type="submit"], a.pad:not(.bord) {border:thin solid transparent;}
button:not([disabled]), [type="submit"]:not([disabled]), summary, [data-cmd] {cursor:pointer;}
form>button, form>[type="submit"] {padding:.2em .5em;margin:0;}
button:hover:not([disabled]), [type="submit"]:hover:not([disabled]), a.pad.inv[href]:hover,
button:focus, input:focus, select:focus, textarea:focus, [contenteditable]:focus, summary:focus, a.pad.inv[href]:focus {box-shadow:0 0 0 .15em #aaa4;outline:none;}
button[disabled], [type="submit"][disabled] {opacity:.5;}
[disabled] {cursor:not-allowed;}
input[readonly] {background-color:#eee;}
[name]:invalid, [name]:invalid+.pop>input {border-color:#c00;}
	[type="checkbox"]:invalid+span, [type="radio"]:invalid+span {color:#c00;}
	[name]:invalid:focus, [name]:invalid+.pop>input:focus {box-shadow:0 0 0 .15em #f665;}
	:valid~.act.text-e, :invalid~.act.text-y {display:none;}
  :valid~[data-valid]:before {content:attr(data-valid);}
  :invalid~[data-invalid]:before {content:attr(data-invalid);}

.field {margin:.5em 0;}
.field>:first-child {display:block;}

/* grid */
.row {display:flex;}
.row.pad {padding:0;gap:1em;}
ul.row:not(.roll) {flex-wrap:wrap;}
ul.row li {display:flex;margin:0;}
ul.row>*, .col-0[class] {flex:0 1 auto;} /* for ie, which has default 0 0 auto*/ /*flex:initial; */
.row>:not(li) {min-width:0;/*fix overflow*/}
.row>*, .vert>*, .col-1[class], ul.row ul a {flex:1;}
.col-2[class] {flex:2;}
.col-3[class] {flex:3;}
.row>.l {margin-right:auto;}
.row>.r {margin-left:auto;}
.row>.l+.r {margin-left:0;}
/* does not fit row height */
.row.mid {align-items:center;}
.row>.mid, .row>li>.mid:not(ul) {align-self:center;}
/* fits row height, but requires wrapper inside items * /
.row.mid>:not(li), .row.mid>li>:not(ul), .row>.mid, .row>li>.mid:not(ul) {display:flex;align-items:center;}
/**/
.row.pad>.col-2 {flex-basis:1em;}
.row.pad>.col-3 {flex-basis:2em;}

/* modal */
.modal[class] {position:fixed;z-index:100;left:0;right:0;top:0;bottom:0em;background-color:#8888;box-shadow:0 0 0 9em #8888;display:flex;justify-content:center;align-items:center;margin:0;}
.modal>* {overflow:auto;background-color:#fff;}
.modal>:not(.full) {/*width:30%;*/min-width:18rem;max-height:83%;margin:1em;}
.modal>.full[class] {width:100vw;height:100vh;height:100dvh;min-height:auto;}
body:has(.modal:target>.full, .pic.modal) {overflow:hidden;}

/* gallery */
a.pic {-webkit-tap-highlight-color:transparent;}
a.pic.modal{box-shadow:0 0 0 9em #000;}
a.pic.modal>img {margin-top:-200em;}
a.pic.modal:before, a.pic.modal:after {content:attr(title);position:fixed;left:0;top:0;color:#fff;background:#0003;padding:0 .4em;}
a.pic.modal:after {content:"\2573";left:auto;right:0;padding:.6em 1em;} /*\2715*/
a.pic:not(.modal), a.pic:not(.modal) img {background:none !important;}

/* drawer */
.drawer {position:fixed;top:0;bottom:0;left:-21em;width:80%;max-width:20em;z-index:80;overflow:auto;transition:left .2s, right .2s;}
.drawer:target {left:0;}
.drawer.l {left:auto;right:-21em;}
.drawer.l:target {right:0;}

/* tabs */
.tabs + div > [id]:last-child {display:block;}
.tabs + div > [id]:target ~ *, .tabs + div > [id].show ~ * {display:none;}
.tabs a{border-bottom:2px solid transparent;}
.tabs a.act{border-color:currentColor;}

/* bar */
.bar {--v:0;border-radius:.16em;overflow:hidden;}
.bar:before {content:'';display:block;min-height:.4em;width:calc(1% * var(--v));background:currentColor;}

/* color */
.bg, blockquote, pre, code {background-color:#9992;}
pre code {background:none;}
.inv, .tag {background-color:#333;color:#fff;}
button, [type="submit"], a.inv, a.tag {background-color:#05b;color:#fff;}
.text:not(.spot) {color:#000;}
.text-n:not(.spot) {color:#999;}/*hue*/
.text-i:not(.spot) {color:#08a;}/*192*/
.text-y:not(.spot), :valid~[data-valid] {color:#181;}/*120*/
.text-w:not(.spot) {color:#d70;}/*37*/
.text-e:not(.spot), :invalid~[data-invalid] {color:#c00;}/*0*/
.bg-n, .bar {background-color:#eee;}
.bg-i {background-color:#bef;}/*195*/
.bg-y {background-color:#beb;}/*120*/
.bg-w, mark {background-color:#fd9;}/*40*/
.bg-e {background-color:#fbb;}/*0*/
button.bg-n, [type="submit"].bg-n, .inv.bg-n, .tag.bg-n {background-color:#999;}
button.bg-i, [type="submit"].bg-i, .inv.bg-i, .tag.bg-i {background-color:#08a;}
button.bg-y, [type="submit"].bg-y, .inv.bg-y, .tag.bg-y {background-color:#181;}
button.bg-w, [type="submit"].bg-w, .inv.bg-w, .tag.bg-w {background-color:#d80;}
button.bg-e, [type="submit"].bg-e, .inv.bg-e, .tag.bg-e {background-color:#c00;}

/* highlight */
a.hover:hover, div.hover:hover, ul.hover li:hover>:not(ul), table.hover tbody tr:hover>*, tr>.hover:hover, .pop:hover>a.hover {box-shadow:inset 0 0 0 200vh #9991;}
.shade, .modal>div {box-shadow:0 .1em .8em 0em #0003;}

/* drag */
.drag-container, .drag-item {touch-action:none;}
.drag-item {cursor:default;}
.drag-handle {cursor:move;}


/* modifiers */
.target, :target {scroll-margin-top:3rem;}
.target:not(:target):not(.show), .hide[class][class] {display:none;}
.nobr {white-space:nowrap;}
.center {margin-left:auto;margin-right:auto;}
.l {text-align:left;}
.c, .tag {text-align:center;}
.r {text-align:right;}

@media screen {
	.wrap {max-width:45em;}
	.stick {position:sticky;top:0;z-index:9;}
	footer.stick {top:auto;bottom:0;z-index:8;}
	.row .stick, .grid .stick{align-self:start;max-height:100vh;max-height:100dvh;overflow:auto;}
	.full {min-height:100vh;min-height:100dvh;}
  .vert {display:flex;flex-direction:column;}
  .vert.full {height:100vh;height:100dvh;min-height:auto;}
  .vert>* {overflow:auto;}
  .vert>article, .vert>.roll {flex:initial;}
  .vert>header, .vert>footer, .vert>nav, .vert>.col-0 {flex:none;overflow:visible;}
}

/* desktop */
@media (min-width: 900px) {
	.field.resp {display:flex;}
	.field.resp>* {flex:73;min-width:0;}
	.field.resp>:first-child:not(:only-child) {flex:25;text-align:right;margin-right:2%;}
	.field.resp>:first-child:not(:only-child), .field>:last-child>div:only-child {margin-top:.3em;border-top:thin solid transparent;}
	.field.resp>:only-child {margin-left:27%;}
}

/* mobile */
@media (max-width: 899px) {
	html {font-size:medium;}
	.row.resp, .row.resp>*, ul.row.resp a, ul.resp li {display:block;}
	.row.resp[class]>* {text-align:left;}/* form label*/
	.row.resp.pad>:not(:last-child) {margin-bottom:1rem;}
	/*ul.row.resp a {flex:1;}*/
	table.resp>*, table.resp>*>*, table.resp>*>*>* {display:block;text-align:left;}
	table.resp tr{margin-bottom:.5em;}
}

/* smart dark mode; !shadows */
html, .invert {background:#fff;/*fix*/}
html, a.pic.modal, img, video, iframe, .invert {filter:var(--mode);}
html {--mode:none;}
.invert {--mode:invert(.9) hue-rotate(180deg);}
/*.invert:not(html) {background:#fff;filter:var(--mode);}*/
@media (prefers-color-scheme: dark) {
  html:not(.invert) {--mode:invert(.9) hue-rotate(180deg);}
  html.invert {--mode:none;}
}