/* a-loader: homepage loading animation */

  :root {
    --site-bg: #F9F7F6;        /* your website background = the colour of the "a" */
    --loader-bg: #2b2630;      /* shows until the pixel photo has drawn */
  }
  html, body { background: var(--site-bg); }

  /* ---------- loader ---------- */
  #loader {
    position: fixed;
    inset: 0;
    background: var(--loader-bg);
    z-index: 9999;
  }
  #loader[hidden] { display: none; }
  #loader canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  #loader svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  #loader path {
    fill: none;
    stroke: var(--site-bg);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
  }


  /* Optional: fade your page in after the reveal. Replace "main" with your page wrapper. */
  main { transition: opacity .6s ease, transform .6s ease; }
  .is-loading main { opacity: 0; transform: translateY(8px); }