/* yscenes.css */

/* ================================================================
   Font faces (self-hosted)
   ================================================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/IBMPlexMono-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/IBMPlexMono-400-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/IBMPlexMono-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/IBMPlexMono-600-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/IBMPlexMono-700-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/IBMPlexMono-700-italic.woff2') format('woff2');
}

/* ================================================================
   Variables
   ================================================================ */
:root {
    color-scheme: light dark;
}
html {
    /* ollie colors */
    --hero: light-dark( /* #00bb75 / #00f1a9 */
        oklch(0.6777 0.1984 163.9),
        oklch(0.8289 0.2190 167.1)
    );
    --grime: light-dark( /* #cff3cb / #365f30 */
        oklch(0.9288 0.0654 142.5),
        oklch(0.4438 0.0873 141.4)
    );
    --grunge: light-dark( /* #e3c3a7 / #46301b */
        oklch(0.8379 0.0521 63.1),
        oklch(0.3281 0.0454 62.4)
    );
    --moss: light-dark( /* #67b700 / #67b700 */
        oklch(0.6998 0.2037 133.2),
        oklch(0.6998 0.2037 133.2)
    );
    --shag: light-dark( /* #bbb538 / #bbb538 */
        oklch(0.7556 0.1414 106.4),
        oklch(0.7556 0.1414 106.4)
    );
    --glorp: light-dark( /* #d18f00 / #dfa300 */
        oklch(0.6947 0.1653 80.7),
        oklch(0.7517 0.1692 84.8)
    );
    --marooned: light-dark( /* #7b0c1b / #be414f */
        oklch(0.3739 0.1416 22.2),
        oklch(0.5550 0.1599 17.7)
    );
    --burple: light-dark( /* #66258f / #973ad1 */
        oklch(0.4150 0.1681 308.9),
        oklch(0.5497 0.2229 309.1)
    );

    /* abstract colors */
    --success: var(--moss);
    --warning: var(--glorp);
    --highlight: var(--hero);
    --danger: var(--marooned);
    --info: var(--burple);

    /* abstract grays */
    --trueloud: light-dark( /* #000000 / #ffffff */
        oklch(0 0 0),
        oklch(1 0 0)
    );
    --loud: light-dark( /* #151a04 / #deeff2 */
        oklch(0.2070 0.0404 121.2),
        oklch(0.9409 0.0191 209.4)
    );
    --hushed: light-dark( /* #6b705c / #8c9ea1 */
        oklch(0.5354 0.0314 118.9),
        oklch(0.6855 0.0207 209.4)
    );
    --whisper: light-dark( /* #babfab / #3e4e51 */
        oklch(0.7961 0.0291 118.5),
        oklch(0.4110 0.0204 209.5)
    );
    --quiet: light-dark( /* #d9deca / #202f32 */
        oklch(0.8902 0.0273 118.4),
        oklch(0.2931 0.0209 209.6)
    );
    --silent: light-dark( /* #f4f7ee / #0e191b */
        oklch(0.9711 0.0120 118.0),
        oklch(0.2029 0.0155 209.6)
    );
    --truesilent: light-dark( /* #ffffff / #000000 */
        oklch(1 0 0),
        oklch(0 0 0)
    );

    /* type */
    --sans-serif: Inter, 'Helvetica Neue', Roboto, 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --monospace: 'IBM Plex Mono', 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', ui-monospace, monospace;
    --default-line-height: 1.5;
    --default-font-size: 18px;
    --smaller-font-size: 80%;
    --bigger-font-size: 120%;
    --light-weight: 200;
    --normal-weight: 400;
    --bold-weight: 700;
    --black-weight: 800;

    /* graphic styles */
    --border-width: 2px;
    --border-radius: 4px;
    --transition-speed: 0.2s;
    --transition-timing-function: ease-in-out;
    --transition: all var(--transition-speed) var(--transition-timing-function);

    /* breakpoints */
    --bp-sm: 480px;
    --bp-med: 720px;
    --bp-lg: 960px;
    --bp-xl: 1200px;

    /* global defaults */
    background: var(--silent);
    height: 100%;
    font-size: var(--default-font-size);
    scroll-behavior: smooth;
}
@media (max-width: 719px) {
    html {
        --default-font-size: 16px;
    }
}

/* ================================================================
   Focus styling
   ================================================================ */
*:focus, *:focus-visible {
    outline-color: color-mix(in srgb, var(--moss) 40%, transparent);
    outline-style: solid;
    outline-width: 3px;
    outline-offset: 3px;
}


/* ================================================================
   Base HTML selectors
   ================================================================ */
body {
    background-color: var(--silent);
    background-image:
        url("/static/images/splotches-light.svg"),
        linear-gradient(
            to right,
            color-mix(in srgb, var(--glorp) 20%, var(--silent)),
            var(--silent),
            var(--silent)
        );
    @media (prefers-color-scheme: dark) {
        & {
            background-image:
                url("/static/images/splotches-dark.svg"),
                linear-gradient(
                    to left,
                    color-mix(in srgb, var(--hero) 10%, var(--silent)),
                    var(--silent),
                    var(--silent)
                );
        }
    }
    background-attachment: fixed;
    background-position-x: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--loud);
    container-type: inline-size;
    display: grid;
    font-family: var(--sans-serif);
    grid-template-columns: 1fr min(var(--bp-lg), 100%) 1fr;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100dvh;
    line-height: var(--default-line-height);
    & > * {
        grid-column: 2;
    }
}
main {
}

/* headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--bold-weight);
    small {
        font-weight: var(--light-weight);
    }
    strong, b {
        background-color: var(--hero);
        color: var(--silent);
        padding-inline: 0.1em;
    }
}
h1, h2, h3 {
    margin-block-end: 0.5rem;
    &:not(:first-of-type) {
        margin-block-start: 2rem;
    }
}
h1 {
    background: linear-gradient(
        to right,
        light-dark(var(--marooned), var(--hero)) 20%,
        var(--loud) 40%, var(--loud)
    );
    background-clip: text;
    color: transparent;
    font-family: var(--sans-serif);
    font-weight: var(--black-weight);
    font-size: 2rem;
    line-height: 1.25;
}
h2 {
    font-family: var(--monospace);
    font-size: 1.25rem;
}
h3 {
    font-family: var(--monospace);
    font-size: 1.0rem;
}
h4, h5, h6 {
    font-family: var(--monospace);
    &:not(:first-of-type) {
        margin-block-start: 1rem;
    }
}
h4 {
    font-size: 0.9rem;
}
h5 {
    color: var(--hushed);
    font-size: 0.9rem;
    margin-block-end: 1rem;
}
h6 {
    color: var(--whisper);
    font-size: 0.8rem;
    margin-block-end: 1rem;
}

/* block text */
p, blockquote, dl, ol, ul, menu, pre {
    margin-block-end: 1rem;
}
blockquote {
    background-color: color-mix(in srgb, var(--grime) 40%, transparent);
    border-radius: var(--border-radius);
    color: color-mix(var(--moss) 75%, var(--loud));
    font-family: var(--monospace);
    font-style: italic;
    margin-block: 1rem;
    padding-block: 1rem;
    padding-inline: 1rem;
}
dl, ol, ul, menu {
    --list-indent: 2rem;
}
dl {
}
dt {
    font-weight: var(--bold-weight);
}
dd {
    margin-inline-start: var(--list-indent);
    &:not(:last-child) {
        margin-block-end: 0.5rem;
    }
}
ol, ul {
    margin-inline-start: var(--list-indent);
}
ul {
    list-style-type: disc;
}
ol {
    list-style-type: decimal;
}
li {
    ol, ul, menu {
        margin-block-end: 0;
    }
}
menu {
    a:link, a:visited {
        font-family: var(--monospace);
        text-decoration: none;
    }
    menu {
        margin-inline-start: var(--list-indent);
    }
}
pre {
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
}
hr {
    border-color: var(--hushed);
    border-style: dashed;
    border-width: 0 0 var(--border-width) 0;
    clear: both;
    margin-block: 2rem;
}

/* inline text */
a {
    text-decoration: underline;
    text-decoration-style: dotted;
    transition-duration: var(--transition-speed);
    transition-property: background-color;
    transition-timing-function: var(--transition-timing-function);
    &:link, &:visited {
        color: inherit;
    }
    &:hover {
        background-color: color-mix(in srgb, var(--moss) 25%, transparent);
    }
    &:active {
        background-color: color-mix(in srgb, var(--moss) 60%, transparent);
        color: var(--silent);
    }
}
abbr {
    font-weight: var(--bold-weight);
}
b, strong {
    font-weight: var(--bold-weight);
}
big {
    font-size: var(--bigger-font-size);
}
cite, em, i, q {
    font-style: italic;
}
code, kbd {
    background-color: light-dark(
        color-mix(in srgb, var(--loud) 5%, transparent),
        color-mix(in srgb, var(--loud) 15%, transparent)
    );
    color: var(--hushed);
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
}
del {
    background-color: light-dark(
        color-mix(in srgb, var(--danger) 10%, transparent),
        color-mix(in srgb, var(--danger) 20%, transparent)
    );
    color: color-mix(in srgb, var(--danger) 70%, var(--loud) 30%);
    text-decoration: line-through;
}
dfn {
    text-decoration: underline dotted;
    text-underline-offset: 0.25em;
}
ins {
    background-color: light-dark(
        color-mix(in srgb, var(--success) 10%, transparent),
        color-mix(in srgb, var(--success) 20%, transparent)
    );
    color: color-mix(in srgb, var(--success) 70%, var(--loud) 30%);
}
kbd {
    border: 1px solid var(--hushed);
    border-radius: var(--border-radius);
    padding: 0.125rem;
}
mark {
    /* overloaded in components — marks */
}
ruby {
}
rt {
    font-size: calc(var(--default-font-size) * 0.75);
}
s {
    text-decoration: line-through;
}
samp {
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
    font-weight: var(--bold-weight);
}
small {
    font-size: var(--smaller-font-size);
}
sub {
    font-size: var(--smaller-font-size);
    vertical-align: sub;
}
sup {
    font-size: var(--smaller-font-size);
    vertical-align: super;
}
time {
    font-weight: var(--bold-weight);
}
u {
    text-decoration: underline;
}
var {
    font-style: italic;
}

/* media */
img {
    display: inline-block;
    height: auto;
    width: auto;
}
figure, video {
    display: block;
    height: auto;
    width: auto;
}
figcaption {
    color: var(--hushed);
    font-family: var(--sans-serif);
}

/* tables */
table {
    border: var(--border-width) solid var(--hushed);
    font-family: var(--sans-serif);
    margin-block: 1rem;
}
tbody {
}
thead, tfoot {
    background-color: var(--quiet);
}
thead {
    border-block-end: var(--border-width) solid var(--whisper);
}
tfoot {
    border-block-start: var(--border-width) solid var(--whisper);
}
td, th {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
}
th {
    font-weight: var(--bold-weight);
    &[scope="row"] {
        border-inline-end: var(--border-width) solid var(--hushed);
    }
}
caption {
    color: var(--hushed);
    font-family: var(--sans-serif);
}

