/* Mobile-first responsive overrides */

/* Hamburger: hidden on desktop */
.topnav-hamburger { display: none !important; }

/* Mobile menu: hidden by default (shown via React state) */
.topnav-mobile-menu {
  display: flex;
  flex-direction: column;
  background: color-mix(in oklab, var(--bg) 96%, transparent);
  border-top: 1px solid var(--border-subtle);
}

@media (max-width: 768px) {
  :root { --sec-y: 56px; }

  /* Hero — tighter top breathing room on mobile */
  .hero-section { padding-top: 48px !important; }

  /* Nav — hide desktop links, show hamburger */
  .topnav-nav { display: none !important; }
  .topnav-cta { display: none !important; }
  .topnav-hamburger { display: inline-flex !important; }

  /* Experiments — tap press feedback */
  .exp-card:active {
    transform: scale(0.97);
    transition: transform 80ms ease-out;
  }

  /* Experiments — stack cards vertically */
  .exp-grid {
    grid-template-columns: 1fr !important;
  }

  /* Writing — stack post rows */
  .post-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 18px 10px !important;
    margin: 0 -10px !important;
  }
  .post-meta { display: none !important; }
  .post-chevron { display: none !important; }

  /* About — stack two columns */
  .about-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .about-aside {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 32px !important;
  }
}