/* ============================================================================
   Just in Time — the WEB layout of a card or a page.
   Alex 2026-10-12: "they should be done as websites rather than PNGs" · "it should auto-populate to
   match the structure if it's mobile, desktop, or tablet so that you get the document and the structure
   that you're looking for".
   The same parts as card.css, laid out by the screen: a phone gets one column, a tablet one wider
   column, a desktop the story's sections two across. scripts/card.py writes this version beside the
   picture as page.web.html, with <html class="web"> and the story cut into <section>s.
   Every rule is scoped to html.web: page.html, the picture's source, never carries that class, and the
   picture is laid out at a FIXED 390px for the renderer's exact crop (card.css). This file cannot move
   a pixel of it.
   ============================================================================ */
html.web { background: var(--jit-paper); }
html.web body { width: auto; max-width: 100%; margin: 0 auto; padding: 22px 16px 32px; }
html.web img { max-width: 100%; height: auto; }
html.web .web-story > section { min-width: 0; }

/* tablet: one column, wider, the type a step up */
@media (min-width: 700px) {
  html.web body { max-width: 760px; padding: 40px 32px 48px; }
  html.web h1 { font-size: 40px; }
  html.web .sub { font-size: 18px; }
}

/* desktop: the story's sections two across, read left to right; the lead (anything before the
   first section label) and the generated parts (Where we are, the calls) stay full width */
@media (min-width: 1100px) {
  html.web body { max-width: 1240px; padding: 48px 48px 56px; }
  html.web h1 { font-size: 48px; max-width: 24ch; }
  html.web .sub { max-width: 68ch; }
  html.web .web-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px; align-items: start; }
  html.web .web-story > section.lead { grid-column: 1 / -1; }
  html.web .web-story > section > h2:first-child { margin-top: 28px; }
}