/* ============================================================================
   GEPA — site

   Extracted from the layout it styles. This is shell CSS on every page of its
   surface, so it belongs in a file the browser can cache once rather than in a
   <style> block re-sent with every response.

   Reads the token layer; declares no colour of its own.
   ========================================================================== */

/* ================================================================
           Site shell — header, drawer, footer.

           Layout only. Every button, badge, rule and type step below comes
           from the token layer, and nothing here names a surface: the header,
           the drawer panel and the footer each carry .surface-forest and read
           the local tokens it sets.
           ================================================================ */

        body { min-height: 100vh; display: flex; flex-direction: column; }
        main { flex: 1; }

        /* ------------------------------------------------------- header -- */

        .site-header {
            position: sticky;
            top: 0;
            z-index: 100;
            border-bottom: 3px solid var(--gilt);
        }
        .site-header-inner {
            display: flex;
            align-items: center;
            gap: var(--s4);
            padding-block: 14px;
        }
        @media (min-width: 1024px) {
            .site-header-inner { gap: var(--s6); padding-block: 18px; }
        }

        .site-brand {
            display: flex;
            align-items: center;
            gap: var(--s3);
            flex: none;
            min-height: 44px;
            color: var(--text);
            text-decoration: none;
        }
        .site-brand img { height: 38px; width: auto; }
        .site-brand-name { display: flex; flex-direction: column; line-height: 1.1; }
        .site-brand-name strong {
            font-family: var(--font-display);
            font-size: 20px;
            font-weight: 500;
            letter-spacing: -.01em;
        }
        /* 10px is small enough that it takes the .74 tier, not the .62 floor. */
        .site-brand-name span {
            font: 700 10px/1.3 var(--font-ui);
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--text-2);
        }
        /* Below 420px there is no room for the descriptor beside the sign-up
           button, but it is the half of the brand link that names the site,
           so it is hidden visually and kept in the accessibility tree. */
        @media (max-width: 419px) {
            .site-brand-name span {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip-path: inset(50%);
                white-space: nowrap;
            }
        }

        .site-nav { display: none; }
        @media (min-width: 1024px) {
            .site-nav { display: flex; align-items: center; gap: 2px; flex: 1; }
        }
        .site-nav a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            padding-inline: 14px;
            border-radius: var(--r-sm);
            color: var(--text-2);
            font: 600 15px/1 var(--font-ui);
            text-decoration: none;
        }
        .site-nav a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
        /* The current page is marked by weight and a rule, not colour alone. */
        .site-nav a[aria-current="page"] {
            color: var(--text);
            box-shadow: inset 0 -2px 0 var(--gold);
            border-radius: var(--r-sm) var(--r-sm) 0 0;
        }

        .site-actions {
            display: flex;
            align-items: center;
            gap: var(--s2);
            margin-left: auto;
            flex: none;
        }
        .site-actions form { margin: 0; }

        /* Shown from 1024px, where the drawer is gone and there is room. */
        .site-desk { display: none; }
        @media (min-width: 1024px) { .site-desk { display: inline-flex; } }

        /* Sign up stays visible beside the menu button on a phone: the drawer
           must never be the only route to the primary call to action. It
           carries .btn-sm for the tighter label, but never .btn-sm's height —
           it is the page's primary target on the smallest screen, so it keeps
           the full 44px beside the 44px menu button. */
        .site-signup { min-height: 44px; padding: 11px 18px; }
        .site-signup-long { display: none; }
        @media (min-width: 1024px) {
            .site-signup-long { display: inline; }
            .site-signup-short { display: none; }
            .site-signup { padding: 12px 22px; font-size: 15px; }
        }

        /* With JS off the drawer is already a block of links under the header,
           so the control that would toggle it is never shown rather than
           sitting in the bar doing nothing. Both the reveal and the desktop
           hide are written at the same specificity so the media query wins. */
        .site-burger {
            display: none;
            width: 44px;
            height: 44px;
            place-items: center;
            flex: none;
            border: 1px solid var(--rule-strong);
            border-radius: var(--r-sm);
            background: transparent;
            color: var(--text);
            cursor: pointer;
        }
        .site-burger:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
        .js .site-burger { display: grid; }
        @media (min-width: 1024px) { .js .site-burger { display: none; } }

        /* ------------------------------------------------------- drawer --
           With JS off the panel is simply a block of links under the header;
           the overlay treatment is gated on the .js class the head sets, and
           the drawer is only hidden by the inline script beneath it. */

        .site-drawer { border-bottom: 1px solid var(--rule); }
        @media (min-width: 1024px) { .site-drawer { display: none; } }

        .js .site-drawer {
            position: fixed;
            inset: 0;
            z-index: 150;
            border: 0;
            /* The same scrim the token layer's dialog backdrop uses, read from
               the token rather than restated as a literal. */
            background: color-mix(in srgb, var(--forest-sunk) 72%, transparent);
        }
        .site-drawer-panel {
            display: flex;
            flex-direction: column;
            gap: var(--s4);
            padding: var(--s4) var(--gutter) var(--s7);
        }
        .js .site-drawer-panel {
            max-height: 100%;
            overflow-y: auto;
            border-bottom: 1px solid var(--rule-strong);
            box-shadow: var(--shadow-float);
        }
        .site-drawer-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--s3);
        }
        .site-drawer-close {
            width: 44px;
            height: 44px;
            display: grid;
            place-items: center;
            border: 1px solid var(--rule-strong);
            border-radius: var(--r-sm);
            color: var(--text);
            text-decoration: none;
        }
        .site-drawer-nav { display: flex; flex-direction: column; }
        .site-drawer-nav a,
        .site-drawer-nav button {
            display: flex;
            align-items: center;
            min-height: 48px;
            padding-inline: 2px;
            border: 0;
            background: none;
            color: var(--text);
            font: 600 17px/1.3 var(--font-ui);
            text-align: left;
            text-decoration: none;
            cursor: pointer;
        }
        .site-drawer-nav a[aria-current="page"] { color: var(--gold); }
        .site-drawer-group {
            display: flex;
            flex-direction: column;
            padding-top: var(--s3);
            border-top: 1px solid var(--rule);
        }
        .site-drawer-group a,
        .site-drawer-group button {
            font-size: 15px;
            font-weight: 500;
            min-height: 44px;
            color: var(--text-2);
        }

        /* ------------------------------------------------------- footer -- */

        .site-footer-inner { padding-block: var(--s7) var(--s6); }
        .site-footer-top {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s5);
            justify-content: space-between;
            align-items: center;
        }
        .site-footer-brand {
            display: flex;
            align-items: center;
            gap: var(--s3);
            color: var(--text);
            text-decoration: none;
        }
        .site-footer-brand img { height: 32px; width: auto; }
        .site-footer-brand span {
            font-family: var(--font-display);
            font-size: 18px;
            font-weight: 500;
        }
        .site-footer-nav {
            display: flex;
            flex-wrap: wrap;
            gap: 0 var(--s5);
        }
        .site-footer-nav a {
            display: inline-flex;
            align-items: center;
            min-height: 44px;
            color: var(--text-2);
            font: 500 14.5px/1 var(--font-ui);
            text-decoration: none;
        }
        .site-footer-nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
        .site-footer-legal {
            display: flex;
            flex-wrap: wrap;
            gap: var(--s2) var(--s5);
            justify-content: space-between;
            margin-top: var(--s5);
            padding-top: var(--s5);
            border-top: 1px solid var(--rule);
        }
        .site-footer-legal a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

/* Policy links in the footer. Their own row, so they read as obligations the
   academy is meeting rather than as more navigation. */
.site-footer-policies { display: flex; flex-wrap: wrap; gap: var(--s4); margin-block: var(--s3); }
.site-footer-policies a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font: 600 13px/1 var(--font-ui);
    color: var(--on-forest-2);
    text-decoration: none;
}
.site-footer-policies a:hover { color: var(--on-forest); text-decoration: underline; text-underline-offset: 3px; }