/* ============================================================
   MOBILE STYLES
   Viewport < 760px shows the mobile canvas (.canvas--mobile)
   and the smart-hide nav. The mobile canvas uses page 5 and 6
   SVGs extracted from the source AI file at native 390px width.
   ============================================================ */

@media (max-width: 759px) {

  /* --------- Smart-hide nav ---------
     The mobile SVG (page 5) already contains a "Robert Burns / Creative lead
     at large / Work About Contact" header at its natural top. To avoid
     duplication, the live HTML nav stays hidden initially (display:none) and
     only appears once JS pins it after the user scrolls past that header.
     From then on it behaves as the smart-hide nav per the spec — visible at
     the top while scrolling up, hidden while scrolling down. */
  .mobile-nav {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    background: var(--colour-cream);
    color: var(--colour-blue);
    font-family: 'Sentient', Georgia, serif;
    z-index: 100;
    transition: transform 0.28s ease-out;
    border-bottom: 1px solid rgba(44, 86, 235, 0.06);
  }

  /* Pinned: fixed at the top. JS toggles this once user scrolls past the
     SVG's natural header height. */
  .mobile-nav.is-pinned {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  /* Hidden: pinned but slid up off-screen (during scroll-down). */
  .mobile-nav.is-pinned.is-hidden {
    transform: translateY(-100%);
  }

  .mobile-nav__brand {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
  }

  .mobile-nav__links {
    display: flex;
    gap: 14px;
    font-size: 13px;
    font-weight: 400;
  }

  .mobile-nav__links a {
    padding: 4px 2px;
    position: relative;
  }

  .mobile-nav__links a.is-active::after {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 1px;
    background: var(--colour-blue);
  }

  /* --------- Mobile showcase --------- */
  .showcase--mobile {
    background: var(--colour-cream);
  }

  .showcase--mobile .showcase__inner {
    max-width: 100%;
  }
}