/* forms */
form {
}
fieldset {
    background-color: color-mix(var(--quiet) 40%, transparent);
    border: var(--border-width) solid var(--hushed);
    padding: 1rem 1rem;
    &:not(:last-child) {
        margin-block-end: 1rem;
    }
}
legend, label, input, select, textarea {
    font-family: var(--sans-serif);
}
legend {
    background-color: transparent;
    font-weight: bold;
    padding-inline: 0.5rem;
}
label {
    display: block;
    &:has(+ [required]) {
        &:after {
            color: var(--danger);
            content: " (required)";
            font-size: var(--smaller-font-size);
        }
    }
}
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
    background: color-mix(in srgb, var(--truesilent) 50%, transparent);
    border: var(--border-width) solid var(--loud);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.5rem;
    &::placeholder {
        color: var(--hushed);
    }
}
input[type="button"] {
    --base-color: var(--loud);
    --highlight-color: var(--success);
    --active-color: var(--warning);
    --highlight-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    background-color: var(--base-color);
    border-radius: var(--border-radius);
    color: var(--truesilent);
    font-weight: var(--bold-weight);
    padding: 0.325rem 0.75rem;
    transition-duration: var(--transition-speed);
    transition-property: background-color, border-color, box-shadow, color;
    transition-timing-function: var(--transition-timing-function);
    &:hover {
        background-color: var(--highlight-color);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    }
    &:active {
        background-color: var(--active-color);
        box-shadow: var(--highlight-shadow);
    }
}
form menu li {
    align-items: center;
    column-gap: 0.5rem;
    display: flex;
}
input[type="checkbox"], input[type="radio"] {
    background-color: var(--truesilent);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    transition-duration: var(--transition-speed);
    transition-property: box-shadow;
    transition-timing-function: var(--transition-timing-function);
    &:checked {
        background: var(--hushed);
        border-color: var(--hushed);
        box-shadow: inset 0 0 0 3px var(--truesilent);
    }
}
input[type="radio"] {
    border-radius: 100%;
}
input[type="color"] {
    background-color: var(--whisper);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding: calc(var(--border-width) * 2);
    height: 2rem;
    width: 2rem;
}
input[type="file"] {
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    padding: 1rem 1rem;
}
input[type=range] {
    -webkit-appearance: none;
    background-color: var(--quiet);
    border: var(--border-width) solid var(--hushed);
    border-radius: 1rem;
    padding: 2px;
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: none;
        background-color: var(--hushed);
        height: 1rem;
        width: 1rem;
        border-radius: 100%;
    }
    &::-moz-range-thumb {
        border: none;
        background-color: var(--hushed);
        height: 1rem;
        width: 1rem;
        border-radius: 100%;
    }
    &::-ms-thumb {
        width: 100%;
        background: transparent;
        border-color: transparent;
        border-radius: 100%;
        color: transparent;
    }
}
select {
    background-color: var(--quiet);
    border: var(--border-width) solid var(--hushed);
    border-radius: var(--border-radius);
    padding-block: 0.25rem;
    padding-inline: 0.5rem 2rem;
    /* chevron arrow via two crossing gradient tiles — inherits
       currentColor, no SVG needed, dark mode works automatically */
    background-repeat: no-repeat, no-repeat;
    background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
    background-position-x: calc(100% - 1rem), calc(100% - 0.625rem);
    background-position-y: 50%, 50%;
    background-image:
        linear-gradient( 45deg, #0000 50%, currentColor 50%, currentColor 66%, #0000 66%),
        linear-gradient(-45deg, #0000 50%, currentColor 50%, currentColor 66%, #0000 66%);
}
.form-element {
    display: flex;
    flex-direction: column;
    &.inline {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
    }
    &.has-errors, &.has-error {
        --error-color: color-mix(var(--danger) 10%, transparent);
        background-color: var(--error-color);
        outline: 0.5rem solid var(--error-color);
        input, select, textarea {
            border-color: var(--danger);
        }
        label {
            color: var(--danger);
        }
    }
    & .field-help {
        color: var(--hushed);
        display: block;
        font-size: var(--smaller-font-size);
    }
}

map {
    display: block;
}
details {
    --outer-padding: 0.5rem;
    --chevron-size: 0.5em;
    background-color: var(--silent);
    border: var(--border-width) solid var(--hushed);
    border-radius: 2px;
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--hushed) 40%, transparent);
    margin-block-end: 1rem;
    padding-block-start: var(--outer-padding);
    padding-inline: var(--outer-padding);
    summary {
        background-color: var(--quiet);
        cursor: pointer;
        font-family: var(--sans-serif);
        font-weight: var(--bold-weight);
        padding: var(--outer-padding);
        margin-block-start: calc(var(--outer-padding) * -1);
        margin-inline: calc(var(--outer-padding) * -1);
        transition: margin-block-end var(--transition-speed) var(--transition-timing-function);
        &:before {
            border-color: currentColor;
            border-style: solid;
            border-width: 0 2px 2px 0;
            content: "";
            display: inline-block;
            height: var(--chevron-size);
            margin-inline-end: 0.5rem;
            transform: rotate(-45deg);
            transition: transform var(--transition-speed) var(--transition-timing-function);
            vertical-align: middle;
            width: var(--chevron-size);
        }
    }
    &[open] summary {
        margin-block-end: 1rem;
        &::before {
            transform: rotate(45deg);
        }
    }
    .details-content {
    }
}
.icon {
    color: inherit;
    display: inline-block;
    font-size: 1.25rem;
    margin-block-end: -0.25rem;
}

/* structural elements — intentionally unstyled */
address, article, aside, div, footer, header, nav, search, section {
    display: block;
}


/* ================================================================
   Global page elements
   ================================================================ */
