body {
    --font-family: system-ui;

    --box-margin: 28px;
    --box-margin-large: 38px;
    --box-margin-x-large: 44px;
    --box-margin-reduced: 22px;
    --box-margin-inline: 0.7%;

    --section-margin: 48px;
    --content-margin: 2.8%;
    --content-margin-mobile: 1.8%;
    --panel-width: 620px;

    --text-font-size: 16px;
    --text-line-height: 24px;
    --text-margin: 16px;
    --text-margin-small: 10px;
    --text-margin-mobile: 12px;

    --heading-font-size: 30px;
    --heading-line-height: 40px;
    --heading-margin: 22px;
    --sub-heading-font-size: 20px;
    --sub-heading-line-height: 25px;
    --sub-heading-margin: 17px;
    --heading-panel-font-size: 24px;
    --heading-panel-line-height: 32px;
    --heading-panel-margin: 16px;

    --text-width-wide: 86ch;
    --text-width-standard: 70ch;
    --text-width-compact: 60ch;
    --text-width-narrow: 46ch;

    --content-margin-inline: 2.8%;
    --content-margin-inline-mobile: 1.8%;
    --portrait-margin-inline: 6.0%;

    --nav-menu-gap: 10px;
    --nav-menu-gap-mobile: 6px;
    --nav-bar-gap: 12px;
    --list-item-margin: 5px;


    /* transitions */

    --slow-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out;
    --medium-transition: background-color 0.18s ease-in-out, border-color 0.18s ease-in-out;
    --fast-transition: background-color 0.05s ease-in-out, border-color 0.05s ease-in-out;


    /* colors */

    --lightgrey: #dfe1e1;
    --metalblack: #3a3d4d;
    --metalblack-x: #23252f;
    --metalblack-hover: #3a3d4ddd;

    --sandyellow: #f1f181;
    --sandyellow-strong: #fafa72;

    --button-color: #313025;
    --button-color-hover: #313025dd;
    --button-color-selected: #9e9b76;
    --button-color-selected-hover: #9e9b76e9;

    --sandygrey: #bebba3;
    --sandywarmgrey: #c8c1af;
    --sandygrey-hover: #a2a08c;
    --sandyblack: #1b1c15;
}


/* common */

html { overflow-y: auto; scrollbar-gutter: stable; }
body * { box-sizing: border-box; }
body { margin: 0; background-position: center center; background-attachment: fixed;  background-repeat: repeat; }
table { border-collapse: collapse; }
table td { vertical-align: top; }
figure, figcaption { margin: 0; }
caption { caption-side: top; text-align: left; font-weight: bold; margin: 0; }

/* transitions */

.slow-transition { transition: var(--slow-transition) }
.medium-transition, a, .button-standard, .button-slim, input[type='submit'] { transition: var(--medium-transition) }
.fast-transition { transition: var(--fast-transition) }


/* layout */

.site-container { display: flex; flex-direction: column; min-height: 100vh;  }
.main-container { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; margin: 0 auto; }
.content-container { flex: 1 0 auto; }
.header-banner, .footer-banner { flex: 0 0 auto; }


/* containers */

.box-container { position:relative; max-width: 100%; margin-top: var(--box-margin); margin-bottom: var(--box-margin-large); }
.fit-container { width: fit-content; }
.center-container { width: fit-content; margin: var(--box-margin) auto  var(--box-margin-large); }
.text-container { max-width: 880px; margin: var(--box-margin) 0; }


/* fonts */

body { font-family: var(--font-family), sans-serif; }


/* text */

p, td, tr, li, h4 { font-size: var(--text-font-size); line-height: var(--text-line-height); }
p, ul { margin-block: var(--text-margin); }

ul li { margin-bottom: var(--list-item-margin); }
ul li:last-child { margin-bottom: 0; }
ul.dot, ul.not-dot { padding-left:0; margin-left: 3px; }
ul.dot li { list-style-type:none; padding-left:19px; background:url(images/icons/content/dot-black.png) no-repeat left -1px; }
ul li.list-sub-item { margin-left: 28px; }
ul.not-dot li { list-style-type:none; }


/* text alignment */

td.nowrap, th.nowrap, span.nowrap, strong.nowrap { white-space: nowrap; }
td.center, th.center { text-align: center; }
td.right, th.right, p.right { text-align: right; }


/* text shaping */

.text-wide { max-width: var(--text-width-wide); }
.text-standard { max-width: var(--text-width-standard); }
.text-compact { max-width: var(--text-width-compact); }
.text-narrow { max-width: var(--text-width-narrow); }


/* table */

.table { margin: var(--text-margin) 0; }
.box-container .table { margin-top: 0; margin-bottom: 0;}
.stretch-table { width: 100%; }
.table td { padding: 4px 15px; border:1px solid var(--lightgrey); line-height: var(--text-line-height); }
.table .heading td { font-weight: bold;  background-color: var(--lightgrey);  white-space: nowrap; }
.table .heading td {vertical-align: inherit;}
.table .heading td:nth-child(n+1) { border-right-color: white; }
.table .heading td:last-child { border-right-color: var(--lightgrey); }

tbody tr td { transition: var(--fast-transition);}

.active-table tr[data-href]:hover td, .smart-table tbody tr:not(.heading):hover td { background-color: #f6f6f6; }
.active-table td:hover .inline-text-label { background-color: #dddddd; }
.active-table tbody tr[data-href] td { cursor: pointer; }


/* dev */

p.todo { display: flex; justify-content: center; align-items: center; margin: var(--box-margin) 0; min-height: 140px; max-width: 80ch; padding:28px 12px; text-align: center; background-color: #fff3ef; border: 1px dashed #cdb5b5;}