/* IC Troo color-layout-measure native styling */
/* Color - scheme aware */
:root{
    --fg-main: #DDD; --fg-soft: #AAA;
    --hl-main: oklch(82.8% 0.189 84.429); --hl-soft: oklch(50.8% 0.118 165.612);
    --bg-main: oklch(13% 0.028 261.692); --bg-soft: oklch(27.8% 0.033 256.848);
    /* 3 tone branding color */
    --br-fg: #90f; --br-bg: #60f; --br-mid: oklch(28.2% 0.091 267.935);
}
@media (prefers-color-scheme: light) {
    :root{
        --fg-main: #333; --fg-soft: #666;
        --hl-main: #60F; --hl-soft: #90F;
        --bg-main: #FFF; --bg-soft: #DDD;
        --br-fg: #ffb900; --br-bg: #007a55;--br-mid: #939;
    }
}
/* Layout - no-margin and padding, full-page body-items grid placement:nav,header,main,footer */
*{margin: 0;padding: 0;box-sizing: border-box;}
ul,ol{list-style: none;}
svg{display: unset;}
nav{grid-area:clmnav;}
header{grid-area:clmhead;}
main{grid-area:clmmain;}
footer{grid-area:clmfoot;}
body{width: 100dvw;height: 100dvh;
 display: grid;
 grid-template-areas: "clmnav" "clmhead" "clmmain" "clmfoot";
 grid-template-columns: 1fr;
 grid-template-rows:  auto auto 1fr auto;
}
nav,header,footer{display:flex;justify-content: space-between;}
.hidden{display:none !important;}
/* The md: breakpoint */
@media (min-width: 768px) {
    body{
        grid-template-areas: "clmnav clmhead" "clmnav clmmain" "clmfoot clmfoot";
        grid-template-columns: clamp(123px,235px,20vw) 1.618fr;
        grid-template-rows: auto 1fr auto;
    }
    nav{flex-direction: column;}
    .md\:show { display: inline !important; }
}
/* The lg: breakpoint */
@media (min-width: 1280px) {
    .lg\:hidden { display: none; }
}

/* Measurement - golden ratio increment */
:root{
    --gr-xs: 0.21; --gr-s: 0.33; --gr-m: 0.55; --gr-l: 0.88; --gr-xl: 1.43;
    --gap-xs: calc(var(--gr-xs) * 1rem);--gap-s: calc(var(--gr-s) * 1rem); --gap-m: calc(var(--gr-m) * 1rem); --gap-l: calc(var(--gr-l) * 1rem); --gap-xl: calc(var(--gr-xl) * 1rem);
    --px-xs:6px;--px-s:9.7px;--px-m:15.70px;--px-l:25.41;--px-xl:41.12px;
}
.g-xs{gap:var(--gap-xs);} .g-s{gap:var(--gap-s);} .g-m{gap:var(--gap-m)} .g-l{gap:var(--gap-l)} .g-xl{gap:var(--gap-xl)}
.m-xs{gap:var(--gap-xs);} .m-s{margin:var(--gap-s);} .m-m{margin:var(--gap-m)} .m-l{margin:var(--gap-l)} .m-xl{margin:var(--gap-xl)}
.p-xs{gap:var(--gap-xs);} .p-s{padding:var(--gap-s);} .p-m{padding:var(--gap-m)} .p-l{padding:var(--gap-l)} .p-xl{padding:var(--gap-xl)}

.mr-xl{margin-right:var(--gap-xl);} .ml-xl{margin-left:var(--gap-xl);}
.mx-xl{margin-left:var(--gap-xl);margin-right:var(--gap-xl);}
.my-xl{margin-top:var(--gap-xl);margin-bottom:var(--gap-xl);}
.pr-xl{padding-right:var(--gap-xl)} .pl-xl{padding-left:var(--gap-xl)}
.px-xl{padding-left: var(--gap-xl);padding-right: var(--gap-xl);}
.py-xl{padding-top:var(--gap-xl);padding-bottom:var(--gap-xl);}