:root {
    --font-heading:"Fraunces", ui-serif, Georgia, serif;
    --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --font-display:"Fraunces", ui-serif, Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
    --spacing:30px;
    --border-col:#ddd;
}
body {
    font-family:var(--font-body);
    margin:0;
    background-color:var(--bg-col);
}
a {
    text-decoration: none;
}
.small {
    font-size:0.75em;
}
main a {
    color:#fff;
    border-bottom: 1px dashed #888;
    transition:0.2s;
}
main a:hover {
    border-bottom: 1px solid #fff;
}
button {
    background-color:var(--bg-darker-col);
    color:#fff;
    border:2px solid var(--bg-very-dark-col);
    cursor:pointer;
    font-size:18px;
    font-family: var(--font-mono);
    padding:6px 15px;
    transition:0.2s;
}
button:hover {
    background-color:#000;
}
button.btn-primary {
    background-color:var(--highlight-col);
    color:#000;
}
button.btn-primary:hover {
    background-color:var(--highlight-dark-col);
    color:#000;
}
button.btn-ghost {
    background-color:#fff;
    color:#000;
}
button.btn-ghost:hover {
    background-color:#ddd;
    color:#000;
}
button>.fa,button>.svg-inline--fa {
    margin-right:10px;
}
button.btn-faint {
    background-color:#fff;
    border:2px solid var(--faint-col);
    color:var(--bg-col);
}
button.btn-faint:hover {
    background-color:var(--bg-light-col);
    color:#000;
}

button.btn-link {
    margin:0;
    background-color:var(--bg-col);
    display:inline-block;
    font-size:inherit;
    border:none;
    padding:4px 10px;
    margin:0;
    border:1px solid #000;
}

header.site-header {
    background-size:cover;
    background-repeat: no-repeat;
    background-position: 100% 0%;
    min-height: 80px;
}

header.site-header .site-c {
    display:inline-block;
    position:absolute;
    left:4%;
    top:1%;
}
header.site-header .site-name {
    font-size:2rem;
    font-family:var(--font-heading);
    color:#000000;
    letter-spacing: -0.1rem;
    display:inline-block;
    margin-bottom:-1.5rem;
}
main h1 {
    font-size:3.5rem;
    font-family:var(--font-heading);
    margin:0;
    color:#fff;
}

main section>div {
    max-width:952px;
    margin:0 auto;
    color:#fff;
    padding-bottom:var(--spacing);
}

main section:not(.cols)>div {
    padding-bottom:var(--spacing);
}

main section.cols>div>* {
    display:block;
    /*padding-bottom:var(--spacing);*/
}
main section.cols>div>*>p:last-child {
    margin-bottom:0;
}

main section.cols>div {
    display:grid;
    gap:var(--spacing);
    min-height:200px;
    padding-top:var(--spacing);
}

main section.fixed-top {
    position:sticky;
    top:0;
    z-index:100;
}

main section ul {
    margin-block-start:0;
    margin-block-end:0;
    padding-inline-start:30px;
}

.horizontal {
    display:flex;
    gap:10px;
}

.padding-20 {
    padding:var(--spacing);
}

section.fixed-top {
    background-color:var(--bg-col);
}

main section.darker {
    background-color:var(--bg-darker-col);
}
main section.lighter {
    background-color:var(--bg-light-col);
}
main section.lighter>div * {
    color:var(--bg-darker-col);
}

main section.c2c1>div {
    grid-template-columns:2fr 1fr;
}

main section.c1c2>div {
    grid-template-columns:1fr 2fr;
}

main section.c1c1c1>div {
    grid-template-columns:1fr 1fr 1fr;
}

main section h2 {
    font-size:2rem;
    font-family:var(--font-heading);
    margin:0 0 var(--spacing) 0;
    color:#fff;
    margin-bottom:15px;
}

main section:not(.cols)>div {
    padding-top:var(--spacing);
}

main section .text {
    text-align:justify;
}

main section .text ul {
    text-align:left;
}

main .img-c {
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

main .img-c.zoomable {
    cursor:pointer;
}

main a.block {
    border-bottom:none;
}

main a.block:hover {
    border-bottom:none;
}

.img-c.img-loaded {
    opacity: 1;
}

.img-c.hover-zoom {
    transition: transform 0.45s ease, opacity 0.3s ease;
}

.img-c.hover-zoom:hover {
    transform: scale(1.08);
}

header.site-header .strap-line {
    font-size:1.1em;
    letter-spacing: -0.1rem;
    font-family:var(--font-heading);
    color:#fff;
    text-align:right;
}

body.tall-header header.site-header {
    min-height: 450px;
    background-position: 100% 20%;
}
body.tall-header header .site-name {
    font-size:6.5rem;
    letter-spacing: -0.3rem;
}
body.tall-header header .site-c {
    top:8%;
}
body.tall-header header .strap-line {
    font-size:3em;
    letter-spacing: -0.2rem;
}



header.site-header .hamburger-btn {
    display:none;
}

.nav {
    display:flex;
    font-family:var(--font-mono);
    font-feature-settings:"ss01", "ss02";
}

.nav ul {
    margin-left:auto;
    margin-right:1rem;
    display:flex;
    gap:var(--spacing);
    list-style-type:none;
}

.nav ul a {
    letter-spacing: -0.07rem;
    color:var(--bg-darker-col);
    padding:4px 10px;
    display:inline-block;
    transition:0.2s;
    border-radius:10px;
}

.nav ul a:hover {
    color:var(--bg-very-dark-col);
    border-bottom:1px solid var(--bg-darker-col);
}

.av ul a:hover {
    background-color:var(--bg-light-col);
}

.footer-bottom {
    text-align:center;
    font-size:0.7rem;
}
.footer-bottom a {
    color:#000;
}

#mobile-nav-overlay {
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:var(--bg-light-col);
    opacity:0.4;
    display:none;
}

