/*
 * Shared site chrome: the homepage's compact navigation and footer, extracted
 * from index.html so every other page uses the same header and footer.
 * Markup lives in each page; behaviour comes from site-nav.js and site-footer.js.
 */
nav.compact-nav,
footer.compact-footer {
    --paper: #F4F2EE;
    --paper-2: #EAE7E1;
    --card: #FFFDFA;
    --ink: #16241D;
    --ink-80: rgba(22, 36, 29, .8);
    --ink-60: rgba(22, 36, 29, .6);
    --ink-50: rgba(22, 36, 29, .5);
    --ink-40: rgba(22, 36, 29, .4);
    --line: rgba(22, 36, 29, .14);
    --night: #0E1B15;
    --mint: #217A56;
    --mint-lt: #6FD3A6;
    --text: var(--ink);
    --text-mid: var(--ink-60);
    --border-lt: rgba(22, 36, 29, .09);
    --g1: var(--paper-2);
    --copy: #5F625C;
    --content-width: 1280px;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --gutter: clamp(24px, 6vw, 128px);
    font-family: 'Outfit', sans-serif;
    line-height: 1.5;
}

nav.compact-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 40px var(--gutter) 20px;
    color: var(--ink);
    transition: color .5s, background-color .5s, padding .5s var(--ease-out), border-color .5s;
    border-bottom: 1px solid transparent;
}

nav.compact-nav.nav-dark {
    color: #fff;
}

nav.compact-nav.nav-solid {
    padding-top: 16px;
    padding-bottom: 16px;
    background: rgba(244, 242, 238, .9);
    border-bottom-color: var(--line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

nav.compact-nav.nav-solid.nav-dark {
    background: rgba(14, 27, 21, .86);
    border-bottom-color: rgba(255, 255, 255, .1);
}

nav.compact-nav .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

nav.compact-nav .logo-img {
    width: 26px;
    height: auto;
}

nav.compact-nav .logo-text {
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
}

nav.compact-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 40px;
}

nav.compact-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
}

nav.compact-nav .nav-links a,
nav.compact-nav .nav-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: opacity .2s;
}

nav.compact-nav .nav-links a:hover,
nav.compact-nav .nav-more summary:hover {
    opacity: .7;
}

nav.compact-nav .nav-more {
    position: relative;
}

nav.compact-nav .nav-more summary {
    gap: 8px;
    cursor: pointer;
    list-style: none;
}

nav.compact-nav .nav-more summary::-webkit-details-marker {
    display: none;
}

nav.compact-nav .nav-more summary::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .3s;
}

nav.compact-nav .nav-more[open] summary::after {
    transform: translateY(1px) rotate(225deg);
}

nav.compact-nav .nav-more-panel {
    position: absolute;
    top: calc(100% + 18px);
    right: -24px;
    width: 520px;
    padding: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    background: var(--night);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(14, 27, 21, .25);
}

nav.compact-nav .nav-group-label {
    margin-bottom: 10px;
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
}

nav.compact-nav .nav-more-panel ul {
    list-style: none;
}

nav.compact-nav .nav-more-panel a {
    min-height: 36px;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .85);
}

nav.compact-nav .nav-github svg {
    width: 13px;
    height: 13px;
    margin-right: 6px;
    fill: currentColor;
}

nav.compact-nav .nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    transition: opacity .2s;
}

nav.compact-nav .nav-btn:hover {
    opacity: .75;
}

nav.compact-nav .nav-btn-dot {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: currentColor;
}

nav.compact-nav .nav-btn-dot svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--paper);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .5s;
}

nav.compact-nav.nav-dark .nav-btn-dot svg {
    stroke: var(--night);
}

nav.compact-nav .nav-toggle {
    display: none;
    position: relative;
    z-index: 2;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
}

nav.compact-nav .nav-toggle .bars {
    display: grid;
    gap: 5px;
    justify-items: end;
}

nav.compact-nav .nav-toggle .bars span {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform .4s var(--ease-out), opacity .3s, width .3s;
}

nav.compact-nav .nav-toggle .bars span:last-child {
    width: 16px;
}

nav.compact-nav .nav-toggle[aria-expanded="true"] {
    color: #fff;
}

