/* ── Portfolio spacing tokens ─────────────────────────────────────────────────
   Single source of truth for page-edge spacing (page-title / action-button chrome).
   Loaded byte-identical in every page's <head>, the same way as research-insights.css,
   so the Swup head-plugin never sees a differing tag. Custom properties resolve live,
   so this can load before or after each page's inline <style>.

   Three responsive tiers, reusing the portfolio's existing 899 / 599 breakpoints:
     --page-pad-x : distance from the page edge to the title / buttons
                    (desktop 60 · tablet 40 · mobile 24)
     --page-pad-y : top inset shared by the nav and the modal chrome
                    (desktop 28 · ≤tablet 24)
   Consume with a safe-area guard, e.g.
     padding-inline: max(var(--page-pad-x), env(safe-area-inset-left)); */
:root{
  --page-pad-x: 60px;
  --page-pad-y: 28px;
}
@media (max-width:899px){          /* tablet */
  :root{ --page-pad-x: 40px; --page-pad-y: 24px; }
}
@media (max-width:599px){          /* mobile */
  :root{ --page-pad-x: 24px; }
}
