/* Mobile fixes. Loaded after site.css (via nav-menu.php). Desktop is untouched. */
@media (max-width:820px){
  /* Header: one scrollable row of menu links instead of two wrapped rows, so the sticky header stays short */
  .site-head .nav{flex-wrap:nowrap;overflow-x:auto;gap:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .site-head .nav::-webkit-scrollbar{display:none}
  .site-head .nav a{font-size:15px}
  .nm-dd{display:inline-flex}

  /* Grids with a minimum wider than a small phone */
  .photo-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
  .card-grid,.split,.two-col,.two-col-wide,.risk-grid,.cta-inner,.related-grid{grid-template-columns:minmax(0,1fr)}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}

  /* Labels below 11px are hard to read on phones */
  .eyebrow,.crumbs ol,.badge,.ev-label,.finding-ref,.card-foot,.more{font-size:11px}
  .card-type,.card-id,.metacell dt,.status,.verdict,.risk-sev,.badge-sm,.datatable th,.datatable .mono,.book-cover .mono,.book-meta .mono{font-size:10.5px}
  .brand-sub{font-size:8.5px}

  /* Text never forces sideways scrolling */
  body{overflow-wrap:break-word}
  .ev-label,.badge{white-space:normal}
  img,video,iframe{max-width:100%}
}
@media (max-width:560px){
  /* Tables inside a scroll wrapper keep aligned columns; the wrapper scrolls */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .table-scroll .datatable{display:table;width:auto;min-width:100%}
  .table-scroll .datatable thead{display:table-header-group}
  .table-scroll .datatable tbody{display:table-row-group}
  .table-scroll .datatable tr{display:table-row}
  .table-scroll .datatable th,.table-scroll .datatable td{min-width:120px}

  .section{padding-block:clamp(40px,11vw,56px)}
  .btn-row .btn,.cta-actions .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .founder-img{width:120px}
}