nav.compact-nav .nav-toggle[aria-expanded="true"] .bars span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

nav.compact-nav .nav-toggle[aria-expanded="true"] .bars span:nth-child(2) {
    opacity: 0;
}

nav.compact-nav .nav-toggle[aria-expanded="true"] .bars span:nth-child(3) {
    width: 24px;
    transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
    .js nav.compact-nav .nav-logo,
    .js nav.compact-nav .nav-links>li,
    .js nav.compact-nav .nav-btn {
        animation: navIn .6s var(--ease-out) both;
        animation-delay: .2s;
    }

    .js nav.compact-nav .nav-links>li:nth-child(1) {
        animation-delay: .3s;
    }

    .js nav.compact-nav .nav-links>li:nth-child(2) {
        animation-delay: .38s;
    }

    .js nav.compact-nav .nav-links>li:nth-child(3) {
        animation-delay: .46s;
    }

    .js nav.compact-nav .nav-links>li:nth-child(4) {
        animation-delay: .54s;
    }

    .js nav.compact-nav .nav-btn {
        animation-delay: .7s;
    }

    @keyframes navIn {
                from {
                    opacity: 0;
                    transform: translateY(-12px);
                }

                to {
                    opacity: 1;
                    transform: none;
                }
            }
}

footer.compact-footer {
    position: relative;
    z-index: 5;
    padding: 18px 48px;
    background: var(--g1);
    border-top: 1px solid var(--border-lt);
    color: var(--copy);
    font-size: .75rem;
    line-height: 1.5;
}

footer.compact-footer .footer-shell {
    position: relative;
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

footer.compact-footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

footer.compact-footer .footer-copyright {
    white-space: nowrap;
}

footer.compact-footer a {
    color: inherit;
    text-decoration: none;
    transition: color .2s;
}

footer.compact-footer a:hover,
footer.compact-footer .footer-more summary:hover {
    color: var(--mint);
}

footer.compact-footer a:focus-visible,
footer.compact-footer .footer-more summary:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 4px;
    border-radius: 3px;
}

footer.compact-footer .footer-inner > a,
footer.compact-footer .footer-more summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
}

footer.compact-footer .footer-more summary {
    cursor: pointer;
    list-style: none;
    gap: 8px;
}

footer.compact-footer .footer-more summary::-webkit-details-marker {
    display: none;
}

footer.compact-footer .footer-more summary::after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translateY(2px) rotate(-45deg);
}

footer.compact-footer .footer-more[open] summary::after {
    transform: translateY(-1px) rotate(135deg);
}

footer.compact-footer .footer-more-panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 14px);
    width: min(520px, calc(100vw - 40px));
    padding: 24px;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
    background: var(--g0);
    border: 1px solid var(--border-lt);
    border-radius: var(--control-radius);
    box-shadow: 0 12px 36px rgba(38, 32, 22, .09);
}

footer.compact-footer .footer-more-group h3 {
    margin: 0 0 8px;
    color: var(--copy);
    font-family: 'DM Mono', monospace;
    font-size: .6rem;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
}

footer.compact-footer .footer-more-group a {
    display: block;
    padding: 7px 0;
    color: var(--text);
    font-size: .8rem;
}

footer.compact-footer .footer-more-group .footer-legal {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border-lt);
    color: var(--copy);
}

footer.compact-footer .foot-sep {
    display: none;
}

@media (max-width: 1100px) {
    nav.compact-nav .nav-actions {
        gap: 28px;
    }

    nav.compact-nav .nav-links {
        gap: 24px;
    }
}

