/* ============================================================
   Global responsive adjustments not owned by a single component.
   Component-local breakpoints live beside their rules in
   layout.css / components.css.
   ============================================================ */

@media (max-width: 900px) {
  .grid-12 { grid-template-columns: repeat(4, 1fr); }
  :root {
    --section-space: clamp(4rem, 16vw, 6rem);
  }
}

@media (max-width: 560px) {
  .site-header__inner { padding-block: 1.1rem; }
  .site-nav ul { gap: 1rem; }
  .site-header__name { font-size: 0.8rem; }
}

/* Fine pointers only: nothing below matters for touch, since the
   directional-fill and row-mark interactions already degrade to
   tap/:active feedback via interactions.js. */
@media (hover: none) {
  .scroll-progress { display: none; }
}