/* Janstay Freight brochure — printable company profile.
   Replicates the original doc-page paginated document:
   letter sheets on screen (8.5 x 11in), full-bleed pages at print. */

html { scroll-behavior: smooth; }
body { margin: 0; background: #9aa0a6; }

.br-page { font-family: "Barlow", system-ui, sans-serif; }
a { color: #16326B; text-decoration: none; }
::selection { background: #16326B; color: #fff; }
img { max-width: 100%; }

/* --- screen: paginated sheet stack ------------------------------ */
.br-page .page {
  position: relative;
  display: block;
  width: min(8.5in, 100%);
  aspect-ratio: 8.5 / 11;
  margin: 1rem auto;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  break-inside: avoid;
}

/* --- print: one physical letter sheet per .page ------------------ */
@page { size: letter; margin: 0; }

@media print {
  body { background: none; }
  .br-page .page {
    width: 8.5in;
    height: 11in;
    aspect-ratio: auto;
    margin: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
    break-before: page;
    overflow: hidden !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .br-page .page:first-of-type { break-before: auto; }
}

/* --- narrow screens ---------------------------------------------
   The brochure is a fixed 8.5in document: its type sizes, paddings and
   two-column grids are all sized for a letter sheet, so it cannot reflow to
   a phone without ceasing to be the document. Below 8.5in (816px at 96dpi)
   the sheets keep their true proportions and pan inside their own scroll
   container, so the page itself never scrolls sideways.

   Visitors on a phone are better served by the PDF — every "Brochure" link
   in the site chrome downloads it; this page is the "View in browser" route.

   MUST stay `screen and`: the print viewport is the paper width (8.5in ≈
   816px), so a bare max-width:860px query also matches while printing, and
   being later in the file it would override the `margin: 0` above — each
   sheet then spills onto a second, blank page. */
@media screen and (max-width: 860px) {
  .br-page {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .br-page .page {
    width: 8.5in;
    min-width: 8.5in;
    margin: 0.5rem auto;
    border-radius: 0;
  }
}