@media (max-width: 960px) {
    nav.compact-nav {
        padding: 28px 24px 16px;
    }

    nav.compact-nav .nav-actions {
        gap: 12px;
    }

    nav.compact-nav .nav-toggle {
        display: none;
    }

    nav.compact-nav.nav-ready .nav-toggle {
        display: inline-flex;
    }

    nav.compact-nav.nav-ready .nav-links {
        position: fixed;
        inset: 0;
        z-index: 1;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        padding: 96px 32px 48px;
        background: var(--night);
        color: #fff;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-32px);
        transition: opacity .5s cubic-bezier(.4, 0, .2, 1), visibility .5s, transform .5s cubic-bezier(.4, 0, .2, 1);
    }

    nav.compact-nav.nav-ready .nav-links.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    nav.compact-nav.nav-ready .nav-links>li {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
        animation: none;
    }

    nav.compact-nav.nav-ready .nav-links.is-open>li {
        opacity: 1;
        transform: none;
    }

    nav.compact-nav.nav-ready .nav-links.is-open>li:nth-child(2) {
        transition-delay: 60ms;
    }

    nav.compact-nav.nav-ready .nav-links.is-open>li:nth-child(3) {
        transition-delay: 120ms;
    }

    nav.compact-nav.nav-ready .nav-links.is-open>li:nth-child(4) {
        transition-delay: 180ms;
    }

    nav.compact-nav.nav-ready .nav-links>li>a,
    nav.compact-nav.nav-ready .nav-more>summary {
        padding: 12px 0;
        font-size: clamp(1.5rem, 6vw, 1.9rem);
        font-weight: 300;
        letter-spacing: .06em;
        color: rgba(255, 255, 255, .7);
    }

    nav.compact-nav.nav-ready .nav-links>li>a:hover,
    nav.compact-nav.nav-ready .nav-more>summary:hover {
        color: #fff;
        opacity: 1;
    }

    nav.compact-nav .nav-more-panel {
        position: static;
        width: auto;
        padding: 12px 0 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: transparent;
        box-shadow: none;
    }

    nav.compact-nav .nav-btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    nav.compact-nav .nav-btn-dot {
        width: 32px;
        height: 32px;
    }

    nav.compact-nav .nav-btn-dot svg {
        width: 14px;
        height: 14px;
    }

    nav.compact-nav:not(.nav-ready) {
        flex-wrap: wrap;
    }

    nav.compact-nav:not(.nav-ready) .nav-links {
        flex-wrap: wrap;
        gap: 4px 20px;
    }
}


/* Older page stylesheets also style .nav-links and .footer-inner; keep the shared chrome authoritative. */
nav.compact-nav .nav-links a,
nav.compact-nav .nav-more summary {
    display: flex;
    align-items: center;
    color: inherit;
    font-family: 'Outfit', sans-serif;
    text-decoration: none;
    padding: 0;
    border: 0;
    background: none;
}

/* Some article templates style every li, p and h3; the chrome keeps its own type. */
nav.compact-nav li,
footer.compact-footer li {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

nav.compact-nav .nav-group-label,
footer.compact-footer h3 {
    margin: 0;
}

footer.compact-footer .footer-inner {
    width: auto;
    margin: 0;
    justify-content: flex-start;
}

footer.compact-footer .footer-inner > a,
footer.compact-footer .footer-more summary,
footer.compact-footer .footer-more-group a {
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

@media (max-width: 960px) {
    nav.compact-nav.nav-ready .nav-links > li > a,
    nav.compact-nav.nav-ready .nav-more > summary {
        display: flex;
    }
}

/* Detail pages: a solid, sticky bar from the first pixel (the homepage fades it in over the hero). */
nav.compact-nav {
    position: sticky;
    padding-top: 16px;
    padding-bottom: 16px;
    background: rgba(244, 242, 238, .9);
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

nav.compact-nav .nav-links a[aria-current="page"],
nav.compact-nav .nav-more-panel a[aria-current="page"] {
    color: var(--mint);
}

nav.compact-nav ul {
    margin: 0;
    padding: 0;
}

footer.compact-footer a {
    text-decoration: none;
}

@media (max-width: 960px) {
    /* backdrop-filter would trap the full-screen menu inside the bar */
    nav.compact-nav {
        background: rgba(244, 242, 238, .97);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Resources panel: a dark surface, so hover brightens instead of dimming and the
   current page uses the light mint. Placed last so it wins over the resets above. */
nav.compact-nav .nav-more-panel a {
    color: rgba(255, 255, 255, .85);
}

nav.compact-nav .nav-more-panel a:hover {
    color: #fff;
    opacity: 1;
}

nav.compact-nav .nav-more-panel a[aria-current="page"] {
    color: #6FD3A6;
}