@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
    font-weight: 200;
    --bg-color: white;
}

ul, ol, li, menu { margin:0; padding:0; list-style-type:none;}
a { text-decoration: none; }
b { font-weight: 800; }

.toc { margin-left:-1rem; }
.toc ul { margin-left:1rem; }
.toc .active { font-weight: 800; }
nav a { white-space: nowrap; }

/* remove “pull and snap back” and horizontal panning */
html, body {
  overscroll-behavior: none;
  touch-action: pan-y;
}

body {
    padding:0;
    margin:0;
}

h1 { font-weight: 200; font-size:medium; margin:0; padding:0; }
h2 { font-weight: 200; font-size:medium; margin:0; padding:0; }
h3 { font-weight: 200; font-size:medium; margin:0; padding:0; }

.overhead { font-weight:200; text-transform: uppercase; color:#888; letter-spacing:0.2ex; }
.underhead { font-size: 80%; text-transform: uppercase; }

table.datatable { border-spacing: 0; }

.datatable th {
    text-align:right;
    padding-right:0.5rem;
    padding-bottom:0.5rem;
    font-weight: inherit;
    vertical-align: bottom;
    line-height: 150%;
}

.datatable td {
    text-align:right;
    padding-right:0.5rem;
    padding-bottom:0.5rem;
    vertical-align: top;
    white-space: nowrap;
}

.datatable td.text, .datatable th.text {
    text-align: left;
}

.zr-button-primary {
    background-color: #fdd835;
    padding:1ex;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    color:#424242;
}

.zr-button-primary:visited { color:#424242; }

.zr-button-secondary {
    padding:1ex;
    text-decoration: none;
    border-radius: 4px;
    border:1px solid #424242;
    cursor: pointer;
    color:#424242;
}

.zr-button-secondary:visited { color:#424242; }

.lucide * {
  vector-effect: non-scaling-stroke;
  stroke: currentColor;
  stroke-width: 0.5;
  fill: none;
}

.lucide.fill * { fill: #fdd835; }

.lucide.hover\:fill:hover * { fill: #fdd835; }

.lucide {
  vertical-align: -0.125em;
  display: inline-block;
}

.prfgrid {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-auto-rows: auto;
}

.hiddensvg {
    position: absolute; width:0; height:0; overflow:hidden;
}

#hfbox { filter: grayscale(100%); }

.hfmask {
  background: rgba(0, 0, 0, 0.45);

  mask-image: radial-gradient(
    circle 25vh at center,
    transparent calc(25vh - 1px),
    black 100%
  );

  mask-mode: alpha;
  pointer-events: none;
  mask-repeat: no-repeat;
}

.hfhead {
    position: absolute;
    width: 31vh;
    height: 31vh;
    border: 1px solid #888;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 5vh));
}

@media (width < 40rem) and (orientation: portrait) and (max-device-aspect-ratio: 1) {
    .zr-col { padding-left:4ex; padding-right:4ex; }
    header img { filter: drop-shadow(2px 2px 4px #bbb); }
}

@media (width >= 40rem) {
    .zr-col { width:62%; margin-left:auto; margin-right:auto; }
}

@media (prefers-color-scheme: light) {
    .lucide { color: black; }
    a, a:active, a:visited { color:black; }
    .bg { background-color: white; }
    .zr-light-only { display: block; }
    .zr-dark-only { display: none; }

    /* fill on light, without stroke, has low contrast and needs a bit of shadow */
    .lucide.fill * { stroke: none; filter: drop-shadow(1px 1px 1px #eee); }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #212121;
    }

    .lucide { color: white; }
    body { color:white; }
    a, a:active, a:visited { color:white; }
    .bg { background-color: #212121; }
    .zr-light-only { display: none; }
    .zr-dark-only { display: block; }

    .zr-button-primary { color:#424242; }
    .zr-button-primary:visited { color:#424242; }

    .zr-button-secondary {
        padding:1ex;
        text-decoration: none;
        border-radius: 4px;
        border:1px solid white;
        color:white;
    }

    .zr-button-secondary:visited { color:white; }
}

img.zr-head {
    border-radius: 50%;
    filter:grayscale()
}