.masthead {
    align-items: flex-end;
    background: linear-gradient(
        to right,
        color-mix(var(--glorp), transparent),
        color-mix(var(--grime), transparent)
    );
    display: flex;
    grid-column: 1 / -1;
    justify-content: space-between;
    padding-inline: calc((100% - var(--bp-lg)) / 2);
    position: relative;
    .logo {
        display: block;
    }
    .site-branding {
        max-width: 357px;
        @media (min-width: 480px) {
            max-width: 50%;
        }
    }
    .site-logo {
    }
    .site-motto {
        align-self: center;
        color: var(--hushed);
        font-family: var(--monospace);
        font-style: italic;
        transform: rotate(-3deg);
        @media (max-width: 600px) {
            display: none;
        }
    }
}
a.logo-link {
    display: block;
    &:hover {
        background: none;
    }
}
.masthead-nav {
    --bar-h: 2px;
    --bar-gap: 6px;
    --bar-w: 1.5rem;
    --nav-bg: var(--loud);
    position: relative;
    .masthead-nav-toggle {
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: var(--bar-gap);
        padding: 0.5rem;
    }
    .hamburger-bar {
        background-color: var(--nav-bg);
        border-radius: 1px;
        display: block;
        height: var(--bar-h);
        transition:
            opacity var(--transition-speed)
                var(--transition-timing-function),
            transform var(--transition-speed)
                var(--transition-timing-function);
        width: var(--bar-w);
    }
    &:has(.masthead-nav-toggle[aria-expanded="true"]) {
        .masthead-nav-toggle {
            background-color: color-mix(in srgb, var(--nav-bg) 65%, transparent);
            backdrop-filter: blur(10px);
        }
        .hamburger-bar {
            background-color: var(--silent);
        }
        .hamburger-bar:nth-child(1) {
            transform: translateY(
                calc(var(--bar-gap) + var(--bar-h))
            ) rotate(45deg);
        }
        .hamburger-bar:nth-child(2) {
            opacity: 0;
            transform: scaleX(0);
        }
        .hamburger-bar:nth-child(3) {
            transform: translateY(
                calc(-1 * (var(--bar-gap) + var(--bar-h)))
            ) rotate(-45deg);
        }
    }
    .masthead-menu {
        background-color: color-mix(in srgb, var(--nav-bg) 65%, transparent);
        backdrop-filter: blur(10px);
        box-shadow: 4px 4px 0px color-mix(in srgb, var(--nav-bg) 20%, transparent);
        display: none;
        inset-inline: auto 0;
        margin: 0;
        position: absolute;
        top: 100%;
        z-index: 100;
        a {
            border-block-end: 1px solid
                color-mix(in srgb, var(--silent) 20%, transparent);
            color: var(--silent);
            display: block;
            font-family: var(--monospace);
            font-size: 1.1rem;
            font-weight: 600;
            padding: 0.5rem 1rem;
            text-decoration: none;
            &:last-child {
                border-block-end: none;
            }
            &:hover {
                background-color:
                    color-mix(in srgb, var(--highlight) 30%, transparent);
            }
        }
    }
    &:has(.masthead-nav-toggle[aria-expanded="true"]) .masthead-menu {
        display: block;
    }
    .submenu {
        background-color:
            color-mix(in srgb, var(--silent) 10%, transparent);
        display: none;
        margin-inline-start: 0;
    }
    li {
        white-space: nowrap;
        &.is-open > .submenu {
            display: block;
        }
    }
    .masthead-submenu-toggle {
        --chevron-size: 0.4em;
        border: none;
        color: var(--silent);
        cursor: pointer;
        display: inline-block;
        padding: 0.25em;
        &::after {
            border-color: currentColor;
            border-style: solid;
            border-width: 0 2px 2px 0;
            content: "";
            display: inline-block;
            height: var(--chevron-size);
            transform: rotate(45deg);
            transition: transform var(--transition-speed)
                var(--transition-timing-function);
            vertical-align: middle;
            width: var(--chevron-size);
        }
        &[aria-expanded="true"]::after {
            transform: rotate(-135deg);
        }
    }
}
.page-header {
}
.page-main {
}
.page-footer {
    background-image: linear-gradient(
        to top,
        var(--grime),
        transparent
    );
    align-items: center;
    background-blend-mode: overlay;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-block-start: 2rem;
    padding-inline: 1rem;
    @media (min-width: 960px) {
        align-items: flex-end;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        grid-column: 1 / -1;
        padding-inline: calc((100% - var(--bp-lg)) / 2);
        padding-block: 1rem;
    }
    .footer-brand {
    }
    .footer-logo {
        img {
            max-width: 240px;
        }
    }
    .footer-nav {
    }
    .footer-menu {
        margin-block: 1rem;
    }
    .follow-us-card {
        margin-block: 1rem;
    }
    .footer-address {
        flex-grow: 1;
        margin-block-start: 2rem;
        text-align: center;
    }
}
.breadcrumbs {
    menu {
        column-gap: 1rem;
        display: flex;
        flex-wrap: wrap;
        li {
            white-space: nowrap;
        }
    }
    .breadcrumbs-menu {
    }
    .breadcrumb {
    }
}
.back-nav, .breadcrumbs {
    padding-block: 0.5rem;
    padding-inline: 1rem;
    a {
        align-items: center;
        color: var(--hushed);
        display: inline-flex;
        font-family: var(--monospace);
        gap: 0.25rem;
        text-decoration: none;
        &:hover {
            color: var(--loud);
        }
    }
}
.section-heading {
}
.empty-state {
    color: var(--hushed);
    padding: 2rem 0;
    text-align: center;
}
.responsive-object {
    position: relative;
    & iframe,
    & object,
    & embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


/* ================================================================
   Custom page elements — Home page
   ================================================================ */
body.home {
    @media (min-width: 960px) {
        --sidebar-width: 24rem;

        & .page-main {
            display: grid;
            grid-column: 1 / 4;
            grid-template-columns: var(--sidebar-width) 1fr;
            min-width: 0;
            position: relative;
        }
        & .home-map-section {
            grid-column: 2;
            grid-row: 1 / span 99;
            height: calc(100dvh - 1rem);
            margin-block-start: 1rem;
            position: sticky;
            top: 0;
            width: calc(100% - 1rem);
        }
        & .home-map {
            height: 100%;
            max-height: none;
        }
        & .find-scene {
            inset-inline-start: calc(var(--sidebar-width) + 0.5rem);
            top: 0.5rem;
        }
        & .scenes-nearby,
        & .follow-us,
        & .upcoming-events {
            grid-column: 1;
            min-width: 0;
        }
    }
}


/* ================================================================
   Custom page elements — Basic page
   ================================================================ */
body.basic-page {
    .page-main {
        padding-inline: 1rem;
    }
}


/* ================================================================
   Custom page elements — Detail page (shared)
   ================================================================ */
body.detail {
    .page-main {
        padding-inline: 1rem;
    }
}
.detail article {
    & .external-info {
        section:not(.map) {
            padding-block-start: 1rem;
            &+section {
                border-block-start: 1px solid var(--hushed);
                margin-block-start: 1rem;
            }
        }
    }
    & .yscenes-info {
        section+section {
            padding-block-start: 1rem;
            border-block-start: 1px solid var(--hushed);
            margin-block-start: 1rem;
        }
    }

    /* default layout */
    display: flex;
    row-gap: 1rem;
    flex-direction: column;

    /* Desktop layout */
    @media (min-width: 960px) {
        column-gap: 1rem;
        display: grid;
        grid-template-columns: 2fr 3fr;
        .header {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        .external-info {
            grid-column: 1;
            grid-row: 2;
            /* All direct-child sections get horizontal padding */
        }
        .yscenes-info {
            grid-column: 2;
            grid-row: 2;
        }
    }

    & .header {
        & .name {
        }
        & .meta {
        }
    }
    & .map {
    }
    & .location {
        & .address {
            display: flex;
            flex-direction: column;
            font-style: normal;
        }
        & .address-line {
        }
    }
}

/* ================================================================
   Custom page elements — Event detail page
   ================================================================ */
article.event-detail {
    & .header {
        & .date-block {
            --base-color: var(--marooned);
            background-color: var(--silent);
            border: 1px solid var(--base-color);
            border-radius: calc(var(--border-radius) * 0.75);
            box-shadow: 4px 4px 0px color-mix(
                in srgb, var(--base-color) 20%, transparent
            );
            color: var(--loud);
            display: flex;
            flex-direction: column;
            align-items: center;
            float: inline-start;
            margin-inline-end: 0.75rem;
            padding: 0;
            text-align: center;
            width: 3.25rem;
        }
        & .date-month {
            background: var(--marooned);
            border-radius: calc(var(--border-radius) * 0.75)
                calc(var(--border-radius) * 0.75) 0 0;
            color: var(--truesilent);
            font-size: 0.6rem;
            font-weight: var(--bold-weight);
            letter-spacing: 0.05em;
            padding-block: 0.15rem;
            text-transform: uppercase;
            width: 100%;
        }
        & .date-day {
            color: color-mix(
                in srgb, var(--marooned) 75%, var(--loud)
            );
            font-size: 1.75rem;
            font-weight: var(--bold-weight);
            line-height: 1;
            padding: 0.25rem;
        }
        & .date-year {
            color: var(--hushed);
            font-size: 0.6rem;
            padding-block-end: 0.25rem;
        }
        & .event-time {
            color: var(--hushed);
            font-size: 0.9rem;
        }
        & .chip.virtual {
            background-color: var(--info);
            color: var(--truesilent);
        }
        & .chip.inperson {
            background-color: var(--success);
            color: var(--truesilent);
        }
    }
    & .join-section {
        border-block-start: none;
    }
    & .related-scene {
    }
    & .scene-link {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        & strong {
            display: block;
        }
        & small {
            color: var(--hushed);
            font-size: 0.8rem;
        }
    }
    & .description {
        font-family: var(--monospace);
        & p:last-child {
            margin-block-end: 0;
        }
    }
    & .calendar-export {
    }
    & .export-buttons {
        display: flex;
        gap: 0.75rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    & .more-info {
        border-block-start: var(--border-width) solid var(--whisper);
        padding-block: 1rem;
    }
}

/* ================================================================
   Custom page elements — Scene detail page
   ================================================================ */
article.scene-detail {
    & .photos {
        & img {
            border-radius: var(--border-radius);
            display: block;
            width: 100%;
        }
        & .caption {
            color: var(--hushed);
            font-size: var(--smaller-font-size);
            margin-block: 0.25rem 0;
        }
    }
    & .vibe-check {
        & summary {
            align-items: center;
            display: flex;
            gap: 0.5rem;
            &::before {
            }
        }
        & .vibe-label {
            font-weight: var(--bold-weight);
        }
        & .vibe-stars {
            flex: 1;
            text-align: end;
        }
        & .vibe-hint {
            color: var(--blue);
            font-weight: 600;
        }
        &[open] summary {
            margin-block-end: 0;
        }
    }
    & .vibe-check-table {
        border: none;
        margin-block: 0 0.75rem;
        width: 100%;
    }
    & .vibe-check-row {
        & td {
            padding-block: 0.35rem;
            padding-inline: 0;
        }
    }
    & .vibe-check-label {
        color: var(--hushed);
    }
    & .vibe-check-rating {
        display: inline-flex;
        gap: 0.5rem;
        justify-content: flex-end;
        text-align: end;
        white-space: nowrap;
        width: 100%;
    }
    & .vibe-check-score {
        font-family: var(--monospace);
        color: var(--hushed);
    }
    & .vibe-check-votes {
        font-family: var(--monospace);
        color: var(--whisper);
    }
    & .vibe-check-unrated {
        color: var(--whisper);
        font-style: italic;
    }
    & .vibe-check-rate {
        align-items: center;
        display: flex;
        flex-direction: column;
        padding-block-end: 1rem;
        & .rate-already-hint {
            color: var(--hushed);
            font-size: 0.85rem;
            font-style: italic;
            margin-block: 0.5rem 0;
        }
    }
    & .location {
        & .phone {
            color: var(--blue);
            display: inline-block;
            font-size: 0.95rem;
            font-weight: 600;
            margin-block-start: 0.25rem;
        }
    }
    & .links-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        list-style: none;
        margin: 0;
    }
    & .link-row {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        & a {
            display: block;
            font-weight: 600;
            width: 100%;
        }
        & .link-text {
        }
    }
    & .hours-table {
        border: none;
        margin-block: 0;
        width: 100%;
    }
    & .hours-row {
        & td {
            font-size: 0.85rem;
            padding-block: 0.25rem;
            padding-inline: 0;
        }
    }
    & .hours-day {
        color: var(--loud);
        font-weight: 600;
        width: 6rem;
    }
    & .hours-range {
        color: var(--hushed);
    }
    & .schools-list {
        column-gap: 0.5rem;
        display: grid;
        font-size: 0.85rem;
        grid-template-columns: auto 1fr auto;
        list-style: none;
        margin: 0;
        row-gap: 0.25rem;
    }
    & .school-row {
        align-items: baseline;
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: subgrid;
        & .school-level {
            color: var(--loud);
            font-weight: 600;
        }
        & .school-name {
            color: var(--loud);
        }
        & .school-distance {
            color: var(--hushed);
            font-variant-numeric: tabular-nums;
        }
    }
    & .affinities-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        list-style: none;
        margin: 0;
    }
    & .affinity-tag {
        background-color: var(--quiet);
        border: var(--border-width) solid var(--whisper);
        border-radius: 2rem;
        font-size: 0.8rem;
        padding: 0.25rem 0.75rem;
    }
    & .policies-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin: 0;
    }
    & .policy-row {
        align-items: center;
        display: flex;
        justify-content: space-between;
        & dt {
            font-size: 0.85rem;
            font-weight: var(--normal-weight);
        }
    }
    & .team-note {
        & .notes-text {
            font-family: var(--monospace);
            & p:last-child {
                margin-block-end: 0;
            }
        }
    }
    & .related-events {
    }
    & .ollie-endorsed {
        background-color: color-mix(var(--hero) 10%, transparent);
        border-block-start: none !important;
        color: color-mix(var(--hero), var(--loud));
        padding: 1rem;
    }
    & .suggest-nudge {
        padding: 2rem 1rem;
        text-align: center;
        & a {
            font-size: 0.85rem;
            font-weight: 600;
        }
    }
}

