@font-face {
    font-family: InterVariable;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("InterVariable.woff2") format("woff2");
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
  /* Keeps #anchor targets clear of the pinned header; --anchor-offset is measured in script.js. */
  scroll-padding-top: var(--anchor-offset, 0px);
}



@font-face {
    font-family: InterVariable;
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("InterVariable-Italic.woff2") format("woff2");
}



:root {
    /* white */
    --background-color: #fff;
    /* lightgray */
    --border-color: #d3d3d3;
    /* black */
    --text-color: #000;
    --accent-color: #186e28;
    --highlight-color: #d0e2d4;
    --interactive-border-color: var(--accent-color);
    --border-thickness: 2px;
    --line-height: 1.2em;
    --font-size-multiplier: 1.1;
    --small-font-size: 12px;
    --small-medium-font-size: calc(var(--small-font-size) * var(--font-size-multiplier));
    --medium-font-size: calc(var(--small-medium-font-size) * var(--font-size-multiplier));
    --medium-large-font-size: calc(var(--medium-font-size) * var(--font-size-multiplier));
    --large-font-size: calc(var(--medium-large-font-size) * var(--font-size-multiplier));
    --margin-multiplier: 1.5;
    --extra-small-margin: calc(var(--small-margin) / var(--margin-multiplier));
    --small-margin: 8px;
    --small-medium-margin: calc(var(--small-margin) * var(--margin-multiplier));
    --medium-margin: calc(var(--small-medium-margin) * var(--margin-multiplier));
    --medium-large-margin: calc(var(--medium-margin) * var(--margin-multiplier));
    --large-margin: calc(var(--medium-margin) * var(--margin-multiplier));
    --extra-large-margin: calc(var(--large-margin) * var(--margin-multiplier));
    --column-width: 220px;
    --icon-height-multiplier: 1.5;
    --small-logo-icon-height: 40px;
    --medium-logo-icon-height: calc(var(--small-logo-icon-height) * var(--icon-height-multiplier));
    /* Desktop logo runs at 80% of the stepped size. */
    --large-logo-icon-height: calc(var(--medium-logo-icon-height) * var(--icon-height-multiplier) * 0.8);
    --small-menu-icon-height: 30px;
    --medium-menu-icon-height: calc(var(--small-menu-icon-height) * var(--icon-height-multiplier));
}

*,
::before,
::after {
    transition: color .2s linear, background-color .2s linear, border-color .2s linear, opacity .2s linear;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-wrap: break-word;
}

body>header {
    grid-area: body-header;
}

body>footer {
    grid-area: body-footer;
}

body>main {
    grid-area: body-main;
}

body>main>article>section {
    grid-area: body-main-article-section;
}

body>main>article>aside {
    grid-area: body-main-article-aside;
}

body>header>section:nth-child(1) {
    grid-area: body-header-section-1;
}

body>header>section:nth-child(2) {
    grid-area: body-header-section-2;
}

body>footer>section:nth-child(1) {
    grid-area: body-footer-section-1;
}

body>footer>section:nth-child(2) {
    grid-area: body-footer-section-2;
}

body>footer>section:nth-child(3) {
    grid-area: body-footer-section-3;
}

body>footer>section:nth-child(4) {
    grid-area: body-footer-section-4;
}

body,
body>header,
body>footer,
body>main>article {
    display: grid;
}

body {
    background-color: var(--background-color);
    justify-content: center;
    align-items: start;
    gap: 0;
    grid-template-columns: calc((var(--column-width) * 5) + (var(--small-margin) * 4));
    grid-template-areas:
        "body-header"
        "body-main"
        "body-footer";
}

body>main>article {
    justify-content: right;
    align-items: start;
    gap: 0;
    grid-template-columns: calc((var(--column-width) * 3) + (var(--small-margin) * 2)) calc(var(--column-width) + var(--small-margin));
    grid-template-areas:
        "body-main-article-section body-main-article-aside";
}

