/* Nostaview — shared small-screen safety net, loaded on every page.
   Only adds guards; page-specific layouts live in each page's own CSS. */
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }

@media (max-width: 768px) {
  body { overflow-x: hidden; overflow-wrap: anywhere; -webkit-text-size-adjust: 100%; }
  /* Wide tables scroll inside themselves instead of stretching the page */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
  /* Inputs at 16px stop iOS from zooming on focus */
  input, select, textarea { font-size: 16px; max-width: 100%; }
  /* Comfortable tap targets */
  button, .btn, [role="button"] { min-height: 40px; }
  /* Modals never exceed the viewport */
  .modal, .modal-content, .modal-box, [role="dialog"] { max-width: 100vw; max-height: 100vh; overflow-y: auto; }
}

@media (max-width: 480px) {
  .card { padding: 1.5rem 1.1rem !important; border-radius: 16px; }
  .wrap { padding: 1rem !important; }
  .nav { padding: .75rem 1rem !important; }
  h1 { font-size: clamp(1.4rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.2rem, 6vw, 1.6rem); }
}

/* Brand logo sizing. The same rules exist in tokens.css, but most pages never
   link it, so the logo image rendered at its natural (huge) size. Kept here so
   every page gets them. Sizes are the tokens.css values (130x38, 112x32, 65x19, 56x16) +44% (two +20% steps). */
.brand-line .logo-mark {
  width: 187px;
  height: 55px;
  max-width: 187px;
  max-height: 55px;
  display: block;
  object-fit: contain;
}
.brand-line.footer-left .logo-mark,
footer .brand-line .logo-mark,
.footer-left .logo-mark {
  width: 161px;
  height: 46px;
  max-width: 161px;
  max-height: 46px;
}
@media (max-width: 640px) {
  .brand-line .logo-mark {
    width: 94px;
    height: 28px;
    max-width: 94px;
    max-height: 28px;
  }
  .brand-line.footer-left .logo-mark,
  footer .brand-line .logo-mark,
  .footer-left .logo-mark {
    width: 80px;
    height: 23px;
    max-width: 80px;
    max-height: 23px;
  }
}