/* ==========================================================================
   layout.css — navigation, footer, and cross-page card primitives
   ========================================================================== */

/* --- Navigation ----------------------------------------------------------
   Geometry follows the reference SVG (1443x134 at a 1440 design width): the
   header block is 134px tall and the logo runs its full height. The bar is
   flush with the top edge rather than the reference's 22px inset, so nothing
   shows through above it while the page scrolls underneath.
   ------------------------------------------------------------------------ */

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-h);
    pointer-events: none;   /* only the bar and its contents are clickable */
}

/* The translucent bar. Gradient and blur are straight from the reference. */
.site-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-bar-h);
    pointer-events: auto;
    background: linear-gradient(
        180deg,
        rgba(var(--nav-lavender), 0) 0%,
        rgba(var(--nav-burgundy), 0.594) 100%
    );
    -webkit-backdrop-filter: blur(7.5px);
            backdrop-filter: blur(7.5px);
    transition: box-shadow 0.28s ease; 
}

.site-nav.is-scrolled::before {
    box-shadow: 0 6px 26px rgba(60, 10, 26, 0.35);
}

.site-nav__inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 10px;    /* logo x=10 in the reference */
    padding-right: 45px;   /* puts the last label 67px from the right edge */
    pointer-events: none;
}

.site-nav__logo {
    flex-shrink: 0;
    pointer-events: auto;
    align-self: flex-start;
}

/* The reference places the whole 1920x1080 file into a 239x134 box, padding
   and all, so no crop or re-centring here — the inset is part of the layout. */
.site-nav__logo-img {
    width: 239px;
    height: var(--nav-h);
    object-fit: fill;
}

.site-nav__links {
    display: flex;
    align-items: center;
    gap: 16px;             /* 16 + 2x22 padding = the ~60px label gap measured */
    margin-left: auto;     /* the reference sits the nav right of centre */
    /* The band spans the translucent bar rather than the 134px header block,
       whose extra height is the logo overhang below the bar. Starting it at
       the top edge and centring inside it puts the labels on the bar's own
       centre line; centring against the header block would sit them 1.5px low. */
    align-self: flex-start;
    height: var(--nav-bar-h);
    pointer-events: auto;
}

.site-nav__link {
    display: flex;
    align-items: center;
    padding: 0.5rem 22px;
    border-radius: 999px;
    font-size: 20px;       /* cap-height 14.04px measured off the reference */
    font-weight: 600;      /* stem width 0.171em */
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    transition: background 0.2s ease;
}

.site-nav__link:hover {
    background: rgba(255, 255, 255, 0.16);
}

.site-nav__link.is-active {
    background: var(--maroon);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* --- Menu button and scrim ----------------------------------------------
   Both belong to the drawer nav and are inert above 860px: the button is not
   rendered and the scrim stays [hidden] because js/nav.js only unhides it
   when the drawer opens. Their appearance is set here so the breakpoint
   below only has to switch them on.
   ------------------------------------------------------------------------ */

.site-nav__toggle {
    display: none;   /* the breakpoint turns this into a flex box */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;     /* 44px square: the minimum comfortable tap target */
    height: 44px;
    margin-left: auto;
    border-radius: 12px;
    pointer-events: auto;
    transition: background 0.2s ease;
}

.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.16);
}

/* Three bars from one element: the middle is the box itself, the outer two
   are its ::before and ::after. Open, the middle fades and the outer two
   rotate into a cross. */
.site-nav__bars {
    position: relative;   /* the two outer bars are placed against this one */
}

.site-nav__bars,
.site-nav__bars::before,
.site-nav__bars::after {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.28s ease, opacity 0.2s ease;
}

.site-nav__bars::before,
.site-nav__bars::after {
    content: '';
    position: absolute;
}

.site-nav__bars::before { transform: translateY(-7px); }
.site-nav__bars::after  { transform: translateY(7px); }

.site-nav__toggle[aria-expanded="true"] .site-nav__bars {
    background: transparent;
}