body>main {
    min-height: calc(100dvh - var(--small-margin) - var(--large-logo-icon-height) - var(--large-margin) - var(--footer-h, 0px));
    transition: height 0s linear;
}

body>header {
    position: sticky;
    top: 0;
    /* Keeps the header above positioned content in body>main, which paints later. */
    z-index: 10;
    justify-content: left;
    align-items: start;
    gap: 0;
    border-bottom: var(--border-thickness) solid var(--border-color);
    margin-bottom: var(--small-medium-margin);
    /* Fades main content as it scrolls beneath the sticky header band. */
    background-color: color-mix(in srgb, var(--background-color) 96%, transparent);
    backdrop-filter: blur(3px);
    grid-template-columns: calc(var(--column-width) + var(--small-margin));
    grid-template-areas:
        "body-header-section-1"
        "body-header-section-2";
}

body>header nav a {
  font-weight: 400;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body>header nav a[aria-current="page"] {
  text-decoration: underline;
}

body>header>section:nth-child(1) {
    margin-top: var(--small-margin);
    margin-bottom: var(--small-medium-margin);
}

body>header>section:nth-child(1),
body>header>section:nth-child(2) {
    width: var(--column-width);
}

body>header>section:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    /* Clears the header's bottom border so the nav starts below the divider. */
    margin-top: calc(var(--border-thickness) + var(--small-medium-margin));
}

body>header>section:nth-child(2)>h1 {
    height: var(--line-height);
}

body>header>section:nth-child(2)>nav {
    font-size: var(--large-font-size);
    height: calc(100dvh - var(--small-margin) - var(--large-logo-icon-height) - var(--large-margin) - var(--line-height) - var(--medium-margin) - var(--footer-overlap, 0px));
    overflow-y: auto;
    transition: height 0s linear;
}

body>header>section:nth-child(1)>a>img {
    vertical-align: middle;
    height: var(--large-logo-icon-height);
    user-select: none;
}

body>header>section:nth-child(1)>label>img {
    vertical-align: middle;
    height: var(--medium-menu-icon-height);
    user-select: none;
    content: url("/iconmonstr-menu-1.svg");
}

body>header:has(:checked)>section:nth-child(1)>label>img {
    content: url("/iconmonstr-x-mark-9.svg");
}

body>header>section:nth-child(1)>input,
body>header>section:nth-child(1)>label {
    display: none;
}

body>footer {
    justify-content: right;
    align-items: start;
    gap: var(--small-margin);
    grid-template-columns: var(--column-width) var(--column-width) var(--column-width) var(--column-width);
    grid-template-areas: "body-footer-section-1 body-footer-section-2 body-footer-section-3 body-footer-section-4";
    margin-bottom: var(--large-margin);
}

body>footer>section {
    margin-bottom: var(--extra-large-margin);
}

body>main>article+article>section,
body>main>article+article>aside:has(*),
body>footer {
    padding-top: var(--medium-margin);
    border-top: var(--border-thickness) solid var(--border-color);
}

body>main>article+article>aside:has(*) {
    padding-left: var(--small-margin);
}


body>main>article>section>nav>ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--small-margin);
    column-gap: var(--medium-margin);
}

/* Override: make the Shape Machine index (Visual Calculations) use 3 columns only.
   Targets the specific H1 on /shape-machine/index.html so other pages keep 4 columns. */
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Use a scoped custom property for borders on the Shape Machine nav items so only
   those boxes get black borders. */
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav {
    --shape-machine-border: #000;
    /* make border width half of the global --border-thickness */
    --shape-machine-border-thickness: calc(var(--border-thickness) / 2);
}

/* Apply the scoped border color to images/iframes inside that specific nav list. */
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a img,
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a iframe {
    border-color: var(--shape-machine-border, var(--border-color));
    border-width: var(--shape-machine-border-thickness, var(--border-thickness));
}

/* Smoothly increase the border width a little on hover/focus for the Shape Machine boxes */
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a img,
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a iframe {
    transition: border-width 0.15s ease, border-color 0.15s ease;
}