/* ================================================================
   Custom page elements — Rate-scene modal
   ================================================================ */
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.rate-modal [hidden] {
    display: none;
}
.rate-modal {
    background-color: var(--silent);
    border: var(--border-width) solid var(--loud);
    border-radius: var(--border-radius);
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--loud) 60%, transparent);
    color: var(--loud);
    max-inline-size: min(32rem, 92vw);
    padding: 1.25rem;
    inline-size: 100%;
    &::backdrop {
        background-color: color-mix(in srgb, black 50%, transparent);
        backdrop-filter: blur(2px);
    }
    & .rate-modal-header {
        align-items: flex-start;
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        & h2 {
            font-size: 1.1rem;
            margin-block: 0;
        }
    }
    & .rate-close {
        background: none;
        border: none;
        color: var(--hushed);
        cursor: pointer;
        font-size: 1.25rem;
        padding: 0.25rem;
        &:hover {
            color: var(--loud);
        }
    }
    & .rate-intro {
        color: var(--hushed);
        font-size: 0.875rem;
        margin-block: 0.5rem 1rem;
    }
    & .rate-dimensions {
        background: none;
        border: none;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-block-end: 1rem;
        padding: 0;
    }
    & .rate-row {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: space-between;
        padding-block: 0.25rem;
    }
    & .rate-row-label {
        color: var(--hushed);
        font-size: 0.9rem;
    }
    & .rate-stars {
        display: inline-flex;
        flex-direction: row-reverse;
        gap: 0.125rem;
    }
    & .rate-star {
        color: var(--whisper);
        cursor: pointer;
        font-size: 1.5rem;
        line-height: 1;
        transition: color var(--transition-speed) var(--transition-timing-function);
        & input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        & input:focus-visible + span {
            outline: 3px solid color-mix(in srgb, var(--moss) 40%, transparent);
            outline-offset: 2px;
        }
        &:hover,
        &:hover ~ .rate-star,
        &:has(input:checked),
        &:has(input:checked) ~ .rate-star {
            color: var(--hero);
        }
    }
    & .rate-field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-block-end: 1rem;
    }
    & .rate-field-label {
        color: var(--hushed);
        font-size: 0.875rem;
        font-weight: 600;
    }
    & textarea,
    & input[type="email"] {
        border: var(--border-width) solid var(--whisper);
        border-radius: var(--border-radius);
        font-family: inherit;
        font-size: 0.95rem;
        padding: 0.5rem;
        inline-size: 100%;
        &:focus {
            border-color: var(--highlight);
        }
    }
    & textarea {
        resize: vertical;
    }
    & .rate-error {
        color: var(--danger);
        font-size: 0.875rem;
        margin-block: 0 1rem;
    }
    & .rate-modal-footer {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }
    & .rate-thanks {
        padding-block: 1rem;
        text-align: center;
        & .rate-thanks-icon {
            color: var(--success);
            font-size: 3rem;
        }
        & h2 {
            margin-block: 0.5rem;
        }
        & p {
            color: var(--hushed);
            margin-block-end: 1.25rem;
        }
    }
}

