:root {



    /* --color-primary: #5a4833; */
    /* --color-background: #fff2cc; */

    --color-primary: #990000;
    --color-background: #fffff6;


    --color-background-lighter: color-mix(in srgb-linear, var(--color-background) 65%, white);

    --color-navlogo: color-mix(in srgb-linear, var(--color-background) 20%, black);
    --color-navlogo-hover: color-mix(in srgb-linear, var(--color-background) 10%, black);

    --color-hover: color-mix(in srgb-linear, var(--color-background) 75%, var(--color-primary));
    --color-hover-lighter: color-mix(in srgb-linear, var(--color-background-lighter) 75%, var(--color-primary));

    --color-card-border: color-mix(in srgb-linear, var(--color-primary) 40%, var(--color-background));
    --color-card-shadow: color-mix(in srgb-linear, var(--color-background) 70%, black);

    --card-border: 1px solid var(--color-card-border);
    --card-border-radius: 0.5em;
    --card-box-shadow: 0.1em 0.1em 0.1em var(--color-card-shadow);

    --primary-font-family: 'Public Sans', Arial, Helvetica, sans-serif;

    font-family: var(--primary-font-family);
    font-size: 12pt;

    background-color: var(--color-background);
    color: var(--color-primary);

    --anim-enter: cubic-bezier(0.0, 0.0, 0.2, 1.0);
    --anim-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0);
    --anim-interactive: cubic-bezier(0.4, 0.0, 0.2, 1.0);
    --anim-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);

    /* Micro: color shifts, opacity, border changes. Elements barely move. */
    --duration-micro: calc(80ms * var(--duration-enable));
    /* Fast: hover states, focus rings, shadow lifts. Small spatial changes. */
    --duration-fast: calc(120ms * var(--duration-enable));
    /* Standard: dropdowns, tooltips, small panels. Medium spatial changes. */
    --duration-standard: calc(200ms * var(--duration-enable));
    /* Moderate: modals, sidebars, drawers. Large spatial changes. */
    --duration-moderate: calc(280ms * var(--duration-enable));
    /* Slow: full page transitions, onboarding flows. Maximum spatial changes. */
    --duration-slow: calc(400ms * var(--duration-enable));

    /* Flag to disable transitions (for pagehide state resets) */
    --duration-enable: 1;
}

/* Accessibility setting! */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    /* border-box so the fixed-navbar top padding (navbar.css) counts toward
       min-height instead of adding to it and pushing the footer that far
       past the bottom of the viewport. */
    box-sizing: border-box;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 1em;
}

/* Sticky footer: main claims all the space the viewport doesn't otherwise
   need, so a short page pins the footer to the bottom edge with blank space
   above it in <main>, while a tall page just scrolls normally. */
main {
    flex: 1 0 auto;
    /* A flex item's auto side-margins (below) take priority over the
       default cross-axis stretch, which would otherwise leave main sized
       to shrink-wrap its content instead of the available width — collapsing
       main.team's auto-fill grid to a single column. An explicit width
       keeps main definite-sized so max-width + the auto margins can still
       cap and center it as before. */
    width: 100%;
    max-width: 65ch;
    margin: 0 auto;
    text-align: justify;
    text-wrap-style: stable;
}

h1 {
    text-align: center;
    text-wrap-style: balance;
}

div.card {
    background-color: var(--color-background-lighter);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    width: 5rem;
    height: 5rem;
}

div.brown {
    background-color: var(--color-primary);
    width: 5rem;
    height: 5rem;
}

/* ── Team / people cards ──────────────────────────────────────────────
   Switched on by "layout: team" in a content file's front matter, which
   puts class="team" on <main>. Each bullet-list item becomes one card:

       - ![](/images/jane-doe.jpg)
         **Jane Doe**
         President

   Keep a blank line between people. Portrait photos look best.
------------------------------------------------------------------------ */
main.team {
    max-width: 65ch;
    text-align: center;
}

main.team ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1.25rem;
}

main.team li {
    background-color: var(--color-background-lighter);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-box-shadow);
    padding: 0.9rem;
}

main.team li p {
    margin: 0;
}

main.team li img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: calc(var(--card-border-radius) - 0.2rem);
}

main.team li strong {
    display: block;
    margin-top: 0.5rem;
}