body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a:hover img,
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a:focus img,
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a:hover iframe,
body>main>article>section>h1#visual-calculations-in-the-shape-machine + nav > ul li a:focus iframe {
    border-width: calc(var(--shape-machine-border-thickness, var(--border-thickness)) + 1px);
}

@media (max-width: calc((220px * 5) + (8px * 4) + 42px)) {

    :root {
        /* Space between the window edge and the page column. */
        --page-gutter: max(calc((var(--visible-width, 100vw) - calc((var(--column-width) * 3) + (var(--small-margin) * 2))) / 2), var(--medium-margin));
    }

    body>main>article+article>aside:has(*) {
        padding-top: 0;
        border-top: none;
    }

    body {
        grid-template-columns: minmax(0, calc((var(--column-width) * 3) + (var(--small-margin) * 2)));
        padding-left: var(--medium-margin);
        padding-right: var(--medium-margin);
    }

    body>main>article {
        grid-template-columns: minmax(0, calc((var(--column-width) * 3) + (var(--small-margin) * 2)));
        grid-template-areas:
            "body-main-article-section"
            "body-main-article-aside";
    }

    body>footer {
        gap: 0 var(--small-margin);
        justify-content: left;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
            "body-footer-section-1 body-footer-section-2 body-footer-section-3"
            "body-footer-section-4 body-footer-section-4 body-footer-section-4";
    }

    body>footer>section:nth-child(4) {
        margin-top: var(--extra-large-margin);
        margin-bottom: var(--large-margin);
    }

    body>main {
        margin-top: calc(var(--medium-logo-icon-height) + var(--small-medium-margin) + var(--small-medium-margin) + var(--extra-large-margin));
    }

    /* The breadcrumb bar sits flush under the header, so its own padding is what
       centres the text; the page gap moves below the divider instead. */
    body:has(.breadcrumbs) > main {
        margin-top: calc(var(--medium-logo-icon-height) + var(--small-medium-margin) + var(--small-medium-margin) + var(--border-thickness));
    }

    body>header {
        --menu-panel-height: min(60dvh, 26rem);
        position: fixed;
        top: 0;
        z-index: 10;
        border-bottom: var(--border-thickness) solid var(--border-color);
        background-color: var(--background-color);
        grid-template-columns: 1fr;
        margin-bottom: var(--extra-large-margin);
        max-height: calc(var(--medium-logo-icon-height) + var(--small-medium-margin) + var(--small-medium-margin));
        overflow: hidden;
        left: max(calc((100dvw - calc((var(--column-width) * 3) + (var(--small-margin) * 2) + var(--sbw, 0px))) / 2), var(--medium-margin));
        right: max(calc((100dvw - calc((var(--column-width) * 3) + (var(--small-margin) * 2) + var(--sbw, 0px))) / 2), var(--medium-margin));
        transition: left 0s, right 0s, max-height 0.2s linear;
        /* Paint the header background out to both window edges so text scrolling under it stays hidden. */
        box-shadow: 0 0 0 100vmax var(--background-color);
        clip-path: inset(0 -100vmax);
    }

    /* With breadcrumbs the divider belongs under them. Kept as a transparent
       border so the header keeps the same height and the sticky offsets hold. */
    body:has(.breadcrumbs) > header {
        border-bottom-color: transparent;
    }

    body:has(.breadcrumbs) > header:has(:checked) {
        border-bottom-color: var(--border-color);
    }

    body>header>section:nth-child(1) {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--background-color);
        width: minmax(0, calc((var(--column-width) * 3) + (var(--small-margin) * 2)));
        margin-top: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        height: calc(var(--medium-logo-icon-height) + var(--small-medium-margin) + var(--small-medium-margin));
    }

    body>header>section:nth-child(1)>a>img {
        height: var(--medium-logo-icon-height);
    }

    body>header>section:nth-child(1)>label>img {
        height: var(--medium-menu-icon-height);
    }

    body>header>section:nth-child(1)>label {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: right;
        align-items: center;
    }

    body>header>section:nth-child(2) {
        margin-top: calc(var(--medium-margin) - var(--small-medium-margin));
        padding-bottom: var(--small-medium-margin);
        position: unset;
        width: 100%;
    }

    body>header>section:nth-child(2)>nav {
        height: auto;
    }

    body>header:has(:checked) {
        max-height: var(--menu-panel-height);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: calc((220px * 3) + (8px * 2))) {
    body>footer {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "body-footer-section-1 body-footer-section-2"
            "body-footer-section-3 body-footer-section-3"
            "body-footer-section-4 body-footer-section-4";
    }

    body>header>section:nth-child(1)>a>img {
        height: var(--small-logo-icon-height);
    }

    body>header>section:nth-child(1)>label>img {
        height: var(--small-menu-icon-height);
    }

    body>header {
        max-height: calc(var(--small-logo-icon-height) + var(--small-margin) + var(--small-margin));
    }


    body>main {
        margin-top: calc(var(--small-logo-icon-height) + var(--small-margin) + var(--small-margin) + var(--extra-large-margin));
    }

    body:has(.breadcrumbs) > main {
        margin-top: calc(var(--small-logo-icon-height) + var(--small-margin) + var(--small-margin) + var(--border-thickness));
    }

    body>header>section:nth-child(1) {
        height: calc(var(--small-logo-icon-height) + var(--small-margin) + var(--small-margin));
    }

    body>main>article>section>nav>ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: calc((220px * 2) + 8px)) {
    body>footer {
        grid-template-columns: 1fr;
        grid-template-areas:
            "body-footer-section-1"
            "body-footer-section-2"
            "body-footer-section-3"
            "body-footer-section-4";
    }
}