section .img-c {
    transition:0.2s;
    border-radius:20px;
}

section.cols .img-c {
    aspect-ratio: 600/355;
}

section .block {
    padding:var(--spacing) 0;
    transition: transform 0.45s ease, opacity 0.3s ease;
    opacity:0.8;
}

main section.submenu {
  background-color:var(--bg-very-dark-col);
}

main section.submenu>div {
    padding:0;
    display:flex;
    gap:0;
}

main section.submenu>div a {
    padding:10px var(--spacing);
    border-bottom:none;
}

main section.submenu>div a:hover {
    background-color:var(--bg-col);
}

main section.submenu>div a:hover {
    border-bottom:none;
}

section .block:hover {
    opacity:1;
}

section .block:hover .img-c {
    transform: scale(1.08);
}

main select,main textarea,main input[type=text],main input[type=email],main input[type=password],main input[type=date] {
    background-color: var(--bg-light-col);
    color: var(--bg-darker-col);
    font-family: var(--font-body);
    font-size:18px;
    padding:3px 8px;
    border:1px solid var(--bg-col);
}

main .border {
    border:4px solid var(--bg-light-col);
    padding:var(--spacing);
}

table.display {
    width:100%;
    border-collapse: collapse;
    border:4px solid var(--bg-light-col);
}

table.display th {
    font-family: var(--font-heading);
}

table.display th,table.display td {
    padding:5px 10px;
}

table.display thead {
    background-color:var(--bg-light-col);
    color:var(--bg-darker-col);
}

table.display tbody tr {
    transition:0.2s;
}

table.display tbody tr:hover {
    background-color:var(--bg-very-dark-col);
}

ul.display {
    list-style: none;
    margin: 1.5rem 0;
    padding: var(--spacing);
    display: grid;
    gap: 0.75rem;
    background-color:var(--bg-darker-col);
}

.small-horizontal-form {
    display:flex;
    align-items:center;
    background-color:var(--bg-darker-col);
    padding:5px;
    justify-content:space-between;
}

.small-horizontal-form input,.small-horizontal-form select,.small-horizontal-form textarea {
    border:none!important;
    background-color:#fff!important;
}

ul.display .small-horizontal-form {
    background-color:var(--bg-light-col);
}

h4.centered {
    padding:5px;
    margin:0;
    text-align:center;
}

#cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #222; color: #fff; padding: 15px 20px;
  display: grid; gap: 12px; grid-template-columns: 1fr 100px 100px; align-items: center; flex-wrap: wrap;
}
#cookie-banner p { margin: 0; flex: 1 1 300px; }
#cookie-banner a { color: #9cf; }
#cookie-banner button {
  padding: 8px 18px; border: 0; cursor: pointer; font-size: 1em;
  background: #fff; color: #222;
}

#dialog-wrapper {
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    display:grid;
    z-index:1000;
    grid-template-columns:1fr 1fr 1fr;
    gap:0;
}
#dialog-wrapper>p {
    padding:0;
    margin:0;
    background-color:#888;
    opacity:0.8;
}
#dialog-container {
    background-color:#fff;
    display:flex;
    flex-direction:column;
    height: 100%;
    min-height: 0;
    min-width:300px;
}
#dialog-container>header {
    padding:20px;
    flex: 0 0 auto;
    font-size:2rem;
    font-family:var(--font-heading);
    color:#000000;
    letter-spacing: -0.1rem;
    color:var(--bg-darker-col);
}
#dialog-container>header>.fa,#dialog-container>header>.svg-inline--fa {
    margin-right:10px;
}
#dialog-container>main {
    border-top:1px solid var(--border-col);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    height:100%;
    padding:20px;
    color:var(--bg-darker-col);
}
#dialog-container>main a {
    color:var(--bg-darker-col);
}
#dialog-container>footer {
    padding:20px;
    border-top:1px solid var(--border-col);
    flex: 0 0 auto;
    display:flex;
    gap:10px;
}
#dialog-container>footer>*:first-child {
    margin-left:auto;
}
#dialog-container>footer>*:last-child {
    margin-right:auto;
}