/* Mobile layout improvements — November 5, 2026 */
@media screen and (max-width: 1024px) {
  .tool-layout > *, .split > *, .grid > *, .directory-grid > *, .article-grid > *, .field, .input-row > * { min-width: 0; }
  .field input, .field select, .field textarea, .searchbar input, .searchbar select { max-width: 100%; font-size: 16px; }
  .table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
}
@media screen and (max-width: 760px) {
  html { scroll-padding-top: 90px; }
  .wrap { padding-inline: 20px; }
  .nav-wrap { padding: 12px 20px; }
  .menu-toggle { min-height: 44px; min-width: 76px; font-size: 14px; }
  .site-header nav { max-height: calc(100svh - 125px); overflow-y: auto; padding: 12px 20px 20px; gap: 4px; }
  .site-header nav a { display: flex; align-items: center; min-height: 48px; padding: 11px 12px; }
  .site-header nav .nav-cta { margin-top: 8px; justify-content: center; }
  .hero { padding-block: 30px 36px; gap: 26px; }
  .hero h1 { font-size: clamp(30px, 8.8vw, 44px); line-height: 1.1; letter-spacing: -.04em; margin-bottom: 18px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .1em; margin-bottom: 16px; }
  .hero .lead { font-size: 16px; line-height: 1.6; margin: 18px 0 22px; }
  .hero .micro { margin: 15px 0 0; font-size: 12px; }
  .btn { min-height: 48px; padding: 12px 18px; font-size: 14px; text-align: center; white-space: normal; }
  .hero-art { min-height: 310px; border-radius: 22px; }
  .vial { width: 118px; height: 190px; margin-left: -60px; }
  .vial-label { inset-block: 48px 25px; padding: 13px 10px; }
  .vial-label b { font-size: 16px; }
  .vial-label small { font-size: 8px; }
  .art-card { width: 170px; padding: 15px; right: 14px; bottom: 18px; }
  .art-card strong { font-size: 24px; line-height: 1.2; }
  .art-card small, .art-card p { font-size: 10px; }
  .floating-tag { top: 18px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); font-size: 8px; }
  .art-badge { width: 48px; height: 48px; top: 65px; right: 18px; font-size: 25px; }
  .trust-strip { grid-template-columns: 1fr; gap: 0; padding-block: 5px; }
  .trust-strip > div { padding-block: 13px; }
  .trust-strip > div + div { border-top: 1px solid var(--line); }
  .trust-strip b { font-size: 14px; }
  .trust-strip span { font-size: 12px; }
  .section { padding-block: 40px; }
  .section-head { gap: 12px; margin-bottom: 24px; }
  .section-head h2, .split h2, .callout h2 { font-size: clamp(27px, 7.5vw, 34px); line-height: 1.16; }
  .section-head .text-link, .card .text-link, .article-tile .text-link, .compound .source-link { display: inline-flex; align-items: center; min-height: 44px; white-space: normal; }
  .card { padding: 23px; border-radius: 17px; }
  .card .num { margin-bottom: 20px; }
  .card p, .article-tile p, .compound p { font-size: 15px; }
  .page-hero { padding-block: 28px 18px; }
  .page-hero h1 { font-size: clamp(29px, 8vw, 40px); line-height: 1.12; overflow-wrap: break-word; }
  .page-hero .eyebrow { font-size: 10px; letter-spacing: .1em; margin-bottom: 15px; }
  .breadcrumbs { margin-bottom: 18px; font-size: 12px; }
  .panel { padding: 22px; border-radius: 17px; }
  .panel h2 { font-size: 25px; }
  .field { margin-bottom: 20px; }
  .field label, .searchbar label { font-size: 14px; }
  .field .input-row { grid-template-columns: minmax(0, 1fr) 82px; }
  .field input, .field select, .field textarea, .searchbar input, .searchbar select { min-height: 48px; padding: 12px; }
  .field small, .micro { font-size: 12px; line-height: 1.6; }
  .notice { font-size: 14px; line-height: 1.6; padding: 16px; }
  .result-main { font-size: clamp(31px, 9vw, 43px); }
  .result-grid { gap: 10px; }
  .result-grid > div { padding: 13px; }
  .result-grid small { font-size: 11px; }
  .result-grid strong { font-size: 21px; }
  #print-result { width: 100%; margin-top: 12px; }
  .chip { min-height: 44px; font-size: 13px; padding: 10px 14px; }
  .chips { gap: 8px; }
  .compound { padding: 20px; }
  .compound summary { min-height: 44px; }
  .prose { overflow-wrap: break-word; }
  .prose h2 { font-size: 27px; line-height: 1.2; }
  .prose details { padding: 17px; }
  .prose summary { min-height: 44px; display: flex; align-items: center; }
  .formula { font-size: 12px; line-height: 1.8; }
  th, td { padding: 13px 15px; }
  .sim { gap: 18px; min-height: 250px; }
  .sim-beaker { width: 110px; height: 195px; flex-shrink: 0; }
  .sim-label { left: 32px; font-size: 12px; }
  input[type="range"] { min-height: 44px; padding-inline: 0; }
  .game-area { padding: 20px; }
  .game-answers .btn { flex: 1 1 110px; }
  .footer-grid a:not(.brand) { font-size: 14px; min-height: 44px; display: flex; align-items: center; margin-bottom: 2px; line-height: 1.4; }
  .footer-grid h3 { font-size: 14px; margin-bottom: 10px; }
  .footer-bottom { font-size: 12px; }
  .footer-bottom span { white-space: normal; }
}
@media screen and (max-width: 480px) {
  .hero .actions, .callout .actions, #calc-form .actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .hero .actions .btn, .callout > .btn { width: 100%; }
  .hero-art { min-height: 295px; }
  .hero-art .vial { margin-left: -64px; }
  .article-tile { padding: 23px; }
  .mini-chart { padding: 20px; }
  .mini-chart > div { font-size: 12px; gap: 12px; }
  .callout { padding: 25px; }
  .callout > .btn { margin-top: 5px; }
  .game-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .game-card { min-height: 68px; font-size: 16px; }
  .footer-grid { gap: 26px 18px; }
}
@media screen and (max-width: 360px) {
  .wrap { padding-inline: 16px; }
  .nav-wrap { padding-inline: 16px; }
  .brand { font-size: 12px; gap: 8px; }
  .brand-small { font-size: 7px; }
  .hero h1 { font-size: 30px; }
  .art-card { width: 155px; right: 10px; }
  .vial-label b { font-size: 14px; }
  .panel { padding: 18px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-grid strong { font-size: 23px; }
  .footer-grid { grid-template-columns: 1fr; }
  .sim { flex-wrap: wrap; }
}
@media screen and (max-width: 600px) {
  .admin-bar .site-header { top: 0; }
}