p,
h1,
h2,
h3,
a,
li,
section {
    font-family: InterVariable, sans-serif;
    font-optical-sizing: auto;
    font-weight: normal;
    line-height: var(--line-height);
}

p,
h1,
h2,
h3,
li,
section {
    color: var(--text-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

/* Links sitting inside prose need extra weight to read as clickable. */
p>a {
    font-weight: 600;
}

h1,
h2,
h3,
a:hover,
a:active,
a:focus,
b {
    font-weight: bold;
}

h1,
p,
body>main>article>section>a,
body>main>article>section>nav,
body>main>article>section>img,
body>main>article>section>iframe {
    margin-bottom: var(--medium-margin);
}

h1:not(:has(+*)),
p:not(:has(+*)),
body>main>article>section>a:not(:has(+*)),
body>main>article>section>nav:not(:has(+*)),
body>main>article>section>img:not(:has(+*)),
body>main>article>section>iframe:not(:has(+*)) {
    margin-bottom: var(--extra-large-margin);
}

body>main>article>section>a:has(+p) {
    margin-bottom: var(--medium-large-margin);
}

/* A picture that is a link keeps the layout and spacing of a plain picture. */
body>main>article>section>a:has(>img:only-child) {
    display: block;
}

body>main>article>section>a:has(>img:only-child):has(+p) {
    margin-bottom: var(--medium-margin);
}

h1 {
    font-size: var(--large-font-size);
}

body>header nav li {
    font-size: var(--medium-large-font-size);
}

body>header nav a {
    padding-bottom: var(--small-margin);
}

body>header>section:nth-child(2)>nav>ul>li>ul>li>a {
    padding-left: var(--small-margin);
}

body>header>section:nth-child(2)>nav>ul>li>ul>li:not(:has(+*))>a {
    padding-bottom: var(--small-medium-margin);
}

body>header>section:nth-child(2)>nav a {
    display: block;
}

h2 {
    margin-bottom: calc(var(--extra-small-margin) + var(--medium-margin) + var(--border-thickness));
    width: fit-content;
}

h2::after {
    content: "";
    position: relative;
    display: block;
    width: 100%;
    top: var(--extra-small-margin);
    left: 0;
    border-top: var(--border-thickness) solid var(--border-color);
}

h3 {
    font-style: italic;
    margin-bottom: var(--extra-small-margin);
}

h2 {
    font-size: var(--medium-large-font-size);
}

body>header>section:nth-child(2)>nav>ul>li>ul>li,
body>main>article>section>a,
h3,
p {
    font-size: var(--medium-font-size);
}

body>main>article>section>nav,
body>footer>section,
small {
    font-size: var(--small-font-size);
}

body>footer>section>h1 {
    font-size: var(--small-medium-font-size);
    margin-bottom: var(--small-margin);
}

ul {
    list-style: none;
}

/* A list without pictures is a bulleted list in the text size, not a card grid. */
body>main>article>section>nav:not(:has(img, video, iframe)),
body>main>article>section>ul {
    font-size: var(--medium-font-size);
}

body>main>article>section>nav>ul:not(:has(img, video, iframe)),
body>main>article>section>ul {
    display: block;
    list-style: disc;
    padding-left: 1.25em;
}

body>main>article>section>ul {
    margin-bottom: var(--medium-margin);
}

body>main>article>section img,
body>main>article>section>iframe {
    box-sizing: border-box;
    border: var(--border-thickness) solid var(--border-color);
    width: 100%;
    height: auto;
}

body>main>article>section>nav>ul>li>a>img,
body>main>article>section>nav>ul>li>img {
    object-fit: cover;
    aspect-ratio: 1/1;
}

/* Card titles stop at two lines and end in "..." so long titles keep the grid even. */
body>main>article>section>nav>ul>li>a>.card-title,
body>main>article>section>nav>ul>li>.card-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

body>main>article>section>iframe {
    aspect-ratio: 3 / 2.05;
}

body>main>article>section>nav>ul>li>a:hover>img,
body>main>article>section>nav>ul>li>a:active>img,
body>main>article>section>nav>ul>li>a:focus>img {
    border-color: var(--accent-color);
}

body>main>article>section>a {
    display: inline-block;
}

body>main>article>section>a:hover,
body>main>article>section>a:active,
body>main>article>section>a:focus {
    background-color: var(--highlight-color);
}

body>main>article>section>a:hover>img,
body>main>article>section>a:active>img,
body>main>article>section>a:focus>img {
    border-color: var(--accent-color);
}

fieldset:has(> input[type="radio"] + label > img) {
    display: block;
    margin-bottom: var(--medium-margin);
    text-align: center;
}

fieldset:has(> input[type="radio"] + label > img)::before {
    content: "";
    display: block;
    aspect-ratio: 680 / 465;
    border: var(--border-thickness) solid var(--border-color);
    background: #f3f4f6 center/contain no-repeat;
    background-image: var(--viewer, none);
    margin-bottom: var(--small-margin);
}

fieldset:has(> input[type="radio"] + label > img) {
    position: relative;
    overflow: hidden;
}


fieldset:has(> input[type="radio"] + label > img)::before {
    display: none;
}

.gallery-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: var(--border-thickness) solid var(--border-color);
    box-sizing: border-box;
    background: #f3f4f6;
    overflow: hidden;
    margin-bottom: var(--small-margin);
    touch-action: pan-y;
}

.gallery-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transform: translateX(0);
}

