/* ===================================================================
   mobile.css — ALL small-screen (@media max-width) rules, in original
   cascade order, loaded LAST so this layer overrides site/characters.
   Each block is annotated with the section it adapts.
   =================================================================== */
  /* ── from: NAV ── */
  @media(max-width:820px){
    nav.links{display:none}
    .burger{display:flex}
    .mobile-menu{display:block;position:fixed;inset:72px 0 auto 0;background:rgba(15,14,19,.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
      transform:translateY(-120%);transition:transform .4s var(--ease);z-index:99;padding:14px 28px 26px}
    .mobile-menu.open{transform:translateY(0)}
    .mobile-menu a{display:block;padding:15px 0;font-size:1.15rem;font-weight:700;border-bottom:1px solid var(--line);color:var(--faint)}
    .mobile-menu a:last-of-type{border-bottom:0}
    body.menu-open{overflow:hidden}
    .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0}
    .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  }

  /* ── from: the transparent text-stroke outline renders with line artifacts on mob ── */
  @media(max-width:600px){ h1.big .out{color:rgba(245,243,239,.7);-webkit-text-stroke-width:0} }

  /* ── from: if the real photo ever fails to load, gracefully show the 8-bit versio ── */
  @media(max-width:560px){.hero-portrait{width:min(220px,55vw)}}

  /* ── from: SIGINT decrypt terminal — the mini-games launcher (intercept a channel ── */
  @media(max-width:680px){ .sigint{margin:34px auto 6px;max-width:100%} }

  /* ── from: trailing-arrow nudge on the primary CTAs ── */
  @media(max-width:680px){.ticker{grid-template-columns:repeat(2,1fr)}}

  /* ── from: trailing-arrow nudge on the primary CTAs ── */
  @media(max-width:680px){.ticker div:nth-child(2){border-right:none}.ticker div:nth-child(1),.ticker div:nth-child(2){border-bottom:2px solid var(--ink)}}

  /* ── from: info popup (stat tiles) ── */
  @media(max-width:560px){.pop-grid{grid-template-columns:1fr}}

  /* ── from: HIRE / services — primary ── */
  @media(max-width:880px){.svc-grid{grid-template-columns:repeat(2,1fr)}}

  /* ── from: HIRE / services — primary ── */
  @media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

  /* ── from: process / how we work ── */
  @media(max-width:820px){.proc{grid-template-columns:repeat(2,1fr)}}

  /* ── from: process / how we work ── */
  @media(max-width:520px){.proc{grid-template-columns:1fr}}

  /* ── from: process / how we work ── */
  @media(max-width:820px){.about{grid-template-columns:1fr}}

  /* ── from: process / how we work ── */
  @media(max-width:640px){.tl-item{grid-template-columns:1fr;gap:6px}}

  /* ── from: beyond ── */
  @media(max-width:820px){.by-grid{grid-template-columns:repeat(2,1fr)}}

  /* ── from: beyond ── */
  @media(max-width:560px){.by-grid{grid-template-columns:1fr}}

  /* ── from: character picker (choose your walker) ── */
  @media(max-width:680px){
    #charPick{left:10px;bottom:10px;padding:7px 8px} .cpick{width:40px;height:55px} .cpick .cthumb{width:36px;height:57px;background-size:144px 228px}
    /* on touch, tuck the dock into the free gap between the joystick and the buttons; expand upward */
    body.touch #charPick{left:50%;right:auto;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));flex-direction:column-reverse;align-items:center}
    body.touch #charPick .proprow{max-width:236px}
  }