/* ================================================================
   Custom page elements — Event list page
   ================================================================ */
body.events-list {
    & .header {
        padding: 0.75rem 1rem;
    }
    & .name {
    }
    & .event-list {
        padding: 0 1rem 1rem;
    }
}

/* ================================================================
   Custom page elements — Scene list page
   ================================================================ */
body.scenes-list {
    & .header {
        padding: 0.75rem 1rem;
    }
    & .name {
    }
    & .scenes-list-nav {
        margin-block-start: 0.5rem;
    }
    & .scenes-nearby {
        padding: 0 1rem 1rem;
    }
}


/* ================================================================
   Components — Scene filters
   ================================================================ */
.scene-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-block-end: 1rem;
}
.scene-filter-toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.35rem;
}
.scene-sort {
}


/* tooltip */
label.with-tooltip {
    align-items: center;
    display: flex;
    gap: 0.35rem;
}
.tooltip-trigger {
    align-items: center;
    background: transparent;
    border-radius: var(--border-radius);
    border: none;
    color: var(--hushed);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    padding: 0.125rem;
    & .icon {
        margin-block-end: 0;
    }
    &:hover, &:focus-visible {
        color: var(--loud);
        outline: none;
    }
    &[aria-expanded="true"] {
        background-color: var(--whisper);
        color: var(--loud);
    }
}
[popover] {
    position: fixed;
}
[popover]:not(:popover-open) {
    display: none;
}
.tooltip-bubble {
    background-color: var(--silent);
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    box-shadow: 4px 4px 0px color-mix(in srgb, var(--whisper) 50%, transparent);
    font-size: 0.85rem;
    inset: auto;
    margin: 0;
    max-width: 18rem;
    padding: 0.75rem 1rem;
}


/* ================================================================
   Components — Map search
   ================================================================ */
.find-scene {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}
.find-scene-label {
    color: var(--hushed);
    font-family: var(--sans-serif);
    font-size: 0.7rem;
    font-weight: var(--bold-weight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.find-scene-form {
    .form-element {
        align-items: center;
        display: flex;
        gap: 0.5rem;
    }
    input[type=text] {
        flex-grow: 1;
        width: 100%;
    }
}
.find-scene-nearme {
}
.find-scene-input {
}


/* ================================================================
   Components — Home map
   ================================================================ */
.home-map-section {
    border: 1px solid var(--hushed);
}
.home-map {
    height: 75cqw;
    max-height: 24rem;
}
.search-marker {
    color: var(--loud);
    display: block;
    font-size: 2rem;
}
.scenes-nearby {
    padding: 1rem;
}


/* ================================================================
   Components — Mini map (detail pages)
   ================================================================ */
#scene-map {
    aspect-ratio: 16 / 9;
    background-color: var(--quiet);
    border: 1px solid var(--hushed);
    @media (min-width: 960px) {
        aspect-ratio: 4 / 3;
    }
}
.map-links {
    align-items: baseline;
    column-gap: 1rem;
    display: flex;
    margin-block-start: 0.5rem;
}


/* ================================================================
   Components — Follow us
   ================================================================ */
.follow-us {
    padding: 1rem;
}
.follow-us-card {
    align-items: center;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    border-radius: var(--border-radius);
    box-shadow: 4px 4px 0px color-mix(in srgb, var(--hushed) 40%, transparent);
    color: white;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    text-decoration: none;
    transition:
        box-shadow var(--transition-speed) var(--transition-timing-function),
        transform var(--transition-speed) var(--transition-timing-function);
    & .icon {
        font-size: 4rem;
    }
    &:visited, &:link {
        color: white;
    }
    &:hover {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--hushed) 20%, transparent);
        transform: translateY(4px) translateX(4px);
    }
}
.follow-us-handle {
    display: block;
    font-weight: var(--bold-weight);
}
.follow-us-sub {
    display: block;
    font-size: 0.8rem;
    opacity: 0.85;
}


/* ================================================================
   Components — Gallery
   ================================================================ */