.gallery-track.is-animating {
    transition: transform 0.28s ease;
}

.gallery-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.gallery-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}

/* carousel arrows */
.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    border: none;
    background: transparent;
    cursor: pointer;

    z-index: 2;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

     color: white;
    opacity: 0.8;

    text-shadow:
        0 0 2px black,
        0 0 6px black,
        0 0 10px black;

    transition: opacity 0.2s ease, transform 0.15s ease;
}

.gallery-arrow-prev {
    left: 16px;
}

.gallery-arrow-next {
    right: 16px;
}

.gallery-arrow::before {
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
}


.gallery-arrow-prev::before {
    content: "‹";
}

.gallery-arrow-next::before {
    content: "›";
}

.gallery-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
}

/* image dot indicators */
fieldset > input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

fieldset > input[type="radio"] + label {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 6px 0 0;
    border-radius: 50%;
    background: #cfcfcf;
    cursor: pointer;
    vertical-align: middle;
    user-select: none;
}

fieldset > input[type="radio"] + label > img {
    display: none;
}

fieldset > input[type="radio"]:checked + label {
    background: var(--accent-color);
}

body>main>article>aside>nav {
    margin-bottom: var(--medium-margin);
}


body>main>article>aside>nav>ul>li {
    width: 100%;
    text-align: right;
    margin-bottom: 0;
    margin-top: 0;
}