.site-nav__toggle[aria-expanded="true"] .site-nav__bars::before {
    transform: translateY(0) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__bars::after {
    transform: translateY(0) rotate(-45deg);
}

.site-nav__scrim {
    position: fixed;
    inset: 0;
    z-index: -1;   /* behind the drawer, above the page */
    background: rgba(48, 8, 26, 0.5);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    pointer-events: auto;
}

.site-nav__scrim[hidden] {
    display: none;
}

/* --- Main ---------------------------------------------------------------- */

.site-main {
    position: relative;
    padding-top: var(--nav-h);
    min-height: 60vh;
}

/* --- Footer -------------------------------------------------------------
   One flattened artwork spanning the full viewport width. Its height scales
   with the width, so export it at the design canvas width (or 2x for retina).
   ------------------------------------------------------------------------ */

.site-footer {
    background: transparent;
    line-height: 0;
}

.site-footer__img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 90px;
}


/* --- Hero lockup shared by landing and projects --------------------------- */

.hero-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
}

.hero-lockup__logo {
    width: 90%;  /* 520px of visible artwork; 520px if trimmed */
    height: auto;
    transform: translate(1.15%, -5.51%);
}

/* ==========================================================================
   Responsive — navigation, hero and footer
   ========================================================================== */

@media (max-width: 1024px) {
    /* Below the design width the nav would otherwise overflow, so shrink the
       labels and the logo rather than letting them collide. */
    .site-nav__inner {
        padding-right: 18px;
    }

    .site-nav__link {
        padding: 0.5rem 12px;
        font-size: 16px;
    }

    .site-nav__logo-img {
        width: 190px;
    }
}

/* --- Drawer nav ----------------------------------------------------------
   At 860px the five labels no longer fit beside the logo even shrunk, so the
   row becomes a drawer: the bar keeps the logo and gains a menu button, and
   the same <nav> slides in from the right when that button is pressed. The
   markup does not change — only its layout does.
   ------------------------------------------------------------------------ */

@media (max-width: 860px) {
    /* The logo overhang goes with the taller bar, so the header block and the
       bar are now the same height (both --nav-h, set in css/base.css). */
    .site-nav__inner {
        padding-left: 14px;
        padding-right: 10px;
    }

    .site-nav__logo {
        align-self: center;
    }

    .site-nav__logo-img {
        width: 118px;
        height: 66px;
    }

    .site-nav__toggle {
        display: flex;
    }

    .site-nav__links {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        width: min(300px, 82vw);
        height: auto;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        margin-left: 0;
        padding: calc(var(--nav-h) + 12px) 18px 28px;
        overflow-y: auto;
        background: linear-gradient(180deg, #6f2247 0%, var(--maroon-deep) 100%);
        box-shadow: -14px 0 40px rgba(40, 6, 22, 0.45);
        /* Closed, the panel sits just off the right edge. visibility keeps it
           out of the tab order and away from screen readers while it is there;
           it is delayed so it only applies once the slide has finished. */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.3s ease, visibility 0s linear 0.3s;
    }

    .site-nav__links.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.3s ease, visibility 0s;
    }

    .site-nav__link {
        justify-content: flex-start;
        padding: 0.9rem 16px;
        border-radius: 12px;
        font-size: 15px;
        letter-spacing: 0.04em;
    }

    /* The hero lockup carries the wordmark on these widths, so the bar can
       give the full row to the logo and the button. */
    .hero-lockup {
        padding-top: 28px;
    }

    .hero-lockup__logo {
        /* 62% of a phone is too small to read; near-full width instead. The
           translate() in the base rule is deliberately left alone: its offsets
           are percentages of the element's own box, so they re-centre the
           artwork just as exactly at this width as at the design size. */
        width: min(738px, 86%);
    }

    .site-footer__img {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .site-nav__logo-img {
        width: 100px;
        height: 58px;
    }

    .hero-lockup {
        padding-top: 18px;
    }

    .hero-lockup__logo {
        width: 92%;
    }
}

/* While the drawer is open the page behind it must not scroll. */
body.nav-open {
    overflow: hidden;
}