.gallery {
    --dot-size: 0.75rem;
    --gallery-duration: 0.35s;
    --gallery-easing: ease-in-out;
    .gallery-slides {
        list-style: none;
        margin: 0;
        overflow: hidden;
        padding: 0;
        position: relative;
    }
    .gallery-slide {
        display: none;
        &.is-active {
            display: block;
        }
        &.is-entering,
        &.is-leaving {
            display: block;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        &.is-entering {
            transform: translateX(calc(var(--gallery-direction, 1) * 100%));
        }
        &.is-leaving {
            transform: translateX(0);
        }
        &.is-animating {
            transition: transform var(--gallery-duration) var(--gallery-easing);
        }
        &.is-entering.is-animating {
            transform: translateX(0);
        }
        &.is-leaving.is-animating {
            transform: translateX(calc(var(--gallery-direction, 1) * -100%));
        }
    }
    .gallery-controls {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        justify-content: center;
        margin-block-start: 1rem;
    }
    .gallery-prev,
    .gallery-next {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 2rem;
        line-height: 1;
        padding: 0;
    }
    .gallery-pager {
        display: flex;
        gap: 0.5rem;
    }
    .gallery-dot {
        background-color: var(--whisper);
        border: none;
        border-radius: 100%;
        cursor: pointer;
        height: var(--dot-size);
        padding: 0;
        transition: background-color var(--transition-speed) var(--transition-timing-function);
        width: var(--dot-size);
        &.is-active {
            background-color: var(--loud);
        }
    }
}


/* ================================================================
   Components — Content blocks
   ================================================================ */
.block {
}
.embed {
}
.custom-rich-text {
}
.custom-image {
    .caption {
    }
}
.credited-image {
    height: auto;
    position: relative;
    img {
        display: block;
        max-width: 100%;
    }
    @media(min-width: 720px) {
        &.float-left, &.float-right {
            margin-block-end: 1rem;
            max-width: calc(50% - 1rem);
        }
        &.float-left {
            float: inline-start;
            margin-inline-end: 1rem;
        }
        &.float-right {
            float: inline-end;
            margin-inline-start: 1rem;
        }
        &.inline {
            display: inline-block;
            max-width: 250px;
        }
    }
    &.full-width {
        margin-block: 1rem;
    }
    .image-credit {
        background: color-mix(in srgb, var(--loud) 50%, transparent);
        bottom: 0;
        color: var(--whisper);
        display: none;
        font-size: 85%;
        inset-inline: 0;
        opacity: 0;
        padding: 0.5rem;
        position: absolute;
        transition: opacity 0.2s ease, display 0.2s allow-discrete;
    }
    &:hover .image-credit {
        display: block;
        opacity: 1;
        @starting-style {
            opacity: 0;
        }
    }
}
.placeholder-image {
}


/* ================================================================
   Components — Star rating widget
   ================================================================ */
.star-rating {
    --star-filled: var(--hero);
    --star-empty: var(--whisper);
    display: inline-flex;
    font-family: var(--sans-serif);
    gap: 0.05em;
    line-height: 1;
    vertical-align: middle;
    & .star-rating-meter {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    & .star {
        background: linear-gradient(
            to right,
            var(--star-filled) var(--fill, 0%),
            var(--star-empty) var(--fill, 0%)
        );
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    &.star-rating--unrated {
        color: var(--hushed);
    }
}


/* ================================================================
   Components — Cards
   ================================================================ */
.card-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
}
.load-more {
    background-color: var(--quiet);
    border: var(--border-width) solid var(--whisper);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-family: var(--monospace);
    font-weight: var(--bold-weight);
    padding: 0.75rem;
    text-align: center;
    width: 100%;
}
.card {
    --base-color: var(--hushed);
    --background-color: color-mix(in srgb, var(--truesilent) 85%, var(--base-color));
    background-color: color-mix(in srgb, var(--background-color) 90%, transparent) !important; /* clobber a:* */
    border: var(--border-width) solid var(--base-color);
    box-shadow: 4px 4px 0px color-mix(in srgb, var(--base-color) 50%, transparent);
    color: inherit;
    display: block;
    padding: 0.75rem;
    text-decoration: none;
    transition:
        background-color var(--transition-speed) var(--transition-timing-function),
        border-color var(--transition-speed) var(--transition-timing-function),
        box-shadow var(--transition-speed) var(--transition-timing-function),
        transform var(--transition-speed) var(--transition-timing-function);
    width: 100%;
    &.highlighted {
        border-width: 4px;
        border-color: var(--loud);
    }
    &.closed {
        --base-color: var(--marooned);
    }
    &:hover {
        --base-color: var(--moss);
        transform: translateY(4px) translateX(4px);
    }
    &:visited, &:link {
        color: inherit;
    }
}

/* event cards */
.event-card {
    --base-color: var(--shag);
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    .event-info {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0.1rem;
    }
    .event-name {
        font-weight: var(--bold-weight);
    }
    .event-detail {
        color: var(--hushed);
        font-size: 0.8rem;
    }
}
.event-date {
    --base-color: var(--marooned);
    background-color: var(--silent);
    border: 1px solid var(--base-color);
    border-radius: calc(var(--border-radius) * 0.75);
    box-shadow: 4px 4px 0px color-mix(in srgb, var(--base-color) 20%, transparent);
    color: var(--loud);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 0;
    text-align: center;
    width: 2.75rem;
    .event-month {
        background: var(--base-color);
        color: var(--truesilent);
        font-size: 0.6rem;
        font-weight: var(--bold-weight);
        letter-spacing: 0.05em;
        padding-block: 0.125rem;
        text-transform: uppercase;
    }
    .event-day {
        color: color-mix(in srgb, var(--base-color) 75%, var(--loud));
        font-size: 1.25rem;
        font-weight: var(--bold-weight);
        line-height: 1;
        padding: 0.25rem;
    }
}

/* scene cards */
.scene-card-top {
    align-items: baseline;
    display: flex;
    gap: 0.25rem 0.5rem;
}
.scene-card-name {
    flex-grow: 1;
    font-family: var(--monospace);
    font-weight: var(--bold-weight);
}
.scene-card-distance {
    color: var(--hushed);
    font-size: 0.8rem;
    text-wrap: nowrap;
}
.scene-card-vibe {
    flex-shrink: 0;
    margin-inline-start: auto;
}
.scene-card-meta {
    margin-block: 0.2rem 0;
}
.scene-card-address {
    color: var(--hushed);
    font-size: 0.8rem;
    margin-block: 0.2rem 0;
}
.scene-card-hours {
    color: var(--hushed);
    font-size: 0.8rem;
    margin-block: 0.2rem 0;
}
.scene-card-notes {
    color: var(--hushed);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-block: 0.35rem 0;
}
.scene-cards-empty {
}


/* ================================================================
   Components — Lists — Events list
   ================================================================ */
.date-header {
    color: var(--hushed);
    font-family: var(--monospace);
    font-size: 0.8rem;
    font-weight: var(--bold-weight);
    letter-spacing: 0.03em;
    margin-block: 1.25rem 0.5rem;
    text-transform: uppercase;
}
.date-header:first-child {
    margin-block-start: 0;
}
.upcoming-events {
    padding: 1rem;
}

/* ================================================================
   Components — Lists — Scenes list
   ================================================================ */


/* ================================================================
   Components — Chips
   ================================================================ */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.chip {
    background-color: var(--hushed);
    border-radius: 2px;
    color: var(--truesilent);
    display: inline-block;
    font-family: var(--monospace);
    font-size: var(--smaller-font-size);
    font-weight: 600;
    padding: 0.05rem 0.25rem;
    text-transform: uppercase;
    &.success {
        background-color: var(--success);
    }
    &.warning {
        background-color: var(--warning);
    }
    &.danger {
        background-color: var(--danger);
    }
    &.highlight {
        background-color: var(--highlight);
    }
    &.info {
        background-color: var(--info);
    }
}


/* ================================================================
   Components — Buttons
   ================================================================ */
.button {
    --base-color: var(--loud);
    --highlight-color: color-mix(in srgb, var(--base-color) 60%, transparent);
    --active-color: var(--trueloud);
    --highlight-shadow: 0 0 0 4px color-mix(in srgb, var(--highlight-color) 20%, transparent);
    background-color: var(--base-color);
    border: 2px solid var(--silent);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--highlight-color);
    display: inline-block;
    font-family: var(--monospace);
    font-weight: var(--bold-weight);
    margin: 0.1rem;
    padding: 0.325rem 0.75rem;
    text-decoration: none;
    transition-duration: var(--transition-speed);
    transition-property: background-color, box-shadow, color, transform;
    transition-timing-function: var(--transition-timing-function);
    white-space: nowrap;
    &, &:link, &:visited {
        color: var(--truesilent);
    }
    &:hover {
        background-color: var(--highlight-color);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--highlight-color) 20%, transparent);
        cursor: pointer;
        transform: translateY(4px) translateX(4px);
    }
    &:active {
        background-color: var(--active-color);
        box-shadow: var(--highlight-shadow);
    }
    &.small {
        font-size: 85%;
        padding: .1625rem .375rem
    }
    &.xray {
        background-color: color-mix(var(--silent) 40%, transparent);
        color: var(--base-color);
        border-color: var(--base-color);
        &:hover {
            background-color: color-mix(in srgb, var(--base-color) 30%, transparent);
        }
    }
    &.disabled {
        --base-color: var(--hushed) !important;
        opacity: 0.6;
        &:hover {
            cursor: inherit;
            transform: none;
        }
    }
    &.success {
        --base-color: var(--success);
    }
    &.warning {
        --base-color: var(--warning);
    }
    &.danger {
        --base-color: var(--danger);
    }
    &.highlight {
        --base-color: var(--highlight);
    }
    &.info {
        --base-color: var(--info);
    }
}