body>main>article>aside>nav>ul>li>a {
    font-size: var(--small-font-size);
}

body > main > article > section > .video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--medium-margin);
  border: var(--border-thickness) solid var(--border-color);
  box-sizing: border-box;
}

body > main > article > section > .video-wrapper > video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: var(--background-color);
  border: none;
  display: block;
}

/* image fullscreen styling */
.gallery-fullscreen {
    position: fixed;
    inset: 0;
    background: #fff;
    display: none;
    z-index: 9999;
    overflow: hidden;
}

.gallery-fullscreen.active {
    display: block;
}

.gallery-fullscreen-image-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 0 40px 36px;
    box-sizing: border-box;
}

.gallery-fullscreen-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border: none;
    background: #fff;
}

.gallery-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 24px;
    z-index: 10001;
    font-size: 40px;
    line-height: 1;
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
}

.gallery-fullscreen-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    font-size: 56px;
    line-height: 1;
    background: transparent;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 12px 16px;
    opacity: 0.45;
    text-shadow: none;
}

.gallery-fullscreen-arrow:hover {
    opacity: 0.8;
}

.gallery-fullscreen-arrow-prev {
    left: 16px;
}

.gallery-fullscreen-arrow-next {
    right: 16px;
}

.gallery-fullscreen-arrow-prev::before {
    content: "‹";
}

.gallery-fullscreen-arrow-next::before {
    content: "›";
}

.gallery-fullscreen-caption {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 10001;
    max-width: min(900px, calc(100vw - 160px));
    text-align: center;
    color: #000;
    background: transparent;
    padding: 0;
    font-family: Helvetica, sans-serif;
}

main img,
article img {
  max-width: 100%;
  height: auto;
  display: block;
}

.breadcrumbs {
  /* Pinned in the header band beside the logo, just above the divider. */
  position: fixed;
  top: 0;
  left: calc(((100dvw - ((var(--column-width) * 5) + (var(--small-margin) * 4))) / 2) + var(--column-width) + var(--small-margin));
  /* Right edge matches the divider, so a view switch can sit at its right end. */
  right: calc((100dvw - ((var(--column-width) * 5) + (var(--small-margin) * 4))) / 2);
  height: calc(var(--small-margin) + var(--large-logo-icon-height) + var(--small-medium-margin) - var(--extra-small-margin));
  z-index: 11;
  background: transparent;
  /* Only the list itself should swallow clicks in the header band. */
  pointer-events: none;

  display: flex;
  align-items: flex-end;
}

@media (max-width: calc((220px * 5) + (8px * 4) + 42px)) {
  .breadcrumbs {
    position: sticky;
    /* Matches the full header height so the band does not shift once it sticks. */
    top: calc(var(--topbar-h, 0px) + var(--border-thickness));
    left: auto;
    right: auto;
    height: auto;
    pointer-events: auto;
    /* Below the header so the expanded mobile menu covers it. */
    z-index: 9;
    background: #fff;
    border-bottom: var(--border-thickness) solid var(--border-color);
    margin-bottom: var(--extra-large-margin);
    /* Exactly the visible width (no sideways scroll); the padding lines the crumbs up with the
       logo and the view switch with the menu button. */
    width: var(--visible-width, 100vw);
    margin-left: calc(-1 * var(--page-gutter));
    box-sizing: border-box;
    padding-inline: var(--page-gutter);
  }
}

.breadcrumbs ol {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  pointer-events: auto;
}

@media (max-width: calc((220px * 5) + (8px * 4) + 42px)) {
  .breadcrumbs ol {
    padding: var(--small-medium-margin) 0;
    flex-wrap: wrap;
    row-gap: 0;
  }
}