/* ================================================================
   Components — Marks
   ================================================================ */
mark {
    --base-color: var(--hushed);
    background-color: color-mix(in srgb, var(--base-color) 20%, transparent);
    border-radius: 0;
    color: color-mix(in srgb, var(--base-color), var(--loud));
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
    padding: 0.1rem 0.3rem;
    &.good, &.success {
        --base-color: var(--success);
    }
    &.warn, &.warning {
        --base-color: var(--warning);
    }
    &.bad, &.danger {
        --base-color: var(--danger);
    }
    &.highlight {
        --base-color: var(--highlight);
    }
    &.info {
        --base-color: var(--info);
    }
}
.is-highlighted {
    background-color: var(--yellow);
}


/* ================================================================
   Themes — Colors
   ================================================================ */
.fg-hero { 
    color: var(--hero) !important; 
}
.fg-grime { 
    color: var(--grime) !important; 
}
.fg-grunge { 
    color: var(--grunge); !importan !importantt 
}
.fg-moss { 
    color: var(--moss) !important; 
}
.fg-shag { 
    color: var(--shag) !important; 
}
.fg-glorp { 
    color: var(--glorp) !important; 
}
.fg-marooned { 
    color: var(--marooned) !important; 
}
.fg-burple { 
    color: var(--burple) !important; 
}
.fg-success { 
    color: var(--success) !important; 
}
.fg-warning { 
    color: var(--warning) !important; 
}
.fg-danger { 
    color: var(--danger) !important; 
}
.fg-highlight { 
    color: var(--highlight) !important; 
}
.fg-info { 
    color: var(--info) !important; 
}
.fg-trueloud { 
    color: var(--trueloud) !important; 
}
.fg-loud { 
    color: var(--loud) !important; 
}
.fg-hushed { 
    color: var(--hushed) !important; 
}
.fg-whisper { 
    color: var(--whisper) !important; 
}
.fg-quiet { 
    color: var(--quiet) !important; 
}
.fg-silent { 
    color: var(--silent) !important; 
}
.fg-truesilent { 
    color: var(--truesilent) !important; 
}
.bg-hero { 
    background-color: var(--hero) !important; 
}
.bg-grime { 
    background-color: var(--grime) !important; 
}
.bg-grunge { 
    background-color: var(--grunge) !important; 
}
.bg-moss { 
    background-color: var(--moss) !important; 
}
.bg-shag { 
    background-color: var(--shag) !important; 
}
.bg-glorp { 
    background-color: var(--glorp) !important; 
}
.bg-marooned { 
    background-color: var(--marooned) !important; 
}
.bg-burple { 
    background-color: var(--burple) !important; 
}
.bg-success { 
    background-color: var(--success) !important; 
}
.bg-warning { 
    background-color: var(--warning) !important; 
}
.bg-danger { 
    background-color: var(--danger) !important; 
}
.bg-highlight { 
    background-color: var(--highlight) !important; 
}
.bg-info { 
    background-color: var(--info) !important; 
}
.bg-trueloud { 
    background-color: var(--trueloud) !important; 
}
.bg-loud { 
    background-color: var(--loud) !important; 
}
.bg-hushed { 
    background-color: var(--hushed) !important; 
}
.bg-whisper { 
    background-color: var(--whisper) !important; 
}
.bg-quiet { 
    background-color: var(--quiet) !important; 
}
.bg-silent { 
    background-color: var(--silent) !important; 
}
.bg-truesilent { 
    background-color: var(--truesilent) !important; 
}

/* ================================================================
 * Themes - alignment & type layout
   ================================================================ */
.align-left: {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}
.no-margin {
    margin-block: 0;
}