.breadcrumbs li {
  display: flex;
  align-items: center;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  opacity: 0.5;
}

.breadcrumbs a {
  text-decoration: none;
  color: #186e28;
  font-size: 13px;
}

.breadcrumbs li[aria-current="page"] {
  font-weight: bold;
  color: #186e28;
  font-size: 13px;
}

/* View switch (List | Grid), written in a page as "View: [List](...) | [Grid](...)". */
.view-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 13px;
}

.breadcrumbs .view-switch {
  /* Right end of the breadcrumb band, on the same baseline as the crumbs,
     ending where the page text ends (the right column is left free). */
  margin-left: auto;
  margin-right: calc(var(--column-width) + var(--small-margin));
  pointer-events: auto;
}

@media (max-width: calc((220px * 5) + (8px * 4) + 42px)) {
  /* On narrow screens the switch drops to its own line rather than squeezing the crumbs.
     The bar carries the padding so the spacing is the same on one line or two. */
  .breadcrumbs:has(.view-switch) {
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--small-margin);
    /* Minimum space between crumbs and switch; any less and the switch wraps. */
    column-gap: var(--medium-margin);
    padding-block: var(--small-medium-margin);
  }

  .breadcrumbs:has(.view-switch) ol {
    padding: 0;
  }

  .breadcrumbs .view-switch {
    margin-right: 0;
  }
}

.view-switch a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 400;
}

.view-switch > span {
  opacity: 0.5;
}

.view-switch a[aria-current="page"] {
  font-weight: bold;
}

/* Hover and click like the buttons in a page ("Read More ->"). */
.view-switch a:hover,
.view-switch a:active,
.view-switch a:focus {
  font-weight: bold;
  background-color: var(--highlight-color);
}

.view-switch .view-list::before,
.view-switch .view-grid::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background-color: currentColor;
  -webkit-mask: var(--view-icon) center / contain no-repeat;
  mask: var(--view-icon) center / contain no-repeat;
}

/* Light icons for the other view; the current view and the one under the mouse get solid icons. */
.view-switch .view-list {
  --view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect x='0' y='0.4' width='1.2' height='1.2'/%3E%3Crect x='3.5' y='0.4' width='7.5' height='1.2'/%3E%3Crect x='0' y='4.9' width='1.2' height='1.2'/%3E%3Crect x='3.5' y='4.9' width='7.5' height='1.2'/%3E%3Crect x='0' y='9.4' width='1.2' height='1.2'/%3E%3Crect x='3.5' y='9.4' width='7.5' height='1.2'/%3E%3C/svg%3E");
  --view-icon-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect x='0' y='0' width='2' height='2'/%3E%3Crect x='3.5' y='0' width='7.5' height='2'/%3E%3Crect x='0' y='4.5' width='2' height='2'/%3E%3Crect x='3.5' y='4.5' width='7.5' height='2'/%3E%3Crect x='0' y='9' width='2' height='2'/%3E%3Crect x='3.5' y='9' width='7.5' height='2'/%3E%3C/svg%3E");
}

.view-switch .view-grid {
  --view-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect x='0.5' y='0.5' width='3.5' height='3.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='0.5' y='7' width='3.5' height='3.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='7' y='0.5' width='3.5' height='3.5' fill='none' stroke='black' stroke-width='1'/%3E%3Crect x='7' y='7' width='3.5' height='3.5' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
  --view-icon-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Crect x='0' y='0' width='4.5' height='4.5'/%3E%3Crect x='6.5' y='0' width='4.5' height='4.5'/%3E%3Crect x='0' y='6.5' width='4.5' height='4.5'/%3E%3Crect x='6.5' y='6.5' width='4.5' height='4.5'/%3E%3C/svg%3E");
}

.view-switch a[aria-current="page"]::before,
.view-switch a:hover::before,
.view-switch a:active::before,
.view-switch a:focus::before {
  --view-icon: var(--view-icon-solid);
}